update: adding feature from uploadImage and remove smth useless

Author: Ahmad Zani Syechkar

server/server.ts

@@ -20,6 +20,7 @@ app.use(
 );
 
 // Middleware JSON parser
+app.use(express.json());
 
 // Connect database
 connectDB();

server/uploads/1749478346408-942177200.jpeg

@@ -68,11 +68,13 @@ export default function ProfilePhotoSelector({
         </div>
       ) : (
         <div className="relative">
-          <img
-            src={previewURL}
-            alt="Selected profile photo preview"
-            className="w-20 h-20 rounded-full object-cover"
-          />
+          {previewURL && (
+            <img
+              src={previewURL}
+              alt="Selected profile photo preview"
+              className="w-20 h-20 rounded-full object-cover"
+            />
+          )}
           <button
             type="button"
             onClick={handleRemoveImage}

src/components/inputs/ProfilePhotoSelector.tsx

@@ -0,0 +1,75 @@
+import React, { createContext, useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import axiosInstance from "../utils/axiosInstance";
+import { API_PATHS } from "../utils/ApiPaths";
+
+// Definisikan tipe user sesuai struktur yang dikembalikan dari API
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  token: string;
+  // tambahkan properti lain jika ada
+}
+
+// Definisikan tipe konteks
+interface UserContextType {
+  user: User | null;
+  loading: boolean;
+  updateUser: (userData: User) => void;
+  clearUser: () => void;
+}
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);
+
+// Props untuk provider
+interface UserProviderProps {
+  children: ReactNode;
+}
+
+export default function UserProvider({ children }: UserProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (user) return;
+
+    const accessToken = localStorage.getItem("token");
+
+    if (!accessToken) {
+      setLoading(false);
+      return;
+    }
+
+    const fetchUser = async (): Promise<void> => {
+      try {
+        const response = await axiosInstance.get<User>(API_PATHS.AUTH.GET_PROFILE);
+        setUser(response.data);
+      } catch (err) {
+        console.error(`User not authenticated`, err);
+        clearUser();
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, [user]);
+
+  const updateUser = (userData: User) => {
+    setUser(userData);
+    localStorage.setItem("token", userData.token);
+    setLoading(false);
+  };
+
+  const clearUser = () => {
+    setUser(null);
+    localStorage.removeItem("token");
+  };
+
+  return (
+    <UserContext.Provider value={{ user, loading, updateUser, clearUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}

src/context/userContext.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useContext } from 'react'
+import { Link, Navigate, Outlet } from 'react-router-dom';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import PrivateRouter from './PrivateRouter';
 
@@ -12,32 +13,46 @@ import ManageTasks from '../views/Admin/MangeTasks'
 import DashboardUser from '../views/Users/DashboardUser'
 import MyTasks from '../views/Users/MyTasks'
 import ViewTaskDetails from '../views/Users/ViewTaskDetails'
+import UserProvider, { UserContext } from '../context/userContext';
 
 export default function AppRouter() {
   return (
-    <Router>
-      <Routes>
-        <Route path='/' element={ <Index /> }/>
-        <Route path='/login' element={<Login />}/>
-        <Route path='/signup' element={<SignUp />}></Route>
+    <UserProvider>
+      <Router>
+        <Routes>
+          <Route path='/' element={ <Root /> }/>
+          <Route path='/login' element={<Login />}/>
+          <Route path='/signup' element={<SignUp />}></Route>
 
-        <Route element={<PrivateRouter allowedRoles={["admin"]} />} >
-          <Route path='/admin/dashboard' element={<DashboardAdmin />}/>
-          <Route path='/admin/create-task' element={<CreateTask />}/>
-          <Route path='/admin/manage-user' element={<ManageUser />}/>
-          <Route path='/admin/manage-task' element={<ManageTasks />}/>
-        </Route>
+          <Route element={<PrivateRouter allowedRoles={["admin"]} />} >
+            <Route path='/admin/dashboard' element={<DashboardAdmin />}/>
+            <Route path='/admin/create-task' element={<CreateTask />}/>
+            <Route path='/admin/manage-user' element={<ManageUser />}/>
+            <Route path='/admin/manage-task' element={<ManageTasks />}/>
+          </Route>
 
-        <Route element={<PrivateRouter allowedRoles={["users"] } />}>
-          <Route path='/user/dashboard' element={<DashboardUser />} />
-          <Route path='/task' element={<MyTasks />} />
-          <Route path='/task-detail/:id' element={<ViewTaskDetails />}/>
-          {/* 
-            <Route path='/purchase' element={<DashboardUser />} />
-            <Route path='/inventory' element={<DashboardUser />} /> 
-          */}
-        </Route>
-      </Routes>
-    </Router>
+          <Route element={<PrivateRouter allowedRoles={["users"] } />}>
+            <Route path='/user/dashboard' element={<DashboardUser />} />
+            <Route path='/task' element={<MyTasks />} />
+            <Route path='/task-detail/:id' element={<ViewTaskDetails />}/>
+            {/* 
+              <Route path='/purchase' element={<DashboardUser />} />
+              <Route path='/inventory' element={<DashboardUser />} /> 
+            */}
+          </Route>
+        </Routes>
+      </Router>
+    </UserProvider>
   )
+}
+
+const Root = () => {
+  const { user, loading } = useContext(UserContext);
+
+  if (loading) return <Outlet />;
+  if (!user) {
+    return <Navigate to="/login"/>
+  }
+
+  return user.role === "admin" ? <Navigate to="/admin/dashboard"/> : <Navigate to="/user/dashboard"/>
 }

src/routes/Router.tsx

@@ -0,0 +1,23 @@
+import { API_PATHS } from "./ApiPaths";
+import axiosInstance from "./axiosInstance";
+
+const uploadImage = async (imageFile: any) => {
+ const formData = new FormData();
+ 
+ formData.append('image', imageFile);
+
+ try {
+  const response = await axiosInstance.post(API_PATHS.IMAGE.UPLOAD_IMAGE, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+  });
+
+  return response.data;
+ } catch(err: any) {
+  console.error(`Error uploading the image ${err}`);
+  throw err;
+ }
+}
+
+export default uploadImage;

src/utils/upload.ts

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom';
 
 import Form from '../../components/Form';
@@ -9,6 +9,7 @@ import AuthLayout from '../../components/layout/AuthLayout';
 import axiosInstance from '../../utils/axiosInstance';
 import { validateEmail } from '../../utils/helper';
 import { API_PATHS } from '../../utils/ApiPaths';
+import { UserContext } from '../../context/userContext';
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -24,6 +25,12 @@ export default function Login() {
     setTimeout(() => setIsShaking(false), 400);
   };
 
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error("UserContext must be used within a UserProvider");
+  }
+  const { updateUser } = context;
+  
   const navigate = useNavigate();
 
   const handleLogin = async (e: any): Promise<void> => {
@@ -53,6 +60,7 @@ export default function Login() {
       if (token) {
         localStorage.setItem("token", token);
 
+        updateUser(response.data);
         if (user.role === "admin") {
           navigate("/admin/dashboard"); 
         } else {

src/views/auth/Login.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from 'react'
-import { Link } from 'react-router-dom';
+import React, { useContext, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom';
 
 import Form from '../../components/Form';
 import AuthLayout from '../../components/layout/AuthLayout';
 import ProfilePhotoSelector from '../../components/inputs/ProfilePhotoSelector';
 import Input from '../../components/Input';
 import Button from '../../components/Button';
+import axiosInstance from '../../utils/axiosInstance';
+import { API_PATHS } from '../../utils/ApiPaths';
+import { UserContext } from '../../context/userContext';
+import uploadImage from '../../utils/upload';
 
 export default function SignUp() {
   const [profilePic, setProfilePic] = useState<File | null>(null);
@@ -15,6 +19,13 @@ export default function SignUp() {
   const [buttonText, setButtonText] = useState("sign up");
   const [adminInviteToken, setAdminInviteToken] = useState("");
 
+  const navigate = useNavigate();
+
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error("UserContext must be used within a UserProvider");
+  }
+  const { updateUser } = context;
   const [error, setError] = useState("");
   const [isShaking, setIsShaking] = useState(false);
 
@@ -27,6 +38,8 @@ export default function SignUp() {
   const handleSignUp = async (e: any): Promise<void> => {
     e.preventDefault();
 
+    let setProfilePicture = '';
+
     if (!fullname) {
       triggerError("Please enter fullname");
       return;
@@ -45,9 +58,40 @@ export default function SignUp() {
     setError("");
 
     try {
-      
+      if (profilePic) {
+        const imgUploadRes = await uploadImage(profilePic);
+        setProfilePicture = imgUploadRes.imageUrl || "";
+      }
+
+      const response = await axiosInstance.post(API_PATHS.AUTH.REGISTER, {
+        name: fullname,
+        email,
+        password,
+        setProfilePicture,
+        adminInviteToken
+      });
+
+      const { token, user } = response.data;
+
+      if (token) {
+        localStorage.setItem("token", token);
+        updateUser(response.data);
+
+        if (user.role === "admin") {
+          navigate("/admin/dashboard");
+        } else {
+          navigate("/user/dashboard"); 
+        }
+      }
+     
     } catch (err: any) {
-      
+      if (err.response && err.response.data.message) {
+        triggerError(err.response.data.message);
+      } else {
+        triggerError("Something went wrong. Please try again.");
+      }
+    } finally {
+      setButtonText("sign up");
     }
   }