work on displaying user posts in profile

Author: aadityarajkumawat

client/src/Routes.js

@@ -19,7 +19,11 @@ const Routes = () => {
       <Route exact path="/post" component={Post} />
       <Route exact path="/that-user" component={UserProfile} />
       <PrivateRoute exact path="/compose-post" component={PostEditor} />
-      <PrivateRoute exact path="/dashboard/home" component={Dashboard} />
+      <PrivateRoute
+        exact
+        path="/dashboard/home/:name/:id"
+        component={Dashboard}
+      />
       <PrivateRoute exact path="/dashboard/saved" component={SavedPost} />
     </Fragment>
   );

client/src/actions/getPostAction.js

@@ -47,7 +47,6 @@ export const uploadPost = (post, post_id) => async (dispatch) => {
       "Content-Type": "application/json",
     },
   };
-  console.log(post);
   try {
     if (post_id !== undefined) {
       const res = await axios.post(
@@ -123,7 +122,6 @@ export const getSavedPosts = () => async (dispatch) => {
 export const likePost = (post_id) => async (dispatch) => {
   try {
     if (post_id !== undefined) {
-      console.log("the recieved post ID", post_id);
       const res = await axios.put(`/api/post/like/${post_id}`);
       dispatch({ type: LIKE_POST, payload: res.data });
     }
@@ -145,9 +143,7 @@ export const getLikedPosts = (user, post_id) => async (dispatch) => {
 
 export const reallyGetAllPosts = (userId) => async (dispatch) => {
   try {
-    // console.log(userId, "this");
     const res = await axios.get(`/api/post/real-all/${userId}`);
-    console.log("data", res.data);
     dispatch({ type: REALLY_GET_ALL_POSTS, payload: res.data });
   } catch (error) {
     console.log(error.message);

client/src/components/layout components/Post/Post-Placeholder/PostHolder.js

@@ -97,9 +97,9 @@ const Post = ({
   };
 
   const getThatP = () => {
-    getThatProfileE(openedPost.user);
-    reallyGetAllPosts(openedPost.user);
-    history.push("/that-user");
+    // getThatProfileE(openedPost.user);
+    // reallyGetAllPosts(openedPost.user);
+    history.push(`/dashboard/home/${openedPost.name}/${openedPost.user}`);
   };
 
   return (

client/src/components/layout components/Post/Post.js

@@ -24,8 +24,6 @@ const Trending = ({
     // eslint-disable-next-line
   }, []);
 
-  console.log("cool");
-
   useEffect(() => {
     if (trendingPosts.length === 0) {
       getTrendingPosts();
@@ -36,6 +34,7 @@ const Trending = ({
 
     // eslint-disable-next-line
   }, [trendingPosts.length, post.uploadedStatus]);
+
   useEffect(() => {
     if (post.savedToast) {
       toast({

client/src/components/layout components/Trending/Trending.js

@@ -87,7 +87,9 @@ const Navbar = ({
                     </MenuItem>
                   )}
                   <MenuItem>
-                    <Link to="/dashboard/home">Dashboard</Link>
+                    <Link to={`/dashboard/home/user/${profile.profile._id}`}>
+                      Dashboard
+                    </Link>
                   </MenuItem>
                   <MenuItem>
                     <Link to="/compose-post">Compose Post</Link>

client/src/components/navbar/Navbar.js

@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { removeNav } from "../../actions/navAction";
 import { clearPost } from "../../actions/getPostAction";
-import DashboardSideBar from "./DashboardSideBar";
 import DashboardHome from "./DashboardHome";
 import { Flex } from "@chakra-ui/react";
+import { useRouteMatch } from "react-router-dom";
 
 const Dashboard = ({ removeNav, clearPost, history }) => {
   useEffect(() => {
@@ -14,9 +14,12 @@ const Dashboard = ({ removeNav, clearPost, history }) => {
     // eslint-disable-next-line
   }, []);
 
+  const match = useRouteMatch();
+  console.log({ match });
+
   return (
     <Flex>
-      <DashboardHome routing={history} />
+      <DashboardHome routing={history} user={match} />
     </Flex>
   );
 };

client/src/components/pages/Dashboard.js

@@ -4,20 +4,24 @@ import Profile from "./profile/Profile";
 import { Flex, Box, Text } from "@chakra-ui/react";
 import DashboardSideBar from "./DashboardSideBar";
 
-const DashboardHome = ({ routing }) => {
+const DashboardHome = ({ routing, user }) => {
   return (
     <Flex flexDir="column" pt="2rem" px="6rem" w="100vw">
-      <Flex justifyContent='flex-start' alignItems='center'>
-        <Box>
-          <DashboardSideBar />
-        </Box>
+      <Flex justifyContent="flex-start" alignItems="center">
+        {user.params.name === "user" && (
+          <Box>
+            <DashboardSideBar />
+          </Box>
+        )}
         <Box>
           <Text fontSize="25px" fontWeight="600">
-            Dashboard
+            {user.params.name === "user"
+              ? "Dashboard"
+              : `${user.params.name}'s Profile`}
           </Text>
         </Box>
       </Flex>
-      <Profile />
+      <Profile user={user.params} />
       <UserPost routing={routing} />
     </Flex>
   );

client/src/components/pages/DashboardHome.js

@@ -17,13 +17,19 @@ import {
   useSetProfileInSettings,
   useShowToastOnSuccessfulUpdating,
 } from "./profile-functions";
+import { reallyGetAllPosts } from "../../../actions/getPostAction";
+import { getThatProfileE } from "../../../actions/profileAction";
 
 const Profile = ({
   profile,
   uploadProfilePhoto,
   loadProfile,
   editProfile,
   cleanProfile,
+  user,
+  post,
+  getThatProfileE,
+  reallyGetAllPosts,
 }) => {
   const { isOpen, onOpen, onClose } = S.useDisclosure();
   const toast = S.useToast();
@@ -35,16 +41,34 @@ const Profile = ({
   const initialRef = React.useRef();
   const finalRef = React.useRef();
 
-  useLoadProfile(loadProfile);
+  useLoadProfile(loadProfile, { getThatProfileE, reallyGetAllPosts }, user);
   useSetProfileInSettings(profile, setProfileValues);
   useShowToastOnSuccessfulUpdating(profile, onClose, cleanProfile, toast);
 
+  let imgURL = "";
+  let name = "";
+  let bio = "";
+  let country = "";
+  if (user.name === "user" && profile.profile.user) {
+    imgURL = profile.profile.image;
+    name = profile.profile.user.name;
+    if (!isEmpty(profile.profile)) {
+      bio = profile.profile.bio;
+      country = profile.profile.country;
+    }
+  } else if (user.name !== "user" && profile.thatProfile) {
+    imgURL = profile.thatProfile.image;
+    name = user.name;
+    bio = profile.thatProfile.bio;
+    country = profile.thatProfile.country;
+  }
+
   return (
     <React.Fragment>
       <S.Flex py="2rem">
         <S.Flex>
           <S.Image
-            src={profile.profile && `${profile.profile.image}`}
+            src={imgURL}
             fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
             style={{ width: "150px", height: "150px", borderRadius: "100%" }}
             alt="user"
@@ -53,9 +77,9 @@ const Profile = ({
         <S.Flex mx="3rem" flexDir="column" py="2rem">
           <S.Flex>
             <S.Text>
-              {profile.profile.user ? (
+              {profile.profile.user || profile.thatProfile ? (
                 <strong>
-                  <S.Text>{profile.profile.user.name}</S.Text>
+                  <S.Text>{name}</S.Text>
                 </strong>
               ) : (
                 <S.Skeleton height="20px" w="220px" my="5px"></S.Skeleton>
@@ -64,30 +88,32 @@ const Profile = ({
           </S.Flex>
           <S.Flex flexDir="column">
             <S.Text>
-              {!isEmpty(profile.profile) ? (
-                profile.profile.bio
+              {!isEmpty(profile.profile) || profile.thatProfile ? (
+                <S.Text>{bio}</S.Text>
               ) : (
                 <S.Skeleton height="20px" w="180px" mb="5px"></S.Skeleton>
               )}
             </S.Text>
             <S.Text>
-              {!isEmpty(profile.profile) ? (
-                profile.profile.country
+              {!isEmpty(profile.profile) || profile.thatProfile ? (
+                <S.Text>{country}</S.Text>
               ) : (
                 <S.Skeleton height="20px" w="180px"></S.Skeleton>
               )}
             </S.Text>
           </S.Flex>
           <S.Flex>
-            <S.Button
-              h="30px"
-              onClick={onOpen}
-              my="5px"
-              fontWeight="normal"
-              colorScheme="blackAlpha"
-            >
-              Edit Profile
-            </S.Button>
+            {user.name === "user" && (
+              <S.Button
+                h="30px"
+                onClick={onOpen}
+                my="5px"
+                fontWeight="normal"
+                colorScheme="blackAlpha"
+              >
+                Edit Profile
+              </S.Button>
+            )}
           </S.Flex>
         </S.Flex>
         <S.Modal
@@ -164,6 +190,7 @@ const mapStateToProps = (state) => {
   return {
     auth: state.auth,
     profile: state.profile,
+    post: state.post,
   };
 };
 
@@ -173,4 +200,6 @@ export default connect(mapStateToProps, {
   toggleBackdrop,
   editProfile,
   cleanProfile,
+  getThatProfileE,
+  reallyGetAllPosts,
 })(Profile);

client/src/components/pages/profile/Profile.js

@@ -17,9 +17,13 @@ export const addProfile = (e, fn) => {
   fn(fd);
 };
 
-export const useLoadProfile = (fn) => {
+export const useLoadProfile = (fn, a, b) => {
   useEffect(() => {
-    fn();
+    if (b.name === "user") fn();
+    else {
+      a.getThatProfileE(b.id);
+      a.reallyGetAllPosts(b.id);
+    }
     // eslint-disable-next-line
   }, []);
 };