+pagePost +PageComponent +actionFindPost +routeToPost +changedStyleForInput +UserPost

src/App.js

@@ -33,6 +33,8 @@ function App() {
         <Route exact path="/settings" component={CMain}/>
         <Route exact path="/user/:id" component={Header}/>
         <Route exact path="/user/:id" component={CMain}/>
+        <Route exact path="/post/:id" component={Header}/>
+        <Route exact path="/post/:id" component={CMain}/>
     </div>
     </Switch>
     </Provider>

src/actions/index.js

@@ -131,6 +131,9 @@ export const actionAboutUser = (_id) =>
             _id,nick, avatar{
               url
             },
+            followers {
+              _id
+            }
             following{
               _id
             }
@@ -194,8 +197,27 @@ export const actionUserPost = _id =>
               ])
             }))      
             
-            
-            /* {query: JSON.stringify([
-              {___owner: {$in :[`${_id}`]}}
-            ])} */
+export const actionFindOnePost = _id => 
+            actionPromise("findPost", gql(`query FindOnePost($postId: String) {
+              PostFindOne(query:$postId){
+                  _id, title,text, images {
+                   url, _id
+                  }, comments{
+                  _id text likesCount likes{
+                    owner{
+                      nick avatar{url}
+                    }
+                  }, answers{
+                    _id, text, owner{
+                      nick avatar{url}
+                    }
+                  }
+                },
+                owner {
+                  _id, nick avatar{url}
+                }
+              }
+            }`,{
+              postId: JSON.stringify([{_id}])
+            } ))
 

src/components/Header/SearchInput.js

@@ -8,11 +8,11 @@ import { Link } from "react-router-dom";
 
 const formatOptionLabel = ({value,label,avatar}) => {
     return(
-        <div className="flex">
+        <Link to={`/user/${value}`} className="flex">
 
             <img src={avatar ?`${backendURL}/${avatar.url}`: ""} alt="avatar" className="rounded-full w-36 h-36"/>
-            <Link to={`/user/${value}`}>{label}</Link>
-        </div>
+            <h2>{label}</h2>
+        </Link>
     )
 }
 

src/components/MainPage/Main.js

@@ -1,6 +1,7 @@
 import {Route,Redirect, Switch} from 'react-router-dom';
 import Feed from '../Feed/Feed';
 import User from '../UserPage/User';
+import Post from '../Post/Post';
 import Collections from '../CollectionsPage/Collections';
 import UpsertPost from '../CreatePostPage/UpsertPost';
 import UserSettings from '../UserSettings/UserSettings';
@@ -26,6 +27,7 @@ const Main = ({auth}) => {
                 <Route path="/settings" exect component={UserSettings}/>
                 <Route path="/collections" exact component={Collections}/>
                 <Route path="/createpost" exact component={UpsertPost}/>
+                <Route path="/post/:id" exact component={Post}/>
             </Switch>
         </div>
     )

src/components/Post/Post.js

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import { actionFindOnePost } from "../../actions";
+import CPostItem from "./PostItem";
+
+
+const Post = () => {
+    const params = useParams();
+    const id = params.id;
+    const dispatch = useDispatch();
+    useEffect(() => {
+      dispatch(actionFindOnePost(id))  
+    },[id])
+    return(
+        <div className="flex mx-auto px-4 justify-center items-center p-6 xl:container xls:mx-auto">
+            <CPostItem/>
+        </div>
+    )
+}
+
+
+
+export default Post;

src/components/Post/PostItem.js

