temp commit

src/components/AvaLoginBlock.js

@@ -1,6 +1,9 @@
 import {Avatar} from "@mui/material";
 import avatar from "../assets/img/avatarGolub.jpg";
 import styled from "styled-components";
+import {setActiveUserAllPosts, setUserDataAsync} from "../store/actionCreators/ActionCreators";
+import {useNavigate} from "react-router-dom";
+import {connect} from "react-redux";
 
 const Nick = styled.div`
   margin-left: 20px;
@@ -12,13 +15,43 @@ const Nick = styled.div`
 const AvatarNickWrapper = styled.div`
   display: flex`
 
-function AvaLoginBlock({name, urlAva}) {
+function AvaLoginBlock({user, closeModal, setActiveUserAllPosts, setUserDataAsync, activeUserPosts}) {
+    // console.log(user)
+    const navigate = useNavigate();
+
+    const name = user.owner?.login || user.login;
+    const urlAva = user.owner?.avatar || user.avatar
+
+    function chooseUser(user) {
+        // console.log(user)
+        const userId = user.owner ? user.owner._id : user._id;
+        // console.log(userId)
+        closeModal();
+        setUserDataAsync(userId, false)
+        navigate("/profile")
+        activeUserPosts && activeUserPosts.length === 0 &&
+        setActiveUserAllPosts(null)
+    }
+
     return <>
-        <AvatarNickWrapper>
+        <AvatarNickWrapper onClick={() => chooseUser(user)}>
             <Avatar src={urlAva ? urlAva.url : avatar} alt={"avatar"} sx={{border: "1px solid grey"}}/>
-            <Nick>{name}</Nick>
+            <Nick>{name ? name : "Anon"}</Nick>
         </AvatarNickWrapper>
     </>
 }
 
-export default AvaLoginBlock;
+const mapStateToProps = (state) => {
+    return {
+        activeUserPosts: state.activeUserPosts,
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setActiveUserAllPosts: (posts) => dispatch(setActiveUserAllPosts(posts)),
+        setUserDataAsync: (id, isOwner) => dispatch(setUserDataAsync(id, isOwner)),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AvaLoginBlock);

src/components/Comment.js

@@ -6,11 +6,10 @@ const AnswerWrap = styled.div`
   margin-left: 30px`
 
 
- const Comment = ({commentData}) => {
-console.log(commentData.owner.avatar)
+ const Comment = ({commentData, closeModal}) => {
     return (
         <>
-            <AvaLoginBlock name={commentData.owner.login} urlAva={commentData.owner.avatar}
+            <AvaLoginBlock user={commentData.owner} closeModal={closeModal}
                            styled={{height: "30px"}}/>
             <p>{commentData.text}</p>
             <TimeOfCreation createdTime={commentData.createdAt}/>

src/components/CommentsBlock.js

@@ -9,12 +9,12 @@ const CommentsBlockStyled = styled.div`
 `
 
 
-function CommentsBlock({post}) {
+function CommentsBlock({post, closeModal}) {
     return (<CommentsBlockStyled>
             <div>комент</div>
             {post && post.comments &&
             <>
-                {post.comments.map((item, i) => <Comment commentData={item} key={i}/>)}
+                {post.comments.map((item, i) => <Comment closeModal={closeModal} commentData={item} key={i}/>)}
             </>}
         </CommentsBlockStyled>
     )

src/components/Feed.js

@@ -35,8 +35,6 @@ function Feed() {
         }
     })
 
-
-
     function getData() {
         gqlPostsFeed(listIdPosts.length).then((res)=>res.json()).then((response) => {
             setListIdPosts([...listIdPosts, ...response.data.PostFind])
@@ -54,11 +52,9 @@ function Feed() {
         }
     }
 
-
     return (<>
             <OwnerHeader/>
             <FeedContainer>
-                <button onClick={()=>getData()}>click</button>
                 {listIdPosts && listIdPosts.map((post, index) =>
                     <FeedPostWrapper key={index}>
                         <PostFeed post={post} key={index}/>

src/components/LikeBlock.js

@@ -4,6 +4,8 @@ import {useEffect, useState} from "react";
 import {connect} from "react-redux";
 import styled from 'styled-components';
 import {gqlAddLike, gqlDeleteLike} from "../shared/services&utilits/gqlRequest";
+import ModalWindow from "./ModalWindow";
+import UserList from "./UserList";
 
 const LikesWrapper = styled.div`
   display: flex;
@@ -12,9 +14,16 @@ const LikesWrapper = styled.div`
 const TextStyled = styled.p`
   margin-left: 10px`
 
+const UserListWrapper = styled.div`
+  width: 30vw;
+  height: 50vh;
+  display: flex;
+`
+
 function LikeBlock({likes, ownerId, postId, updatePostData}) {
 
     const [isLiked, setIsLiked] = useState(false)
+    const [isModal, setModal] = useState(false);
 
     useEffect(() => {
         if (likes && likes.length && likes.find((item) => item.owner._id === ownerId)) {
@@ -24,6 +33,9 @@ function LikeBlock({likes, ownerId, postId, updatePostData}) {
         }
     }, [])
 
+    function toggleModalWindow() {
+        setModal(!isModal)
+    }
 
     const addLikeHandler = async () => {
         await gqlAddLike(postId);
@@ -40,10 +52,15 @@ function LikeBlock({likes, ownerId, postId, updatePostData}) {
     return (<LikesWrapper>
         {isLiked ? <FavoriteIcon onClick={deleteLike} style={{color: "red"}}/> :
             <FavoriteBorderIcon onClick={addLikeHandler}/>}
-        <TextStyled>{likes && likes.length || "0"} likes</TextStyled>
+        <TextStyled onClick={toggleModalWindow}>{likes && likes.length || "0"} likes</TextStyled>
+        {isModal && <ModalWindow closeModal={toggleModalWindow}>
+            <UserListWrapper>
+                <UserList users={likes} closeModal={toggleModalWindow}/>
+            </UserListWrapper>
+        </ModalWindow>}
 
     </LikesWrapper>)
-};
+}
 
 const mapStateToProps = (state) => {
     return {

src/components/ModalWindow.js

@@ -14,8 +14,8 @@ const ModalWindowWrapper = styled.div`
 `
 
 const InnerWrapper = styled.div`
-  width: 80%;
-  height: 80%;
+  width: fit-content;
+  height: fit-content;
   background-color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   border-radius: 10px;

src/components/OwnerHeader.js

@@ -2,7 +2,12 @@ import {Avatar} from '@mui/material';
 import styled from 'styled-components';
 import {connect} from "react-redux";
 import {useEffect} from "react";
-import {changeAuthData, changeAuthDataAsync, setUserDataAsync} from "../store/actionCreators/ActionCreators";
+import {
+    changeAuthData,
+    changeAuthDataAsync,
+    setActiveUserData,
+    setUserDataAsync
+} from "../store/actionCreators/ActionCreators";
 import {useNavigate} from "react-router-dom";
 import avatar from "../assets/img/avatarGolub.jpg"
 
@@ -38,7 +43,8 @@ const OwnerHeader = (props) => {
     }
     const clickHandler=()=>{
         navigate("/profile")
-        props.setUserDataAsync(props.id, true)
+        // props.setUserDataAsync(props.id, true)
+        props.setActiveUserData(props.ownerData);
 
     }
     return (
@@ -64,6 +70,7 @@ const mapDispatchToProps = (dispatch) => {
         changeAuthData: (authData) => dispatch(changeAuthData(authData)),
         changeAuthDataAsync: (authData) => dispatch(changeAuthDataAsync(authData)),
         setUserDataAsync: (id, isOwner) => dispatch(setUserDataAsync(id, isOwner)),
+        setActiveUserData: (user) => dispatch(setActiveUserData(user))
     }
 }
 

src/components/Post.js

@@ -1,42 +1,10 @@
-import {useEffect, useState} from "react";
-import picture from "../assets/img/brokenPicture.png";
-import AutoAwesomeMotionIcon from "@mui/icons-material/AutoAwesomeMotion";
-import ModalWindow from "./ModalWindow";
+import ImgBlock from "./ImgBlock";
 import AvaLoginBlock from "./AvaLoginBlock";
 import CommentsBlock from "./CommentsBlock";
-import styled from "styled-components";
 import LikeBlock from "./LikeBlock";
-import {gqlOnePost} from "../shared/services&utilits/gqlRequest";
 import CommentMessageBlock from "./CommentMessageBlock";
-import ImgBlock from "./ImgBlock";
-
+import styled from "styled-components";
 
-const PostWrapper = styled.div`
-  position: relative;
-  display: flex;
-  min-width: 300px;
-  max-width: 300px;
-  margin: 15px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
-`
-const LogoManyImg = styled.div`
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  width: 25px;
-  height: 35px;
-  transform: scaleX(-1);
-`
-const PicsInModalWrapper = styled.div`
-  width: 50%;
-  max-height: 100%;
-  margin: 30px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
-`
 const AvaLoginWrap = styled.div`
   display: flex;
   margin-top: 30px;
@@ -55,72 +23,41 @@ const Title = styled.p`
 `
 const Text = styled.p`
 `
+const PicsInModalWrapper = styled.div`
+  width: 50%;
+  max-height: 100%;
+  margin: 30px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+`
 
-
-function Post({postId}) {
-    const [isModal, setModal] = useState(false);
-    const [postData, setPostData] = useState(null);
-
-    useEffect(() => {
-        if (!postData) {
-            gqlOnePost(postId).then(res => res.json())
-                .then(data => setPostData(data["data"].PostFindOne))
-        }
-    }, [])
-
-    function updatePostData() {
-        gqlOnePost(postId).then(res => res.json())
-            .then(data => setPostData(data["data"].PostFindOne))
-    }
-
-
-    function toggleModalWindow() {
-        setModal(!isModal)
-    }
-
-
-    console.log(postData)
-
-
-    // console.log(post)
-    return (
-        <>
-            {postData &&
-            <PostWrapper onClick={() => toggleModalWindow()}>
-                <img src={postData.images ? postData.images[0].url : picture} alt="post" style={{width: "100%"}}/>
-                {
-                    postData.images?.length > 1 && <LogoManyImg>
-                        <AutoAwesomeMotionIcon/>
-                    </LogoManyImg>
-                }
-                {isModal &&
-                <ModalWindow closeModal={toggleModalWindow}>
-                    <PicsInModalWrapper>
-                        <ImgBlock images={postData.images}/>
-                    </PicsInModalWrapper>
-                    <InfoBlockInModalWrapper>
-
-                        <AvaLoginWrap>
-                            <AvaLoginBlock urlAva={postData.owner.avatar} name={postData.owner.login}/>
-                        </AvaLoginWrap>
-                        <DescriptionPostWrapper>
-                            <Title>Title:{postData.title}</Title>
-                            <Text>{postData.text}</Text>
-                        </DescriptionPostWrapper>
-
-                        <CommentsBlock post={postData}/>
-                        {postData.likes &&
-                        <LikeBlock likes={postData.likes} postId={postData._id} updatePostData={updatePostData}/>
-                        }
-
-                        <CommentMessageBlock postId={postId} updatePostData={updatePostData}/>
-
-                    </InfoBlockInModalWrapper>
-                </ModalWindow>
+function Post({postData, updatePostData ,closeModal}) {
+console.log(postData.owner)
+
+    return (<>
+            <PicsInModalWrapper>
+                <ImgBlock images={postData.images}/>
+            </PicsInModalWrapper>
+            <InfoBlockInModalWrapper>
+
+                <AvaLoginWrap>
+                    <AvaLoginBlock closeModal={closeModal} user={postData.owner}/>
+                </AvaLoginWrap>
+                <DescriptionPostWrapper>
+                    <Title>Title:{postData.title}</Title>
+                    <Text>{postData.text}</Text>
+                </DescriptionPostWrapper>
+                <CommentsBlock post={postData} closeModal={closeModal}/>
+                {postData.likes &&
+                <LikeBlock likes={postData.likes} postId={postData._id} updatePostData={updatePostData}/>
                 }
-            </PostWrapper>
-            }
+                <CommentMessageBlock postId={postData._id} updatePostData={updatePostData}/>
+            </InfoBlockInModalWrapper>
         </>
+
     )
 }
 

src/components/PostFeed.js

@@ -5,6 +5,8 @@ import AvaLoginBlock from "./AvaLoginBlock";
 import styled from "styled-components";
 import LikeBlock from "./LikeBlock";
 import TimeOfCreation from "./TimeOfCreation";
+import ModalWindow from "./ModalWindow";
+import Post from "./Post";
 
 const Title = styled.p`
 `
@@ -20,9 +22,15 @@ const LikeWrapper = styled.div`
   display: flex;
   justify-content: space-between;
 `
+const InnerModalWrapper = styled.div`
+  width: 60vw;
+  height: 80vh;
+  display: flex;
+`
 
 function PostFeed({post}) {
     const [postFeedData, setPostFeedData] = useState(null);
+    const [isModal, setModal] = useState(false);
     useEffect(() => {
         if (!postFeedData) {
             gqlOnePost(post._id).then(res => res.json())
@@ -35,14 +43,15 @@ function PostFeed({post}) {
             .then(data => setPostFeedData(data["data"].PostFindOne))
     }
 
-    function handler() {
-        // console.log(postFeedData.comments)
+    function toggleModalWindow() {
+        setModal(!isModal)
     }
 
-    // console.log(postFeedData)
+    console.log(postFeedData)
     return (<>
             {post && postFeedData && <>
-                <AvaLoginBlock name={postFeedData.owner && postFeedData.owner.login || "Anon"} urlAva={postFeedData.owner && postFeedData.owner.avatar || null}/>
+                <AvaLoginBlock user={postFeedData.owner}
+                               closeModal={toggleModalWindow}/>
 
                 <ImgWrapper>
                     <ImgBlock images={post.images}/>
@@ -53,14 +62,21 @@ function PostFeed({post}) {
                 </LikeWrapper>
                 <Title>{postFeedData.title}</Title>
                 <Text>{postFeedData.text}</Text>
-                <button onClick={handler}>Show all comments
+                <button onClick={toggleModalWindow}>Show all comments
                     ({postFeedData.comments && postFeedData.comments.length || 0})
                 </button>
+                {isModal &&
+                <ModalWindow closeModal={toggleModalWindow}>
+                    <InnerModalWrapper>
+                    <Post closeModal={toggleModalWindow} postData={postFeedData} updatePostData={updPostData}/>
+                    </InnerModalWrapper>
+                </ModalWindow>
+                }
             </>
             }
         </>
     )
-};
+}
 
 
 export default PostFeed;

src/components/PostPreview.js

@@ -0,0 +1,77 @@
+import {useEffect, useState} from "react";
+import picture from "../assets/img/brokenPicture.png";
+import AutoAwesomeMotionIcon from "@mui/icons-material/AutoAwesomeMotion";
+import ModalWindow from "./ModalWindow";
+import styled from "styled-components";
+import {gqlOnePost} from "../shared/services&utilits/gqlRequest";
+import Post from "./Post";
+
+
+const PostWrapper = styled.div`
+  position: relative;
+  display: flex;
+  min-width: 300px;
+  max-width: 300px;
+  margin: 15px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+`
+const LogoManyImg = styled.div`
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  width: 25px;
+  height: 35px;
+  transform: scaleX(-1);
+`
+
+const InnerModalWrapper = styled.div`
+  width: 60vw;
+  height: 80vh;
+  display: flex;
+`
+
+
+function PostPreview({postId}) {
+    const [isModal, setModal] = useState(false);
+    const [postData, setPostData] = useState(null);
+ // console.log(postData)
+    useEffect(() => {
+        if (!postData) {
+            gqlOnePost(postId).then(res => res.json())
+                .then(data => setPostData(data["data"].PostFindOne))
+        }
+    }, [])
+
+    function updatePostData() {
+        gqlOnePost(postId).then(res => res.json())
+            .then(data => setPostData(data["data"].PostFindOne))
+    }
+
+    function toggleModalWindow() {
+        setModal(!isModal)
+    }
+// console.log(postData)
+    return (
+        <>
+            {postData &&
+            <PostWrapper onClick={() => toggleModalWindow()}>
+                <img src={postData.images ? postData.images[0].url : picture} alt="post" style={{width: "100%"}}/>
+                {
+                    postData.images?.length > 1 && <LogoManyImg>
+                        <AutoAwesomeMotionIcon/>
+                    </LogoManyImg>
+                }
+                {isModal &&
+                <ModalWindow closeModal={toggleModalWindow}>
+                    <InnerModalWrapper>
+                       <Post postData={postData} closeModal={toggleModalWindow} updatePostData={updatePostData}/>
+                    </InnerModalWrapper>
+                </ModalWindow>
+                }
+            </PostWrapper>
+            }
+        </>
+    )
+}
+
+export default PostPreview;

src/components/SubscribeButton.js

@@ -0,0 +1,40 @@
+import {connect} from "react-redux";
+import {useEffect, useState} from "react";
+import {gqlSubscribe, gqlUnSubscribe} from "../shared/services&utilits/gqlRequest";
+
+
+function SubscribeButton({followers, id, activeUserId}){
+    const [isSabscribed, setIsSabscribed] = useState(isAlreadySubscribed())
+
+    useEffect(()=>{
+        if (isAlreadySubscribed() && !isSabscribed){
+            setIsSabscribed(true)
+        }
+        if (!isAlreadySubscribed() && isSabscribed){
+            setIsSabscribed(false)
+        }
+    })
+
+    function isAlreadySubscribed() {
+        return followers && followers.find((follower)=>follower._id === id);
+    }
+
+    function clickHandler(){
+        if (!isSabscribed){
+            gqlSubscribe(id, activeUserId, followers)
+        } else {
+            gqlUnSubscribe(id, [])
+        }
+    }
+
+    console.log(isAlreadySubscribed())
+
+    return <button onClick={clickHandler}>{isSabscribed ? "unsabscribe" : "sabscribe"}</button>
+}
+const mapStateToProps = (state) => {
+    return {
+        id: state.auth.user.sub.id,
+        activeUserId: state.activeUser._id,
+    }
+}
+export default connect(mapStateToProps)(SubscribeButton)

src/components/UserContent.js

@@ -1,10 +1,17 @@
 import {connect} from "react-redux";
 import styled from 'styled-components';
-import {useEffect} from "react";
-import {setActiveUserAllPostsAsync, setUserDataAsync} from "../store/actionCreators/ActionCreators";
+import {useEffect, useState} from "react";
+import {
+    setActiveUserAllPosts,
+    setUserDataAsync,
+    setActiveUserAllPostsAsync
+} from "../store/actionCreators/ActionCreators";
 import avatar from "../assets/img/avatarGolub.jpg";
-import Post from "./Post";
+import PostPreview from "./PostPreview";
 import UserInfoBlock from "./UserInfoBlock";
+import ModalWindow from "./ModalWindow";
+import UserList from "./UserList";
+import SubscribeButton from "./SubscribeButton";
 
 
 const UserContentWrapper = styled.div`
@@ -38,6 +45,7 @@ const UserInfoWrapper = styled.div`
 const UserInfoBlockWrapper = styled.div`
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 `
 const AvatarWrapper = styled.div`
   width: 100px;
@@ -48,23 +56,47 @@ const AvatarWrapper = styled.div`
   display: flex;
   align-items: center;
 `
+const UserListWrapper = styled.div`
+  width: 30vw;
+  height: 50vh;
+  display: flex;
+`
 
 const tempUser = "62c1cc5e4535fc62e2a185ad"; // test - should be deleted
 
 
 function UserContent(props) {
+    const [isModal, setModal] = useState(false);
+    const [userList, setUserList] = useState("");
 
+    // console.log(props.activeUser?._id === props.id)
     useEffect(() => {
         if (!props.activeUser) {
             props.setUserDataAsync(props.id)
         }
-        if (props.activeUser && !props.activeUserPosts.length) {
+        if (props.activeUser && props.activeUserPosts === null) {
+            // props.setActiveUserAllPostsAsync(tempUser);
+
+            props.setActiveUserAllPostsAsync(props.activeUser._id)
+        }
+    })
 
-            props.setActiveUserAllPostsAsync(tempUser);
-            // props.setActiveUserAllPostsAsync(props.activeUser._id)
+    useEffect(()=>{
+        if(props.activeUserPosts && props.activeUserPosts[0] && props.activeUserPosts[0].owner && props.activeUser && props.activeUserPosts[0].owner._id !== props.activeUser._id ){
+            // console.log("2 useEffect")
+            props.setActiveUserAllPosts(null)
         }
     })
-    console.log(props.activeUserPosts)
+
+    // console.log(props.activeUserPosts)
+
+    function toggleModalWindow(userList) {
+        setModal(!isModal)
+
+        setUserList(userList)
+        // console.log(props.activeUser.followers)
+    }
+// console.log(props.activeUser?.followers)
     return (
         <>
             {props.activeUser && <UserContentWrapper>
@@ -79,15 +111,31 @@ function UserContent(props) {
                     </AvatarBlock>
                     <UserInfoBlockWrapper>
                         <UserInfoBlock count={props.activeUserPosts?.length} description={"posts"}/>
-                        <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
-                        <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
+                        <div onClick={()=>toggleModalWindow( props.activeUser.followers)}>
+                            <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
+                        </div>
+                        <div onClick={()=>toggleModalWindow( props.activeUser.following)}>
+                            <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
+                        </div>
                     </UserInfoBlockWrapper>
+
+
+                    {props.activeUser?._id === props.id && <button>fix profile</button> || <SubscribeButton followers={props.activeUser?.followers}/>}
+
+
                 </UserInfoWrapper>
 
                 {props.activeUserPosts &&
                 <PostsContainer>
-                    {props.activeUserPosts.map((post, index) => <Post activeUser={props.activeUser} postId={post._id} key={index}/>)}
+                    {props.activeUserPosts.map((post, index) => <PostPreview activeUser={props.activeUser}
+                                                                             postId={post._id} key={index}/>)}
                 </PostsContainer>}
+                {isModal && <ModalWindow closeModal={toggleModalWindow}>
+                    <UserListWrapper>
+                        <UserList users={userList} closeModal={toggleModalWindow}/>
+                    </UserListWrapper>
+                </ModalWindow>}
+
             </UserContentWrapper>
             }
         </>
@@ -107,6 +155,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setUserDataAsync: (id) => dispatch(setUserDataAsync(id)),
         setActiveUserAllPostsAsync: (id) => dispatch(setActiveUserAllPostsAsync(id)),
+        setActiveUserAllPosts: (posts) => dispatch(setActiveUserAllPosts(posts))
     }
 }
 

src/components/UserList.js

@@ -0,0 +1,31 @@
+import AvaLoginBlock from "./AvaLoginBlock";
+import styled from "styled-components";
+
+const UserListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+`
+const EveryUserWrapper = styled.div`
+  margin: 20px 0 0 30px;
+`
+
+function UserList({users, closeModal}) {
+    console.log(users)
+
+    return (
+        <>
+            <UserListWrapper>
+                {users && users.map((user, i) => <EveryUserWrapper key={i}>
+                    <AvaLoginBlock user={user}
+                                   closeModal={closeModal}
+                    />
+                </EveryUserWrapper>)}
+            </UserListWrapper>
+        </>
+    )
+}
+
+export default UserList;
+

src/shared/services&utilits/gqlRequest.js

@@ -157,14 +157,53 @@ export const gqlSendComment = (postId, text) => gql(
         },
     },
 )
-export const gqlPostsFeed=(skip)=> gql(` query allPosts($id:String!){
+export const gqlPostsFeed = (skip) => gql(` query allPosts($id:String!){
                 PostFind(query:$id){
                     _id   images{url _id originalFileName}
                 }
             }`, {
     id: JSON.stringify([{}, {
-        sort: [{ _id: -1 }],
+        sort: [{_id: -1}],
         skip: [skip || 0],
         limit: [10]
     }])
-})
+})
+
+
+export const gqlSubscribe = (my_Id, followId, oldFollowing) =>
+    gql(
+        `mutation subscribe($user:UserInput) {
+        UserUpsert(user: $user) {
+          _id following{_id login}
+          followers{
+            _id login
+          }
+        }
+      }
+      `,
+        {
+            user: {
+                _id: my_Id,
+                following: [...(oldFollowing || []), {_id: followId}],
+            },
+        },
+    )
+
+export const gqlUnSubscribe = (my_Id, oldFollowing) =>
+    gql(
+        `mutation unSubscribe($user:UserInput) {
+        UserUpsert(user: $user) {
+          _id following{_id login}
+          followers{
+            _id login
+          }
+        }
+      }
+      `,
+        {
+            user: {
+                _id: my_Id,
+                following: oldFollowing || [],
+            },
+        },
+    )

src/store/actionCreators/ActionCreators.js

@@ -61,7 +61,6 @@ export const setUserDataAsync = (id, isOwner) => {
             }else{
                 dispatch(setActiveUserData(responseData.data.UserFindOne))
             }
-
         }
 };
 
@@ -76,7 +75,7 @@ export const setActiveUserAllPostsAsync = (id)=>{
 
         const responseData = await response.json();
         dispatch(setActiveUserAllPosts(responseData.data.PostFind))
-        console.log(responseData.data.PostFind)
+        // console.log(responseData.data.PostFind)
     }
 }
 

src/store/rootReducer.js

@@ -12,7 +12,7 @@ const initialState = {
             }},
     },
     activeUser: null,
-    activeUserPosts: [],
+    activeUserPosts: null,
     ownerData: null,
     error: {
         auth: null,
@@ -33,7 +33,6 @@ const rootReducer = (state = initialState, action) => {
                 ...state, activeUser: action.payload,
             }
         case "SET_ACTIVE_USER_ALL_POSTS":
-            console.log(action.payload)
             return{
                 ...state,
                 activeUserPosts: action.payload