Update component Like and add gallery icon to PostCard

src/App.scss

@@ -260,7 +260,6 @@ main {
    rgba(29,253,182,1) 100%);
   transition: 0.3s;
   right:0;
-
 }
 .LoginPage{
   margin:150px;

src/actions/index.js

@@ -359,7 +359,7 @@ export const actionOnePost = (_id) =>
           images{_id url originalFileName}
           comments {
               _id createdAt text 
-              likes { _id owner {_id}}   
+              likes { _id owner {_id login nick avatar {url} }}   
               owner {_id login nick
                       avatar {url}
                   }
@@ -368,9 +368,12 @@ export const actionOnePost = (_id) =>
                   }
                  answerTo{_id} 
               }
-          likes{ _id
-              owner{_id}
-          }
+              likes{
+                _id
+                owner{				
+                   _id login avatar {url}
+                  }
+            }
           owner {_id login nick
               avatar {url}
               }

src/components/EditAvatar.jsx

@@ -7,7 +7,7 @@ import {
   actionUserUpdate,
 } from '../actions'
 import React, { useState, useEffect } from 'react'
-import { Basic, ConstructorModal } from '../helpers'
+import { Dropzone, ConstructorModal } from '../helpers'
 import { Input } from './Input'
 import {actionSetAvatarTypeSaga} from '../redux/saga'
 const EditAvatar = ({
@@ -45,7 +45,7 @@ const EditAvatar = ({
           flexDirection: 'column',
         }}
       >
-        <Basic onLoad={onFileDrop} />
+        <Dropzone onLoad={onFileDrop} />
 
         {fileStatus?.payload?.url && (
           <Image

src/components/Like.jsx

@@ -1,94 +0,0 @@
-import { Avatar, Col, Row } from 'antd'
-import { ConstructorModal } from '../helpers'
-import { Link } from 'react-router-dom'
-import user from '../materials/user.png'
-import { HeartOutlined, HeartFilled } from '@ant-design/icons'
-import React, { useState } from 'react'
-import { LinkToUser } from './LinkToUser'
-import {
-  actionChangeLike
-} from '../redux/saga'
-import { connect } from 'react-redux'
-
-export const Likes = ({ likes }) => {
-  return (
-    <>
-      <div className="Modal">
-        {likes &&
-          likes?.map(({owner:{_id,login, avatar}}) => (
-            <LinkToUser _id={_id} login={login} avatar={avatar} size={50} padding={'0px'} />
-          ))}
-      </div>
-    </>
-  )
-}
-export const Like = ({
-  my_Id,
-  postId,
-  addLike,
-  deleteLike,
-  likes = [],
-  changeLike,
-  children,
-}) => {
-  const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
-  // const changeLike = () =>
-  //   likeId ? deleteLike(likeId, postId) : addLike(postId)
-console.log('like id in component', likeId)
-  const [isModalVisible, setIsModalVisible] = useState(false)
-
-  const showModal = () => {
-    setIsModalVisible(true)
-  }
-  return (
-    <>
-      <div style={{ display: 'flex' }}>
-        <h3 onClick={() => changeLike(likeId, postId)}>
-       
-          {likeId ? (
-            <HeartFilled
-              style={{color:'red'}}
-              className='Like'
-            />
-          ) : (
-            <HeartOutlined className='UnLike' />
-          )}
-        </h3>
-        {likes.length ? (
-          <h3 style={{ cursor: 'pointer', padding: '3px'}} onClick={showModal}>
-            {' '}
-            {likes.length} likes
-          </h3>
-        ) : (
-          <h3 style={{ cursor: 'pointer', padding: '3px' }}> 0 likes</h3>
-        )}
-      </div>
-      <ConstructorModal
-        title={'Likes'}
-        isModalVisible={isModalVisible}
-        setIsModalVisible={setIsModalVisible}
-      >
-        <Likes likes={likes} />
-      </ConstructorModal>
-    </>
-  )
-}
-const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
-  <Like
-    my_Id={my_Id}
-    likes={likes}
-    postId={postId}
-    changeLike={changeLike}
-  >
-    <Likes likes={likes} />
-  </Like>
-)
-
-export const CLike = connect(
-  (state) => ({
-    my_Id: state.auth?.payload?.sub?.id || '',
-  }),
-  {
-    changeLike: actionChangeLike
-  },
-)(AllLikeComponent)

src/components/PostCard.jsx

@@ -1,36 +0,0 @@
-import photoNotFound from '../materials/photoNotFound.png'
-import { Link } from 'react-router-dom'
-
-export const Card = ({ post }) => (
-    <>
-      <Link key={post?._id} to={`/post/${post?._id}`}>
-      {post?.images && post?.images[0] && post.images[0]?.url ? (
-        <div className='Wrapper'>
-          <img
-            className="Card"
-            src={'/' + post.images[0].url}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-            }}
-          />
-          </div>
-      ) : (
-          <div className='Wrapper'>
-          <img
-            className="Card"
-            src={photoNotFound}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-            }}
-            />
-          </div>
-          )
-        
-        }
-      </Link>
-    </>
-  )

