fix(client): CommentedUser js->ts

fixing #109
roman-ojha · Jun 28, 2022 · 9d17b21 · 9d17b21
1 parent ffdceeb
commit 9d17b21
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 47 deletions.
diff --git a/.../src/components/PostBox/CommentedUser.jsx → .../src/components/PostBox/CommentedUser.tsx b/.../src/components/PostBox/CommentedUser.jsx → .../src/components/PostBox/CommentedUser.tsx
@@ -3,26 +3,48 @@ import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";
 import GlobalApi from "../../services/api/global";
 import { useDispatch, useSelector } from "react-redux";
 import { toastError } from "../../services/toast";
-import {
-  startProgressBar,
-  stopProgressBar,
-  profilePageDataAction,
-  setRootUserProfileDataState,
-  commentBoxAction,
-} from "../../services/redux-actions";
+// import {
+//   startProgressBar,
+//   stopProgressBar,
+//   profilePageDataAction,
+//   setRootUserProfileDataState,
+//   commentBoxAction,
+// } from "../../services/redux-actions";
 import { useHistory } from "react-router-dom";
+import { AppState, actionCreators } from "../../../src/services/redux";
+import { CommentInfoState, PostBoxProps } from "./PostBox";
+import { bindActionCreators } from "redux";
 
-const CommentedUser = (props) => {
+interface CommentedUserProps {
+  commentInfo: CommentInfoState;
+  postId: PostBoxProps["userFeedData"]["id"];
+  setCommentInfo: React.Dispatch<React.SetStateAction<CommentInfoState>>;
+}
+
+const CommentedUser: React.FC<CommentedUserProps> = ({
+  commentInfo,
+  postId,
+  setCommentInfo,
+}): JSX.Element => {
   const dispatch = useDispatch();
   const history = useHistory();
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
+  );
+  const commentBoxStore = useSelector(
+    (state: AppState) => state.commentBoxReducer
   );
-  const commentBoxStore = useSelector((state) => state.commentBoxReducer);
+  const {
+    startProgressBar,
+    stopProgressBar,
+    profilePageDataAction,
+    setRootUserProfileDataState,
+    commentBoxAction,
+  } = bindActionCreators(actionCreators, dispatch);
 
   const routeToProfile = async (userID) => {
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       const res = await GlobalApi.getFriendData(userID);
       const userData = await res.data;
       if (res.status === 200 && userData.success) {
@@ -31,21 +53,19 @@ const CommentedUser = (props) => {
           ...userData.searchedUser,
           isRootUserFollowed: userData.isRootUserFollowed,
         };
-        dispatch(profilePageDataAction(userObj));
+        profilePageDataAction(userObj);
         if (userID === userProfileDetailStore.userID) {
-          dispatch(
-            setRootUserProfileDataState({
-              fetchedRootUserProfileData: true,
-              getRootUserProfileData: false,
-            })
-          );
+          setRootUserProfileDataState({
+            fetchedRootUserProfileData: true,
+            getRootUserProfileData: false,
+          });
         }
         history.push(`/u/profile/${userID}/posts`);
       } else {
         // error
         toastError(userData.msg);
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     } catch (err) {
       if (err.response) {
         if (err.response.data.success === false) {
@@ -54,61 +74,59 @@ const CommentedUser = (props) => {
       } else {
         toastError("Some Problem Occur, Please Try again later!!!");
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     }
   };
 
   useEffect(() => {
-    if (commentBoxStore.commented && commentBoxStore.postID === props.postId) {
-      props.setCommentInfo({
-        ...props.commentInfo,
+    if (commentBoxStore.commented && commentBoxStore.postID === postId) {
+      setCommentInfo({
+        ...commentInfo,
         postCommentInfo: {
           userID: userProfileDetailStore.userID,
           comment: commentBoxStore.newComment,
           picture: userProfileDetailStore.picture,
         },
-        commentNo: props.commentInfo.commentNo + 1,
+        commentNo: commentInfo.commentNo + 1,
+      });
+      commentBoxAction({
+        openCommentBox: false,
+        postID: "",
+        toId: "",
+        toUserId: "",
+        commented: false,
+        newComment: "",
+        comments: [],
       });
-      dispatch(
-        commentBoxAction({
-          openCommentBox: false,
-          postID: "",
-          toId: "",
-          toUserId: "",
-          commented: false,
-          newComment: "",
-          comments: [],
-        })
-      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [commentBoxStore.commented]);
 
   return (
     <>
       <div className="UserPostFeed_CommentBox_CommentList">
-        {props.commentInfo.postCommentInfo ? (
+        {commentInfo.postCommentInfo ? (
           <div className="UserPostFeed_CommentBox_UserComment">
             <img
               src={
-                props.commentInfo.postCommentInfo.picture
-                  ? props.commentInfo.postCommentInfo.picture
+                commentInfo.postCommentInfo.picture
+                  ? commentInfo.postCommentInfo.picture
                   : User_Profile_Icon
               }
-              alt={props.commentInfo.postCommentInfo.userID}
+              alt={commentInfo.postCommentInfo.userID}
               onClick={() => {
-                routeToProfile(props.commentInfo.postCommentInfo.userID);
+                routeToProfile(commentInfo.postCommentInfo.userID);
               }}
             />
             <div>
               <h3
                 onClick={() => {
-                  routeToProfile(props.commentInfo.postCommentInfo.userID);
+                  routeToProfile(commentInfo.postCommentInfo.userID);
                 }}
               >
-                {props.commentInfo.postCommentInfo.userID}
+                {commentInfo.postCommentInfo.userID}
               </h3>
-              <p>{props.commentInfo.postCommentInfo.comment}</p>
+              <p>{commentInfo.postCommentInfo.comment}</p>
             </div>
           </div>
         ) : (

diff --git a/client/src/components/PostBox/PostBox.tsx b/client/src/components/PostBox/PostBox.tsx
@@ -6,7 +6,7 @@ import PostInfo from "./PostInfo";
 import LikeCommentShare from "./LikeCommentShare";
 import CommentField from "./CommentField";
 import CommentedUser from "./CommentedUser";
-import UserPostType from "../../interface/userPost";
+import UserPostType, { UserPostCommentsType } from "../../interface/userPost";
 
 export interface PostBoxProps {
   userMainInformation: {
@@ -29,7 +29,7 @@ export interface PostInformationInterface {
 
 export interface CommentInfoState {
   commentNo: number;
-  postCommentInfo: {};
+  postCommentInfo: UserPostCommentsType;
 }
 
 const PostBox: React.FC<PostBoxProps> = ({
@@ -50,7 +50,11 @@ const PostBox: React.FC<PostBoxProps> = ({
       ? userFeedData.comments.by[
           Math.floor(Math.random() * userFeedData.comments.by.length)
         ]
-      : [],
+      : {
+          picture: "",
+          userID: "",
+          comment: "",
+        },
   });
 
   return (

diff --git a/client/src/interface/userPost.ts b/client/src/interface/userPost.ts
@@ -1,9 +1,15 @@
+export interface UserPostCommentsType {
+  picture: string;
+  userID: string;
+  comment: string;
+}
+
 export default interface UserPostType {
   picture: { url: string };
   caption: string;
   comments: {
     No: number;
-    by: {}[];
+    by: UserPostCommentsType[];
   };
   date: Date;
   id: string;