From 038a0c84b77277b63eda0056bc999b6964abb1c9 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Mon, 13 Nov 2023 23:51:17 +0700
Subject: [PATCH] Format code with Prettier

---
 frontend/src/App.css                          |   2 +-
 frontend/src/PrivateRoute.jsx                 |  14 +-
 frontend/src/api/UserProfileApi.jsx           |  12 +-
 frontend/src/api/configs/AxiosConfig.jsx      |  62 ++++----
 .../EisenhowerMatrix/Eisenhower.jsx           |  10 +-
 frontend/src/components/Home.jsx              |   2 +-
 frontend/src/components/ProfileUpdatePage.jsx |  31 ++--
 .../components/authentication/SignUpPage.jsx  | 140 +++++++++---------
 .../authentication/refreshAcessToken.jsx      |  12 +-
 .../components/calendar/TaskDataHandler.jsx   |  38 ++---
 frontend/src/components/calendar/calendar.jsx |   8 +-
 frontend/src/components/icons/plusIcon.jsx    |  11 +-
 frontend/src/components/icons/trashIcon.jsx   |  32 ++--
 .../kanbanBoard/columnContainer.jsx           |  52 ++-----
 .../components/kanbanBoard/kanbanBoard.jsx    |  67 +++------
 .../src/components/kanbanBoard/taskCard.jsx   |  28 +---
 .../src/components/navigations/Navbar.jsx     |   6 +-
 frontend/src/components/signup.jsx            |  77 +++++-----
 frontend/src/components/testAuth.jsx          |  67 +++++----
 .../hooks/authentication/IsAuthenticated.jsx  |  10 +-
 frontend/src/index.css                        |  14 +-
 21 files changed, 310 insertions(+), 385 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index eaac616..48931c9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -43,4 +43,4 @@
   to {
     transform: rotate(360deg);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx
index 936a7d9..600f7d4 100644
--- a/frontend/src/PrivateRoute.jsx
+++ b/frontend/src/PrivateRoute.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
-import IsAuthenticated from './hooks/authentication/IsAuthenticated';
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import IsAuthenticated from "./hooks/authentication/IsAuthenticated";
 
 const PrivateRoute = () => {
-    const auth = IsAuthenticated();
-    return auth ? <Outlet /> : <Navigate to="/login" />;
-}
+  const auth = IsAuthenticated();
+  return auth ? <Outlet /> : <Navigate to="/login" />;
+};
 
-export default PrivateRoute;
\ No newline at end of file
+export default PrivateRoute;
diff --git a/frontend/src/api/UserProfileApi.jsx b/frontend/src/api/UserProfileApi.jsx
index ca80fd1..e7a1b17 100644
--- a/frontend/src/api/UserProfileApi.jsx
+++ b/frontend/src/api/UserProfileApi.jsx
@@ -1,11 +1,11 @@
-import axios from 'axios';
+import axios from "axios";
 
