Migrate 4 modules

client/.vercelignore

@@ -1,8 +1 @@
-projects/*
 server/*
-client/src/modules/edit-profile/*
-client/src/modules/manage-projects/*
-client/src/modules/notification/*
-src/modules/edit-profile/*
-src/modules/manage-projects/*
-src/modules/notification/*

client/src/App.tsx

@@ -12,10 +12,10 @@ import Search from './modules/search';
 import Profile from './modules/profile';
 import Project from './modules/project';
 import Sidebar from './shared/components/organisms/sidebar';
-// import ChangePassword from "./modules/change-password";
-// import ManageProjects from "./modules/manage-projects";
-// import EditProfile from "./modules/edit-profile";
-// import Notifications from "./modules/notification";
+import ChangePassword from './modules/change-password';
+import ManageProjects from './modules/manage-projects';
+import EditProfile from './modules/edit-profile';
+import Notifications from './modules/notification';
 
 function App() {
   useEffect(() => {
@@ -35,12 +35,12 @@ function App() {
             <Route path="project/:project_id" element={<Project />} />
 
             <Route path="dashboard" element={<Sidebar />}>
-              {/* <Route path="projects" element={<ManageProjects />} /> */}
-              {/* <Route path="notifications" element={<Notifications />} /> */}
+              <Route path="projects" element={<ManageProjects />} />
+              <Route path="notifications" element={<Notifications />} />
             </Route>
             <Route path="settings" element={<Sidebar />}>
-              {/* <Route path="edit-profile" element={<EditProfile />} /> */}
-              {/* <Route path="change-password" element={<ChangePassword />} /> */}
+              <Route path="edit-profile" element={<EditProfile />} />
+              <Route path="change-password" element={<ChangePassword />} />
             </Route>
           </Route>
 

client/src/infra/rest/apis/project/index.ts

@@ -75,7 +75,7 @@ export const userProjects = async ({
   query,
   deletedDocCount,
 }: userProjectsPayload) => {
-  return get<undefined, ApiResponse<userProjectsResponse>>(
+  return get<undefined, ApiResponse<userProjectsResponse[]>>(
     `/api/project/user?is_draft=${is_draft}&query=${query}&page=${page}&deletedDocCount=${deletedDocCount}`
   );
 };

client/src/modules/change-password/index.tsx

@@ -1,17 +1,19 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useNotifications } from '../../shared/hooks/use-notification';
 import { passwordRegex } from '../../shared/utils/regex';
 import { changePassword } from '../../infra/rest/apis/auth';
 import InputBox from '../../shared/components/atoms/input-box';
-import { Box, Button, Typography, Stack } from '@mui/material';
+import { Box, Button, Stack, CircularProgress } from '@mui/material';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';
+import A2ZTypography from '../../shared/components/atoms/typography';
 
 const ChangePassword = () => {
   const changePasswordForm = useRef<HTMLFormElement>(null);
   const { addNotification } = useNotifications();
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!changePasswordForm.current) return;
@@ -44,26 +46,29 @@ const ChangePassword = () => {
       return;
     }
 
-    e.currentTarget.setAttribute('disabled', 'true');
+    setLoading(true);
 
