Update adaptive version and add search page in mobile version

package.json

@@ -2,7 +2,6 @@
   "name": "hipstagram",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://hipstagram.node.ed.asmer.org.ua",
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@testing-library/jest-dom": "^5.16.2",

src/App.scss

@@ -61,17 +61,7 @@ body {
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   font-size: 20px;
 }
-.Links {
-  margin: 10px;
-  font-size: xx-large;
-  color: black;
-  transition: 0.3s;
-}
-.Links:hover {
-  color: white;
 
-  opacity: 0.7;
-}
 .Link {
   color: white;
   margin-left: 5px;
@@ -81,9 +71,6 @@ body {
   color: rgb(241, 69, 155);
 }
 
-.Links:active {
-  transform: scale(1.1);
-}
 .Header {
   display: flex;
   position: fixed;
@@ -95,6 +82,21 @@ body {
   transition: 0.3s;
   box-shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
     0 10px 5px rgba(191, 194, 196, 0.22);
+  .Links {
+    margin: 0 10px;
+    font-size: xx-large;
+    color: black;
+    transition: 0.3s;
+    padding: 0 5px;
+    &:hover {
+      color: white;
+
+      opacity: 0.7;
+    }
+    &:active {
+      transform: scale(1.1);
+    }
+  }
 }
 
 .Recomendations {
@@ -149,11 +151,14 @@ main {
 }
 .Title {
   text-align: left;
-  margin: 20px 0px;
+  font-size: 18px;
+  margin: 10px 0px;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 }
 .Input {
   display: flex;
-  padding: 5px;
+  // padding: 5px;
   margin: 10px;
   width: 80%;
   border-radius: 5px;
@@ -172,12 +177,29 @@ main {
   margin-top: 100px;
   display: flex;
   justify-content: center;
+  .ProfileAvatar{
+  margin-right: 20px;
+  width: 150px;
+  height: 150px;
+  }
+  .Info {
+    .Login{
+      font-weight: 600;
+      font-size: 18px;
+    }
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    p{font-size: 16px;
+      font-weight: 400;
+
+    padding:0 auto;
+margin-bottom: 3px;
+    }
+  }
 }
-.Info {
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-}
+
 .Card {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   width: 250px;
@@ -229,60 +251,74 @@ main {
   filter: brightness(50%);
 }
 
-.Like {
-  cursor: pointer;
-  font-size: xx-large;
-  color: red;
-}
-.Like:active {
-  transform: scale(1.1);
-}
-.UnLike {
-  cursor: pointer;
-  font-size: xx-large;
-  color: white;
-  transition: filter 0.3s;
-}
-.UnLike:hover {
-  opacity: 0.6;
+// .Like {
+//   cursor: pointer;
+//   font-size: xx-large;
+//   color: red;
+// }
+// .Like:active {
+//   transform: scale(1.1);
+// }
+.OneLike {
+  display: flex;
+  .Like {
+    cursor: pointer;
+    font-size: xx-large;
+    color: black;
+    transition: filter 0.3s;
+    &:active {
+      transform: scale(1.1);
+    }
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+  .LikeStyle {
+    cursor: pointer;
+    padding: 3px;
+  }
 }
+// .UnLike:hover {
+//   opacity: 0.6;
+// }
 
-.MyCarousel {
-  display: block;
-  object-fit: cover;
-  background: #84898987;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-  box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
-  background-color: white;
-  border: 6px solid #dbebfa;
-  margin: 0 10%;
-  border-radius: 5px;
-}
+// .MyCarousel {
+//   display: block;
+//   object-fit: cover;
+//   background: #84898987;
+//   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+//   box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
+//   background-color: white;
+//   border: 6px solid #dbebfa;
+//   margin: 0 10%;
+//   border-radius: 5px;
+
+// }
 .Modal {
   font-size: medium;
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
 }
-.PostFeed {
-  border-width: 20;
-  border-color: #ffffff;
-  background: #edf8f89e;
-  border-radius: 5px;
-  border-style: solid;
-  margin-bottom: 40px;
-  transition: 0.3s;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+// .PostFeed {
+//   border-width: 20;
+//   border-color: #ffffff;
+//   background: #edf8f89e;
+//   border-radius: 5px;
+//   border-style: solid;
+//   margin-bottom: 40px;
+//   transition: 0.3s;
+//   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+// }
 
 .NextArrow {
-  font-size: 50px;
-  color: #41607d;
+  font-size: 35px;
+  color: rgb(84, 132, 222);
   position: absolute;
   left: 100%;
   top: 50%;
   margin: auto;
-  padding-left: 20px;
+  padding-left: 10px;
   text-shadow: black 1px 0 10px;
   transition: opacity 0.3s;
 }
@@ -293,13 +329,13 @@ main {
   transform: scale(1.1);
 }
 .PreviousArrow {
-  color: #41607d;
-  font-size: 50px;
+  color: rgb(84, 132, 222);
+  font-size: 35px;
   position: absolute;
   margin: auto;
   right: 100%;
   top: 50%;
-  padding-right: 20px;
+  padding-right: 10px;
 }
 .PreviousArrow:hover {
   opacity: 0.6;
@@ -307,18 +343,9 @@ main {
 .PreviousArrow:active {
   transform: scale(1.1);
 }
-.PostImage {
-  display: flex;
-  align-items: center;
-  width: 700px;
-  height: 500px;
-  object-fit: cover;
-  margin-left: auto;
-  margin-right: auto;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+
 .LoginForm {
-  margin: 100px;
+  margin: 120px;
   padding: 10px;
   background: rgba(58, 100, 180, 1);
   border-radius: 15px;
@@ -327,16 +354,18 @@ main {
   justify-content: center;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
   p {
-    font-size: large;
+    font-size: x-large;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
       sans-serif;
+    text-align: center;
+    margin: 0 auto;
   }
   .LoginForm-Form {
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
     background: rgb(142, 199, 239);
     border-radius: 10px;
-    margin: 40px;
-    padding: 20px;
+    margin: 21px;
+    padding: 20px 50px;
 
     Button {
       margin: 10px 0px;
@@ -381,17 +410,22 @@ main {
   }
 }
 
-.LikeStyle {
-  cursor: pointer;
-  padding: 3px;
-}
+// .LikeStyle {
+//   cursor: pointer;
+//   padding: 3px;
+// }
+
 .SmileBtn {
   font-size: xx-large;
-  margin-right: 15px;
+  // margin-right: 15px;
+}
+.Send{
+  font-size: xx-large;
+margin-bottom: 10px;
 }
 .SmileBtnFilled {
   font-size: xx-large;
-  margin-right: 15px;
+  // margin-right: 15px;
   color: #108ee9;
 }
 .Comments {
@@ -401,6 +435,12 @@ main {
   width: 30%;
   padding: 10px;
 }
+.WithOutScroll {
+  display: block;
+
+  flex-direction: column;
+  // height: 200px;
+}
 .Scroll {
   display: block;
 
@@ -411,7 +451,7 @@ main {
 .ScrollForFeed {
   display: block;
   flex-direction: column;
-  height: 20s0px;
+  height: 200px;
   overflow-y: scroll;
 }
 .button {
@@ -437,13 +477,52 @@ main {
 
 .PostsFeed {
   margin: 20px;
-  padding: 40px;
+  padding: 30px;
+  margin-top: 50px;
+  .PostsFeed-one {
+    border-width: 20;
+    border-color: #ffffff;
+    background: #edf8f89e;
+    border-radius: 5px;
+    border-style: solid;
+    margin-bottom: 40px;
+    transition: 0.3s;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    .Owner {
+      margin: 10px;
+    }
+  }
+}
+.MyCarousel {
+  // display: block;
+  object-fit: cover;
+  background: #84898987;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
+  background-color: white;
+  border: 6px solid #dbebfa;
+  margin: 0 7%;
+  border-radius: 5px;
+  .PostImage {
+    display: flex;
+    align-items: center;
+    width: 600px;
+    height: 400px;
+    object-fit: cover;
+    margin-left: auto;
+    margin-right: auto;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
 }
 .SpoilerButton {
   right: 30px;
   margin: 20px;
 }
-
+.ProfilePage {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 20px;
+}
 .NumberPosts {
   float: right;
   margin-bottom: 10px;
@@ -460,7 +539,9 @@ main {
   box-shadow: 0 5px 10px rgba(21, 46, 57, 0.25),
     0 10px 10px rgba(12, 43, 58, 0.22);
 }
-
+.OnePost{
+  margin-top: 100px;
+}
 .ResultUserFind {
   max-width: 500px;
   min-width: 320px;
@@ -468,108 +549,325 @@ main {
   padding: 15px 0;
   overflow: auto;
 }
+.Search {
+  padding: 10px;
+  display: flex;
+  position: fixed;
+  z-index: 4;
+  width: 100%;
+  //  background-color: rgb(206, 227, 255);
+  background-color: #ffffff;
+  top: 0;
+  transition: 0.3s;
+  box-shadow: 0 5px 10px rgba(73, 80, 83, 0.25),
+    0 10px 5px rgba(191, 194, 196, 0.22);
+}
+.ResultUserFindMobile {
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  // max-width: 500px;
+  // min-width: 320px;
+  // max-height: 500px;
+  margin-top: 50px;
+  padding: 15px 5px;
+  overflow: auto;
+}
 .InputOnePost {
   display: flex;
   width: 40%;
   margin-left: 10px;
   margin-right: 10px;
 }
+.ProfileAvatar {
+  margin-right: 20px;
+
+  width: 150px;
+  height: 150px;
+}
+.FooterPost{
 
-/* Responsive */
+.CommentsPost{
+  height: 250px;
+}
+}
+
+@media screen and (max-width: 1450px) {
+  .Explore {
+    .Wrapper {
+      margin: 20px;
+      .Card {
+        width: 220px;
+        height: 220px;
+      }
+    }
+  }
+
+}
 /* 992px - 1200px */
 @media screen and (max-width: 1200px) {
   .LoginForm {
     p {
+      text-align: center;
       font-size: xx-large;
     }
+    section {
+      display: flex;
+      // flex-direction: row;
+      // width: 100%;
+      align-items: center;
+      text-align: center;
+      margin: 0 auto;
+    }
   }
   .InputForm {
     // width: 960px;
     img {
-      // width: 50%;
+      width: 100%;
       // height: 50%;
+      margin-bottom: 40%;
+      margin-left: 20%;
     }
     Title {
       width: 100%;
     }
-    section {
-      display: flex;
-      // flex-direction: row;
-      // width: 100%;
-      align-items: center;
+  }
+  .OneLike {
+    flex-direction: column;
+    margin: 0px auto;
+    .Like {
+      .LikeStyle {
+        padding: 0px;
+      }
     }
   }
 
-  .LoginForm-Form {
-    // width: 90%;
-    // width: 960px;
+  .Explore {
+    .Wrapper {
+      margin: 20px;
+      .Card {
+        width: 220px;
+        height: 220px;
+      }
+    }
+  }
+  .ProfilePage {
+    .Wrapper {
+      .Card {
+        width: 150px;
+        height: 150px;
+      }
+    }
   }
+  
 }
-// 	.wrapper{
-// 		flex-direction: column;
-// 	}
-// 	.offer{
-// 		width: 90%;
-// 	}
-// 	.intro{
-// 		width: auto;
-// 	}
-// 	.travel{
-// 		display: block;
-// 		width: 549px;
-// 	}
-// 	.bonuses{
-// 		flex-direction: column;
-// 	}
-// 	.bonus{
-// 		width: auto;
-// 		margin-bottom: 25px;
-// 	}
-// 	.title{
-// 		width: auto;
-// 	}
-// 	.logo{
-// 		margin-bottom: 40px;
-// 	}
-// }
+
 // /* 768px - 992px */
-// @media screen and (max-width: 992px)
-// {
-// 	.container{
-// 		width: 720px;
-// 	}
-// 	.btn{
-// 		display: block;
-// 		align-items:center;
-// 		margin: auto;
-// 	}
-// }
-// /*576px-768px*/
-// @media screen and (max-width: 768px)
-// {
-
-// 	.container{
-// 		width: 540px;
-// 	}
-// 	.travel{
-// 		width: 100%;
-// 	}
-// 	.input{
-// 		width: 80%;
-// 	}
-// 	.btn{
-// 		width: 80%;
-// 	}
-// }
-// /*320px-576px*/
-// @media screen and (max-width: 576px)
-// {
-// 	.container{
-// 		width: 90%;
-// 	}
+@media screen and (max-width: 992px) {
+  .LoginForm {
+    p {
+      text-align: center;
+      font-size: xx-large;
+    }
+  }
+  .Header {
+    bottom: 0;
+    top: auto;
+  }
+  .AboutMe {
+    margin-top: 20px;
+    
+  }
+  .PostsFeed {
+    margin: 10px;
+  }
+  .ProfilePage {
+    .Wrapper {
+      margin: 10px;
+      .Card {
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+  .Explore {
+    .Wrapper {
+      margin: 20px;
+      .Card {
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+  .Preloader{
+    margin-bottom:80px ;
+  }
+  .AboutMe{
+    .ProfileAvatar{
+      height: 100px;
+      width: 100px;
+    }
+   
+      .Info {
+        .Login{
+          font-size: 16px;
+        }
+    
+        p{font-size: 14px;
+ 
+        }
+      }
+    }
+  }
 
-// 	.input{
-// 		font-size: 12px;
-// 	}
+/*576px-768px*/
+@media screen and (max-width: 768px) {
+  .LoginForm {
+    width: 70%;
+    align-content: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin: 0 100px;
+    padding: 0;
+    // height: 90%;
+    p {
+      font-size: x-large;
+      margin: 35px;
+    }
+    .LoginForm-Form {
+      width: 90%;
+      // padding: 10px;
+    }
+  }
+  .Preloader{
+    margin-bottom:40px ;
+  }
+  .Explore {
+    margin-top: 0px;
+    .Wrapper {
+      margin: 10px;
+      .Card {
+        width: 120px;
+        height: 120px;
+      }
+    }
+  }
+}
+/*320px-576px*/
+@media screen and (max-width: 576px) {
+  .Title {
+    font-size: 15px;
+  }
+  .Dropzone {
+    padding: 10px;
+      font-size: 10px;
+  font-size: small;
 
-// }
+  }
+  .OnePost{  
+    margin-top: 40px;
+  
+  }
+  .ScrollForFeed{
+    height: 150px;
+  }
+  .FooterPost{
+    margin-bottom: 100px;
+    .CommentsPost{
+      height: 180px;
+    }
+    }
+  
+.OneLike {
+  display: flex;
+  font-size: 12px;
+  .Like {
+    font-size: x-large;
+    color: black;
+  }
+  .LikeStyle {
+    cursor: pointer;
+    padding: 0px;
+  }
+}
+
+  .MyCarousel {
+    // display: block;
+    object-fit: cover;
+    background: #84898987;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    box-shadow: inset 2px 2px 5px rgba(128, 125, 125, 0.9);
+    background-color: white;
+    border: 6px solid #dbebfa;
+    margin: 0 5%;
+    border-radius: 5px;
+    .PostImage {
+    
+      width: 300px;
+      height: 300px;
+     
+    }
+  }
+  .LoginForm {
+    width: 90%;
+    align-content: center;
+    justify-content: center;
+    margin: 30px 20px;
+    // padding: 20px;
+    height: 90%;
+    padding-right: 12px;
+
+    p {
+      font-size: x-large;
+      margin: 5px;
+    }
+    .LoginForm-Form {
+      padding: 10px 20px;
+
+      // width: 80%;
+      // padding: 20px;
+    }
+  }
+  .AboutMe{
+    .ProfileAvatar{
+      height: 80px;
+      width: 80px;
+    }
+    .Info {
+      .Login{
+        font-size: 14px;
+      }
+  
+      p{font-size: 12px;
+
+      }
+    }
+  }
+  .ProfilePage {
+    .Wrapper {
+      margin: 10px;
+      .Card {
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+  .Post {
+    max-width: 380px;
+    // height: 500px;
+    margin-top: 40px;
+    margin-bottom: 0px;
+    
+    }
+  .Explore {
+    margin-top: 0px;
+    margin:5px;
+    .Wrapper {
+      margin: 10px;
+      .Card {
+        width: 120px;
+        height: 120px;
+      }
+    }
+  }
+}

src/actions/query/postQuery.js

@@ -16,9 +16,17 @@ export const actionOnePost = (_id) =>
                     avatar {url}
                 }
             answers{
-                _id  
+                _id  createdAt text 
+                owner {_id login nick
+                  avatar {url}
+              }
                 }
-               answerTo{_id} 
+               answerTo{_id
+                createdAt text 
+                owner {_id login nick
+                  avatar {url}
+              }
+              } 
             }
             likes{
               _id

src/actions/query/uploadFilesQuery.js

@@ -1,9 +1,9 @@
 import { actionPromise } from '../types/promiseTypes'
-
+import backendURL from '../../helpers/backendUrl'
 export const uploadFile = (file) => {
   const myForm = new FormData()
   myForm.append('photo', file)
-  return fetch('/upload', {
+  return fetch(backendURL+'/upload', {
     method: 'POST',
     headers: localStorage.authToken
       ? { Authorization: 'Bearer ' + localStorage.authToken }

src/actions/typeSaga/postTypesSaga.js

@@ -12,10 +12,20 @@ export const actionAddSubCommentTypeSaga = (commentId, newResult) => ({
   commentId,
   newResult,
 })
+export const actionAddSubCommentFeedTypeSaga = (commentId, newResult) => ({
+  type: 'FEED_POST_SUB_COMMENT',
+  commentId,
+  newResult,
+})
+
 export const actionFindSubCommentTypeSaga = (commentId) => ({
   type: 'GET_SUB_COMMENT',
   commentId,
 })
+export const actionFindSubCommentFeedTypeSaga = (commentId) => ({
+  type: 'GET_SUB_FEED_COMMENT',
+  commentId,
+})
 export const actionCreateEditPostTypeSaga = (state) => ({
   type: 'CREATE_EDIT_POST',
   state,

src/actions/types/commentTypes.js

@@ -13,6 +13,12 @@ export const actionAddSubCommentType = (commentId, newResult) => ({
   newResult,
 })
 
+export const actionAddSubCommentFeedType = (commentId, newResult) => ({
+  type: 'FEED-ANSWERS-COMMENT',
+  commentId,
+  newResult,
+})
+
 export const addAnswers = (comments, commentId, newResult) =>
   comments.map((comment) => {
     if (comment._id === commentId) {

src/components/EditAvatar.jsx

@@ -4,6 +4,8 @@ import { actionUploadFile } from '../actions/query/uploadFilesQuery'
 import React, { useState, useEffect } from 'react'
 import { Dropzone, ConstructorModal } from '../helpers'
 import { actionSetAvatarTypeSaga } from '../actions/typeSaga/myDataTypesSaga'
+import backendURL from '../helpers/backendUrl'
+
 const EditAvatar = ({
   info,
   onSaveAvatar,
@@ -39,7 +41,7 @@ const EditAvatar = ({
             objectFit: 'cover',
             height: '150px',
           }}
-          src={'/' + fileStatus?.payload?.url}
+          src={backendURL + '/' + fileStatus?.payload?.url}
         />
       )}
       <br />

src/components/LinkToUser.jsx

@@ -2,6 +2,8 @@ import user from '../materials/user.png'
 import { Link } from 'react-router-dom'
 import { Avatar, Col, Row } from 'antd'
 import { CSubscribeLinkUser } from '../components/Subscribe'
+import backendURL from '../helpers/backendUrl'
+
 export const LinkToUser = ({
   _id,
   avatar,
@@ -13,7 +15,7 @@ export const LinkToUser = ({
   key,
 }) => {
   return (
-    <Row style={{ margin: '10px', marginBottom: '20px' }}>
+    <Row style={{ marginBottom:'5px'}}>
       <Link
         to={`/profile/${_id}`}
         style={{
@@ -21,6 +23,8 @@ export const LinkToUser = ({
           padding: padding,
           flexDirection: 'row',
           fontSize: font,
+          fontWeight: 'bold',
+          color: 'black'
         }}
         onClick={onClick}
         key={key}
@@ -29,14 +33,16 @@ export const LinkToUser = ({
           {avatar ? (
             <Avatar
               size={size}
-              src={'/' + avatar?.url}
-              style={{ marginRight: '3px' }}
+              src={backendURL+'/' + avatar?.url}
+             
             />
           ) : (
-            <Avatar size={size} src={user} style={{ marginRight: '3px' }} />
+              <Avatar size={size} src={user}
+                // style={{ marginRight: '3px' }}
+              />
           )}
         </Col>
-        <Col offset={2} style={{ marginTop: '5px' }}>
+        <Col offset={3} style={{ marginTop: '5px' }}>
           <h3> {login || 'Anon'}</h3>
         </Col>
       </Link>
@@ -58,12 +64,15 @@ export const LinkWithSubscribe = ({
   return (
     <Row style={{ margin: '10px', marginBottom: '20px' }}>
       <Link
-        to={`/profile/${_id}`}
+        to={`/profile/${_id}`} 
+
         style={{
           display: 'flex',
           padding: padding,
           flexDirection: 'row',
           fontSize: font,
+          fontWeight: 'bold',
+          color: 'black'
         }}
         onClick={onClick}
         key={key}
@@ -72,7 +81,7 @@ export const LinkWithSubscribe = ({
           {avatar ? (
             <Avatar
               size={size}
-              src={'/' + avatar?.url}
+              src={backendURL+'/' + avatar?.url}
               style={{ marginRight: '3px' }}
             />
           ) : (

src/components/ListOfUsers.jsx

@@ -13,14 +13,14 @@ export const ListOfUsers = ({ listUsers, text }) => {
   return (
     <>
       {listUsers?.length > 0 ? (
-        <h3
+        <p
           style={{ cursor: 'pointer', marginLeft: '20px' }}
           onClick={showModal}
         >
           {listUsers.length} {text}{' '}
-        </h3>
+        </p>
       ) : (
-        <h3 style={{ marginLeft: '20px' }}> 0 {text} </h3>
+        <p style={{ marginLeft: '20px' }}> 0 {text} </p>
       )}
 
       <ConstructorModal

src/components/Routing.jsx

@@ -7,7 +7,7 @@ import { CPost } from '../pages/onePost'
 import { connect } from 'react-redux'
 import { LoginPageForm } from '../pages/login'
 import { RegisterPageForm } from '../pages/login'
-
+import {CSearchMobileVersion} from '../pages/search'
 const Routing = ({ token }) => {
 
     return <>
@@ -19,6 +19,8 @@ const Routing = ({ token }) => {
           <Route path="/edit/post/:_id" component={CPostEditor} />
           <Route path="/post/:_id" component={CPost} />
           <Route path="/feed" component={CPostForFeed} />
+          <Route path="/search" component={CSearchMobileVersion} />
+
           <Redirect from="/*" to="/feed" />
         </Switch>
         :

src/components/Search_Users.jsx

@@ -22,6 +22,7 @@ export const ResultUserFind = ({ userFind = [], handleCancel }) => {
     </div>
   )
 }
+
 const SearchUser = ({ my_Id, onSearch, searchUser, onPageData }) => {
   const onSearchUser = (value) => onSearch(value)
   const { Search } = Input

src/components/Sortable.jsx

@@ -3,11 +3,12 @@ import {
   SortableElement,
 } from 'react-sortable-hoc'
 import { Button} from 'antd'
+import backendURL  from '../helpers/backendUrl'
 
 export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
   return (
     <>
-      <img className="Preview" src={'/' + url} />
+      <img className="Preview" src={backendURL+'/' + url} />
       <Button
         type="primary"
         danger

src/components/UploadFiles.jsx

@@ -17,7 +17,10 @@ export function Dropzone({ onLoad }) {
     <section className="container">
       <div {...getRootProps({ className: 'Dropzone' })}>
         <input {...getInputProps()} />
-        <Button type="dashed" size="large" icon={<UploadOutlined />}>
+        <Button type="dashed" xl={{ size: 'large' }}
+          sm={{size:'small'}}
+          // size="large"
+          icon={<UploadOutlined />}>
           Drag 'n' drop some files here, or click to select files
         </Button>
       </div>

src/components/authorization/InitialForm.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { Button, Input, Checkbox, Form } from 'antd'
 import { Typography, Col, Row } from 'antd'
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import { validation } from '../../helpers'
 const { Title } = Typography
 const InitialForm = ({ onLogin, children }) => {
   const [login, setLogin] = useState('')
@@ -12,20 +13,13 @@ const InitialForm = ({ onLogin, children }) => {
   }
   return (
     <>
-     
       <Form
         size="medium"
         name="basic"
         className="LoginForm-Form"
-        // labelCol={{ span: 12}}
-        // wrapperCol={{ span: 17 }}
-        // labelCol={{xs}}
         autoComplete="off"
       >
-        {/* <Col   xs={{ span: 10 }}
-        sm={16} md={12} lg={8} xl={4}> */}
-     
- <Title level={2}> {children} </Title>
+        <Title level={2}> {children} </Title>
         <Form.Item
           name="login"
           size="large"
@@ -35,29 +29,23 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input login!',
             },
           ]}
-          style={{marginBottom: '5px'}}
-          wrapperCol={{ offset: 4, span: 15 }}
+          style={{ marginBottom: '5px',  }}
+          // wrapperCol={{ offset: 3, span: 17 }}
         >
-           
-          <Input prefix={<UserOutlined className="site-form-item-icon" />}
+          <Input
+            prefix={<UserOutlined className="site-form-item-icon" />}
             placeholder="Login"
             value={login}
             size="medium"
             onChange={(e) => setLogin(e.target.value)}
           />
-          
-       
         </Form.Item>
         <Form.Item
-         style={{margin:'0 auto'}}
-          wrapperCol={{ offset: 4, span: 14 }}
-        >    
-        <p
-          >
-            {' '}
-            * Login must be at least 5 characters{' '}
-          </p>
-          </Form.Item>
+          style={{ margin: '0 auto' }}
+          // wrapperCol={{ offset: 3, span: 17 }}
+        >
+          <p> * Login must be at least 5 characters </p>
+        </Form.Item>
         <Form.Item
           name="password"
           size="large"
@@ -67,49 +55,30 @@ const InitialForm = ({ onLogin, children }) => {
               message: 'Please input your password!',
             },
           ]}
-          style={{ padding: '0 auto',marginBottom: '5px'}}
-
-          wrapperCol={{ offset: 4, span: 15 }}
+          style={{ padding: '0 auto', marginBottom: '5px' }}
+          // wrapperCol={{ offset: 3, span: 17 }}
         >
-           <Input
-          prefix={<LockOutlined className="site-form-item-icon" />}
+          <Input
+            prefix={<LockOutlined className="site-form-item-icon" />}
             placeholder="Password"
             size="medium"
             type={checked ? 'text' : 'password'}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-          
           />
-           
-          {/* <Input
-            size="medium"
-            type={checked ? 'text' : 'password'}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          /> */}
         </Form.Item>
         <Form.Item
-         style={{margin:'0 auto'}}
-          wrapperCol={{ offset: 3, span: 15 }}
-        >   
-  <p>
-        * Use a combination of 8 or more letters, numbers, and symbols
-          </p>
-          </Form.Item>
-        {/* <Text type="secondary" style={{ color: 'rgb(35, 60, 107)' }}> */}
-        {/* style={{ width: '250px', marginLeft: '90px' }} */}
-
-        {/* <Text type="secondary" style={{ color: 'rgb(35, 60, 107)'}}>
-            Password must contain at least eight characters, include letters,
-            numbers and special symbols{' '}
-          </Text> */}
+          style={{ margin: '0 auto' }}
+          // wrapperCol={{ offset: 3, span: 17 }}
+        >
+          <p>* Use a combination of 8 or more letters, numbers, and symbols</p>
+        </Form.Item>
 
         <Form.Item
           name="checked"
           valuePropName="checked"
-          wrapperCol={{ offset: 3, span: 17 }}
-          style={{margin: '10px 0px'}}
-
+          // wrapperCol={{ offset: 0 }}
+          style={{ margin: '10px 0px' }}
         >
           <Checkbox
             checked={checked}
@@ -122,27 +91,22 @@ const InitialForm = ({ onLogin, children }) => {
           </Checkbox>
         </Form.Item>
 
-        <Form.Item wrapperCol={{ offset: 4, span: 15 }}>
+        <Form.Item
+          // wrapperCol={{ offset: 3, span: 17 }}
+        >
           <Button
             size="large"
             type="primary"
             htmlType="submit"
             primary
             style={{ width: '100%' }}
-            disabled={
-              login.length < 5 ||
-              !/(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
-                password,
-              )
-            }
+            disabled={login.length < 5 || validation(password)}
             onClick={input}
           >
             {children}
           </Button>
-          </Form.Item>
-        {/* </Col> */}
+        </Form.Item>
       </Form>
-    
     </>
   )
 }

src/components/buttons/EditPostButton.jsx

@@ -7,8 +7,8 @@ export const EditMyPostButton = ({ _id }) => {
       <Link to={`/edit/post/${_id}`}>
         <Button
           style={{
-            marginLeft: '200px',
-            marginTop: '10px',
+            // marginLeft: '200px',
+            // marginTop: '10px',
             width: '100px',
           }}
           size="large"

src/components/buttons/HeaderButtons.jsx

@@ -3,11 +3,14 @@ import { actionFullProfilePageUserTypeSaga } from '../../actions/typeSaga/userTy
 import { Avatar } from 'antd'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
+import backendURL from '../../helpers/backendUrl'
+
 import {
   HomeOutlined,
   CompassOutlined,
   PlusSquareOutlined,
   ImportOutlined,
+  SearchOutlined
 } from '@ant-design/icons'
 import React, { useEffect, useState } from 'react'
 const DefaultLink = ({ link, tag }) => {
@@ -17,10 +20,15 @@ const DefaultLink = ({ link, tag }) => {
     </Link>
   )
 }
-export const Feed = () => <DefaultLink link={'/feed'} tag={<HomeOutlined />} />
+export const Feed = () =>
+  <DefaultLink link={'/feed'}  tag={<HomeOutlined />} />
 export const Explore = () => (
   <DefaultLink link={'/explore'} tag={<CompassOutlined />} />
 )
+export const SearchMobile = () => (
+  <DefaultLink link={'/search'} tag={<SearchOutlined />} />
+)
+
 
 export const AddPost = ({ children }) => {
   const [state, setState] = useState(false)
@@ -43,9 +51,9 @@ const User = ({ my_Id, aboutMe: { _id, avatar } = {}, onMyPage }) => {
     if (my_Id) onMyPage(my_Id)
   }, [my_Id])
   return (
-    <Link to={`/profile/${my_Id}`}>
+    <Link to={`/profile/${my_Id}`} className="Links" >
       {avatar?.url ? (
-        <Avatar src={'/' + avatar?.url} size={50} className="Avatar" />
+        <Avatar src={backendURL + '/'  + avatar?.url} size={50} className="Avatar" />
       ) : (
         <Avatar src={user} size={50} className="Avatar" />
       )}
@@ -60,3 +68,4 @@ export const CUser = connect(
   }),
   { onMyPage: actionFullProfilePageUserTypeSaga },
 )(User)
+

src/components/comment/AddComment.jsx

@@ -1,16 +1,15 @@
 import { Picker } from 'emoji-mart'
 import 'emoji-mart/css/emoji-mart.css'
 import React, { useState } from 'react'
-import { Input, Button } from 'antd'
-import { SmileOutlined, SmileFilled } from '@ant-design/icons'
+import { Input,Col,Button } from 'antd'
+import { SmileOutlined, SmileFilled,SendOutlined } from '@ant-design/icons'
+import { Link } from 'react-router-dom'
 
- const AddComment = ({ addComment, postId, style, width }) => {
+const AddComment = ({ addComment, postId, style, width }) => {
   const [text, setComment] = useState('')
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const handleOK = () => setShowEmojiPicker(!showEmojiPicker)
-
   const addEmoji = ({ native }) => setComment((text + ' ' + native).trim())
-
   return (
     <>
       {showEmojiPicker && (
@@ -22,47 +21,85 @@ import { SmileOutlined, SmileFilled } from '@ant-design/icons'
           showSkinTones={false}
           onSelect={(native) => addEmoji(native)}
         />
-      )}
+        )}
+      
+      <Col xl={{ span: 10, offset: 1 }}
+       lg={{ span: 14, offset: 1 }}
+       md={{ offset: 1, span: 14 }}
+        sm={{ offset: 1, span: 10 }}
+        xs={{ offset: 1, span: 10 }}
+      >
       <Input
-        style={{
-          display: 'flex',
-          width,
-          margin: '0 10px',
+          style={{
+          display:'flex',
+          // display: 'flex',
+          // width,
+          // margin: '5px 10px',
+          // padding:'5px'
+
         }}
-        size="large"
+          xl={{ size: "large" }}
+          xs={{ size:'small'}}
         placeholder="Add a comment..."
         value={text}
         onChange={(e) => {
           setComment(e.target.value)
         }}
-        onPressEnter={(e) => 
-          setComment(e.target.value)
-       }
-      />
-      {!showEmojiPicker ? (
-        <SmileOutlined
-          className="SmileBtn"
-          onClick={handleOK}
+        onPressEnter={(e) => setComment(e.target.value)}
         />
+      </Col>
+      <Col xl={{ offset: 1, span: 1 }}
+       sm={{ offset: 1, span: 1 }}
+       xs={{offset: 1,  span: 1 }}
+      >
+      
+        {!showEmojiPicker ? (
+          
+        <SmileOutlined className="SmileBtn" onClick={handleOK} />
       ) : (
-        <SmileFilled
-          className="SmileBtnFilled"
-          onClick={handleOK}
-        />
-      )}
-      <Button
-        size="large"
+        <SmileFilled className="SmileBtnFilled" onClick={handleOK} />
+        )}
+      </Col>
+      <Col xl={{ offset: 1, span: 1 }}
+       sm={{offset: 1,  span: 1 }}
+        xs={{offset: 1 }}
+        
+      >
+          
+        <Button type="text"
+       className="Send"
+          
+      disabled={text.length < 1}
+      onClick={(e) => {
+        addComment(postId, text) &&
+        setComment((e.target.value = ''))
+      }}
+        >
+       
+        <SendOutlined
+       className="Send"
+      type="primary"
+     
+          />
+        </Button>
+        {/* <Button
+          
+          xl={{ size: 'large' }}
+          xs={{ size: 'small' }}
+
         disabled={text.length < 1}
         type="primary"
         onClick={(e) => {
-          addComment(postId, text) && setComment((e.target.value = ''))
+          addComment(postId, text) &&
+          setComment((e.target.value = ''))
         }}
       >
         {' '}
         Publish{' '}
-      </Button>
+        </Button> */}
+        </Col>
     </>
   )
 }
 
-export default AddComment
+export default AddComment

src/components/comment/Comment.jsx

@@ -11,26 +11,33 @@ import {
 import { Typography } from 'antd'
 import CommentAuthor from './CommentAuthor'
 import CommentAvatar from './CommentAvatar'
+import { ViewComment } from './SpoilerButton'
 const { Text } = Typography
+
 export const Comments = ({
   comments,
   postId,
   parentId,
+
   findSubComment,
 }) => {
   return (
     <>
       {comments?.length && Object.keys(comments[0])?.length > 1
-        ? comments?.map((comment) => {
+        ?
+        <ViewComment text={'View all '} count={comments?.length}
+          style={{ overflowY: 'none' }}
+          textClosed={'Hide comments'}>
+          {comments?.map((comment) => {
             return (
               <Comment
                 key={comment?._id}
                 author={
-                 <CommentAuthor owner={comment?.owner}/>
+                  <CommentAuthor owner={comment?.owner} />
                 }
                 actions={[<CommentAction commentId={comment?._id} />]}
                 avatar={
-                 <CommentAvatar owner={comment?.owner}/>
+                  <CommentAvatar owner={comment?.owner} />
                 }
                 content={<p>{comment?.text}</p>}
                 datetime={<CommentDate createdAt={comment?.createdAt} />}
@@ -43,24 +50,28 @@ export const Comments = ({
                 />
               </Comment>
             )
-          })
-        : comments?.length && (
+          })}
+        </ViewComment>
+        : 
+     comments?.length && (
             <Text className='ButtonComment'
               type="secondary"
               strong
               style={{ margin: '0 auto' }}
               onClick={() => findSubComment(parentId)}
             >
-              __ View answers ({comments.length})
+              {/* __ View answers ({comments.length}) */}
             </Text>
           )}
+      
+      
     </>
   )
 }
 export const CCommentsOnePost = connect(
   (state) => ({
     postId: state.promise.onePost?.payload?._id,
-    comments: state?.post.onePost?.comments,
+    // comments: state?.post.onePost?.comments,
     addComment: state.promise?.addComment?.payload,
     addSubComment: state.promise?.addSubComment,
   }),

src/components/comment/CommentAuthor.jsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom'
 
 const CommentAuthor = ({ owner }) =>
-    <Link to={`/profile/${owner?._id}`}>
+    <Link to={`/profile/${owner?._id}`} style={{fontWeight:'bold',fontSize:'14px', color:'black'}}>
 {owner?.login || 'Anon'}
     </Link>
 export default CommentAuthor

src/components/comment/CommentAvatar.jsx

@@ -1,13 +1,14 @@
 import user from '../../materials/user.png'
 import { Link } from 'react-router-dom'
 import { Avatar } from 'antd'
+import backendURL from '../../helpers/backendUrl'
 
 const CommentAvatar = ({ owner }) =>
   owner?.avatar ? (
     <Link to={`/profile/${owner?._id}`}>
       <Avatar
         size={30}
-        src={'/' + owner?.avatar?.url}
+        src={backendURL+'/' + owner?.avatar?.url}
         style={{ marginLeft: '15px' }}
         alt={owner?.login || 'Anon'}
       />

src/components/comment/SpoilerButton.jsx

@@ -1,10 +1,15 @@
 import React, { useState } from 'react'
 import { Button, Typography } from 'antd'
 const { Text } = Typography
+const { Title } = Typography
+
+
 export const SpoilerButton = ({ text, children, style }) => {
   const [opened, setOpened] = useState(false)
   return (
     <>
+      
+      
       <Button
         onClick={() => {
           setOpened(!opened)
@@ -37,3 +42,28 @@ export const ReplyButton = ({ text, children, style }) => {
     </>
   )
 }
+export const ViewComment = ({ text, count, children, style,textClosed }) => {
+  const [opened, setOpened] = useState(false)
+  return (
+    <>
+      <Text
+        type="secondary"
+        strong
+        // level={1}
+        style={{fontSize:'14px'}}
+        className="ButtonComment"
+        onClick={() => {
+          setOpened(!opened)
+        }}
+        // style={style}
+      >
+       { !opened ? text + count + ' comments'  : textClosed}
+
+      </Text>
+      {<div className={opened && children ? 'ScrollForFeed' : 'WithOutScroll'}>
+        {opened && children}
+      </div>
+      }
+    </>
+  )
+}

src/components/like/Like.jsx

@@ -9,14 +9,16 @@ export const Like = ({ my_Id, postId, likes = [], changeLike }) => {
   const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
   return (
     <>
-      <div style={{ display: 'flex' }}>
-        <h3 onClick={() => changeLike(likeId, postId)}>
+      <div className='OneLike'>
+        <p onClick={() => changeLike(likeId, postId)}
+          style={{ margin: '0 auto' }}>
           {likeId ? (
-            <HeartFilled style={{ color: 'red' }} className="Like" />
+            <HeartFilled style={{ color: 'red' }}
+              className="Like" />
           ) : (
-            <HeartOutlined className="UnLike" />
+            <HeartOutlined className="Like" />
           )}
-        </h3>
+        </p>
         <ModalLikes likes={likes} myId={my_Id} />
       </div>
     </>

src/components/like/ModalLikes.jsx

@@ -8,13 +8,14 @@ const ModalLikes = ({ likes, myId }) => {
   }
   return (
     <>
-      {likes.length ? (
-        <h3 className='LikeStyle' onClick={showModal}>
+      {likes.length ?
+        (
+        <h3 className="LikeStyle" style={{margin:'0 auto'}} onClick={showModal}>
           {' '}
           {likes.length} likes
         </h3>
       ) : (
-        <h3 className='LikeStyle'> 0 likes</h3>
+        <h3 className="LikeStyle"> 0 likes</h3>
       )}
 
       <ConstructorModal

src/components/post/Carousel.jsx

@@ -1,6 +1,7 @@
 import { Carousel } from 'antd'
 import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
 import defaultPhoto from '../../materials/default-photo.png'
+import backendURL from '../../helpers/backendUrl'
 
 const SampleNextArrow = (props) => {
   const { onClick } = props
@@ -20,7 +21,7 @@ const SamplePrevArrow = (props) => {
   )
 }
 
-export const MyCarousel = ({ images = [] }) => {
+export const MyCarousel = ({ images = [],carouselWidth,carouselHeight }) => {
   return (
     <>
       <div className="MyCarousel">
@@ -35,13 +36,18 @@ export const MyCarousel = ({ images = [] }) => {
               (i, index) =>
                 i?.url && (
                   <div key={index}>
-                    <img key={index} className="PostImage" src={'/' + i?.url} />
+                    <img key={index} className="PostImage"
+                      // style={{width:carouselWidth, height: carouselHeight }}
+                      src={backendURL+'/' + i?.url} />
                   </div>
                 ),
             )
           ) : (
             <div>
-              <img className="PostImage" src={defaultPhoto} />
+                <img className="PostImage"
+                      style={{width:carouselWidth, height: carouselHeight }}
+                  
+                  src={defaultPhoto} />
             </div>
           )}
         </Carousel>

src/components/post/PostCard.jsx

@@ -1,17 +1,19 @@
 import defaultPhoto from '../../materials/default-photo.png'
 import { Link } from 'react-router-dom'
 import galery from '../../materials/gallery-icon.png'
+import backendURL  from '../../helpers/backendUrl'
+
 export const Card = ({ post }) => (
   <>
     <Link key={post?._id} to={`/post/${post?._id}`}>
       {post?.images && post?.images.length > 1 ? (
         <div className="Wrapper">
           <img src={galery} className="Gallery" />
-          <img className="Card" src={'/' + post.images[0].url} />
+          <img className="Card" src={backendURL+'/' + post.images[0].url} />
         </div>
       ) : post?.images && post?.images[0] && post.images[0]?.url ? (
         <div className="Wrapper">
-          <img className="Card" src={'/' + post.images[0].url} />
+          <img className="Card" src={backendURL+'/' + post.images[0].url} />
         </div>
       ) : (
         <div className="Wrapper">

src/helpers/backendUrl.js

@@ -0,0 +1,2 @@
+const backendURL = "http://hipstagram.node.ed.asmer.org.ua"
+export default backendURL

src/helpers/getGQL.js

@@ -1,3 +1,5 @@
+import backendURL from './backendUrl'
+
 export const getGQL = (url) => (query, variables) =>
   fetch(url, {
     method: 'POST',
@@ -18,4 +20,4 @@ export const getGQL = (url) => (query, variables) =>
       }
     })
 
-export const gql = getGQL('/graphql')
+export const gql = getGQL(backendURL+'/graphql')

src/helpers/getGQLAnon.js

@@ -1,3 +1,4 @@
+import backendURL from './backendUrl'
 
 export const getGQLAnon = (url) => (query, variables) =>
 fetch(url, {
@@ -16,4 +17,4 @@ fetch(url, {
     }
   })
 
-export const gqlAnon = getGQLAnon('/graphql')
+export const gqlAnon = getGQLAnon(backendURL+'/graphql')

src/helpers/index.js

@@ -51,3 +51,7 @@ export function Dropzone({ onLoad }) {
     </section>
   )
 }
+export const validation = (password) =>
+  !/(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
+  password,
+)

src/pages/explorePosts/index.js

@@ -47,7 +47,15 @@ const ExplorePosts = ({
   return (
     <>
       <Row>
-        <Col span={18} offset={4}>
+        <Col
+          xl={{ offset: 4, span: 18 }}
+          lg={{ offset: 2, span: 20 }}
+          md={{ offset: 2, span: 20 }}
+          sm={{ offset: 2, span: 22 }}
+          xs={{offset:3, span: 20 }}
+          // span={18} offset={4}
+        
+        >
           <div className="Explore">
             {(explorePosts || [])?.map((item) => (
               <Card post={item} onPost={onPost} />

src/pages/feedPosts/index.js

@@ -11,7 +11,14 @@ import { Comments } from '../../components/comment/Comment'
 import AddComment from '../../components/comment/AddComment'
 import { MyCarousel } from '../../components/post/Carousel'
 import load from '../../materials/load.gif'
-import { actionFindSubCommentTypeSaga } from '../../actions/typeSaga/postTypesSaga'
+import {
+  actionFullOnePostSaga,
+  actionAddFullCommentSaga,
+} from '../../actions/typeSaga/postTypesSaga'
+import {
+  actionFindSubCommentTypeSaga,
+  actionFindSubCommentFeedTypeSaga,
+} from '../../actions/typeSaga/postTypesSaga'
 import { CLikeFeed } from '../../components/like/Like'
 const MyPostFeed = ({
   postsFeed = [],
@@ -53,72 +60,83 @@ const MyPostFeed = ({
   }
 
   return (
-    <div style={{ marginTop: '50px' }}>
-      <div className="PostsFeed">
-        <Row>
-          <Col span={12} offset={6}>
-            <div>
-              {postsFeed?.length == 0 && (
-                <div style={{ textAlign: 'center' }}>
-                  <h1> You have no posts to feed! </h1>
-                  <h1> Post and follow other users! </h1>
-                </div>
-              )}
-              {(postsFeed || []).map(
-                ({ _id, images, title, text, owner, comments, likes }) => (
-                  <div className="PostFeed">
+    <div className="PostsFeed">
+      <Row>
+        <Col
+          xl={{ offset: 6, span: 12 }}
+          lg={{ offset: 6, span: 15 }}
+          md={{ offset: 3, span: 17 }}
+          sm={{ offset: 3, span: 20 }}
+          xs={{ offset: 1, span: 22 }}
+        >
+          <div>
+            {postsFeed?.length == 0 && (
+              <div style={{ textAlign: 'center' }}>
+                <h1> You have no posts to feed! </h1>
+                <h1> Post and follow other users! </h1>
+              </div>
+            )}
+            {(postsFeed || []).map(
+              ({ _id, images, title, text, owner, comments, likes }) => (
+                <div className="PostsFeed-one">
+                  <Col
+                    xl={{ offset: 1, span: 12 }}
+                    lg={{ offset: 1, span: 15 }}
+                  >
                     <LinkToUser
+                      className="Owner"
                       _id={owner?._id}
                       key={_id}
-                      style={{ marginLeft: '50px' }}
                       login={owner?.login}
                       avatar={owner?.avatar}
-                      size={50}
+                      size={40}
                     />
-                    <MyCarousel images={images} />
-                    <div style={{ margin: '0 10%' }}>
-                      <h2 className="Title"> Title: {title || ''}</h2>
-                      <h2 className="Title"> Text: {text || ''}</h2>
-                      <Divider>Comments</Divider>
-                      <div style={{ margin: '10px', position: 'relative' }}>
-                        <div className="ScrollForFeed">
-                          <CCommentsForFeed postId={_id} comments={comments} />
-                        </div>
-                        <div style={{ display: 'flex', margin: '20px 0px' }}>
-                          <CLikeFeed likes={likes} postId={_id} />
-
-                          <AddComment
-                            addComment={addComment}
-                            postId={_id}
-                            style={{
-                              position: 'absolute',
-                              bottom: '70px',
-                              zIndex: '100',
-                            }}
-                            width={'300px'}
-                          />
-                        </div>
+                  </Col>
+                  <MyCarousel
+                    images={images}
+                    carouselWidth={'600px'}
+                    carouselHeight={'400px'}
+                  />
+                  <div style={{ margin: '0 7%' }}>
+                    <p className="Title"> Title: {title || ''}</p>
+                    <p className="Title"> Text: {text || ''}</p>
+                    <Divider>Comments</Divider>
+                    <div style={{ margin: '10px', position: 'relative' }}>
+                      <CCommentsForFeed postId={_id} comments={comments} />
+                      <div style={{ display: 'flex', margin: '20px 0px' }}>
+                        <CLikeFeed likes={likes} postId={_id} />
+                        <AddComment
+                          addComment={addComment}
+                          postId={_id}
+                          style={{
+                            position: 'absolute',
+                            // bottom: '70px',
+                            // zIndex: '100',
+                            // height:'30px'
+                          }}
+                          // width={'300px'}
+                        />
                       </div>
                     </div>
                   </div>
-                ),
-              )}
-            </div>
-          </Col>
-        </Row>
-        {postsFeedPromise?.status == 'PENDING' && (
-          <img
-            style={{
-              display: 'block',
-              margin: '0 auto',
-              padding: '10px',
-            }}
-            src={load}
-            width="100"
-            height="100"
-          />
-        )}
-      </div>
+                </div>
+              ),
+            )}
+          </div>
+        </Col>
+      </Row>
+      {postsFeedPromise?.status == 'PENDING' && (
+        <img
+          style={{
+            display: 'block',
+            margin: '0 auto',
+            padding: '10px',
+          }}
+          src={load}
+          width="100"
+          height="100"
+        />
+      )}
     </div>
   )
 }
@@ -129,7 +147,7 @@ const CCommentsForFeed = connect(
     addComment: state.promise?.addComment?.payload,
   }),
   {
-    findSubComment: actionFindSubCommentTypeSaga,
+    findSubComment: actionFindSubCommentFeedTypeSaga,
   },
 )(Comments)
 

src/pages/header/index.js

@@ -1,30 +1,91 @@
 import { CLogout } from '../../components/authorization/LogOut'
 import { CSearch } from '../../components/Search_Users'
-import { Feed, AddPost, Explore, CUser } from '../../components/buttons/HeaderButtons'
+import {
+  Feed,
+  AddPost,
+  Explore,
+  CUser,
+  SearchMobile,
+} from '../../components/buttons/HeaderButtons'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 
 export const Header = () => {
   return (
     <section className="Header">
-      <Col span={12} offset={6}>
+      <Col
+        xl={{ offset: 4, span: 16 }}
+        lg={{ offset: 4, span: 17 }}
+        md={{ offset: 3, span: 17 }}
+        sm={{ offset: 3, span: 15 }}
+        xs={{ offset: 2, span: 17 }}
+        // span={12} offset={6}
+      >
         <Row justify="space-between" align="middle">
-          <Col>
-            <CLogout className="button" />
+          <Col
+           md={{ span: 1 }}
+           sm={{ span: 1 }}
+           xs={{ span: 1 }}
+          >
+            <CLogout />
           </Col>
-          <Col offset={3}>
+          <Col
+            xl={{ offset: 2, span: 13 }}
+            lg={{ offset: 2, span: 13 }}
+            md={{ span: 0 }}
+            sm={{ span: 0 }}
+            xs={{ span: 0 }}
+            // offset={3}
+          >
             <CSearch />
           </Col>
-          <Col offset={2}>
+          <Col
+            xl={{ offset: 2, span: 1 }}
+            lg={{ offset: 2, span: 1 }}
+            md={{ span: 1 }}
+            sm={{ span: 1 }}
+            xs={{ span: 1 }}
+
+            // offset={2}
+          >
             <Feed />
           </Col>
-          <Col>
+
+          <Col
+            xl={{ span: 0 }}
+            lg={{ span: 0 }}
+            md={{ span: 1 }}
+            sm={{ span: 1 }}
+            xs={{ span: 1 }}
+            // offset={3}
+          >
+            <SearchMobile />
+          </Col>
+          <Col
+            xl={{ span: 1 }}
+            lg={{ span: 1 }}
+            md={{ span: 1 }}
+            sm={{ span: 1 }}
+            xs={{ span: 1 }}
+          >
             <AddPost />
           </Col>
-          <Col>
+          <Col
+            lg={{ span: 1 }}
+            xl={{ span: 1 }}
+            md={{ span: 1 }}
+            sm={{ span: 1 }}
+            xs={{ span: 1 }}
+          >
             <Explore />
           </Col>
-          <Col>
+          <Col
+            xl={{ span: 1 }}
+            lg={{ span: 1 }}
+            md={{ span: 1 }}
+            sm={{ span: 1 }}
+            xs={{ span: 1 }}
+          >
             <CUser />
           </Col>
         </Row>

src/pages/login/index.js

@@ -4,42 +4,46 @@ import logo from '../../materials/login.png'
 import { Row, Col } from 'antd'
 import { Link } from 'react-router-dom'
 import { Typography } from 'antd'
-const {Title } = Typography
+const { Title } = Typography
 export const LoginPageForm = () => (
   <div className="InputForm">
     <Row gutter={[16, 16]}>
-      
       <Col
         // span={12}
         xl={{ span: 10 }}
         lg={{ span: 8 }}
         md={{ span: 0 }}
-        sm={{ span: 0}}   >
+        sm={{ span: 0 }}
+        xs={{span: 0 }}
+      >
         {/* xl={4} */}
-        
-        <img  src={logo} />
-       
+
+        <img src={logo} />
       </Col>
 
+      <Col
+        xl={{ offset:0, span: 14 }}
+        lg={{ offset:0, span: 16 }}
+        md={{ offset:2, span: 22 }}
+        sm={{offset:2, span: 22  }}
+        xs={{offset:1, span: 22  }}
 
-      <Col xl={{ span: 14}}
-        lg={{ span: 16 }}
-        // md={{  span: 15 }}
-        sm={{ span: 10 }}
-         >
+      >
         <div className="LoginForm">
-          <section>
-          <Title style={{
-           
-            color: 'rgb(16, 30, 54)',
-            // width: '100%'float: 'left', 
-          }} level={3} >Welcome to Memogram! </Title>
-      
-          </section>
+         
+            <p
+              style={{
+                color: 'rgb(224, 236, 244)'
+                // width: '100%'float: 'left',
+              }}
+            >
+              Welcome to Memogram!{' '}
+            </p>
+         
           <CLoginForm />
 
           <p>
-           Don't have an account yet?
+            Don't have an account yet?
             <Link to="/register" className="Link">
               Register
             </Link>
@@ -53,12 +57,34 @@ export const LoginPageForm = () => (
 export const RegisterPageForm = () => (
   <div className="InputForm">
     <Row>
-      <Col span={12}>
-        <img src={logo} />
+      <Col   xl={{ span: 10 }}
+        lg={{ span: 8 }}
+        md={{ span: 0 }}
+        sm={{ span: 0 }}
+        xs={{span: 0 }}
+      
+      >
+        <img src={logo}
+        
+        />
       </Col>
 
-      <Col span={12}>
+      <Col xl={{ offset:0, span: 14 }}
+        lg={{ offset:0, span: 16 }}
+        md={{ offset:2, span: 22 }}
+        sm={{offset:2, span: 22}}
+        xs={{offset:1, span: 22  }}
+
+      >
         <div className="LoginForm">
+            <p
+              style={{
+                color: 'rgb(224, 236, 244)'
+                // width: '100%'float: 'left',
+              }}
+            >
+              Welcome to Memogram!{' '}
+            </p>
           <CRegisterForm />
           <p>
             Have an account?

src/pages/onePost/index.js

@@ -36,66 +36,97 @@ export const PagePost = ({
   return (
     <>
       <Row>
-        <Col span={14} style={{ marginTop: '100px' }}>
-          <ConstructorModal
-            title={'Edit post'}
-            isModalVisible={isModalVisible}
-            setIsModalVisible={setIsModalVisible}
-          >
-            <CPostEditor />
-          </ConstructorModal>
+        <Col
+          xl={{ offset: 1, span: 13 }}
+          lg={{ offset: 2, span: 18 }}
+          // md={{ offset: 3, span: 17 }}
+          // sm={{ offset: 3, span: 15 }}
+          xs={{ offset: 2, span: 20 }}
+        >
+          <div className="OnePost">
+            <ConstructorModal
+              title={'Edit post'}
+              isModalVisible={isModalVisible}
+              setIsModalVisible={setIsModalVisible}
+            >
+              <CPostEditor />
+            </ConstructorModal>
 
-          <MyCarousel
-            key={onePost?._id}
-            style={{ position: 'absolute' }}
-            images={onePost?.images}
-          />
-          <h3 style={{ textAlign: 'center', padding: '10px' }}>
-            Created Post:{' '}
-            {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
-          </h3>
-        </Col>
-        <Col span={8}>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              marginTop: '100px',
-            }}
-          >
-            <LinkToUser
-              _id={onePost?.owner?._id}
-              login={onePost?.owner?.login}
-              avatar={onePost?.owner?.avatar}
-              key={_id}
-              size={50}
-              padding={'0px'}
+            <MyCarousel
+              key={onePost?._id}
+              style={{ position: 'absolute' }}
+              images={onePost?.images}
+              carouselWidth={'750px'}
+              carouselHeight={'500px'}
             />
-            <Row span={1}>
-              {my_Id === onePost?.owner?._id && <EditMyPostButton _id={_id} />}
-            </Row>
+            <h3 style={{ textAlign: 'center', padding: '10px' }}>
+              Created Post:{' '}
+              {new Intl.DateTimeFormat('en-GB').format(onePost?.createdAt)}
+            </h3>
+          </div>
+        </Col>
+        <Col
+          xl={{ offset: 1, span: 8 }}
+          lg={{ offset: 3, span: 17 }}
+          xs={{ offset: 2, span: 20 }}
+        >
+          <div className="OnePost">
+            <Col
+              xl={{ offset: 1, span: 20 }}
+              lg={{ offset: 1, span: 19 }}
+              xs={{ offset: 2, span: 20 }}
+            >
+              <Row justify="space-between" align="middle">
+                <LinkToUser
+                  _id={onePost?.owner?._id}
+                  login={onePost?.owner?.login}
+                  avatar={onePost?.owner?.avatar}
+                  key={_id}
+                  size={50}
+                  padding={'0px'}
+                />
+                {/* <Row span={1}> */}
+                {my_Id === onePost?.owner?._id && (
+                  <EditMyPostButton _id={_id} />
+                )}
+                {/* </Row> */}
+              </Row>
+            </Col>
           </div>
 
           <Divider />
-          <h2> Title: {onePost?.title || ''} </h2>
+          <p className="Title"> Title: {onePost?.title || ''} </p>
 
-          <h2> Text: {onePost?.text || ''} </h2>
+          <p className="Title"> Text: {onePost?.text || ''} </p>
           <Divider>Comments</Divider>
-          <div className="Scroll">
-            <CCommentsOnePost />
-          </div>
-          <div style={{ display: 'flex', margin: '20px 0px' }}>
-            <CLike likes={onePost?.likes} postId={onePost?._id} />
-            <AddComment
-              addComment={addComment}
-              style={{
-                position: 'absolute',
-                bottom: '120px',
-                right: '30px',
-              }}
-              width={'40%'}
-              postId={onePost?._id}
-            />
+          <div className="FooterPost">
+            <div className="CommentsPost">
+              <CCommentsOnePost comments={onePost?.comments} />
+            </div>
+            <Row>
+              <Col
+                xl={{ span: 4, offset: 1 }}
+                lg={{ span: 10, offset: 1 }}
+                xs={{ offset: 1, span: 3 }}
+              >
+                {/* <div style={{ display: 'flex', margin: '20px 0px' }}> */}
+                <CLike likes={onePost?.likes} postId={onePost?._id} />
+              </Col>
+              {/* <Col xl={{span:10,offset:1}}> */}
+
+              <AddComment
+                addComment={addComment}
+                style={{
+                  position: 'absolute',
+                  // bottom: '120px',
+                  // right: '30px',
+                }}
+                // width={'40%'}
+                postId={onePost?._id}
+              />
+              {/* </Col> */}
+              {/* </div> */}
+            </Row>
           </div>
         </Col>
       </Row>

src/pages/profilePage/index.js

@@ -14,6 +14,8 @@ import { Row, Col } from 'antd'
 import { CSubscribe } from '../../components/Subscribe'
 import { CEditSetting } from '../setting'
 import load from '../../materials/load.gif'
+import backendURL from '../../helpers/backendUrl'
+
 export const PageAboutUser = ({
   match: {
     params: { _id },
@@ -66,35 +68,32 @@ export const PageAboutUser = ({
   return (
     <>
       <Row>
-        <Col span={12} offset={6}>
+        <Col xl={{ span: 12, offset: 6 }}
+          md={{ span: 20, offset: 3 }}
+          sm={{ offset: 3, span: 15 }}
+          xs={{ offset: 2, span: 20 }}
+        >
           <section className="AboutMe">
             <Row>
               {avatar?.url ? (
                 <Avatar
-                  style={{
-                    marginRight: '20px',
-                    width: '150px',
-                    height: '150px',
-                  }}
-                  src={'/' + avatar?.url}
+                  
+        className='ProfileAvatar'
+                  src={backendURL+'/' + avatar?.url}
                 />
               ) : (
                 <Avatar
-                  style={{
-                    marginRight: '20px',
-                    width: '150px',
-                    height: '150px',
-                  }}
+                className='ProfileAvatar'
                   src={user}
                 />
               )}
               <div className="Info">
-                {login ? <h1> {login}</h1> : <h1> {'Anon'}</h1>}
+                {login ? <p className='Login'> {login}</p> : <p className='Login'> {'Anon'}</p>}
 
-                <h3>
+                <p>
                   Created Account:{' '}
                   {new Intl.DateTimeFormat('en-GB').format(createdAt)}
-                </h3>
+                </p>
                 <div style={{ display: 'flex' }}>
                   {countPosts > 0 ? (
                     <div
@@ -103,10 +102,10 @@ export const PageAboutUser = ({
                         justifyContent: 'space-between',
                       }}
                     >
-                      <h3> {countPosts} posts </h3>
+                      <p> {countPosts} posts </p>
                     </div>
                   ) : (
-                    <h3> 0 posts </h3>
+                    <p> 0 posts </p>
                   )}
 
                   <ListOfUsers
@@ -123,7 +122,7 @@ export const PageAboutUser = ({
                     text={'following'}
                   />
                 </div>
-                <h3> nick: {nick == null ? login : nick}</h3>
+                <p> nick: {nick == null ? login : nick}</p>
 
                 {checkMyId ? <CEditSetting /> : <CSubscribe />}
               </div>
@@ -132,13 +131,16 @@ export const PageAboutUser = ({
         </Col>
       </Row>
       <Row>
-        <Col span={17} offset={4}>
+
+        <Col xl={{ span: 17, offset: 4 }}
+          lg={{ offset: 4, span: 20 }}
+          md={{ offset: 4, span: 20}}
+          sm={{ offset: 3, span: 15 }}
+          xs={{ offset: 1, span: 24 }}
+        //  md={{ span: 1 }}
+        >
           <div
-            style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              margin: '20px',
-            }}
+            className='ProfilePage'
           >
             {(allPosts || [])?.map((item) => (
               <Card post={item} onPost={onPost} />

src/pages/search/index.js

@@ -0,0 +1,89 @@
+import { connect } from 'react-redux'
+import { Input, Popover } from 'antd'
+import { actionSearchUser } from '../../actions/query/searchUserQuery'
+import { UserOutlined } from '@ant-design/icons'
+
+import { actionFullProfilePageUserTypeSaga } from '../../actions/typeSaga/userTypesSaga'
+import LinkToUser from '../../components/LinkToUser'
+export const ResultUserFind = ({text, userFind = [], handleCancel }) => {
+  return (
+    <div className="ResultUserFindMobile">
+      
+      {userFind ?
+      userFind?.map(({ _id, login, avatar }) => (
+        <LinkToUser
+          _id={_id}
+          login={login}
+          avatar={avatar}
+          size={50}
+              padding={'10px'}
+              font={'20px'}
+          onClick={handleCancel}
+          key={_id}
+        />
+      ))
+        :
+        <p> Not found by request "{text} "</p>
+    }
+    </div>
+  )
+}
+
+const SearchUser = ({my_Id, onSearch, searchUser, onPageData }) => {
+  // const [value, setSearch] = useState('')
+  // const onSearchUser = onSearch(setSearch(value))
+  const onSearchUser = (value) =>
+    console.log('value ', value)&&
+    onSearch(value)
+    const { Search } = Input
+    // console.log('value ', value)
+  return (
+      <>
+        {/* <Popover
+          placement="bottom"
+          destroyTooltipOnHide={true}
+          size="large"
+          content={
+            <ResultUserFind
+              my_Id={my_Id}
+              size={'20px'}
+              onPageData={onPageData}
+              userFind={searchUser}
+            />
+          }
+        > */}
+          <Search
+            placeholder="Enter search user"
+            allowClear
+            prefix={<UserOutlined />}
+            enterButton="Search"
+            size="large"
+                onSearch={onSearchUser}
+                className="Search"
+            />
+            <div>
+          <ResultUserFind
+            text={value}
+              my_Id={my_Id}
+              size={'20px'}
+              onPageData={onPageData}
+              userFind={searchUser}
+            />
+
+            </div>
+        {/* </Popover> */}
+      </>
+    )
+  }
+  export const CSearchMobileVersion = connect(
+    (state) => ({
+      aboutUser: state.userData?.aboutUser,
+      searchUser: state.promise?.searchUser?.payload,
+      my_Id: state.auth?.payload?.sub?.id || '',
+    }),
+  
+    {
+      onSearch: actionSearchUser,
+      onPageData: actionFullProfilePageUserTypeSaga,
+    },
+  )(SearchUser)

src/pages/setting/index.js

@@ -97,11 +97,11 @@ const EditSetting = ({
         setIsModalVisible={setIsModalVisibleEdit}
         handleCancel={handleCancelEdit}
       >
-        <h2> Edit avatar </h2>
+        <h3> Edit avatar </h3>
         <SpoilerButton text={'Change avatar'} style={{ width: '100%' }}>
           <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
         </SpoilerButton>
-        <h2> Edit login </h2>
+        <h3> Edit login </h3>
         <SpoilerButton text={'Change login'} style={{ width: '100%' }}>
           <div
             style={{
@@ -127,7 +127,7 @@ const EditSetting = ({
           </div>
         </SpoilerButton>
 
-        <h2> Edit nick </h2>
+        <h3> Edit nick </h3>
         <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
           <div
             style={{
@@ -151,7 +151,7 @@ const EditSetting = ({
             </Button>
           </div>
         </SpoilerButton>
-        <h2> Edit password </h2>
+        <h3> Edit password </h3>
         <SpoilerButton text={'Change password'} style={{ width: '100%' }}>
           <h3> Login</h3>
           <div

src/redux/reducers/feedReducer.js

@@ -1,3 +1,4 @@
+import { addAnswers } from "../../actions/types/commentTypes"
 export const feedReducer = (
   state = {},
   {
@@ -8,6 +9,7 @@ export const feedReducer = (
     postsFeedCount,
     newPostsFeedCount,
     newResult,
+    commentId
   },
 ) => {
   const types = {
@@ -47,9 +49,24 @@ export const feedReducer = (
       ...state,
 
       postsFeed: postsFeed?.map((p) =>
-        p._id === postId ? (p = { ...p, comments: [...newResult] }) : p,
+        p._id === postId ? (p = { ...p, comments: 
+          [...newResult] }) : p,
       ),
     }),
+    'FEED-ANSWERS-COMMENT': () => ({
+      ...state,
+      postsFeed: ({
+        ...state?.postsFeed?.map((p) =>
+          p._id === postId && (p = {
+            ...p, comments:
+              addAnswers(state?.postsFeed?.p?.comments,
+                commentId, newResult)
+          })
+        )
+      })
+    })
+          
+    
   }
   if (type in types) {
     return types[type]()

src/redux/reducers/postReducer.js

@@ -34,7 +34,7 @@ export const postReducer = (
       ...state,
       onePost: ({
         ...state?.onePost,
-        comments:  addAnswers(state.onePost.comments,
+        comments:  addAnswers(state?.onePost?.comments,
           commentId, newResult)
       }),
     })

src/redux/rootSaga.js

@@ -16,6 +16,8 @@ import {
   addCommentOnePostWatcher,
   addSubCommentWatcher,
   getSubCommentWatcher,
+  getSubCommentFeedWatcher,
+  addSubCommentFeedWatcher
 } from './saga/comment'
 import { onePostWatcher, postsWatcher } from './saga/post'
 import { changeLikePostWatcher, changeLikePostFeedWatcher } from './saga/like'
@@ -43,7 +45,10 @@ function* rootSaga() {
     addSubCommentWatcher(),
     getSubCommentWatcher(),
     changeLikePostFeedWatcher(),
+    getSubCommentFeedWatcher(),
+    addSubCommentFeedWatcher()
   ])
+
 }
 
 export default rootSaga

src/redux/saga/comment/index.js

@@ -11,6 +11,7 @@ import {
   actionAddCommentPostFeedType,
   actionAddCommentType,
   actionAddSubCommentType,
+  actionAddSubCommentFeedType
 } from '../../../actions/types/commentTypes'
 
 function* addCommentOnePostWorker({ postId, text }) {
@@ -52,6 +53,7 @@ function* addCommentFeedWorker({ postId, text }) {
 export function* addCommentFeedWatcher() {
   yield takeLeading('FEED_POST_COMMENT', addCommentFeedWorker)
 }
+
 function* addSubCommentWorker({ commentId, newResult }) {
   yield call(promiseWorker, actionAddSubComment(commentId, newResult))
   const {
@@ -67,8 +69,27 @@ function* addSubCommentWorker({ commentId, newResult }) {
 export function* addSubCommentWatcher() {
   yield takeEvery('POST_SUB_COMMENT', addSubCommentWorker)
 }
+
+function* addSubCommentFeedWorker({ commentId, newResult }) {
+  yield call(promiseWorker, actionAddSubComment(commentId, newResult))
+  const {
+    promise: {
+      addSubComment: { status },
+    },
+  } = yield select()
+  if (status === 'FULFILLED') {
+    yield call(getSubCommentFeedWorker, { commentId })
+  }
+}
+
+export function* addSubCommentFeedWatcher() {
+  yield takeEvery('FEED_POST_SUB_COMMENT', addSubCommentFeedWorker)
+}
+
+
 function* getSubCommentWorker({ commentId }) {
-  const { answers } = yield call(promiseWorker, actionFindSubComment(commentId))
+  const { answers } = yield call(promiseWorker,
+    actionFindSubComment(commentId))
   if (answers) {
     yield put(actionAddSubCommentType(commentId, answers))
   }
@@ -77,3 +98,15 @@ function* getSubCommentWorker({ commentId }) {
 export function* getSubCommentWatcher() {
   yield takeEvery('GET_SUB_COMMENT', getSubCommentWorker)
 }
+
+function* getSubCommentFeedWorker({ commentId }) {
+  const { answers } = yield call(promiseWorker,
+    actionFindSubComment(commentId))
+  if (answers) {
+    yield put(actionAddSubCommentFeedType(commentId, answers))
+  }
+}
+
+export function* getSubCommentFeedWatcher() {
+  yield takeEvery('GET_SUB_FEED_COMMENT', getSubCommentFeedWorker)
+}