-const ApiUpdateUserProfile = async (formData) => {
+const ApiUpdateUserProfile = async formData => {
   try {
-    const response = await axios.post('http://127.0.1:8000/api/user/update/', formData, {
+    const response = await axios.post("http://127.0.1:8000/api/user/update/", formData, {
       headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'multipart/form-data',
+        Authorization: "Bearer " + localStorage.getItem("access_token"),
+        "Content-Type": "multipart/form-data",
       },
     });
 
@@ -13,7 +13,7 @@ const ApiUpdateUserProfile = async (formData) => {
 
     return response.data;
   } catch (error) {
-    console.error('Error updating user profile:', error);
+    console.error("Error updating user profile:", error);
     throw error;
   }
 };
diff --git a/frontend/src/api/configs/AxiosConfig.jsx b/frontend/src/api/configs/AxiosConfig.jsx
index a6469ae..b0410d1 100644
--- a/frontend/src/api/configs/AxiosConfig.jsx
+++ b/frontend/src/api/configs/AxiosConfig.jsx
@@ -1,43 +1,45 @@
-import axios from 'axios';
-import { redirect } from 'react-router-dom';
+import axios from "axios";
+import { redirect } from "react-router-dom";
 
 const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
-    timeout: 5000,
-    headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'application/json',
-        'accept': 'application/json',
-    },
+  baseURL: "http://127.0.0.1:8000/api/",
+  timeout: 5000,
+  headers: {
+    Authorization: "Bearer " + localStorage.getItem("access_token"),
+    "Content-Type": "application/json",
+    accept: "application/json",
+  },
 });
 
 // handling token refresh on 401 Unauthorized errors
 axiosInstance.interceptors.response.use(
-    response => response,
-    error => {
-        const originalRequest = error.config;
-        const refresh_token = localStorage.getItem('refresh_token');
-        
-        // Check if the error is due to 401 and a refresh token is available
-        if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
-            return axiosInstance
-                .post('/token/refresh/', { refresh: refresh_token })
-                .then((response) => {
+  response => response,
+  error => {
+    const originalRequest = error.config;
+    const refresh_token = localStorage.getItem("refresh_token");
 
-                    localStorage.setItem('access_token', response.data.access);
+    // Check if the error is due to 401 and a refresh token is available
+    if (
+      error.response.status === 401 &&
+      error.response.statusText === "Unauthorized" &&
+      refresh_token !== "undefined"
+    ) {
+      return axiosInstance
+        .post("/token/refresh/", { refresh: refresh_token })
+        .then(response => {
+          localStorage.setItem("access_token", response.data.access);
 
-                    axiosInstance.defaults.headers['Authorization'] = "Bearer " + response.data.access;
-                    originalRequest.headers['Authorization'] = "Bearer " + response.data.access;
+          axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
+          originalRequest.headers["Authorization"] = "Bearer " + response.data.access;
 
-                    return axiosInstance(originalRequest);
-                })
-                .catch(err => {
-                    console.log('Interceptors error: ', err);
-                });
-        }
-        return Promise.reject(error);
+          return axiosInstance(originalRequest);
+        })
+        .catch(err => {
+          console.log("Interceptors error: ", err);
+        });
     }
+    return Promise.reject(error);
+  }
 );
 
-
 export default axiosInstance;
diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
index 7800fa9..c300236 100644
--- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
+++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 function EachBlog({ name, colorCode }) {
   return (
@@ -6,18 +6,16 @@ function EachBlog({ name, colorCode }) {
       <div className={`text-xl font-bold`} style={{ color: colorCode }}>
         {name}
       </div>
-      <div className='h-36'>
-        Content goes here
-      </div>
+      <div className="h-36">Content goes here</div>
     </div>
   );
 }
 
 function Eisenhower() {
   return (
-    <div className='bg-slate-100 text-left p-4 m-auto'>
+    <div className="bg-slate-100 text-left p-4 m-auto">
       <h1 className="text-3xl font-bold mb-4">The Eisenhower Matrix</h1>
-      <div className='grid grid-rows-2 grid-cols-2 gap-2'>
+      <div className="grid grid-rows-2 grid-cols-2 gap-2">
         <EachBlog name="Urgent & Important" colorCode="#FF5733" />
         <EachBlog name="Urgent & Not important" colorCode="#FDDD5C" />
         <EachBlog name="Not urgent & Important" colorCode="#189AB4" />
diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx
index 3089df5..7fa7680 100644
--- a/frontend/src/components/Home.jsx
+++ b/frontend/src/components/Home.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 function HomePage() {
   return (
diff --git a/frontend/src/components/ProfileUpdatePage.jsx b/frontend/src/components/ProfileUpdatePage.jsx
index 06a0213..6985851 100644
--- a/frontend/src/components/ProfileUpdatePage.jsx
+++ b/frontend/src/components/ProfileUpdatePage.jsx
@@ -1,12 +1,12 @@
-import React, { useState, useRef } from 'react';
-import { ApiUpdateUserProfile } from '../api/UserProfileApi';
+import React, { useState, useRef } from "react";
+import { ApiUpdateUserProfile } from "../api/UserProfileApi";
 
 function ProfileUpdate() {
   const [file, setFile] = useState(null);
-  const [username, setUsername] = useState('');
-  const [fullName, setFullName] = useState('');
-  const [about, setAbout] = useState('');
-  const defaultImage = 'https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg';
+  const [username, setUsername] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [about, setAbout] = useState("");
+  const defaultImage = "https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg";
   const fileInputRef = useRef(null);
 
   const handleImageUpload = () => {
@@ -15,7 +15,7 @@ function ProfileUpdate() {
     }
   };
 
-  const handleFileChange = (e) => {
+  const handleFileChange = e => {
     const selectedFile = e.target.files[0];
     if (selectedFile) {
       setFile(selectedFile);
@@ -24,9 +24,9 @@ function ProfileUpdate() {
 
   const handleSave = () => {
     const formData = new FormData();
-    formData.append('profile_pic', file);
-    formData.append('first_name', username);
-    formData.append('about', about);
+    formData.append("profile_pic", file);
+    formData.append("first_name", username);
+    formData.append("about", about);
 
     ApiUpdateUserProfile(formData);
   };
@@ -45,10 +45,7 @@ function ProfileUpdate() {
             ref={fileInputRef}
           />
         </label>
-        <div
-          className="avatar w-32 h-32 cursor-pointer hover:blur"
-          onClick={handleImageUpload}
-        >
+        <div className="avatar w-32 h-32 cursor-pointer hover:blur" onClick={handleImageUpload}>
           {file ? (
             <img src={URL.createObjectURL(file)} alt="Profile" className="rounded-full" />
           ) : (
@@ -69,7 +66,7 @@ function ProfileUpdate() {
           placeholder="Enter your username"
           className="input w-full"
           value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
         />
       </div>
 
@@ -81,7 +78,7 @@ function ProfileUpdate() {
           placeholder="Enter your full name"
           className="input w-full"
           value={fullName}
-          onChange={(e) => setFullName(e.target.value)}
+          onChange={e => setFullName(e.target.value)}
         />
       </div>
 
@@ -92,7 +89,7 @@ function ProfileUpdate() {
           placeholder="Tell us about yourself"
           className="textarea w-full h-32"
           value={about}
-          onChange={(e) => setAbout(e.target.value)}
+          onChange={e => setAbout(e.target.value)}
         />
       </div>
 
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 2712f97..28eb1c2 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -1,31 +1,30 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import axiosapi from '../../api/AuthenticationApi';
-
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Link from '@mui/material/Link';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axiosapi from "../../api/AuthenticationApi";
 
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import CssBaseline from "@mui/material/CssBaseline";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 function Copyright(props) {
   return (
     <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
+      {"Copyright © "}
       <Link color="inherit" href="https://github.com/TurTaskProject/TurTaskWeb">
         TurTask
-      </Link>{' '}
+      </Link>{" "}
       {new Date().getFullYear()}
-      {'.'}
+      {"."}
     </Typography>
   );
 }
@@ -33,37 +32,36 @@ function Copyright(props) {
 const defaultTheme = createTheme();
 
 export default function SignUp() {
+  const Navigate = useNavigate();
 
-    const Navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    password: "",
+  });
+  const [error, setError] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const [formData, setFormData] = useState({
-      email: '',
-      username: '',
-      password: '',
-    });
-    const [error, setError] = useState(null);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-  
-    const handleSubmit = async (e) => {
-      e.preventDefault();
-      setIsSubmitting(true);
-      setError(null);
-  
-      try {
-          axiosapi.createUser(formData);
-      } catch (error) {
-          console.error('Error creating user:', error);
-          setError('Registration failed. Please try again.');
-      } finally {
-          setIsSubmitting(false);
-      }
-      Navigate('/login');
-    };
-  
-    const handleChange = (e) => {
-      const { name, value } = e.target;
-      setFormData({ ...formData, [name]: value });
-    };
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      axiosapi.createUser(formData);
+    } catch (error) {
+      console.error("Error creating user:", error);
+      setError("Registration failed. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+    Navigate("/login");
+  };
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
 
   return (
     <ThemeProvider theme={defaultTheme}>
@@ -71,13 +69,12 @@ export default function SignUp() {
         <CssBaseline />
         <Box
           sx={{
-              marginTop: 8,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-        >
-          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}>
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
             <LockOutlinedIcon />
           </Avatar>
           <Typography component="h1" variant="h5">
@@ -85,17 +82,17 @@ export default function SignUp() {
           </Typography>
           <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
             <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <TextField
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                name="email"
-                autoComplete="email"
-                onChange={handleChange}
-              />
-            </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  name="email"
+                  autoComplete="email"
+                  onChange={handleChange}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <TextField
                   autoComplete="username"
@@ -127,12 +124,7 @@ export default function SignUp() {
                 />
               </Grid>
             </Grid>
-            <Button
-              type="submit"
-              fullWidth
-              variant="contained"
-              sx={{ mt: 3, mb: 2 }}
-            >
+            <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
               Sign Up
             </Button>
             <Grid container justifyContent="flex-end">
@@ -148,4 +140,4 @@ export default function SignUp() {
       </Container>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/authentication/refreshAcessToken.jsx b/frontend/src/components/authentication/refreshAcessToken.jsx
index 89204d5..11a74fa 100644
--- a/frontend/src/components/authentication/refreshAcessToken.jsx
+++ b/frontend/src/components/authentication/refreshAcessToken.jsx
@@ -1,8 +1,8 @@
-import axios from 'axios';
+import axios from "axios";
 
 async function refreshAccessToken() {
-  const refresh_token = localStorage.getItem('refresh_token');
-  const access_token = localStorage.getItem('access_token');
+  const refresh_token = localStorage.getItem("refresh_token");
+  const access_token = localStorage.getItem("access_token");
 
   if (access_token) {
     return true;
@@ -12,7 +12,7 @@ async function refreshAccessToken() {
     return false;
   }
 
-  const refreshUrl = 'http://127.0.0.1:8000/api/token/refresh/';
+  const refreshUrl = "http://127.0.0.1:8000/api/token/refresh/";
 
   try {
     const response = await axios.post(refreshUrl, { refresh: refresh_token });
@@ -22,8 +22,8 @@ async function refreshAccessToken() {
       const newAccessToken = response.data.access;
       const newRefreshToken = response.data.refresh;
 
-      localStorage.setItem('access_token', newAccessToken);
-      localStorage.setItem('refresh_token', newRefreshToken);
+      localStorage.setItem("access_token", newAccessToken);
+      localStorage.setItem("refresh_token", newRefreshToken);
 
       return true;
     } else {
diff --git a/frontend/src/components/calendar/TaskDataHandler.jsx b/frontend/src/components/calendar/TaskDataHandler.jsx
index 3c123e9..933cb42 100644
--- a/frontend/src/components/calendar/TaskDataHandler.jsx
+++ b/frontend/src/components/calendar/TaskDataHandler.jsx
@@ -1,6 +1,6 @@
-import { fetchTodoTasks } from '../../api/TaskApi';
+import { fetchTodoTasks } from "../../api/TaskApi";
 
-let eventGuid = 0
+let eventGuid = 0;
 
 // function getDateAndTime(dateString) {
 //   const dateObject = new Date(dateString);
@@ -18,25 +18,25 @@ let eventGuid = 0
 //   return dateFormatted + timeFormatted;
 // }
 
-const mapResponseToEvents = (response) => {
-    return response.map(item => ({
-        id: createEventId(),
-        title: item.title,
-        start: item.start_event,
-        end: item.end_event,
-    }));
-}
+const mapResponseToEvents = response => {
+  return response.map(item => ({
+    id: createEventId(),
+    title: item.title,
+    start: item.start_event,
+    end: item.end_event,
+  }));
+};
 
 export async function getEvents() {
-    try {
-        const response = await fetchTodoTasks();
-        return mapResponseToEvents(response);
-    } catch (error) {
-        console.error(error);
-        return [];
-    }
+  try {
+    const response = await fetchTodoTasks();
+    return mapResponseToEvents(response);
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
 }
 
 export function createEventId() {
-    return String(eventGuid++);
-}
\ No newline at end of file
+  return String(eventGuid++);
+}
diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx
index 6258da9..f1f63e5 100644
--- a/frontend/src/components/calendar/calendar.jsx
+++ b/frontend/src/components/calendar/calendar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { formatDate } from "@fullcalendar/core";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -79,7 +79,7 @@ export default class Calendar extends React.Component {
     });
   };
 
-  handleDateSelect = (selectInfo) => {
+  handleDateSelect = selectInfo => {
     let title = prompt("Please enter a new title for your event");
     let calendarApi = selectInfo.view.calendar;
 
@@ -96,13 +96,13 @@ export default class Calendar extends React.Component {
     }
   };
 
-  handleEventClick = (clickInfo) => {
+  handleEventClick = clickInfo => {
     if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
       clickInfo.event.remove();
     }
   };
 
-  handleEvents = (events) => {
+  handleEvents = events => {
     this.setState({
       currentEvents: events,
     });
diff --git a/frontend/src/components/icons/plusIcon.jsx b/frontend/src/components/icons/plusIcon.jsx
index 080d990..7363a7b 100644
--- a/frontend/src/components/icons/plusIcon.jsx
+++ b/frontend/src/components/icons/plusIcon.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 function PlusIcon() {
   return (
@@ -8,13 +8,8 @@ function PlusIcon() {
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
+      className="w-6 h-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
     </svg>
   );
 }
diff --git a/frontend/src/components/icons/trashIcon.jsx b/frontend/src/components/icons/trashIcon.jsx
index f0be9fc..c7721fd 100644
--- a/frontend/src/components/icons/trashIcon.jsx
+++ b/frontend/src/components/icons/trashIcon.jsx
@@ -1,22 +1,20 @@
-import React from 'react';
+import React from "react";
 
 function TrashIcon() {
-  return (
-    React.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: 1.5,
-        className: "w-6 h-6"
-      },
-      React.createElement("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-      })
-    )
+  return React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      className: "w-6 h-6",
+    },
+    React.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0",
+    })
   );
 }
 
diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 5ff2333..102e424 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -5,29 +5,14 @@ import { useMemo, useState } from "react";
 import PlusIcon from "../icons/plusIcon";
 import TaskCard from "./taskCard";
 
-function ColumnContainer({
-  column,
-  deleteColumn,
-  updateColumn,
-  createTask,
-  tasks,
-  deleteTask,
-  updateTask,
-}) {
+function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
   const [editMode, setEditMode] = useState(false);
 
   const tasksIds = useMemo(() => {
-    return tasks.map((task) => task.id);
+    return tasks.map(task => task.id);
   }, [tasks]);
 
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: column.id,
     data: {
       type: "Column",
@@ -57,8 +42,7 @@ function ColumnContainer({
       rounded-md
       flex
       flex-col
-      "
-      ></div>
+      "></div>
     );
   }
 
@@ -74,8 +58,7 @@ function ColumnContainer({
   rounded-md
   flex
   flex-col
-  "
-    >
+  ">
       {/* Column title */}
       <div
         {...attributes}
@@ -97,8 +80,7 @@ function ColumnContainer({
       flex
       items-center
       justify-between
-      "
-      >
+      ">
         <div className="flex gap-2">
           <div
             className="
@@ -110,8 +92,7 @@ function ColumnContainer({
         py-1
         text-sm
         rounded-full
-        "
-          >
+        ">
             0
           </div>
           {!editMode && column.title}
@@ -119,12 +100,12 @@ function ColumnContainer({
             <input
               className="bg-black focus:border-rose-500 border rounded outline-none px-2"
               value={column.title}
-              onChange={(e) => updateColumn(column.id, e.target.value)}
+              onChange={e => updateColumn(column.id, e.target.value)}
               autoFocus
               onBlur={() => {
                 setEditMode(false);
               }}
-              onKeyDown={(e) => {
+              onKeyDown={e => {
                 if (e.key !== "Enter") return;
                 setEditMode(false);
               }}
@@ -142,8 +123,7 @@ function ColumnContainer({
         rounded
         px-1
         py-2
-        "
-        >
+        ">
           <TrashIcon />
         </button>
       </div>
@@ -151,13 +131,8 @@ function ColumnContainer({
       {/* Column task container */}
       <div className="flex flex-grow flex-col gap-4 p-2 overflow-x-hidden overflow-y-auto">
         <SortableContext items={tasksIds}>
-          {tasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              deleteTask={deleteTask}
-              updateTask={updateTask}
-            />
+          {tasks.map(task => (
+            <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
           ))}
         </SortableContext>
       </div>
@@ -166,8 +141,7 @@ function ColumnContainer({
         className="flex gap-2 items-center border-columnBackgroundColor border-2 rounded-md p-4 border-x-columnBackgroundColor hover:bg-mainBackgroundColor hover:text-rose-500 active:bg-black"
         onClick={() => {
           createTask(column.id);
-        }}
-      >
+        }}>
         <PlusIcon />
         Add task
       </button>
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 1ec76b5..743d8a9 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -1,13 +1,7 @@
-import PlusIcon from "../icons/plusIcon"
+import PlusIcon from "../icons/plusIcon";
 import { useMemo, useState } from "react";
 import ColumnContainer from "./columnContainer";
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import TaskCard from "./taskCard";
@@ -98,7 +92,7 @@ const defaultTasks = [
 
 function KanbanBoard() {
   const [columns, setColumns] = useState(defaultCols);
-  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+  const columnsId = useMemo(() => columns.map(col => col.id), [columns]);
 
   const [tasks, setTasks] = useState(defaultTasks);
 
@@ -123,18 +117,12 @@ function KanbanBoard() {
         items-center
         overflow-x-auto
         overflow-y-hidden
-    "
-    >
-      <DndContext
-        sensors={sensors}
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
-        onDragOver={onDragOver}
-      >
+    ">
+      <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
         <div className="m-auto flex gap-4">
           <div className="flex gap-4">
             <SortableContext items={columnsId}>
-              {columns.map((col) => (
+              {columns.map(col => (
                 <ColumnContainer
                   key={col.id}
                   column={col}
@@ -143,7 +131,7 @@ function KanbanBoard() {
                   createTask={createTask}
                   deleteTask={deleteTask}
                   updateTask={updateTask}
-                  tasks={tasks.filter((task) => task.columnId === col.id)}
+                  tasks={tasks.filter(task => task.columnId === col.id)}
                 />
               ))}
             </SortableContext>
@@ -166,8 +154,7 @@ function KanbanBoard() {
       hover:ring-2
       flex
       gap-2
-      "
-          >
+      ">
             <PlusIcon />
             Add Column
           </button>
@@ -183,18 +170,10 @@ function KanbanBoard() {
                 createTask={createTask}
                 deleteTask={deleteTask}
                 updateTask={updateTask}
-                tasks={tasks.filter(
-                  (task) => task.columnId === activeColumn.id
-                )}
-              />
-            )}
-            {activeTask && (
-              <TaskCard
-                task={activeTask}
-                deleteTask={deleteTask}
-                updateTask={updateTask}
+                tasks={tasks.filter(task => task.columnId === activeColumn.id)}
               />
             )}
+            {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
           </DragOverlay>,
           document.body
         )}
@@ -213,12 +192,12 @@ function KanbanBoard() {
   }
 
   function deleteTask(id) {
-    const newTasks = tasks.filter((task) => task.id !== id);
+    const newTasks = tasks.filter(task => task.id !== id);
     setTasks(newTasks);
   }
 
   function updateTask(id, content) {
-    const newTasks = tasks.map((task) => {
+    const newTasks = tasks.map(task => {
       if (task.id !== id) return task;
       return { ...task, content };
     });
@@ -236,15 +215,15 @@ function KanbanBoard() {
   }
 
   function deleteColumn(id) {
-    const filteredColumns = columns.filter((col) => col.id !== id);
+    const filteredColumns = columns.filter(col => col.id !== id);
     setColumns(filteredColumns);
 
-    const newTasks = tasks.filter((t) => t.columnId !== id);
+    const newTasks = tasks.filter(t => t.columnId !== id);
     setTasks(newTasks);
   }
 
   function updateColumn(id, title) {
-    const newColumns = columns.map((col) => {
+    const newColumns = columns.map(col => {
       if (col.id !== id) return col;
       return { ...col, title };
     });
@@ -279,10 +258,10 @@ function KanbanBoard() {
     const isActiveAColumn = active.data.current?.type === "Column";
     if (!isActiveAColumn) return;
 
-    setColumns((columns) => {
-      const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
+    setColumns(columns => {
+      const activeColumnIndex = columns.findIndex(col => col.id === activeId);
 
-      const overColumnIndex = columns.findIndex((col) => col.id === overId);
+      const overColumnIndex = columns.findIndex(col => col.id === overId);
 
       return arrayMove(columns, activeColumnIndex, overColumnIndex);
     });
@@ -303,9 +282,9 @@ function KanbanBoard() {
     if (!isActiveATask) return;
 
     if (isActiveATask && isOverATask) {
-      setTasks((tasks) => {
-        const activeIndex = tasks.findIndex((t) => t.id === activeId);
-        const overIndex = tasks.findIndex((t) => t.id === overId);
+      setTasks(tasks => {
+        const activeIndex = tasks.findIndex(t => t.id === activeId);
+        const overIndex = tasks.findIndex(t => t.id === overId);
 
         if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
           tasks[activeIndex].columnId = tasks[overIndex].columnId;
@@ -319,8 +298,8 @@ function KanbanBoard() {
     const isOverAColumn = over.data.current?.type === "Column";
 
     if (isActiveATask && isOverAColumn) {
-      setTasks((tasks) => {
-        const activeIndex = tasks.findIndex((t) => t.id === activeId);
+      setTasks(tasks => {
+        const activeIndex = tasks.findIndex(t => t.id === activeId);
 
         tasks[activeIndex].columnId = overId;
         return arrayMove(tasks, activeIndex, activeIndex);
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index c6fb391..9dcafa7 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -7,14 +7,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
   const [mouseIsOver, setMouseIsOver] = useState(false);
   const [editMode, setEditMode] = useState(true);
 
-  const {
-    setNodeRef,
-    attributes,
-    listeners,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: task.id,
     data: {
       type: "Task",
@@ -29,7 +22,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
   };
 
   const toggleEditMode = () => {
-    setEditMode((prev) => !prev);
+    setEditMode(prev => !prev);
     setMouseIsOver(false);
   };
 
@@ -53,8 +46,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
         style={style}
         {...attributes}
         {...listeners}
-        className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
-      >
+        className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative">
         <textarea
           className="
         h-[90%]
@@ -64,12 +56,12 @@ function TaskCard({ task, deleteTask, updateTask }) {
           autoFocus
           placeholder="Task content here"
           onBlur={toggleEditMode}
-          onKeyDown={(e) => {
+          onKeyDown={e => {
             if (e.key === "Enter" && e.shiftKey) {
               toggleEditMode();
             }
           }}
-          onChange={(e) => updateTask(task.id, e.target.value)}
+          onChange={e => updateTask(task.id, e.target.value)}
         />
       </div>
     );
@@ -88,19 +80,15 @@ function TaskCard({ task, deleteTask, updateTask }) {
       }}
       onMouseLeave={() => {
         setMouseIsOver(false);
-      }}
-    >
-      <p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">
-        {task.content}
-      </p>
+      }}>
+      <p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">{task.content}</p>
 
       {mouseIsOver && (
         <button
           onClick={() => {
             deleteTask(task.id);
           }}
-          className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100"
-        >
+          className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100">
           <TrashIcon />
         </button>
       )}
diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
index 9328e1c..3cac29c 100644
--- a/frontend/src/components/navigations/Navbar.jsx
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -4,8 +4,8 @@ import IsAuthenticated from "../../hooks/authentication/IsAuthenticated";
 import axiosapi from "../../api/AuthenticationApi";
 
 const settings = {
-  Profile: '/update_profile',
-  Account: '/account',
+  Profile: "/update_profile",
+  Account: "/account",
 };
 
 function NavBar() {
@@ -24,7 +24,7 @@ function NavBar() {
         <a className="btn btn-ghost normal-case text-xl" href="/">
           TurTask
         </a>
-      </div>  
+      </div>
       <div className="flex-none gap-2">
         <div className="form-control">
           <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
diff --git a/frontend/src/components/signup.jsx b/frontend/src/components/signup.jsx
index 5c1bc7b..aba1642 100644
--- a/frontend/src/components/signup.jsx
+++ b/frontend/src/components/signup.jsx
@@ -1,59 +1,59 @@
-import React, { useState } from 'react';
-import axiosapi from '../api/axiosapi';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Container from '@material-ui/core/Container';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { useState } from "react";
+import axiosapi from "../api/axiosapi";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import Button from "@material-ui/core/Button";
+import { makeStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles((theme) => ({
-    // Styles for various elements
-    paper: {
-        marginTop: theme.spacing(8),
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-    },
-    avatar: {
-        margin: theme.spacing(1),
-        backgroundColor: theme.palette.secondary.main,
-    },
-    form: {
-        width: '100%',
-        marginTop: theme.spacing(1),
-    },
-    submit: {
-        margin: theme.spacing(3, 0, 2),
-    },
+const useStyles = makeStyles(theme => ({
+  // Styles for various elements
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: "100%",
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
 }));
 
 const Signup = () => {
   const classes = useStyles();
   const [formData, setFormData] = useState({
-    email: '',
-    username: '',
-    password: '',
+    email: "",
+    username: "",
+    password: "",
   });
   const [error, setError] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async e => {
     e.preventDefault();
     setIsSubmitting(true);
     setError(null);
 
     try {
-        axiosapi.createUser(formData);
+      axiosapi.createUser(formData);
     } catch (error) {
-        console.error('Error creating user:', error);
-        setError('Registration failed. Please try again.'); // Set an error message
+      console.error("Error creating user:", error);
+      setError("Registration failed. Please try again."); // Set an error message
     } finally {
-        setIsSubmitting(false);
+      setIsSubmitting(false);
     }
   };
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
@@ -102,9 +102,8 @@ const Signup = () => {
             variant="contained"
             color="primary"
             className={classes.submit}
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? 'Signing up...' : 'Sign Up'}
+            disabled={isSubmitting}>
+            {isSubmitting ? "Signing up..." : "Sign Up"}
           </Button>
         </form>
         {error && <Typography color="error">{error}</Typography>}
diff --git a/frontend/src/components/testAuth.jsx b/frontend/src/components/testAuth.jsx
index abd7ba1..1edf44a 100644
--- a/frontend/src/components/testAuth.jsx
+++ b/frontend/src/components/testAuth.jsx
@@ -1,42 +1,47 @@
-import React, { useState, useEffect } from 'react';
-import axiosapi from '../api/AuthenticationApi';
-import { Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import axiosapi from "../api/AuthenticationApi";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 function TestAuth() {
-    let Navigate = useNavigate();
+  let Navigate = useNavigate();
 
-    const [message, setMessage] = useState("");
+  const [message, setMessage] = useState("");
 
-    useEffect(() => {
-        // Fetch the "hello" data from the server when the component mounts
-        axiosapi.getGreeting().then(res => {
-            console.log(res.data);
-            setMessage(res.data.user);
-        }).catch(err => {
-            console.log(err);
-            setMessage("");
-        });
-    }, []);
+  useEffect(() => {
+    // Fetch the "hello" data from the server when the component mounts
+    axiosapi
+      .getGreeting()
+      .then(res => {
+        console.log(res.data);
+        setMessage(res.data.user);
+      })
+      .catch(err => {
+        console.log(err);
+        setMessage("");
+      });
+  }, []);
 
-    const logout = () => {
-        // Log out the user, clear tokens, and navigate to the "/testAuth" route
-        axiosapi.apiUserLogout();
-        Navigate('/testAuth');
-    }
+  const logout = () => {
+    // Log out the user, clear tokens, and navigate to the "/testAuth" route
+    axiosapi.apiUserLogout();
+    Navigate("/testAuth");
+  };
 
-    return (
+  return (
+    <div>
+      {message !== "" && (
         <div>
-            {message !== "" && (
-                <div>
-                    <h1 class="text-xl font-bold">Login! Hello!</h1>
-                    <h2>{message}</h2>
-                    <Button variant="contained" onClick={logout}>Logout</Button>
-                </div>
-            )}
-            {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
+          <h1 class="text-xl font-bold">Login! Hello!</h1>
+          <h2>{message}</h2>
+          <Button variant="contained" onClick={logout}>
+            Logout
+          </Button>
         </div>
-    );
+      )}
+      {message === "" && <h1 class="text-xl font-bold">Need to sign in, No authentication found</h1>}
+    </div>
+  );
 }
 
 export default TestAuth;
diff --git a/frontend/src/hooks/authentication/IsAuthenticated.jsx b/frontend/src/hooks/authentication/IsAuthenticated.jsx
index a132fb2..2203ef3 100644
--- a/frontend/src/hooks/authentication/IsAuthenticated.jsx
+++ b/frontend/src/hooks/authentication/IsAuthenticated.jsx
@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 function IsAuthenticated() {
   const [isAuthenticated, setIsAuthenticated] = useState(() => {
-    const access_token = localStorage.getItem('access_token');
+    const access_token = localStorage.getItem("access_token");
     return !!access_token;
   });
 
   useEffect(() => {
     const handleTokenChange = () => {
-      const newAccessToken = localStorage.getItem('access_token');
+      const newAccessToken = localStorage.getItem("access_token");
       setIsAuthenticated(!!newAccessToken);
     };
 
-    window.addEventListener('storage', handleTokenChange);
+    window.addEventListener("storage", handleTokenChange);
 
     return () => {
-      window.removeEventListener('storage', handleTokenChange);
+      window.removeEventListener("storage", handleTokenChange);
     };
   }, []);
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index daa8633..fcd32b6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,20 +8,18 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-.nav-link{
-  color:black;
+.nav-link {
+  color: black;
   /* border: 1px solid white; */
   padding: 1em;
-}
\ No newline at end of file
+}