Merge pull request #112 from nicolelim02/feat/communication

Refactor code

Author: ruiqi7

backend/matching-service/src/server.ts

@@ -3,7 +3,6 @@ import app, { allowedOrigins } from "./app.ts";
 import { handleWebsocketMatchEvents } from "./handlers/websocketHandler.ts";
 import { Server } from "socket.io";
 import { connectToRabbitMq } from "./config/rabbitmq.ts";
-import { verifyToken } from "./api/userService.ts";
 import { verifyUserToken } from "./middlewares/basicAccessControl.ts";
 
 const server = http.createServer(app);

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/collabSocket.ts

@@ -3,6 +3,7 @@ import { io } from "socket.io-client";
 import { updateCursor, Cursor } from "./collabCursor";
 import { Doc, Text, applyUpdateV2 } from "yjs";
 import { Awareness } from "y-protocols/awareness";
+import { getToken } from "./token";
 
 export enum CollabEvents {
   // Send
@@ -38,7 +39,7 @@ export const collabSocket = io(COLLAB_SOCKET_URL, {
   reconnectionAttempts: 3,
   autoConnect: false,
   auth: {
-    token: `Bearer ${localStorage.getItem("token")}`,
+    token: getToken(),
   },
 });
 

frontend/src/utils/communicationSocket.ts

@@ -1,4 +1,5 @@
 import { io } from "socket.io-client";
+import { getToken } from "./token";
 
 export enum CommunicationEvents {
   // send
@@ -22,6 +23,6 @@ export const communicationSocket = io(COMMUNICATION_SOCKET_URL, {
   autoConnect: false,
   withCredentials: true,
   auth: {
-    token: `Bearer ${localStorage.getItem("token")}`,
+    token: getToken(),
   },
 });

frontend/src/utils/matchSocket.ts

@@ -1,11 +1,12 @@
 import { io } from "socket.io-client";
+import { getToken } from "./token";
 
 const MATCH_SOCKET_URL = "http://localhost:3002";
 
 export const matchSocket = io(MATCH_SOCKET_URL, {
   reconnectionAttempts: 3,
   autoConnect: false,
   auth: {
-    token: `Bearer ${localStorage.getItem("token")}`,
+    token: getToken(),
   },
 });

frontend/src/utils/token.ts

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