src/components/like/Like.jsx

@@ -0,0 +1,60 @@
+import { Avatar, Col, Row } from 'antd'
+import { Link } from 'react-router-dom'
+import { HeartOutlined, HeartFilled } from '@ant-design/icons'
+import React, { useState } from 'react'
+import {
+  actionChangeLike
+} from '../../redux/saga'
+import { connect } from 'react-redux'
+import LikeList  from './LikeList'
+import ModalLikes from './ModalLikes'
+export const Like = ({
+  my_Id,
+  postId,
+  addLike,
+  deleteLike,
+  likes = [],
+  changeLike,
+  children,
+}) => {
+  const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
+console.log('like id in component', likeId)
+
+  return (
+    <>
+      <div style={{ display: 'flex' }}>
+        <h3 onClick={() => changeLike(likeId, postId)}>
+       
+          {likeId ? (
+            <HeartFilled
+              style={{color:'red'}}
+              className='Like'
+            />
+          ) : (
+            <HeartOutlined className='UnLike' />
+          )}
+        </h3>
+        <ModalLikes likes={likes}/>
+      </div>
+    </>
+  )
+}
+const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
+  <Like
+    my_Id={my_Id}
+    likes={likes}
+    postId={postId}
+    changeLike={changeLike}
+  />
+ 
+)
+  {/* <LikeList likes={likes} />
+  </Like>  */}
+export const CLike = connect(
+  (state) => ({
+    my_Id: state.auth?.payload?.sub?.id || '',
+  }),
+  {
+    changeLike: actionChangeLike
+  },
+)(AllLikeComponent)

src/components/like/LikeList.jsx

