chenge avatar + subscrib

src/components/Auth.js

@@ -4,7 +4,16 @@ import {useState} from "react";
 import {connect} from "react-redux";
 import {changeAuthData, changeAuthDataAsync} from "../store/actionCreators/ActionCreators"
 import {useNavigate} from "react-router-dom";
+import {Logotip} from "../shared/styledComponents";
 
+const AuthWrapper = styled.div`
+  width: 100vw;
+  height: 80vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`
 
 const LogRegistrBlock = styled.div`
   max-width: 500px;
@@ -18,6 +27,9 @@ const LogRegistrBlock = styled.div`
   min-height: 350px;
   min-width: 350px;
 `
+const Logo = styled(Logotip)`
+  font-size: 50px;
+  margin-bottom: 50px`
 const StyledButtonSignIn = styled(Button)`
   color: ${(props) => props.authtype === "signIn" ? "red" : ""} !important;
 `
@@ -41,36 +53,39 @@ const Auth = (props) => {
     const inputPasswordHandler = (e) => {
         setPassword(e.target.value)
     }
+    const authBtnHandler = () => {
+        if (login && password) {
+            props.changeAuthDataAsync({login, password, authType, navigateCallback: navigate})
 
-    const authBtnHandler =  () => {
-        if(login && password){
-        props.changeAuthDataAsync({login, password, authType, navigateCallback: navigate})
-
-    }}
+        }
+    }
 
 
     return (
-        <LogRegistrBlock>
-            <ButtonGroup variant="text" aria-label="text button group">
-                <StyledButtonSignIn authtype={authType} onClick={(e) => btnHandler("signIn")}>Sign
-                    in</StyledButtonSignIn>
-                <StyledButtonSignUp authtype={authType} onClick={(e) => btnHandler("signUp")}>Sing
-                    up</StyledButtonSignUp>
-            </ButtonGroup>
-            {props.error && <p>{props.error}</p>}
-            <TextField id="outlined-login" label="login" variant="outlined" onChange={inputLoginHandler}/>
-            <TextField id="outlined-password" label="password" type="password" variant="outlined"
-                       onChange={inputPasswordHandler}/>
-            <Button disabled={!login || !password} onClick={authBtnHandler} variant="outlined">
-                {authType === "signIn" ? "SIGN IN" : "SIGN UP"}
-            </Button>
-        </LogRegistrBlock>
+        <AuthWrapper>
+            <Logo>=HIPSTAGRAM=</Logo>
+            <LogRegistrBlock>
+                <ButtonGroup variant="text" aria-label="text button group">
+                    <StyledButtonSignIn authtype={authType} onClick={(e) => btnHandler("signIn")}>Sign
+                        in</StyledButtonSignIn>
+                    <StyledButtonSignUp authtype={authType} onClick={(e) => btnHandler("signUp")}>Sing
+                        up</StyledButtonSignUp>
+                </ButtonGroup>
+                {props.error && <p>{props.error}</p>}
+                <TextField id="outlined-login" label="login" variant="outlined" onChange={inputLoginHandler}/>
+                <TextField id="outlined-password" label="password" type="password" variant="outlined"
+                           onChange={inputPasswordHandler}/>
+                <Button disabled={!login || !password} onClick={authBtnHandler} variant="outlined">
+                    {authType === "signIn" ? "SIGN IN" : "SIGN UP"}
+                </Button>
+            </LogRegistrBlock>
+        </AuthWrapper>
     )
 }
 
 const mapStateToProps = (state) => {
     return {
-        token: state.auth.token,
+        token: state.auth && state.auth.token,
         error: state.error.auth,
     }
 }

src/components/ChangeAvatarComponent.js

@@ -46,7 +46,7 @@ const SaveButton = styled(SendButton)`
 
 
 function ChangeAvatarComponent({ownerData, closeModal, setOwnerData, setActiveUserData}) {
-    const [avatarImagePreview, setAvatarImagePreview] = useState(ownerData && ownerData.avatar || null)
+    const [avatarImagePreview, setAvatarImagePreview] = useState(ownerData && ownerData.avatar || avatar)
 
 
     const loadFIle = async (file) => {

src/components/Comment.js

@@ -2,6 +2,7 @@ import AvaLoginBlock from "./AvaLoginBlock";
 import TimeOfCreation from "./TimeOfCreation";
 import styled from "styled-components";
 import {SpaceBetweenWrapper} from "../shared/styledComponents";
+import KeyboardReturnIcon from '@material-ui/icons/KeyboardReturn';
 
 const AnswerWrap = styled.div`
   margin-left: 30px;
@@ -22,6 +23,8 @@ const CommentText = styled.p`
   word-wrap: break-word;
   padding-right: 10px;
 `
+const TimeWrapper = styled.p`
+font-size: 12px;`
 
 const Comment = ({commentData, closeModal}) => {
     return (
@@ -30,18 +33,21 @@ const Comment = ({commentData, closeModal}) => {
                 <SpaceBetweenWrapper>
                     <AvaLoginBlock user={commentData.owner} closeModal={closeModal}
                                    styled={{height: "30px"}}/>
+                    <TimeWrapper>
                     <TimeOfCreation createdTime={commentData.createdAt}/>
+                    </TimeWrapper>
                 </SpaceBetweenWrapper>
                 <CommentText>{commentData.text}</CommentText>
 
                 {commentData.answers &&
                 <AnswerWrap>
+                    <KeyboardReturnIcon style={{transform: "scaleX(-1)"}}/>
                     {commentData.answers.map((item, i) => <Comment commentData={item} key={i}/>)}
                 </AnswerWrap>
                 }
             </CommentBlockStyled>
         </>
     )
-}
+};
 
 export default Comment;

src/components/CommentMessageBlock.js

@@ -3,14 +3,11 @@ import styled from "styled-components";
 import {gqlSendComment} from "../shared/services&utilits/gqlRequest";
 import {SendButton} from "../shared/styledComponents";
 
-
 const MessageWrapper = styled.div`
   display: flex;
   align-items: center;
     width: 100%;
 `
-
-
 const TextArea = styled.textarea`
   resize: none;
   width: 60%;

src/components/CommentsBlock.js

@@ -8,7 +8,6 @@ const CommentsBlockStyled = styled.div`
   box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
 `
 
-
 function CommentsBlock({post, closeModal}) {
     return (<CommentsBlockStyled>
             <div>comments:</div>

src/components/Feed.js

@@ -14,7 +14,6 @@ const FeedPostWrapper = styled.div`
   margin-bottom: 20px;
   width: 400px;
   box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
-
 `
 
 function Feed() {
@@ -62,7 +61,6 @@ function Feed() {
                 )}
             </FeedContainer>
         </>
-
     )
 }
 

src/components/ImgBlock.js

@@ -2,7 +2,6 @@ import picture from "../assets/img/brokenPicture.png";
 import Carousel from "react-material-ui-carousel";
 
 
-
 const ImgBlock = ({images}) => {
     return (
         <>

src/components/LikeBlock.js

@@ -15,9 +15,7 @@ const LikesWrapper = styled.div`
 `
 const TextStyled = styled.p`
   margin-left: 10px;
-  `
-
-
+`
 const UserListWrapper = styled.div`
   width: 30vw;
   height: 50vh;
@@ -54,10 +52,14 @@ function LikeBlock({likes, ownerId, postId, updatePostData}) {
     }
 
     return (<LikesWrapper>
-        {isLiked ? <FavoriteIcon onClick={deleteLike} style={{color: "red"}}/> :
-            <FavoriteBorderIcon onClick={addLikeHandler}/>}
+
+        {isLiked ?
+            <FavoriteIcon onClick={deleteLike} style={{color: "red"}}/>
+            : <FavoriteBorderIcon onClick={addLikeHandler}/>}
         <TextStyled onClick={toggleModalWindow}>{likes && likes.length || "0"} likes</TextStyled>
-        {isModal && <ModalWindow closeModal={toggleModalWindow}>
+
+        {isModal &&
+        <ModalWindow closeModal={toggleModalWindow}>
             <UserListWrapper>
                 <UserList users={likes} closeModal={toggleModalWindow}/>
             </UserListWrapper>
@@ -68,8 +70,7 @@ function LikeBlock({likes, ownerId, postId, updatePostData}) {
 
 const mapStateToProps = (state) => {
     return {
-        ownerId: state.auth.user.sub.id,
-
+        ownerId: state.auth?.user?.sub?.id,
     }
 }
 

src/components/NewPost.js

@@ -10,7 +10,7 @@ import {
 import {connect} from "react-redux";
 import DeleteForeverSharpIcon from '@mui/icons-material/DeleteForeverSharp';
 import {Container, Draggable} from 'react-smooth-dnd';
-import {SendButton} from "../shared/styledComponents";
+import {SendButton, Title} from "../shared/styledComponents";
 
 const NewPostWrapper = styled.div`
   width: 50vw;
@@ -21,19 +21,12 @@ const NewPostWrapper = styled.div`
   align-items: center;
 `
 const DropZOne = styled.div`
-    width:80%;
+  width: 80%;
 `
 
-const Title = styled.div`
-    
-  font-weight: 700;
-`
 const TitleInput = styled.input`
   margin-left: 20px;
-    width: 300px;
-`
-const ButtonBlock = styled.div`
-    
+  width: 300px;
 `
 
 const CancelButton = styled(SendButton)`
@@ -64,7 +57,6 @@ function NewPost({closeModal, postData, loadedImages, setActiveUserAllPosts}) {
     const [description, setDescription] = useState((postData && postData.text) || "");
     const [previewImages, setPreviewImages] = useState(loadedImages || []);
 
-
     const sendHandler = async () => {
         const responce = await gqlSendPost({
             _id: (postData && postData._id) || "",
@@ -139,19 +131,22 @@ function NewPost({closeModal, postData, loadedImages, setActiveUserAllPosts}) {
 
                 </Preview>
             </DropZOne>
+
             <Title> Title:
                 <TitleInput type={"text"} value={title} onChange={(e) => {
                     setTitle(e.target.value)
                 }}/>
             </Title>
+
             Text:
             <TextArea value={description} onChange={(e) => {
                 setDescription(e.target.value)
             }} cols="30" rows="10"/>
-            <ButtonBlock>
+
+            <div>
                 <SendButton onClick={sendHandler}>Send</SendButton>
                 <CancelButton onClick={cancelHandler}>Cancel</CancelButton>
-            </ButtonBlock>
+            </div>
         </NewPostWrapper>
     )
 
@@ -160,7 +155,6 @@ function NewPost({closeModal, postData, loadedImages, setActiveUserAllPosts}) {
 const mapStateToProps = (state) => {
     return {
         id: state.auth.user.sub.id,
-
     }
 }
 const mapDispatchToProps = (dispatch) => {

src/components/OwnerHeader.js

@@ -4,33 +4,28 @@ import {connect} from "react-redux";
 import {useEffect, useState} from "react";
 import {
     changeAuthData,
-    changeAuthDataAsync,
-    setActiveUserData,
+    changeAuthDataAsync, setActiveUserAllPosts,
+    setActiveUserData, setOwnerData,
     setUserDataAsync
 } from "../store/actionCreators/ActionCreators";
 import {useNavigate} from "react-router-dom";
 import avatar from "../assets/img/avatarGolub.jpg"
 import ModalWindow from "./ModalWindow";
 import NewPost from "./NewPost";
-import {HeaderButtons} from "../shared/styledComponents";
+import {HeaderButtons, Logotip} from "../shared/styledComponents";
 
 
 const HeaderWrapper = styled.div`
-  padding: 2px 80px;
+  width: 90%;
+  padding: 2px 100px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(41, 78, 255, 0);
 `
-const Logotip = styled.p`
-font-size: 30px;
-  margin: 0;
-color:grey;
-`
 
 
 const OwnerHeader = (props) => {
-
     const [isModal, setisModal] = useState(false);
     const navigate = useNavigate();
 
@@ -38,15 +33,14 @@ const OwnerHeader = (props) => {
         if (!props.ownerData) {
             props.setUserDataAsync(props.id, true)
         }
-
     })
 
     const logout = () => {
         localStorage.authToken = "";
-        props.changeAuthData({
-            token: "",
-            user: ""
-        })
+        props.changeAuthData(null)
+        props.setActiveUserData(null)
+        props.setOwnerData(null)
+        props.setActiveUserAllPosts(null)
         navigate("/auth")
 
     }
@@ -68,7 +62,7 @@ const OwnerHeader = (props) => {
     return (
         <HeaderWrapper>
 
-            <Logotip>=HIPSTARGAM=</Logotip>
+            <Logotip>=HIPSTAGRAM=</Logotip>
             <HeaderButtons onClick={feedHandler}>Feed</HeaderButtons>
 
             <HeaderButtons onClick={toogleModal}>+ post</HeaderButtons>
@@ -86,7 +80,7 @@ const OwnerHeader = (props) => {
 
 const mapStateToProps = (state) => {
     return {
-        id: state.auth.user.sub.id,
+        id: state.auth?.user?.sub?.id,
         ownerData: state.ownerData,
     }
 }
@@ -95,7 +89,9 @@ 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))
+        setActiveUserData: (user) => dispatch(setActiveUserData(user)),
+        setOwnerData : (user) => dispatch(setOwnerData(user)),
+        setActiveUserAllPosts: (posts) => dispatch(setActiveUserAllPosts(posts)),
     }
 }
 

src/components/Post.js

@@ -8,7 +8,7 @@ import {connect} from "react-redux";
 import {useState} from "react";
 import ModalWindow from "./ModalWindow";
 import NewPost from "./NewPost";
-import {EditPostButton, SpaceBetweenWrapper} from "../shared/styledComponents";
+import {EditPostButton, SpaceBetweenWrapper, Title} from "../shared/styledComponents";
 
 const AvaLoginWrap = styled.div`
   display: flex;
@@ -25,8 +25,6 @@ const DescriptionPostWrapper = styled.div`
 const InfoBlockInModalWrapper = styled.div`
   width: 50%;
 `
-const Title = styled.p`
-`
 const Text = styled.p`
 `
 const PicsInModalWrapper = styled.div`
@@ -43,7 +41,6 @@ const PicsInModalWrapper = styled.div`
 
 function Post({postData, updatePostData, closeModal, id}) {
     const [isModal, setIsModal] = useState(false);
-    console.log(postData.images)
 
     function toogleModalWindow() {
         setIsModal(!isModal)
@@ -77,7 +74,7 @@ function Post({postData, updatePostData, closeModal, id}) {
                 <CommentMessageBlock postId={postData._id} updatePostData={updatePostData}/>
             </InfoBlockInModalWrapper>
             {isModal && <ModalWindow closeModal={toogleModalWindow}>
-                <NewPost postData={postData} loadedImages={postData.images}/>
+                <NewPost closeModal={toogleModalWindow} postData={postData} loadedImages={postData.images}/>
             </ModalWindow>}
         </>
 

src/components/PostFeed.js

@@ -48,7 +48,6 @@ function PostFeed({post}) {
         setModal(!isModal)
     }
 
-    console.log(postFeedData)
     return (<>
             {post && postFeedData && <>
                 <AvaLoginBlock user={postFeedData.owner}

src/components/PostPreview.js

@@ -35,7 +35,7 @@ const InnerModalWrapper = styled.div`
 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())
@@ -51,12 +51,12 @@ function PostPreview({postId}) {
     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%"}}/>
+                <img src={postData.images ? postData.images[0]?.url : picture} alt="post" style={{width: "100%"}}/>
                 {
                     postData.images?.length > 1 && <LogoManyImg>
                         <AutoAwesomeMotionIcon/>
@@ -65,7 +65,7 @@ function PostPreview({postId}) {
                 {isModal &&
                 <ModalWindow closeModal={toggleModalWindow}>
                     <InnerModalWrapper>
-                       <Post postData={postData} closeModal={toggleModalWindow} updatePostData={updatePostData}/>
+                        <Post postData={postData} closeModal={toggleModalWindow} updatePostData={updatePostData}/>
                     </InnerModalWrapper>
                 </ModalWindow>
                 }

src/components/Profile.js

@@ -2,7 +2,6 @@ import OwnerHeader from "./OwnerHeader";
 import UserContent from "./UserContent";
 
 
-
 const Profile =()=>{
     return(
         <>

src/components/SubscribeButton.js

@@ -1,49 +1,75 @@
 import {connect} from "react-redux";
 import {useEffect, useState} from "react";
-import {gqlGetUserFollowers, gqlSubscribe, gqlUnSubscribe} from "../shared/services&utilits/gqlRequest";
+import {
+    gqlGetFollowings,
+    gqlGetUserFollowers,
+    gqlSubscribe,
+    gqlUnSubscribe
+} from "../shared/services&utilits/gqlRequest";
 import {
     setActiveUserData,
 } from "../store/actionCreators/ActionCreators";
+import styled from 'styled-components';
+import {StyledButton} from "../shared/styledComponents";
+
+const SubscribeBtn = styled(StyledButton)`
+  width: 30%`
 
 
-function SubscribeButton({followers, id, activeUser, setActiveUserData, ownerData}){
+function SubscribeButton({followers, id, activeUser, setActiveUserData, ownerData}) {
     const [isSabscribed, setIsSabscribed] = useState(isAlreadySubscribed())
-    console.log(followers)
-    useEffect(()=>{
-        if (isAlreadySubscribed() && !isSabscribed){
+
+    useEffect(() => {
+        if (isAlreadySubscribed() && !isSabscribed) {
             setIsSabscribed(true)
         }
-        if (!isAlreadySubscribed() && isSabscribed){
+        if (!isAlreadySubscribed() && isSabscribed) {
             setIsSabscribed(false)
         }
     })
 
     function isAlreadySubscribed() {
-        return followers && followers.find((follower)=>follower._id === id);
+        return followers && followers.find((follower) => follower._id === id);
+    }
+
+    async function getFollowings() {
+        let data = null;
+        const responce = await gqlGetFollowings(id);
+        if (responce.ok){
+            const following = await responce.json();
+            data = following.data.UserFindOne.following;
+        }
+        return data;
     }
 
-    function clickHandler(){
-        if (!isSabscribed){
-            gqlSubscribe(id, activeUser._id, []).then((res)=> res.ok && updateUserFollowers())
+
+    async function clickHandler() {
+        const following = await getFollowings();
+        const followingIdArrayToAdd = following.map((item) => ({_id: item._id}))
+        const followingIdArrayToRemove = followingIdArrayToAdd.filter(item => item._id !== activeUser._id)
+
+        if (!isSabscribed) {
+            gqlSubscribe(id, activeUser._id, followingIdArrayToAdd).then((res) => res.json()).then(data => data && updateUserFollowers())
         } else {
-            gqlUnSubscribe(id, []).then((res)=> res.ok && updateUserFollowers())
+            gqlUnSubscribe(id, followingIdArrayToRemove).then((res) => res.json()).then(data => data && updateUserFollowers())
         }
     }
-    async function updateUserFollowers(){
-        const a= await gqlGetUserFollowers(activeUser._id)
+
+    async function updateUserFollowers() {
+        const a = await gqlGetUserFollowers(activeUser._id)
         const res = await a.json()
-        if (res){
-            activeUser.followers = await  res.data.UserFindOne.followers;
-            console.log(activeUser)
+        if (res) {
+            activeUser.followers = await res.data.UserFindOne.followers;
             setActiveUserData(activeUser);
         }
     }
 
-    return <button onClick={clickHandler}>{isSabscribed ? "unsabscribe" : "sabscribe"}</button>
+    return <SubscribeBtn onClick={clickHandler}>{isSabscribed ? "unsabscribe" : "sabscribe"}</SubscribeBtn>
 }
+
 const mapStateToProps = (state) => {
     return {
-        id: state.auth.user.sub.id,
+        id: state.auth?.user?.sub?.id,
         ownerData: state.ownerData,
         activeUser: state.activeUser,
     }

src/components/UserContent.js

@@ -14,7 +14,7 @@ import UserList from "./UserList";
 import SubscribeButton from "./SubscribeButton";
 import ChangeAvatarComponent from "./ChangeAvatarComponent";
 import TimeOfCreation from "./TimeOfCreation";
-import {EditPostButton, HeaderButtons, StyledButtonsShadow} from "../shared/styledComponents";
+import {EditPostButton } from "../shared/styledComponents";
 
 
 const UserContentWrapper = styled.div`
@@ -78,7 +78,6 @@ function UserContent(props) {
     const [userList, setUserList] = useState("");
     const [isModalAvatar, setisModalAvatar] = useState(false);
 
-    console.log(props.activeUser && props.activeUser)
     useEffect(() => {
         if (!props.activeUser) {
             props.setUserDataAsync(props.id)
@@ -90,7 +89,6 @@ function UserContent(props) {
 
     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)
         }
     })
@@ -104,7 +102,7 @@ function UserContent(props) {
         setisModalAvatar(!isModalAvatar)
     }
 
-    console.log(props.activeUser)
+
     return (
         <>
             {props.activeUser && <UserContentWrapper>
@@ -116,7 +114,6 @@ function UserContent(props) {
                                  alt={"avatar"}/>
                         </AvatarWrapper>
                         <h2>{props.activeUser.login}</h2>
-                        {/*<p>{props.activeUser.nick}</p>*/}
                         <p>Account was created: </p>
                         <TimeOfCreation createdTime={props.activeUser.createdAt}/>
 
@@ -129,13 +126,14 @@ function UserContent(props) {
                                 <UserInfoBlock count={props.activeUser.followers?.length} description={"followers"}/>
                             </div>
                             <div onClick={() => toggleModalWindow(props.activeUser.following)}>
-                                <UserInfoBlock count={props.activeUser.following?.length} description={"followings"}/>
+                                <UserInfoBlock count={props.activeUser.following?.length} description={"following"}/>
                             </div>
                         </UserInfoBlockWrapper>
                         {(props.activeUser?._id === props.id) &&
                         <EditPostButton onClick={toggleAvatarModalWindow}>fix profile</EditPostButton> ||
                         <SubscribeButton followers={props.activeUser?.followers}/>}
                     </InfoBlockWrapper>
+
                     {isModalAvatar && <ModalWindow closeModal={toggleAvatarModalWindow}>
                         <ChangeAvatarComponent closeModal={toggleAvatarModalWindow}/>
                     </ModalWindow>}
@@ -156,12 +154,12 @@ function UserContent(props) {
             }
         </>
     )
-};
+}
 
 
 const mapStateToProps = (state) => {
     return {
-        id: state.auth.user.sub.id,
+        id: state.auth?.user?.sub?.id,
         activeUser: state.activeUser,
         activeUserPosts: state.activeUserPosts,
     }

src/components/UserInfoBlock.js

@@ -13,13 +13,11 @@ const UserInfoBlockStyled = styled.div`
 `
 
 
-
 const UserInfoBlock = ({count, description}) => {
-    return (<UserInfoBlockStyled>
-
-        <p>{count ? count : 0}</p>
-        <p>{description}</p>
-
-    </UserInfoBlockStyled>)
+    return (
+        <UserInfoBlockStyled>
+            <p>{count ? count : 0}</p>
+            <p>{description}</p>
+        </UserInfoBlockStyled>)
 }
 export default UserInfoBlock;

src/components/UserList.js

@@ -8,11 +8,10 @@ const UserListWrapper = styled.div`
   width: 100%;
 `
 const EveryUserWrapper = styled.div`
-  //margin: 20px 0 0 30px;
+  margin: 20px 0 0 30px;
 `
 
 function UserList({users, closeModal}) {
-    console.log(users)
 
     return (
         <>

src/shared/services&utilits/gqlRequest.js

@@ -229,4 +229,16 @@ export const gqlSetAvatar = (imageId, _id) =>
     }
     }`,
         {imageId, userId: _id},
-    )
+    )
+
+export const gqlGetFollowings = (_id) => gql(
+    `query AllFollowing($userId:String){
+  UserFindOne(query:$userId)
+    {_id
+          following{_id login}
+    }
+}`,
+    {
+        userId: JSON.stringify([{_id}]),
+    },
+)

src/shared/styledComponents.js

@@ -8,7 +8,7 @@ export const HeaderButtons = styled.button`
   box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
   cursor: pointer;
 `
-export const EditPostButton  = styled.button`
+export const EditPostButton = styled.button`
   margin-top: 30px;
   width: 100px;
   height: 30px;
@@ -23,7 +23,7 @@ export const SpaceBetweenWrapper = styled.div`
   align-items: center;
   padding: 0 20px 0 0;
 `
-export const SendButton  = styled.button`
+export const SendButton = styled.button`
   width: 100px;
   height: 36px;
   border: none;
@@ -31,10 +31,18 @@ export const SendButton  = styled.button`
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
   cursor: pointer;
 `
-export const StyledButton  = styled.button`
+export const StyledButton = styled.button`
   width: 100%;
   height: 30px;
   border: none;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
   cursor: pointer;
+`
+export const Logotip = styled.p`
+  font-size: 30px;
+  margin: 0;
+  color: grey;
+`
+export const Title = styled.div`
+  font-weight: 700;
 `

src/store/actionCreators/ActionCreators.js

@@ -13,9 +13,8 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
             }
 
             const responseData = await response.json();
-            console.log(responseData)
             const user = responseData.data.createUser;
-            console.log(user)
+
             if (user) {
                 dispatch(changeAuthDataAsync({login, password, authType: "signIn", navigateCallback}))
 
@@ -29,8 +28,8 @@ export const changeAuthDataAsync = ({login, password, authType, navigateCallback
                 dispatch(setError("Server is not answer"))
             }
             const responseData = await response.json();
-            console.log(responseData)
             const token = responseData.data.login;
+
             if (jwtDecode(token)) {
                 localStorage.authToken = token
             }
@@ -56,12 +55,9 @@ export const setUserDataAsync = (id, isOwner) => {
             dispatch(setError("No user data received"))
         }
         const responseData = await response.json();
-        console.log(responseData)
         if (isOwner) {
-            console.log(responseData)
             dispatch(setOwnerData(responseData.data.UserFindOne))
         } else {
-            console.log(responseData)
             dispatch(setActiveUserData(responseData.data.UserFindOne))
         }
     }
@@ -77,7 +73,6 @@ export const setActiveUserAllPostsAsync = (id) => {
         }
         const responseData = await response.json();
         dispatch(setActiveUserAllPosts(responseData.data.PostFind))
-        // console.log(responseData.data.PostFind)
     }
 }
 

src/store/rootReducer.js

@@ -1,16 +1,5 @@
 const initialState = {
-    auth: {
-        token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2MmNiMDJiNWY2Y2FmODM3ODZmNzRkZTAiLCJsb2dpbiI6InBlbmcxMzgiLCJhY2wiOlsiNjJjYjAyYjVmNmNhZjgzNzg2Zjc0ZGUwIiwidXNlciJdfSwiaWF0IjoxNjU3NDcxNjcwfQ.dKAgmQ2J-85XONErHC9JNz1yjctwYnIILFow1NPlyIo",
-        user: {
-            sub: {
-                id: "62cb02b5f6caf83786f74de0",
-                login: "peng138",
-                acl: {
-                    0: "user",
-                    1: 1657471670,
-                }
-            }},
-    },
+    auth: null,
     activeUser: null,
     activeUserPosts: null,
     ownerData: null,
@@ -38,7 +27,6 @@ const rootReducer = (state = initialState, action) => {
                 activeUserPosts: action.payload
             }
         case "SET_OWNER_DATA":
-            console.log(action.payload)
             return{
                 ...state, ownerData: action.payload,
             }