- {columns.map(col => (
+ {columns.map((col) => (
task.columnId === col.id)}
+ tasks={tasks.filter((task) => task.columnId === col.id)}
/>
))}
@@ -186,7 +186,7 @@ function KanbanBoard() {
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
- tasks={tasks.filter(task => task.columnId === activeColumn.id)}
+ tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
/>
)}
{activeTask &&
}
@@ -213,35 +213,34 @@ function KanbanBoard() {
axiosInstance
.post("todo/", newTaskData)
- .then(response => {
+ .then((response) => {
const newTask = {
id: response.data.id,
columnId,
content: response.data.title,
};
-
})
- .catch(error => {
+ .catch((error) => {
console.error("Error creating task:", error);
});
- setTasks(tasks => [...tasks, newTask]);
- }
+ setTasks((tasks) => [...tasks, newTask]);
+ }
function deleteTask(id) {
- const newTasks = tasks.filter(task => task.id !== id);
+ const newTasks = tasks.filter((task) => task.id !== id);
axiosInstance
.delete(`todo/${id}/`)
- .then(response => {
+ .then((response) => {
setTasks(newTasks);
})
- .catch(error => {
+ .catch((error) => {
console.error("Error deleting Task:", error);
});
- setTasks(newTasks);
+ 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 };
});
@@ -252,15 +251,15 @@ function KanbanBoard() {
function createNewColumn() {
axiosInstance
.post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
- .then(response => {
+ .then((response) => {
const newColumn = {
id: response.data.id,
title: response.data.name,
};
- setColumns(prevColumns => [...prevColumns, newColumn]);
+ setColumns((prevColumns) => [...prevColumns, newColumn]);
})
- .catch(error => {
+ .catch((error) => {
console.error("Error creating ListBoard:", error);
});
}
@@ -268,22 +267,22 @@ function KanbanBoard() {
function deleteColumn(id) {
axiosInstance
.delete(`lists/${id}/`)
- .then(response => {
- setColumns(prevColumns => prevColumns.filter(col => col.id !== id));
+ .then((response) => {
+ setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
})
- .catch(error => {
+ .catch((error) => {
console.error("Error deleting ListBoard:", error);
});
- const tasksToDelete = tasks.filter(t => t.columnId === id);
+ const tasksToDelete = tasks.filter((t) => t.columnId === id);
- tasksToDelete.forEach(task => {
+ tasksToDelete.forEach((task) => {
axiosInstance
.delete(`todo/${task.id}/`)
- .then(response => {
- setTasks(prevTasks => prevTasks.filter(t => t.id !== task.id));
+ .then((response) => {
+ setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
})
- .catch(error => {
+ .catch((error) => {
console.error("Error deleting Task:", error);
});
});
@@ -293,10 +292,10 @@ function KanbanBoard() {
// Update the column
axiosInstance
.patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements
- .then(response => {
- setColumns(prevColumns => prevColumns.map(col => (col.id === id ? { ...col, title } : col)));
+ .then((response) => {
+ setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
})
- .catch(error => {
+ .catch((error) => {
console.error("Error updating ListBoard:", error);
});
}
@@ -330,9 +329,9 @@ function KanbanBoard() {
// Reorder columns if the dragged item is a column
if (isActiveAColumn && isOverAColumn) {
- setColumns(columns => {
- const activeColumnIndex = columns.findIndex(col => col.id === activeId);
- const overColumnIndex = columns.findIndex(col => col.id === overId);
+ setColumns((columns) => {
+ const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
+ const overColumnIndex = columns.findIndex((col) => col.id === overId);
const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
@@ -342,9 +341,9 @@ function KanbanBoard() {
// Reorder tasks within the same column
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);
const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
@@ -354,15 +353,15 @@ function KanbanBoard() {
// Move tasks between columns and update columnId
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;
axiosInstance
.put(`todo/change_task_list_board/`, { todo_id: activeId, new_list_board_id: overId, new_index: 0 })
- .then(response => {})
- .catch(error => {
+ .then((response) => {})
+ .catch((error) => {
console.error("Error updating task columnId:", error);
});
@@ -386,9 +385,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;
@@ -402,8 +401,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/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
index aeb0065..5a024af 100644
--- a/frontend/src/components/navigations/Navbar.jsx
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -1,18 +1,17 @@
-import * as React from "react";
import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi";
-import { useAuth } from "../../hooks/authentication/IsAuthenticated";
+import { useAuth } from "src/hooks/AuthHooks";
const settings = {
- Profile: '/profile',
- Account: '/account',
+ Profile: "/profile",
+ Account: "/account",
};
function NavBar() {
const Navigate = useNavigate();
-
const { isAuthenticated, setIsAuthenticated } = useAuth();
+ console.log(isAuthenticated);
const logout = () => {
axiosapi.apiUserLogout();
setIsAuthenticated(false);
diff --git a/frontend/src/contexts/AuthContextProvider.jsx b/frontend/src/contexts/AuthContextProvider.jsx
new file mode 100644
index 0000000..fea0243
--- /dev/null
+++ b/frontend/src/contexts/AuthContextProvider.jsx
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { createContext, useState } from "react";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+ useEffect(() => {
+ const accessToken = localStorage.getItem("access_token");
+ if (accessToken) {
+ setIsAuthenticated(true);
+ }
+ }, []);
+
+ const contextValue = {
+ isAuthenticated,
+ setIsAuthenticated,
+ };
+
+ return
{children};
+};
+
+AuthProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default AuthContext;
diff --git a/frontend/src/hooks/AuthHooks.jsx b/frontend/src/hooks/AuthHooks.jsx
new file mode 100644
index 0000000..27d3afb
--- /dev/null
+++ b/frontend/src/hooks/AuthHooks.jsx
@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import AuthContext from "src/contexts/AuthContextProvider";
+
+/**
+ * useAuth - Custom React Hook for Accessing Authentication Context
+ *
+ * @returns {Object} An object containing:
+ * - {boolean} isAuthenticated: A boolean indicating whether the user is authenticated.
+ * - {function} setIsAuthenticated: A function to set the authentication status manually.
+ *
+ * @throws {Error} If used outside the context of an AuthProvider.
+ *
+ * @example
+ * // Import the hook
+ * import useAuth from './AuthHooks';
+ *
+ * // Inside a functional component
+ * const { isAuthenticated, setIsAuthenticated } = useAuth();
+ *
+ * // Check authentication status
+ * if (isAuthenticated) {
+ * // User is authenticated
+ * } else {
+ * // User is not authenticated
+ * }
+ *
+ * // Manually set authentication status
+ * setIsAuthenticated(true);
+ */
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error("useAuth must be used within an AuthProvider");
+ }
+ return context;
+};
diff --git a/frontend/src/hooks/authentication/IsAuthenticated.jsx b/frontend/src/hooks/authentication/IsAuthenticated.jsx
deleted file mode 100644
index 8874645..0000000
--- a/frontend/src/hooks/authentication/IsAuthenticated.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
-
-const AuthContext = createContext();
-
-export const AuthProvider = ({ children }) => {
- const [isAuthenticated, setIsAuthenticated] = useState(() => {
- const access_token = localStorage.getItem("access_token");
- return !!access_token;
- });
-
- useEffect(() => {
- const handleTokenChange = () => {
- const newAccessToken = localStorage.getItem("access_token");
- setIsAuthenticated(!!newAccessToken);
- };
-
- handleTokenChange();
-
- window.addEventListener("storage", handleTokenChange);
-
- return () => {
- window.removeEventListener("storage", handleTokenChange);
- };
- }, []);
-
- return (
-
- {children}
-
- );
-};
-
-export const useAuth = () => {
- const context = useContext(AuthContext);
- if (!context) {
- throw new Error("useAuth must be used within an AuthProvider");
- }
- return context;
-};
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 38cca17..8ca8296 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
import App from "./App";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { BrowserRouter } from "react-router-dom";
-import { AuthProvider } from "./hooks/authentication/IsAuthenticated";
+import { AuthProvider } from "./contexts/AuthContextProvider";
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
@@ -12,7 +12,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
-
+
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5a33944..3dcabd8 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+ resolve: {
+ alias: {
+ src: "/src",
+ },
+ },
+});