@@ -0,0 +1,44 @@
+import { connect } from "react-redux";
+import { backendURL } from "../../actions";
+
+
+const PostItem = ({findPost}) =>{
+    return(
+        <div className="rounded-md shadow-md p-3 sm:w-96">
+            <div className="flex items-center justify-between p-3">
+                <div className="flex items-center space-x-2">
+                    <img  src={findPost.owner?.avatar?.url ? `${backendURL}/${findPost.owner?.avatar?.url}`:""} alt="userAvatar" className="object-cover object-center w-14 h-14 rounded-full shadow-sm bg-slate-600 "/>
+                    <div className="-space-y-1">
+                        <h2 className="text-sm font-semibold leading-none">{findPost.owner.nick}</h2>
+                    </div>
+                </div>
+                
+              
+            </div>
+                <img className="object-cover object-center w-full h-72 bg-slate-500"/>
+                <div className="p-3">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                        <button className="flex items-center justify-center">Like</button>
+                        <button className="flex items-center justify-center">Comment</button>
+                        <button className="flex items-center justify-center">Direct</button>
+                        </div>
+                        <button className="flex items-center justify-center">Save to collection</button>
+                    </div>
+                </div>
+                <div className="space-y-3">
+                        <p className="text-sm">
+                            <span className="text-base font-semibold pr-2">{findPost.owner.nick}</span>
+                            {findPost.title} {findPost.text}
+                        </p>
+                     <input type="text" placeholder="Add a comment" className="w-full py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400"/>   
+                </div>
+                
+        </div>
+    )
+}
+
+const CPostItem = connect(state=>({findPost: state.promise?.findPost?.payload || {}}))(PostItem)
+
+
+export default CPostItem;

src/components/UserPage/User.js

@@ -14,7 +14,7 @@ useEffect(() => {
     dispatch(actionUserPost(id))
 },[id])
     return(
-        <div>
+        <div className="lg:w-8/12 lg:mx-auto mb-8">
             <CUserItem/>            
         </div>
     )

src/components/UserPage/UserItem.js

@@ -4,17 +4,27 @@ import CUserPosts from "./UserPosts";
 
 
 const UserItem = ({aboutUser = {}}) =>{
-        console.log(aboutUser);
+        /* console.log(aboutUser.followers.length); */
     return(
         <div>
             <div className="flex flex-wrap items-center p-4 md:py-8">
                 <div className="md:w-3/12">
                 <img src={aboutUser?.avatar?.url ?`${backendURL}/${aboutUser.avatar.url} `: "nothing"} alt="avatar" className="h-20 w-20 md:w-40 md:h-40 lg:w-60 lg:h-60 object-cover rounded-full"/>
                 </div>
-            <div className="md:flex md:flex-wrap md:items-center">
-            <h2 className="text-3x1 inline-block font-light mr-0.5  sm:mb-0">{aboutUser.nick}</h2>
-            <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block">Follow</button>
-            </div>
+                <div className="w-8/12 md:w-7/12 m-4">
+                <div className="md:flex md:flex-wrap md:items-center">
+                    <h2 className="text-3x1 inline-block font-light mr-0.5  sm:mb-0">{aboutUser.nick}</h2>
+                    <button className="bg-fuchsia-600 px-2 py-1 text-white font-semibold text-sm rounded block text-center sm:inline-block">Follow</button>
+                </div>
+                <div className="block">
+                    <ul className="md:flex space-x-8 mb-4">
+                     <li><span className="font-semibold">{aboutUser?.followers?.length ? aboutUser?.followers?.length : "0"}</span> followers</li>
+                     <li><span className="font-semibold">{aboutUser?.following?.length ? aboutUser?.following?.length : "0"}</span> following</li>
+                    </ul>
+                </div>
+
+                </div>
+
             </div>
             <div className="px-px md:px-3">
                 

src/components/UserPage/UserPosts.js

@@ -1,15 +1,16 @@
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { backendURL } from "../../actions";
 
 
 const Post = ({post:post})=>{
     
     return (
-        <div className="w-1/3 p-px md:px-3">
+        <Link to={`/post/${post._id}`} className="w-1/3 p-px md:px-3">
             <article className="post bg-gray-100 text-white relative pb-full md:mb-6">
-            <img src={`${backendURL}/${post.images[0].url}`} className="w-full h-96 object-cover"/>
+            <img src={post.images ? `${backendURL}/${post.images[0].url}`:""} className="w-full h-96 object-cover" alt="postCover"/>
             </article>
-        </div>
+        </Link>
     )
 }