+userPage +UserPost +actionUserPost

src/actions/index.js

@@ -169,4 +169,33 @@ export const actionFindUser = nick =>
             {
               sort:[{nick:1}]
             }
-          ])}))          
+          ])}))
+          
+export const actionUserPost = _id =>
+        actionPromise("userPost", gql(`query PostFind($filter: String){
+          PostFind(query:$filter){
+                    owner{_id nick avatar{url}}
+                    _id likesCount title images{_id url}
+                      comments{
+                        _id text post{_id} likesCount owner{_id nick avatar{url}}
+                        
+                      }
+                    likes{
+                        owner{				
+                            login avatar {url}
+                          }
+                    }
+              }
+            }`,{
+              filter: JSON.stringify([
+                {
+                  ___owner:{$in:[_id]}
+                }
+              ])
+            }))      
+            
+            
+            /* {query: JSON.stringify([
+              {___owner: {$in :[`${_id}`]}}
+            ])} */
+

src/components/UserPage/User.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
-import { actionAboutUser } from "../../actions";
+import { actionAboutUser, actionUserPost } from "../../actions";
 import CUserItem from "./UserItem";
 
 const User = () => {
@@ -11,6 +11,7 @@ const User = () => {
     const dispatch = useDispatch()
 useEffect(() => {
     dispatch(actionAboutUser(id))
+    dispatch(actionUserPost(id))
 },[id])
     return(
         <div>

src/components/UserPage/UserItem.js

@@ -1,16 +1,26 @@
 import { connect } from "react-redux"
 import { backendURL } from "../../actions"
+import CUserPosts from "./UserPosts";
 
 
 const UserItem = ({aboutUser = {}}) =>{
         console.log(aboutUser);
     return(
-        <div className="flex">
-            <div>
-            <img src={`${backendURL}/${aboutUser.avatar.url}`} alt="avatar" className="h-60 w-60 rounded-full"/>
+        <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>
+            <div className="px-px md:px-3">
+                
+                    <CUserPosts/>
+                
             </div>
-            
-            <h2>{aboutUser.nick}</h2>
         </div>
     )
 }

src/components/UserPage/UserPosts.js

@@ -0,0 +1,29 @@
+import { connect } from "react-redux";
+import { backendURL } from "../../actions";
+
+
+const Post = ({post:post})=>{
+    
+    return (
+        <div 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"/>
+            </article>
+        </div>
+    )
+}
+
+
+const UserPosts = ({userPost = []}) =>{
+    return(
+        <div className="flex flex-wrap -mx-px md:-mx-3">
+            {userPost.map(post =><Post post={post}/>)}
+        </div>
+    )
+}
+
+
+const CUserPosts = connect(state =>({userPost: state.promise?.userPost?.payload || []}))(UserPosts) 
+
+
+export default CUserPosts;