Added centralised error handeling method and added react-icons module

frontend/package.json

@@ -19,6 +19,7 @@
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^6.17.0",
     "reactstrap": "^9.2.0",
     "web-vitals": "^2.1.4"

frontend/src/services/auth.js

@@ -1,13 +1,34 @@
 import axios from "axios";
 
+//Error Handeling function (centralised)
+//While i was running the project, there was a 404 status form the backend due to which the the frontend was not running so i added a handleError functio which will handle the errors smoothly.
+function handleError(error, functionName) {
+  if (error.response) {
+    // Server responded with a status other than 2xx
+    console.log(`[${functionName}] Error: ${error.response.status} - ${error.response.data}`);
+  } else if (error.request) {
+    // No response received from server
+    console.log(`[${functionName}] No response received:`, error.request);
+  } else {
+    // Error setting up the request
+    console.log(`[${functionName}] Request setup error:`, error.message);
+  }
+}
+
+
 export async function fetchCredentials() {
-  const response = await axios.get(
-    `${process.env.REACT_APP_BACKEND_URL}/auth/fetchAuth`,
-    {
-      withCredentials: true,
-    },
-  );
-  return response.data;
+  try{
+    const response = await axios.get(
+      `${process.env.REACT_APP_BACKEND_URL}/auth/fetchAuth`,
+      {
+        withCredentials: true,
+      },
+    );
+    return response.data;
+  }catch(err){
+    handleError(err, "fetchCredentials");
+  }
+
 }
 
 export async function registerUser(name, ID, email, password) {
@@ -38,7 +59,7 @@ export async function registerUser(name, ID, email, password) {
       return null;
     }
   } catch (error) {
-    return null;
+    handleError(error, "registerUser");
   }
 }
 
@@ -68,7 +89,7 @@ export async function loginUser(email, password) {
       return null;
     }
   } catch (error) {
-    return null;
+    handleError(error, "loginUser");
   }
 }
 
@@ -99,15 +120,20 @@ export async function registerStudentId(id, ID_No) {
     }
   } catch (error) {
     console.error("Error registering student ID:", error);
-    return null;
+    handleError(error, "registerStudentID");
   }
 }
 
 export async function logoutUser() {
-  await axios.post(
-    `${process.env.REACT_APP_BACKEND_URL}/auth/logout`,
-    {},
-    { withCredentials: true },
-  );
-  return;
+  try{
+    await axios.post(
+      `${process.env.REACT_APP_BACKEND_URL}/auth/logout`,
+      {},
+      { withCredentials: true },
+    );
+    return;
+  }catch(error){
+    handleError(error , "logoutUser")
+  }
+
 }