-    changePassword({
-      current_password: currentPassword,
-      new_password: newPassword,
-    })
-      .then(() => {
-        e.currentTarget.removeAttribute('disabled');
-        return addNotification({
-          message: 'Password Updated!',
-          type: 'success',
-        });
-      })
-      .catch(({ response }) => {
-        e.currentTarget.removeAttribute('disabled');
-        return addNotification({
-          message: response.data.error,
-          type: 'error',
-        });
+    try {
+      await changePassword({
+        current_password: currentPassword,
+        new_password: newPassword,
       });
+      addNotification({
+        message: 'Password Updated!',
+        type: 'success',
+      });
+      if (changePasswordForm.current) {
+        changePasswordForm.current.reset();
+      }
+    } catch (error: unknown) {
+      const err = error as { response?: { data?: { error?: string } } };
+      addNotification({
+        message: err.response?.data?.error || 'Failed to update password',
+        type: 'error',
+      });
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -75,14 +80,16 @@ const ChangePassword = () => {
         display: 'flex',
         flexDirection: 'column',
         gap: 4,
-        maxWidth: 400,
+        maxWidth: 500,
         width: '100%',
-        py: 6,
+        py: 4,
       }}
     >
-      <Typography variant="h5" fontWeight={600}>
-        Change Password
-      </Typography>
+      <A2ZTypography
+        variant="h5"
+        text="Change Password"
+        props={{ fontWeight: 600 }}
+      />
 
       <Stack spacing={3}>
         <InputBox
@@ -91,19 +98,22 @@ const ChangePassword = () => {
           type="password"
           placeholder="Current Password"
           icon={<LockOutlinedIcon />}
+          disabled={loading}
         />
         <InputBox
           id="change-password--new"
           name="newPassword"
           type="password"
           placeholder="New Password"
           icon={<VpnKeyOutlinedIcon />}
+          disabled={loading}
         />
       </Stack>
       <Button
         type="submit"
         variant="contained"
         color="primary"
+        disabled={loading}
         sx={{
           mt: 2,
           py: 1.2,
@@ -113,7 +123,7 @@ const ChangePassword = () => {
           fontWeight: 500,
         }}
       >
-        Change Password
+        {loading ? <CircularProgress size={24} /> : 'Change Password'}
       </Button>
     </Box>
   );

client/src/modules/edit-profile/hooks/index.ts

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import { useSetAtom, useAtomValue } from 'jotai';
+import {
+  userProfile,
+  updateProfile,
+  updateProfileImg,
+} from '../../../infra/rest/apis/user';
+import { uploadImage } from '../../../infra/rest/apis/media';
+import { EditProfileAtom } from '../states';
+import { UserAtom } from '../../../infra/states/user';
+
+const useEditProfile = () => {
+  const setProfile = useSetAtom(EditProfileAtom);
+  const setUser = useSetAtom(UserAtom);
+  const user = useAtomValue(UserAtom);
+  const profile = useAtomValue(EditProfileAtom);
+
+  const fetchProfile = useCallback(async () => {
+    if (!user?.personal_info?.username) return;
+
+    try {
+      const response = await userProfile(user.personal_info.username);
+      if (response.data) {
+        setProfile(response.data);
+      }
+    } catch (error) {
+      console.error('Error fetching profile:', error);
+    }
+  }, [user?.personal_info?.username, setProfile]);
+
+  const updateProfileImage = useCallback(
+    async (imageFile: File) => {
+      const uploadResponse = await uploadImage(imageFile);
+      if (uploadResponse.data?.upload_url) {
+        const response = await updateProfileImg(uploadResponse.data.upload_url);
+        if (response.data && user) {
+          const updatedUser = {
+            ...user,
+            personal_info: {
+              ...user.personal_info,
+              profile_img: response.data.profile_img,
+            },
+          };
+          setUser(updatedUser);
+          return response.data.profile_img;
+        }
+      }
+    },
+    [user, setUser]
+  );
+
+  const updateUserProfile = useCallback(
+    async (profileData: {
+      username: string;
+      bio: string;
+      social_links: {
+        youtube: string;
+        instagram: string;
+        facebook: string;
+        x: string;
+        github: string;
+        linkedin: string;
+        website: string;
+      };
+    }) => {
+      const response = await updateProfile(profileData);
+      if (response.data && user) {
+        const updatedUser = {
+          ...user,
+          personal_info: {
+            ...user.personal_info,
+            username: response.data.username,
+          },
+        };
+        setUser(updatedUser);
+      }
+      return response;
+    },
+    [user, setUser]
+  );
+
+  return {
+    fetchProfile,
+    updateProfileImage,
+    updateUserProfile,
+    profile,
+  };
+};
+
+export default useEditProfile;