Refactor code

Author: nicolelim02

frontend/src/contexts/AuthContext.tsx

@@ -7,6 +7,7 @@ import { toast } from "react-toastify";
 import Loader from "../components/Loader";
 import { SUCCESS_LOG_OUT } from "../utils/constants";
 import { User } from "../types/types";
+import { getToken, removeToken, setToken } from "../utils/token";
 
 type AuthContextType = {
   signup: (
@@ -32,11 +33,11 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const accessToken = localStorage.getItem("token");
+    const accessToken = getToken();
     if (accessToken) {
       userClient
         .get("/auth/verify-token", {
-          headers: { Authorization: `Bearer ${accessToken}` },
+          headers: { Authorization: accessToken },
         })
         .then((res) => setUser(res.data.data))
         .catch(() => setUser(null))
@@ -82,7 +83,7 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       })
       .then((res) => {
         const { accessToken, user } = res.data.data;
-        localStorage.setItem("token", accessToken);
+        setToken(accessToken);
         setUser(user);
         navigate("/home");
       })
@@ -96,7 +97,7 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   };
 
   const logout = () => {
-    localStorage.removeItem("token");
+    removeToken();
     setUser(null);
     navigate("/");
     toast.success(SUCCESS_LOG_OUT);

frontend/src/contexts/ProfileContext.tsx

@@ -10,6 +10,7 @@ import {
 } from "../utils/constants";
 import { toast } from "react-toastify";
 import axios from "axios";
+import { getToken } from "../utils/token";
 
 interface UserProfileBase {
   firstName: string;
@@ -81,10 +82,10 @@ const ProfileContextProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   const updateProfile = async (data: UserProfileBase): Promise<boolean> => {
-    const token = localStorage.getItem("token");
+    const token = getToken();
     try {
       const res = await userClient.patch(`/users/${user?.id}`, data, {
-        headers: { Authorization: `Bearer ${token}` },
+        headers: { Authorization: token },
       });
       setUser(res.data.data);
       toast.success(SUCCESS_PROFILE_UPDATE_MESSAGE);
@@ -110,12 +111,12 @@ const ProfileContextProvider: React.FC<{ children: React.ReactNode }> = ({
     oldPassword: string;
     newPassword: string;
   }) => {
-    const token = localStorage.getItem("token");
+    const token = getToken();
     await userClient
       .patch(
         `/users/${user?.id}`,
         { oldPassword, newPassword },
-        { headers: { Authorization: `Bearer ${token}` } }
+        { headers: { Authorization: token } }
       )
       .then(() => toast.success(SUCCESS_PW_UPDATE_MESSAGE))
       .catch((err) => {

frontend/src/reducers/questionReducer.ts

@@ -1,6 +1,7 @@
 import { Dispatch } from "react";
 import { questionClient } from "../utils/api";
 import { isString, isStringArray } from "../utils/typeChecker";
+import { getToken } from "../utils/token";
 
 type TestcaseFiles = {
   testcaseInputFile: File | null;
@@ -126,11 +127,11 @@ export const uploadTestcaseFiles = async (
   formData.append("requestType", requestType);
 
   try {
-    const accessToken = localStorage.getItem("token");
+    const accessToken = getToken();
     const res = await questionClient.post("/tcfiles", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
-        Authorization: `Bearer ${accessToken}`,
+        Authorization: accessToken,
       },
     });
     return res.data;
@@ -159,7 +160,7 @@ export const createQuestion = async (
 
   const { testcaseInputFileUrl, testcaseOutputFileUrl } = uploadResult.urls;
 
-  const accessToken = localStorage.getItem("token");
+  const accessToken = getToken();
   return questionClient
     .post(
       "/",
@@ -176,7 +177,7 @@ export const createQuestion = async (
       },
       {
         headers: {
-          Authorization: `Bearer ${accessToken}`,
+          Authorization: accessToken,
         },
       }
     )
@@ -297,7 +298,7 @@ export const updateQuestionById = async (
     };
   }
 
-  const accessToken = localStorage.getItem("token");
+  const accessToken = getToken();
   return questionClient
     .put(
       `/${questionId}`,
@@ -315,7 +316,7 @@ export const updateQuestionById = async (
       },
       {
         headers: {
-          Authorization: `Bearer ${accessToken}`,
+          Authorization: accessToken,
         },
       }
     )
@@ -337,10 +338,10 @@ export const updateQuestionById = async (
 
 export const deleteQuestionById = async (questionId: string) => {
   try {
-    const accessToken = localStorage.getItem("token");
+    const accessToken = getToken();
     await questionClient.delete(`/${questionId}`, {
       headers: {
-        Authorization: `Bearer ${accessToken}`,
+        Authorization: accessToken,
       },
     });
     return true;
@@ -363,11 +364,11 @@ export const createImageUrls = async (
   formData: FormData
 ): Promise<{ imageUrls: string[]; message: string } | null> => {
   try {
-    const accessToken = localStorage.getItem("token");
+    const accessToken = getToken();
     const response = await questionClient.post("/images", formData, {
       headers: {
         "Content-Type": "multipart/form-data",
-        Authorization: `Bearer ${accessToken}`,
+        Authorization: accessToken,
       },
     });
     return response.data;

frontend/src/utils/token.ts

@@ -1,11 +1,11 @@
 export const setToken = (token: string) => {
-  const bearerToken = `Bearer ${token}`;
-  localStorage.setItem("accessToken", bearerToken);
+  localStorage.setItem("accessToken", token);
 };
 
 export const getToken = () => {
   const token = localStorage.getItem("accessToken");
-  return token;
+  const bearerToken = `Bearer ${token}`;
+  return bearerToken;
 };
 
 export const removeToken = () => {