Add changeLikeFeedWatcher and add styles

src/App.scss

@@ -17,9 +17,9 @@ body {
   padding: 10px;
   border-width: 2px;
   border-radius: 2px;
-  background-color: #74d2e7;
+  // background-color: #74d2e7;
   color: #1d5b78;
-  outline: none;
+  // outline: none;
   transition: border 0.24s ease-in-out;
   font-size: medium;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -92,7 +92,7 @@ body {
   margin: 0 auto;
   background-color: white;
   border: 6px solid #dbebfa;
-  padding: 10px;
+  padding: 30px;
   border-radius: 25px;
   display: 'flex';
   align-items: 'center';
@@ -117,18 +117,20 @@ main {
 }
 .Title {
   text-align: left;
-  margin: 10px;
+  margin: 20px 0px;
 }
 .Input {
   display: flex;
-  width: 90%;
   padding: 5px;
-  border-radius: 20px;
+  margin:10px;
+  width: 80%;
+  border-radius: 5px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-size: 30px;
+  font-size: 20px;
 }
 .container {
-  padding: 10px;
+  margin: 10px;
+  background-color: rgb(84, 132, 222);
   margin-top: 20px;
 }
 .AboutMe {
@@ -192,6 +194,7 @@ main {
   margin-bottom: 20px;
 }
 .PostFeed {
+
   border-width: 20;
   border-color: #ffffff;
   background: #edf8f89e;
@@ -215,6 +218,7 @@ main {
    rgba(29,253,182,1) 100%);
   transition: 0.3s;
   right:0;
+  
 }
 .LoginPage{
   margin:150px;
@@ -318,9 +322,8 @@ main {
 }
 
 .NumberPosts{
-  text-shadow: 1px 1px 1px rgb(81, 77, 77), 
-  3px 3px 5px rgb(72, 72, 76); 
-  // box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+float: right;
+margin-bottom: 10px;
 
 }
 .Avatar {

src/components/UploadFiles.jsx

@@ -2,12 +2,7 @@ import { useDropzone } from 'react-dropzone'
 import React, { useEffect } from 'react'
 import { Button,Image } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
-import { sortableContainer, SortableElement, sortableElement, SortableHandle } from 'react-sortable-hoc'
 import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
-import { Upload } from "antd";
-import { uploadFileType } from '../actions'
-import { Row, Col } from 'antd'
-
 export function Dropzone({ onLoad }) {
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
   const files = acceptedFiles.map((file) => (
@@ -15,8 +10,6 @@ export function Dropzone({ onLoad }) {
       {file.path} - {file.size} bytes
     </li>
   ))
-  // console.log('acceptedFiles name', acceptedFiles[0]?.name)
-  // console.log('acceptedFiles',acceptedFiles)
   useEffect(() => {
     if (acceptedFiles) onLoad(acceptedFiles)
   }, [acceptedFiles])
@@ -24,7 +17,7 @@ export function Dropzone({ onLoad }) {
     <section className="container">
       <div {...getRootProps({ className: 'Dropzone' })}>
         <input {...getInputProps()} />
-        <Button type="default" size="large" icon={<UploadOutlined />}>
+        <Button type="dashed" size="large" icon={<UploadOutlined />}>
           Drag 'n' drop some files here, or click to select files
         </Button>
       </div>

src/components/comment/AddComment.jsx

@@ -25,7 +25,7 @@ import { SmileOutlined, SmileFilled } from '@ant-design/icons'
       )}
       <Input
         style={{
-          display: 'flex',
+          display: 'block',
           width,
           margin: '0 10px',
         }}

src/components/like/Like.jsx

@@ -1,6 +1,6 @@
 import { HeartOutlined, HeartFilled } from '@ant-design/icons'
 import {
-  actionChangeLike
+  actionChangeLike, actionChangeFeedLike
 } from '../../redux/saga'
 import { connect } from 'react-redux'
 import ModalLikes from './ModalLikes'
@@ -32,7 +32,7 @@ console.log('like id in component', likeId)
     </>
   )
 }
-const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
+const AllLikes= ({ my_Id, likes,changeLike, postId }) => (
   <Like
     my_Id={my_Id}
     likes={likes}
@@ -48,4 +48,27 @@ export const CLike = connect(
   {
     changeLike: actionChangeLike
   },
-)(AllLikeComponent)
+)(AllLikes)
+
+export const CLikeFeed = connect(
+  (state) => ({
+    my_Id: state.auth?.payload?.sub?.id || '',
+  }),
+  {
+    changeLike: actionChangeFeedLike
+  },
+)(AllLikes)
+
+
+
+// export const CLikeForFeed = connect(
+//   (state) => ({
+//     my_Id: state.auth?.payload?.sub?.id || '',
+//     addLike: state.promise?.addLike?.payload,
+//     deleteLike: state.promise?.deleteLike?.payload,
+//   }),
+//   {
+//     // addLike: actionAddFullLikeFeed,
+//     // deleteLike: actionDeleteFullLikeFeed,
+//   },
+// )(AllLikeComp)

src/pages/createAndEditPost/index.js

@@ -84,14 +84,12 @@ const PostEditor = ({
     })
   const disabledBtn =
     state?.images && state?.title && state?.text ? false : true
-  console.log('STATEEE IDDDD', state?._id)
   const savePost = () =>
     onSave(state) &&
     message.success(`Post published success!`) &&
     history.push(`/profile/${myId}`)
   const checkLength = () => {
     if (state?.images?.length > 8) {
-      console.log('state?.images?.length', state?.images?.length)
       message.error('Error, please, upload maximum 8 elements')
       state['images'] = []
       return false
@@ -122,20 +120,20 @@ const PostEditor = ({
                   ))}
               </SortableContainer>
       </div>
-      <div style={{textAlign:'center'}}>
+      
         {checkLength()}
-      </div>
+     
           {/* </Col> */}
         {/* </Col> */}
       {/* </Row> */}
 
-      <h1 className="Title"> Title </h1>
+      <h2 className="Title"> Title </h2>
       <CustomInput
         state={state?.title || ''}
         className="Input"
         onChangeText={onChangeTitle}
       />
-      <h1 className="Title"> Text </h1>
+      <h2 className="Title"> Text </h2>
 
       <CustomInput
         state={state?.text || ''}
@@ -147,7 +145,7 @@ const PostEditor = ({
         <Button
           style={{
             display: 'flex',
-            margin: '10px',
+            marginTop: '30px',
             alignItems: 'center',
             alignContent: 'center',
             justifyContent: 'center',

src/pages/feedPosts/index.js

@@ -27,6 +27,11 @@ import  AddComment from '../../components/comment/AddComment'
 // import { Like, Likes } from '../../components/like/Like'
 import { MyCarousel } from '../../components/post/Carousel'
 import load from '../../materials/load.gif'
+import {
+  actionAddSubCommentTypeSaga,
+  actionFindSubCommentTypeSaga,
+} from '../../actions/typeSaga/postActionSaga'
+import { CLikeFeed } from '../../components/like/Like'
 const MyPostFeed = ({
   // myData,
   postsFeed = [],
@@ -75,14 +80,12 @@ const MyPostFeed = ({
           <Col span={12} offset={6}>
             <div>
               {postsFeed?.length == 0 && (
-                <div>
-                <center>
+                <div style={{textAlign:'center'}}>
                   <h1> You have no posts to feed! </h1>
                   <h1>
                     {' '}
                     Post and follow other users!{' '}
                     </h1>
-                  </center>
                 </div>
               )}
               {(postsFeed || []).map(
@@ -93,25 +96,27 @@ const MyPostFeed = ({
                       size={50} />
                     <MyCarousel images={images} />
                     <div style={{margin:"0 10%"}}>
-                    <h1 className='Title'> Title: {title || ''}</h1>
-                    <h1  className='Title'> Text: {text || ''}</h1>
+                    <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 || []}
+                        comments={comments}
                       />
                       </div>
-                      {/* <center> */}
                       <div style={{ display: 'flex', margin: '20px 0px' }}>
-                        {/* <CLikeForFeed likes={likes} postId={_id} /> */}
+                      <CLikeFeed likes={likes} postId={_id}/>
+                          {/* <CLikeForFeed likes={likes} postId={_id} /> */}
 
                           <AddComment addComment={addComment}
                             postId={_id} style={{
                               position: 'absolute', bottom: '70px',
                               zIndex: '100'
-                            }} />
+                            }}
+                          width={'300px'}
+                          />
                     
                         </div>
                         </div>
@@ -139,10 +144,16 @@ const MyPostFeed = ({
 
 const CCommentsForFeed = connect(
   (state) => ({
+    // postId: state.promise.onePost?.payload?._id,
+    addSubComment: state.promise?.addSubComment,
     addComment: state.promise?.addComment?.payload,
+
+    // addComment: state.promise?.addComment?.payload,
     // addSubComment: state.promise?.addSubComment,
   }),
   {
+    findSubComment: actionFindSubCommentTypeSaga,
+
     // addComment: actionAddFullCommentFeed,
     // addCommentReply: actionAddSubFullComment,
     // findSubComment: actionFindSubComment,

src/redux/index.js

@@ -26,7 +26,8 @@ onePostWatcher,
   registerWatcher,
   postsWatcher,
   addSubCommentWatcher,
-  getSubCommentWatcher
+  getSubCommentWatcher,
+  changeLikePostFeedWatcher
 } from './saga'
 import createSagaMiddleware from 'redux-saga' //функция по созданию middleware
 import {
@@ -71,7 +72,8 @@ function* rootSaga() {
     postsWatcher(),
     addCommentFeedWatcher(),
     addSubCommentWatcher(),
-    getSubCommentWatcher()
+    getSubCommentWatcher(),
+    changeLikePostFeedWatcher()
     // addCommentFeedWatcher()
   ])
 }

src/redux/reducers/feedReducer.js

@@ -34,19 +34,12 @@ export const feedReducer = (
         postsFeedCount: 0,
     }),
   
-      'ADD-LIKE-POSTS': () => ({
+      'LIKE-POST-FEED': () => ({
         ...state,
         postsFeed: postsFeed?.map((p) =>
           p._id === postId ? (p = { ...p, likes: [...newResult] }) : p,
         ),
       }),
-      'DELETE-LIKE-POSTS': () => ({
-        ...state,
-        postsFeed: postsFeed?.map((p) =>
-          p._id === postId ? (p = { ...p, likes: [...newResult] }) : p,
-        ),
-      }),
-  
       'ADD-COMMENT-POSTS': () => ({
         ...state,
         
@@ -69,15 +62,11 @@ export const actionClearFeedPostsType= () =>
   ({ type: 'CLEAR_POSTS' })
 
 //type
-export const actionAddLikePostInTape = (postId) =>
- ({ type: 'ADD-LIKE-POSTS', postId })
+export const actionAddLikePostFeedType = (newResult) =>
+ ({ type: 'LIKE-POST-FEED',newResult })
 
- export const actionDeleteLikePostInTape = (likeId, postId) => ({
-    type: 'DELETE-LIKE-POSTS',
-    likeId,
-    postId,
-  })
-  export const actionAddCommentPostFeedTape = (postId, newResult) => ({
+
+  export const actionAddCommentPostFeedType = (postId, newResult) => ({
     type: 'ADD-COMMENT-POSTS',
     postId,
     newResult,

src/redux/saga/index.js

@@ -51,7 +51,8 @@ import {
   actionClearFeedPosts,
   actionFeedType,
   actionClearFeedPostsType,
-  actionAddCommentPostFeedTape
+  actionAddCommentPostFeedType,
+  actionAddLikePostFeedType
 } from '../reducers/feedReducer'
 import { actionProfilePageDataTypeUser,actionCountPostsType } from '../reducers/userProfileReducer'
 import { actionRemoveDataAboutMe,actionUpdateAvatarType } from '../reducers/myProfileReducer'
@@ -86,6 +87,7 @@ function* loginWorker({login, password}){ //обработчик экшона FU
   if (token) {
       yield put(actionAuthLogin(token));
   }
+  
 }
 export function* loginWatcher() {
 yield takeEvery("FULL_LOGIN", loginWorker)
@@ -306,7 +308,7 @@ function* addCommentFeedWorker({ postId, text }) {
     const { comments } = yield call(promiseWorker,
       actionGetCommentsOnePost(postId))
     if (comments)
-      yield put (actionAddCommentPostFeedTape(postId,comments))
+      yield put (actionAddCommentPostFeedType(postId,comments))
   }
 }
 export function* addCommentFeedWatcher(){
@@ -331,8 +333,10 @@ export const actionChangeLike = (likeId, postId) =>
 ({
     type:"CHANGE_LIKE_POST", likeId,postId
 })
+
+
   
-function* changeLikePostWorker({ likeId, postId }) {
+function* changeLikeWorker({ likeId, postId }) {
   console.log('likeId', likeId)
   console.log('postId', postId)
 
@@ -340,22 +344,44 @@ function* changeLikePostWorker({ likeId, postId }) {
     likeId ? actionDeleteLike(likeId, postId) : actionAddLike(postId)
 
   yield call(promiseWorker, changeOneLike())
-  const { likes } = yield call(promiseWorker, actionFindLikes(postId))
-  console.log('likes in worker', likes)
+  return yield call(promiseWorker, actionFindLikes(postId))
   
+}
+
+function* changeLikePostWorker({ likeId, postId }) {
+ 
+  const { likes } = yield call(changeLikeWorker, {likeId, postId})
   if (likes) {
   
-    yield call(promiseWorker, actionOnePost(postId))
+    // yield call(promiseWorker, actionOnePost(postId))
     yield put(actionChangeLikeType(likes))
   }
 }
 
+function* changeLikePostFeedWorker({ likeId, postId }) {
+  const { likes } = yield call(changeLikeWorker, {likeId, postId})
+  if (likes) {
+  
+    // yield call(promiseWorker, actionOnePost(postId))
+    yield put(actionAddLikePostFeedType(likes))
+  }
+}
 
 
 export function* changeLikePostWatcher() {
   yield takeLeading("CHANGE_LIKE_POST", changeLikePostWorker)
 }
 
+//change like in post feed
+export const actionChangeFeedLike = (likeId, postId) =>
+({
+    type:"CHANGE_LIKE_POST_FEED", likeId,postId
+})
+
+export function* changeLikePostFeedWatcher() {
+  yield takeLeading("CHANGE_LIKE_POST_FEED", changeLikePostFeedWorker)
+}
+
 // create and edit post
 
 function* editPostWorker({state }) {
@@ -480,10 +506,14 @@ function* clearAllDataWorker() {
   const logOut = yield put (actionAuthLogout())
   if (logOut) {
     history.push('/input')
-      yield put(actionClearDataUserType())
-      yield put(actionClearFeedPostsType())
-      yield put(actionClearAboutMeType())
-      yield put(actionAllClearPromiseType())
+    yield all([
+
+       put(actionClearDataUserType()),
+       put(actionClearFeedPostsType()),
+       put(actionClearAboutMeType()),
+       put(actionAllClearPromiseType())
+    ])
+      
     
   }
 }