fix(client): ProfileAlbums, UserPosts js->ts

fixing #109

client/src/components/ProfileAlbums.jsx → client/src/components/ProfileAlbums.tsx

@@ -2,8 +2,16 @@ import React from "react";
 import "../styles/components/profileAlbum.css";
 import { useSelector } from "react-redux";
 import { Helmet } from "react-helmet";
+import { AppState } from "../services/redux";
+import { ProfilePageDataState } from "../services/redux/pages/profile/profilePageData/types";
 
-const ProfileAlbums = (props) => {
+interface ProfileAlbumsProps {
+  profilePageData: ProfilePageDataState;
+}
+
+const ProfileAlbums: React.FC<ProfileAlbumsProps> = ({
+  profilePageData,
+}): JSX.Element => {
   const loadingContainerSpinnerStyle = {
     width: "100%",
     height: "100%",
@@ -23,18 +31,18 @@ const ProfileAlbums = (props) => {
   };
 
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
 
   return (
     <>
       <Helmet>
-        <title>{props.profilePageData.userID}/albums</title>
+        <title>{profilePageData.userID}/albums</title>
       </Helmet>
-      {props.profilePageData.userID === userProfileDetailStore.userID &&
+      {profilePageData.userID === userProfileDetailStore.userID &&
       rootUserProfileDataState.fetchedRootUserProfileData === false ? (
         // if profile page is of rootUser and post data had not been fetched then we will run loading spinner
         <>
@@ -44,7 +52,7 @@ const ProfileAlbums = (props) => {
         </>
       ) : (
         <div className="ProfilePage_Albums_Container">
-          {props.profilePageData.posts.map((post, index) => {
+          {profilePageData.posts.map((post, index) => {
             if (post.picture.url) {
               return (
                 <div className="ProfilePage_Album_Container" key={index}>

client/src/components/ProfilePage/UserPosts.jsx → client/src/components/ProfilePage/UserPosts.tsx

@@ -3,47 +3,59 @@ import PostBox from "../PostBox/PostBox";
 import { useSelector, useDispatch } from "react-redux";
 import profileApi from "../../services/api/pages/profileApi";
 import { toastError } from "../../services/toast";
-import {
-  setRootUserProfileDataState,
-  setRootUserPostData,
-  profilePageDataAction,
-} from "../../services/redux-actions";
+// import {
+//   setRootUserProfileDataState,
+//   setRootUserPostData,
+//   profilePageDataAction,
+// } from "../../services/redux-actions";
+import { bindActionCreators } from "redux";
+import { AppState, actionCreators } from "../../services/redux";
+import { AxiosError } from "axios";
+import { ProfilePageDataState } from "../../services/redux/pages/profile/profilePageData/types";
 
-const UserPosts = (props) => {
+interface UserPostsProps {
+  profilePageData: ProfilePageDataState;
+}
+
+const UserPosts: React.FC<UserPostsProps> = ({
+  profilePageData,
+}): JSX.Element => {
   const dispatch = useDispatch();
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
+  const {
+    setRootUserProfileDataState,
+    setRootUserPostData,
+    profilePageDataAction,
+  } = bindActionCreators(actionCreators, dispatch);
 
   useEffect(() => {
     const getRootUserProfilePostData = async () => {
       try {
         const resPost = await profileApi.getUserPosts();
         const resPostData = resPost.data;
         if (resPost.status === 200 && resPostData.success) {
-          dispatch(
-            setRootUserPostData({
-              fetchedPostData: true,
-              posts: resPostData.posts,
-            })
-          );
-          dispatch(
-            setRootUserProfileDataState({
-              fetchedRootUserProfileData: true,
-              getRootUserProfileData: false,
-            })
-          );
+          setRootUserPostData({
+            fetchedPostData: true,
+            posts: resPostData.posts,
+          });
+          setRootUserProfileDataState({
+            fetchedRootUserProfileData: true,
+            getRootUserProfileData: false,
+          });
           const userObj = {
             ...userProfileDetailStore,
             isRootUserFollowed: false,
             posts: resPostData.posts,
           };
-          dispatch(profilePageDataAction(userObj));
+          profilePageDataAction(userObj);
         }
-      } catch (err) {
+      } catch (error) {
+        const err = error as AxiosError;
         if (err.response) {
           if (err.response.data.success === false) {
             toastError(err.response.data.msg);
@@ -56,13 +68,13 @@ const UserPosts = (props) => {
     if (
       rootUserProfileDataState.getRootUserProfileData &&
       !rootUserProfileDataState.fetchedRootUserProfileData &&
-      props.profilePageData.userID === userProfileDetailStore.userID
+      profilePageData.userID === userProfileDetailStore.userID
     ) {
       getRootUserProfilePostData();
     }
   }, [
     dispatch,
-    props.profilePageData.userID,
+    profilePageData.userID,
     rootUserProfileDataState,
     userProfileDetailStore,
     userProfileDetailStore.userID,
@@ -89,7 +101,7 @@ const UserPosts = (props) => {
   return (
     <>
       <>
-        {props.profilePageData.userID === userProfileDetailStore.userID &&
+        {profilePageData.userID === userProfileDetailStore.userID &&
         rootUserProfileDataState.fetchedRootUserProfileData === false ? (
           // if profile page is of rootUser and post data had not been fetched then we will run loading spinner
           <>
@@ -98,15 +110,15 @@ const UserPosts = (props) => {
             </div>
           </>
         ) : (
-          props.profilePageData.posts.map((value, index) => (
+          profilePageData.posts.map((value, index) => (
             <PostBox
               userMainInformation={{
                 // store searched user essintal information
-                name: props.profilePageData.name,
-                email: props.profilePageData.email,
-                picture: props.profilePageData.picture,
-                userID: props.profilePageData.userID,
-                id: props.profilePageData.id,
+                name: profilePageData.name,
+                email: profilePageData.email,
+                picture: profilePageData.picture,
+                userID: profilePageData.userID,
+                id: profilePageData.id,
               }}
               userFeedData={value}
               key={index}

client/src/pages/Profile.js → client/src/pages/Profile.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { instance as axios } from "../services/axios";
-import {
-  profilePageDataAction,
-  setRootUserProfileDataState,
-  setRootUserPostData,
-} from "../services/redux-actions/index";
+// import {
+//   profilePageDataAction,
+//   setRootUserProfileDataState,
+//   setRootUserPostData,
+// } from "../services/redux-actions/index";
 import { useLocation, useHistory, useParams } from "react-router-dom";
 import "../styles/pages/profilePage.css";
 import { Helmet } from "react-helmet";
@@ -15,20 +15,30 @@ import RoutingProfilePage from "../routes/RoutingProfilePage";
 import OpenRightPartDrawerButton from "../components/OpenRightPartDrawerButton";
 import UserInfo from "../components/ProfilePage/UserInfo";
 import PageRoute from "../components/ProfilePage/PageRoute";
+import { bindActionCreators } from "redux";
+import { AppState, actionCreators } from "../services/redux";
+import { AxiosError } from "axios";
 
-const Profile = () => {
+const Profile = (): JSX.Element => {
   const history = useHistory();
-  const params = useParams();
+  const params: { userID: string } = useParams();
   const location = useLocation();
   const dispatch = useDispatch();
-  const [fetchedAllData, setFetchedAllData] = useState(false);
-  const profilePageData = useSelector((state) => state.profilePageDataReducer);
+  const [fetchedAllData, setFetchedAllData] = useState<boolean>(false);
+  const profilePageData = useSelector(
+    (state: AppState) => state.profilePageDataReducer
+  );
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
+  const {
+    profilePageDataAction,
+    setRootUserProfileDataState,
+    setRootUserPostData,
+  } = bindActionCreators(actionCreators, dispatch);
 
   useEffect(() => {
     const initializeProfilePage = async () => {
@@ -51,23 +61,21 @@ const Profile = () => {
             ...userData.searchedUser,
             isRootUserFollowed: userData.isRootUserFollowed,
           };
-          dispatch(profilePageDataAction(userObj));
+          profilePageDataAction(userObj);
           setFetchedAllData(true);
           if (params.userID === userProfileDetailStore.userID) {
-            dispatch(
-              setRootUserPostData({
-                fetchedPostData: true,
-                posts: userData.searchedUser.posts,
-              })
-            );
-            dispatch(
-              setRootUserProfileDataState({
-                fetchedRootUserProfileData: true,
-                getRootUserProfileData: false,
-              })
-            );
+            setRootUserPostData({
+              fetchedPostData: true,
+              posts: userData.searchedUser.posts,
+            });
+
+            setRootUserProfileDataState({
+              fetchedRootUserProfileData: true,
+              getRootUserProfileData: false,
+            });
           }
-        } catch (err) {
+        } catch (error) {
+          const err = error as AxiosError;
           if (err.response) {
             if (err.response.data.success === false) {
               toastError(err.response.data.msg);

client/src/routes/RoutingProfilePage.tsx

@@ -4,8 +4,15 @@ import ProfileFriends from "../components/ProfileFriends";
 import ProfileAlbums from "../components/ProfileAlbums";
 import { useLocation } from "react-router-dom";
 import UserPosts from "../components/ProfilePage/UserPosts";
+import { ProfilePageDataState } from "../services/redux/pages/profile/profilePageData/types";
 
-const RoutingProfilePage = (props) => {
+interface RoutingProfilePageProps {
+  profilePageData: ProfilePageDataState;
+}
+
+const RoutingProfilePage: React.FC<RoutingProfilePageProps> = ({
+  profilePageData,
+}): JSX.Element => {
   const location = useLocation();
 
   useEffect(() => {
@@ -63,7 +70,7 @@ const RoutingProfilePage = (props) => {
           component={() => {
             return (
               <>
-                <UserPosts profilePageData={props.profilePageData} />
+                <UserPosts profilePageData={profilePageData} />
               </>
             );
           }}
@@ -74,7 +81,7 @@ const RoutingProfilePage = (props) => {
           component={() => {
             return (
               <>
-                <ProfileAlbums profilePageData={props.profilePageData} />
+                <ProfileAlbums profilePageData={profilePageData} />
               </>
             );
           }}

client/src/services/redux/pages/profile/profilePageData/reducer.ts

@@ -5,8 +5,12 @@ import {
 } from "./types";
 
 const initialState: ProfilePageDataState = {
+  name: "",
+  email: "",
+  picture: "",
+  id: "",
   userID: "",
-  post: [],
+  posts: [],
   friends: [],
   followings: [],
   followers: [],

client/src/services/redux/pages/profile/profilePageData/types.ts

@@ -1,6 +1,10 @@
 export interface ProfilePageDataState {
+  name: string;
+  email: string;
+  picture: string;
+  id: string;
   userID: string;
-  post: [];
+  posts: { picture: { url: string } }[];
   friends: [];
   followings: [];
   followers: [];