Add in modal window subscribe

src/components/LinkToUser.jsx

@@ -1,7 +1,7 @@
 import user from '../materials/user.png'
 import { Link } from 'react-router-dom'
 import { Avatar, Col, Row } from 'antd'
-
+import { CSubscribeLinkUser } from '../components/Subscribe' 
 export const LinkToUser = ({
     _id,
     avatar,
@@ -14,6 +14,51 @@ export const LinkToUser = ({
   return (
     // <Row style={{ margin:'10px', marginBottom:'20px' }}>
  
+    <Row style={{ margin:'10px', marginBottom:'20px' }}>
+      <Link
+        to={`/profile/${_id}`}
+        style={{
+          display: 'flex',
+          padding: padding,
+          flexDirection: 'row',
+          fontSize: font,
+              }}
+              onClick={onClick}
+              key={key}
+      >
+        <Col offset={1} className="gutter-row" >
+          {avatar ? (
+            <Avatar
+              size={size}
+              src={'/' + avatar?.url}
+              style={{ marginRight: '3px' }}
+            />
+          ) : (
+            <Avatar size={size} src={user} style={{ marginRight: '3px' }} />
+          )}
+        </Col>
+        <Col offset={2} style={{marginTop:'5px'}}>
+          <h3> {login || 'Anon'}</h3>
+        </Col>
+      {/* <Subscribe  */}
+      </Link>
+      
+    </Row>
+  )
+}
+
+
+export const LinkWithSubscribe =  ({
+  _id,
+  avatar,
+  login,
+  size,
+  font = '15px',
+  padding = '10px',
+  onClick, key,
+  myId
+}) => {
+  return (
     <Row style={{ margin:'10px', marginBottom:'20px' }}>
       <Link
         to={`/profile/${_id}`}
@@ -41,6 +86,19 @@ export const LinkToUser = ({
           <h3> {login || 'Anon'}</h3>
         </Col>
       </Link>
+      {
+        console.log('my_id', myId)}
+      
+       { myId == _id ?
+          console.log('DDDDDDDDDD') :
+        <div style={{
+            right: '0',
+    position: 'absolute', marginRight:'20px'}}>
+      
+        <CSubscribeLinkUser followId={_id} />
+        </div>
+      }
+     
     </Row>
   )
 }

src/components/ListOfUsers.jsx

@@ -1,6 +1,7 @@
 import { ConstructorModal } from '../helpers'
 import { ResultUserFind } from './Search_Users'
 import React, { useState } from 'react'
+import LinkToUser, {LinkWithSubscribe} from '../components/LinkToUser'
 export const ListOfUsers = ({
   listResult,
   listUsers,
@@ -33,12 +34,22 @@ export const ListOfUsers = ({
         isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
       >
-        <ResultUserFind
+         
+     <div className="">
+      {listUsers?.map(({ _id, login, avatar }) => (
+       
+        <LinkToUser _id={_id} login={login}
+        
+          avatar={avatar} size={40} padding={'0px'}
+          onClick={handleCancel} />
+      ))}
+      </div>
+        {/* <ResultUserFind
           size={'40px'}
           onPageData={onPageData}
           handleCancel={handleCancel}
           userFind={listResult}
-        />
+        /> */}
       </ConstructorModal>
     </>
   )

src/components/Search_Users.jsx

@@ -6,7 +6,7 @@ import { actionSearchUser } from '../actions'
 import {UserOutlined } from '@ant-design/icons'
 
 import { actionFullProfilePageUser } from '../redux/saga'
-import LinkToUser from './LinkToUser'
+import { LinkWithSubscribe } from './LinkToUser'
 export const ResultUserFind = ({
   userFind = [],
   handleCancel, 
@@ -17,7 +17,7 @@ export const ResultUserFind = ({
     <div className="ResultUserFind">
       {userFind?.map(({ _id, login, avatar }) => (
        
-        <LinkToUser _id={_id} login={login}
+        <LinkWithSubscribe _id={_id} login={login}
         
           avatar={avatar} size={40} padding={'0px'}
           onClick={handleCancel} key={_id} />

src/components/Subscribe.jsx

@@ -49,5 +49,15 @@ export const CSubscribe = connect((state) => ({
 }),
     {
       changeSubscribe:actionChangeSubscribeSaga
-    }
+  }
+)(Subscribe)
+
+export const CSubscribeLinkUser = connect((state) => ({
+  myId: state.auth?.payload?.sub?.id,
+  aboutMeFollowing: state.myData?.aboutMe?.following,
+  // followId: state.userData?.aboutUser?._id,
+}),
+  {
+    changeSubscribe:actionChangeSubscribeSaga
+  }
 )(Subscribe)

src/components/like/Like.jsx

@@ -34,7 +34,7 @@ console.log('like id in component', likeId)
             <HeartOutlined className='UnLike' />
           )}
         </h3>
-        <ModalLikes likes={likes}/>
+        <ModalLikes likes={likes} myId={ my_Id} />
       </div>
     </>
   )

src/components/like/LikeList.jsx

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

src/components/like/ModalLikes.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { ConstructorModal } from '../../helpers'
 import LikeList from './LikeList'
-const ModalLikes = ({ likes }) => {
+const ModalLikes = ({ likes, myId }) => {
     const [isModalVisible, setIsModalVisible] = useState(false)
     const showModal = () => {
       setIsModalVisible(true)
@@ -22,7 +22,7 @@ const ModalLikes = ({ likes }) => {
           isModalVisible={isModalVisible}
           setIsModalVisible={setIsModalVisible}
         >
-          <LikeList likes={likes} />
+                <LikeList likes={likes} myId={myId} />
         </ConstructorModal>
       </>
     )