diff --git a/client/src/components/PostBox/CommentField.jsx b/client/src/components/PostBox/CommentField.tsx
similarity index 66%
rename from client/src/components/PostBox/CommentField.jsx
rename to client/src/components/PostBox/CommentField.tsx
index 50d52555..9733c533 100644
--- a/client/src/components/PostBox/CommentField.jsx
+++ b/client/src/components/PostBox/CommentField.tsx
@@ -2,50 +2,71 @@ import React, { useState } from "react";
 import { Icon } from "@iconify/react";
 import { useSelector, useDispatch } from "react-redux";
 import User_Profile_Icon from "../../assets/svg/User_profile_Icon.svg";
-import {
-  startProgressBar,
-  stopProgressBar,
-  profilePageDataAction,
-  setRootUserProfileDataState,
-} from "../../services/redux-actions";
+// import {
+//   startProgressBar,
+//   stopProgressBar,
+//   profilePageDataAction,
+//   setRootUserProfileDataState,
+// } from "../../services/redux-actions";
 import { isEmptyString } from "../../funcs/isEmptyString";
 import { toastWarn, toastError, toastSuccess } from "../../services/toast";
 import Api from "../../services/api/components/postBox";
 import { useHistory } from "react-router-dom";
+import { bindActionCreators } from "redux";
+import { AppState, actionCreators } from "../../../src/services/redux";
+import { CommentInfoState, PostBoxProps } from "./PostBox";
 
-const CommentField = (props) => {
+interface CommentFieldProps {
+  userFeedData: PostBoxProps["userFeedData"];
+  userMainInformation: PostBoxProps["userMainInformation"];
+  commentInfo: CommentInfoState;
+  setCommentInfo: React.Dispatch<React.SetStateAction<CommentInfoState>>;
+}
+
+const CommentField: React.FC<CommentFieldProps> = ({
+  commentInfo,
+  setCommentInfo,
+  userFeedData,
+  userMainInformation,
+}) => {
   const history = useHistory();
   const dispatch = useDispatch();
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
   const [commentInputField, setCommentInputField] = useState("");
   const rootUserProfileDataState = useSelector(
-    (state) => state.rootUserProfileDataState
+    (state: AppState) => state.rootUserProfileDataState
   );
+  const {
+    startProgressBar,
+    stopProgressBar,
+    profilePageDataAction,
+    setRootUserProfileDataState,
+  } = bindActionCreators(actionCreators, dispatch);
 
   const comment = async () => {
     try {
-      dispatch(startProgressBar());
+      startProgressBar();
       if (isEmptyString(commentInputField)) {
         toastWarn("Please Fill the Comment Field Properly");
       } else {
         const res = await Api.comment({
           comment: commentInputField,
-          postID: props.userFeedData.id,
-          toId: props.userMainInformation.id,
-          toUserId: props.userMainInformation.userID,
+          postID: userFeedData.id,
+          toId: userMainInformation.id,
+          toUserId: userMainInformation.userID,
         });
         const data = await res.data;
         if (res.status === 200 && data.success) {
-          props.setCommentInfo({
-            ...props.commentInfo,
+          setCommentInfo({
+            ...commentInfo,
             postCommentInfo: {
               userID: userProfileDetailStore.userID,
               comment: commentInputField,
               picture: userProfileDetailStore.picture,
             },
-            commentNo: props.commentInfo.commentNo + 1,
+            commentNo: commentInfo.commentNo + 1,
           });
           toastSuccess(data.msg);
           setCommentInputField("");
@@ -53,7 +74,7 @@ const CommentField = (props) => {
           toastError(data.msg);
         }
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     } catch (err) {
       if (err.response) {
         if (err.response.data.success === false) {
@@ -62,7 +83,7 @@ const CommentField = (props) => {
       } else {
         toastError("Some Problem Occur, Please Try again later!!!");
       }
-      dispatch(stopProgressBar());
+      stopProgressBar();
     }
   };
 
@@ -76,20 +97,18 @@ const CommentField = (props) => {
               ? userProfileDetailStore.picture
               : User_Profile_Icon
           }
-          img={userProfileDetailStore.userID}
+          // img={userProfileDetailStore.userID}
           onClick={() => {
             const userObj = {
               ...userProfileDetailStore,
               isRootUserFollowed: false,
             };
-            dispatch(profilePageDataAction(userObj));
+            profilePageDataAction(userObj);
             if (!rootUserProfileDataState.fetchedRootUserProfileData) {
-              dispatch(
-                setRootUserProfileDataState({
-                  fetchedRootUserProfileData: false,
-                  getRootUserProfileData: true,
-                })
-              );
+              setRootUserProfileDataState({
+                fetchedRootUserProfileData: false,
+                getRootUserProfileData: true,
+              });
             }
             history.push(`/u/profile/${userProfileDetailStore.userID}/posts`);
           }}
diff --git a/client/src/components/PostBox/PostBox.tsx b/client/src/components/PostBox/PostBox.tsx
index e7e86160..d483bc0a 100644
--- a/client/src/components/PostBox/PostBox.tsx
+++ b/client/src/components/PostBox/PostBox.tsx
@@ -27,6 +27,11 @@ export interface PostInformationInterface {
   userName: string;
 }
 
+export interface CommentInfoState {
+  commentNo: number;
+  postCommentInfo: {};
+}
+
 const PostBox: React.FC<PostBoxProps> = ({
   userMainInformation,
   userFeedData,
@@ -39,7 +44,7 @@ const PostBox: React.FC<PostBoxProps> = ({
     userName: userMainInformation.name,
   });
 
-  const [commentInfo, setCommentInfo] = useState({
+  const [commentInfo, setCommentInfo] = useState<CommentInfoState>({
     commentNo: userFeedData.comments.No,
     postCommentInfo: userFeedData.comments.by
       ? userFeedData.comments.by[