@@ -0,0 +1,23 @@
+import { LinkToUser } from '../LinkToUser'
+
+const LikeList = ({ likes }) => {
+    console.log('likes ', likes)
+  return (
+    <>
+      <div className="Modal">
+        {likes &&
+          likes?.map(({ owner: { _id, login, avatar } }) => (
+            <LinkToUser
+              _id={_id}
+              login={login}
+              avatar={avatar}
+              size={50}
+              padding={'0px'}
+            />
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default LikeList

src/components/like/ModalLikes.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { ConstructorModal } from '../../helpers'
+import LikeList from './LikeList'
+const ModalLikes = ({ likes }) => {
+    const [isModalVisible, setIsModalVisible] = useState(false)
+    const showModal = () => {
+      setIsModalVisible(true)
+    }
+    return (
+      <>
+        {likes.length ? (
+          <h3 style={{ cursor: 'pointer', padding: '3px' }} onClick={showModal}>
+            {' '}
+            {likes.length} likes
+          </h3>
+        ) : (
+          <h3 style={{ cursor: 'pointer', padding: '3px' }}> 0 likes</h3>
+        )}
+  
+        <ConstructorModal
+          title={'Likes'}
+          isModalVisible={isModalVisible}
+          setIsModalVisible={setIsModalVisible}
+        >
+          <LikeList likes={likes} />
+        </ConstructorModal>
+      </>
+    )
+  }
+  
+export default ModalLikes

src/components/Carousel.jsx

@@ -1,6 +1,6 @@
 import { Carousel } from 'antd'
 import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
-import photoNotFound from '../materials/photoNotFound.png'
+import defaultPhoto from '../../materials/default-photo.png'
 
 const SampleNextArrow = (props) => {
     const { onClick } = props
@@ -54,7 +54,7 @@ const SampleNextArrow = (props) => {
               )
             ) : (
               <div >
-                <img className="PostImage" src={photoNotFound} />
+                <img className="PostImage" src={defaultPhoto} />
               </div>
             )}
           </Carousel>

src/components/post/PostCard.jsx

@@ -0,0 +1,63 @@
+import defaultPhoto from '../../materials/default-photo.png'
+import { Link } from 'react-router-dom'
+import galery from '../../materials/gallery-icon.png'
+export const Card = ({ post }) => (
+    <>
+    <Link key={post?._id} to={`/post/${post?._id}`}>
+      {
+        post?.images && post?.images.length > 1 ?
+        ( 
+        <div className='Wrapper'>
+        <img src={galery} style={{
+              
+              position: 'fixed',
+            right: '0',
+  zIndex:'2',
+                top: '0',
+                width: '50px', height: '50px',
+                margin:'10px'
+          }} />
+              <img
+            className="Card"
+            src={'/' + post.images[0].url}
+            style={{
+              width: '250px',
+              height: '250px',
+              objectFit: 'cover',
+              position:'relative'
+            }}
+          />
+   
+        </div>)
+:
+
+      post?.images && post?.images[0] && post.images[0]?.url ? (
+        <div className='Wrapper'>
+          <img
+            className="Card"
+            src={'/' + post.images[0].url}
+            style={{
+              width: '250px',
+              height: '250px',
+              objectFit: 'cover',
+            }}
+          />
+          </div>
+      ) : (
+          <div className='Wrapper'>
+          <img
+            className="Card"
+            src={defaultPhoto}
+            style={{
+              width: '250px',
+              height: '250px',
+              objectFit: 'cover',
+            }}
+            />
+          </div>
+          )
+      
+        }
+      </Link>
+    </>
+  )

src/helpers/index.js

@@ -32,7 +32,7 @@ export const ConstructorModal = ({
   )
 }
 
-export function Basic({ onLoad }) {
+export function Dropzone({ onLoad }) {
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
   const files = acceptedFiles.map((file) => (
     <li key={file.path}>

src/pages/explorePosts/index.js

@@ -4,7 +4,7 @@ import {
     actionFullExplorePosts,
   } from '../../actions'
   import { Row, Col } from 'antd'
-  import { Card } from '../../components/PostCard'
+  import { Card } from '../../components/post/PostCard'
   import React, { useEffect, useState } from 'react'
   import { connect } from 'react-redux'
   import {

src/pages/feedPosts/index.js

@@ -10,7 +10,10 @@ import {
   actionDeleteFullLikeForFeed,
   actionAddFullLike,
 } from '../../actions'
-import { actionClearFeedPostsType,actionAddCommentFeedTypeSaga } from
+import {
+  actionClearFeedPostsType,
+  actionAddCommentFeedTypeSaga
+} from
   '../../redux/reducers/feedReducer'
 import { Link } from 'react-router-dom'
 import { Provider, connect } from 'react-redux'
@@ -21,8 +24,8 @@ import { Row, Col } from 'antd'
 import LinkToUser from '../../components/LinkToUser'
 import { Comments } from '../../components/comment/Comment'
 import  AddComment from '../../components/comment/AddComment'
-import { Like, Likes } from '../../components/Like'
-import { MyCarousel } from '../../components/Carousel'
+// import { Like, Likes } from '../../components/like/Like'
+import { MyCarousel } from '../../components/post/Carousel'
 import load from '../../materials/load.gif'
 const MyPostFeed = ({
   // myData,
@@ -164,25 +167,25 @@ export const CPostForFeed = connect(
   },
 )(MyPostFeed)
 
-const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) => (
-  <Like
-    my_Id={my_Id}
-    addLike={addLike}
-    deleteLike={deleteLike}
-    likes={likes}
-    postId={postId}
-  >
-    <Likes likes={likes} />
-  </Like>
-)
-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)
+// const AllLikeComp = ({ my_Id, addLike, deleteLike, likes, postId }) => (
+//   <Like
+//     my_Id={my_Id}
+//     addLike={addLike}
+//     deleteLike={deleteLike}
+//     likes={likes}
+//     postId={postId}
+//   >
+//     <Likes likes={likes} />
+//   </Like>
+// )
+// 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/onePost/index.js

@@ -13,14 +13,14 @@ import { CComments, CCommentsOnePost } from '../../components/comment/Comment'
 import { CPostEditor } from '../createAndEditPost'
 import  AddComment from '../../components/comment/AddComment'
 import { actionFullOnePostSaga,actionAddFullCommentSaga } from '../../actions/typeSaga/postActionSaga'
-import { CLike} from '../../components/Like'
+import { CLike} from '../../components/like/Like'
 import { ConstructorModal } from '../../helpers'
 import React, { useState, useEffect } from 'react'
 import {
   actionAddFullCommentFeed,
 } from '../../redux/saga'
 import { LinkToUser } from '../../components/LinkToUser'
-import { MyCarousel } from '../../components/Carousel'
+import { MyCarousel } from '../../components/post/Carousel'
 import {EditMyPostButton} from '../../components/EditPostButton'
 
 

src/pages/profilePage/index.js

@@ -1,7 +1,7 @@
 import { actionOnePost, actionUploadFile } from '../../actions'
 import user from '../../materials/user.png'
 import React, { useState, useEffect } from 'react'
-import { Card } from '../../components/PostCard'
+import { Card } from '../../components/post/PostCard'
 import ListOfUsers from '../../components/ListOfUsers'
 import { connect } from 'react-redux'
 import { Avatar, Button } from 'antd'