diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index 1a8aa39..809eec3 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -13,5 +13,6 @@ module.exports = { plugins: ["react-refresh"], rules: { "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], + "react/prop-types": 0, }, }; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 1ab242f..619149d 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,21 +1,19 @@ -import { useEffect } from "react"; import "./App.css"; -import { Route, Routes, Navigate } from "react-router-dom"; import axios from "axios"; -import TestAuth from "./components/testAuth"; -import LoginPage from "./components/authentication/LoginPage"; -import SignUpPage from "./components/authentication/SignUpPage"; -import NavBar from "./components/navigations/Navbar"; -import Calendar from "./components/calendar/calendar"; -import KanbanPage from "./components/kanbanBoard/kanbanPage"; -import IconSideNav from "./components/navigations/IconSideNav"; -import Eisenhower from "./components/EisenhowerMatrix/Eisenhower"; -import PrivateRoute from "./PrivateRoute"; -import ProfileUpdatePage from "./components/profilePage"; -import Dashboard from "./components/dashboard/dashboard"; +import { useEffect } from "react"; +import { Route, Routes, Navigate } from "react-router-dom"; +import { LoginPage } from "./components/authentication/LoginPage"; +import { SignUp } from "./components/authentication/SignUpPage"; +import { NavBar } from "./components/navigations/Navbar"; +import { Calendar } from "./components/calendar/calendar"; +import { KanbanPage } from "./components/kanbanBoard/kanbanPage"; +import { SideNav } from "./components/navigations/IconSideNav"; +import { Eisenhower } from "./components/EisenhowerMatrix/Eisenhower"; +import { PrivateRoute } from "./PrivateRoute"; +import { ProfileUpdatePage } from "./components/profile/profilePage"; +import { Dashboard } from "./components/dashboard/dashboard"; import { LandingPage } from "./components/landingPage/LandingPage"; -import PublicRoute from "./PublicRoute"; - +import { PublicRoute } from "./PublicRoute"; import { useAuth } from "./hooks/AuthHooks"; const baseURL = import.meta.env.VITE_BASE_URL; @@ -70,7 +68,7 @@ const NonAuthenticatedComponents = () => { } /> }> - } /> + } /> } /> @@ -81,7 +79,7 @@ const NonAuthenticatedComponents = () => { const AuthenticatedComponents = () => { return (
- +
@@ -90,7 +88,6 @@ const AuthenticatedComponents = () => { }> } /> - } /> }> } /> diff --git a/frontend/src/PrivateRoute.jsx b/frontend/src/PrivateRoute.jsx index 01afc6a..3daa62b 100644 --- a/frontend/src/PrivateRoute.jsx +++ b/frontend/src/PrivateRoute.jsx @@ -1,9 +1,7 @@ import { Navigate, Outlet } from "react-router-dom"; import { useAuth } from "src/hooks/AuthHooks"; -const PrivateRoute = () => { +export const PrivateRoute = () => { const { isAuthenticated } = useAuth(); return isAuthenticated ? : ; }; - -export default PrivateRoute; diff --git a/frontend/src/PublicRoute.jsx b/frontend/src/PublicRoute.jsx index ffdc39c..69f980a 100644 --- a/frontend/src/PublicRoute.jsx +++ b/frontend/src/PublicRoute.jsx @@ -1,9 +1,7 @@ import { Navigate, Outlet } from "react-router-dom"; import { useAuth } from "src/hooks/AuthHooks"; -const PublicRoute = () => { +export const PublicRoute = () => { const { isAuthenticated } = useAuth(); return isAuthenticated ? : ; }; - -export default PublicRoute; diff --git a/frontend/src/api/AuthenticationApi.jsx b/frontend/src/api/AuthenticationApi.jsx index bca81d5..b0a0956 100644 --- a/frontend/src/api/AuthenticationApi.jsx +++ b/frontend/src/api/AuthenticationApi.jsx @@ -1,10 +1,10 @@ import axios from "axios"; -import axiosInstance from "./AxiosConfig"; +import { axiosInstance } from "./AxiosConfig"; const baseURL = import.meta.env.VITE_BASE_URL; // Function for user login -const apiUserLogin = (data) => { +export const apiUserLogin = (data) => { return axiosInstance .post("token/obtain/", data) .then((response) => { @@ -19,14 +19,14 @@ const apiUserLogin = (data) => { }; // Function for user logout -const apiUserLogout = () => { +export const apiUserLogout = () => { axiosInstance.defaults.headers["Authorization"] = ""; // Clear authorization header localStorage.removeItem("access_token"); // Remove access token localStorage.removeItem("refresh_token"); // Remove refresh token }; // Function for Google login -const googleLogin = async (token) => { +export const googleLogin = async (token) => { axios.defaults.withCredentials = true; let res = await axios.post(`${baseURL}auth/google/`, { code: token, @@ -35,20 +35,8 @@ const googleLogin = async (token) => { return await res; }; -// Function to get 'hello' data -const getGreeting = () => { - return axiosInstance - .get("hello") - .then((response) => { - return response; - }) - .catch((error) => { - return error; - }); -}; - // Function to register -const createUser = async (formData) => { +export const createUser = async (formData) => { try { axios.defaults.withCredentials = true; const response = axios.post(`${baseURL}user/create/`, formData); @@ -58,12 +46,3 @@ const createUser = async (formData) => { console.log(e); } }; - -// Export the functions and Axios instance -export default { - apiUserLogin, - apiUserLogout, - getGreeting: getGreeting, - googleLogin, - createUser, -}; diff --git a/frontend/src/api/AxiosConfig.jsx b/frontend/src/api/AxiosConfig.jsx index b037386..f2de1b7 100644 --- a/frontend/src/api/AxiosConfig.jsx +++ b/frontend/src/api/AxiosConfig.jsx @@ -3,7 +3,7 @@ import { redirect } from "react-router-dom"; const baseURL = import.meta.env.VITE_BASE_URL; -const axiosInstance = axios.create({ +export const axiosInstance = axios.create({ baseURL: baseURL, timeout: 5000, headers: { @@ -43,5 +43,3 @@ axiosInstance.interceptors.response.use( return Promise.reject(error); } ); - -export default axiosInstance; diff --git a/frontend/src/api/TaskApi.jsx b/frontend/src/api/TaskApi.jsx index daad9c3..098d934 100644 --- a/frontend/src/api/TaskApi.jsx +++ b/frontend/src/api/TaskApi.jsx @@ -1,4 +1,4 @@ -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; const baseURL = import.meta.env.VITE_BASE_URL; diff --git a/frontend/src/assets/calendar.png b/frontend/src/assets/calendar.png deleted file mode 100644 index 8c30ce3..0000000 Binary files a/frontend/src/assets/calendar.png and /dev/null differ diff --git a/frontend/src/assets/home.png b/frontend/src/assets/home.png deleted file mode 100644 index c40c6b2..0000000 Binary files a/frontend/src/assets/home.png and /dev/null differ diff --git a/frontend/src/assets/pie-chart.png b/frontend/src/assets/pie-chart.png deleted file mode 100644 index 376d9e9..0000000 Binary files a/frontend/src/assets/pie-chart.png and /dev/null differ diff --git a/frontend/src/assets/planning.png b/frontend/src/assets/planning.png deleted file mode 100644 index 13a6bb2..0000000 Binary files a/frontend/src/assets/planning.png and /dev/null differ diff --git a/frontend/src/assets/plus.png b/frontend/src/assets/plus.png deleted file mode 100644 index a5252f5..0000000 Binary files a/frontend/src/assets/plus.png and /dev/null differ diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx index 619dca9..cc19aaa 100644 --- a/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx +++ b/frontend/src/components/EisenhowerMatrix/Eisenhower.jsx @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi"; import { readTodoTasks } from "../../api/TaskApi"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; function EachBlog({ name, colorCode, contentList, icon }) { const [tasks, setTasks] = useState(contentList); @@ -55,7 +55,7 @@ function EachBlog({ name, colorCode, contentList, icon }) { ); } -function Eisenhower() { +export function Eisenhower() { const [tasks, setTasks] = useState([]); useEffect(() => { @@ -108,5 +108,3 @@ function Eisenhower() {
); } - -export default Eisenhower; diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index dff40ab..2c3489b 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,24 +1,16 @@ -import { useEffect, useState } from "react"; import { useNavigate, redirect } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; -import { useCallback } from "react"; +import { useCallback, useState } from "react"; import Particles from "react-tsparticles"; import { loadFull } from "tsparticles"; -import refreshAccessToken from "./refreshAcessToken"; -import axiosapi from "../../api/AuthenticationApi"; import { FcGoogle } from "react-icons/fc"; import { useAuth } from "src/hooks/AuthHooks"; +import { googleLogin, apiUserLogin } from "src/api/AuthenticationApi"; -function LoginPage() { +export function LoginPage() { const { setIsAuthenticated } = useAuth(); const Navigate = useNavigate(); - useEffect(() => { - if (!refreshAccessToken()) { - Navigate("/"); - } - }, []); - const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); @@ -33,16 +25,14 @@ function LoginPage() { event.preventDefault(); // Send a POST request to the authentication API - axiosapi - .apiUserLogin({ - email: email, - password: password, - }) + apiUserLogin({ + email: email, + password: password, + }) .then((res) => { // On successful login, store tokens and set the authorization header localStorage.setItem("access_token", res.data.access); localStorage.setItem("refresh_token", res.data.refresh); - axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access; setIsAuthenticated(true); redirect("/"); }) @@ -57,7 +47,7 @@ function LoginPage() { redirect_uri: "postmessage", onSuccess: async (response) => { try { - const loginResponse = await axiosapi.googleLogin(response.code); + const loginResponse = await googleLogin(response.code); if (loginResponse && loginResponse.data) { const { access_token, refresh_token } = loginResponse.data; @@ -76,14 +66,9 @@ function LoginPage() { /* Particles Loader*/ } const particlesInit = useCallback(async (engine) => { - console.log(engine); await loadFull(engine); }, []); - const particlesLoaded = useCallback(async (container) => { - console.log(container); - }, []); - return (
{/* Particles Container */} @@ -91,7 +76,6 @@ function LoginPage() { ); } - -export default LoginPage; diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 6bcc8dc..fb6202e 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,21 +1,18 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; -import axiosapi from "../../api/AuthenticationApi"; import { useCallback } from "react"; import Particles from "react-tsparticles"; import { loadFull } from "tsparticles"; import { FcGoogle } from "react-icons/fc"; import { useGoogleLogin } from "@react-oauth/google"; - +import { useAuth } from "src/hooks/AuthHooks"; +import { createUser, googleLogin } from "src/api/AuthenticationApi"; function Copyright(props) { return (
{"Copyright © "} - + TurTask {" "} {new Date().getFullYear()} @@ -24,8 +21,9 @@ function Copyright(props) { ); } -export default function SignUp() { +export function SignUp() { const Navigate = useNavigate(); + const { setIsAuthenticated } = useAuth; const [formData, setFormData] = useState({ email: "", @@ -41,7 +39,7 @@ export default function SignUp() { setError(null); try { - axiosapi.createUser(formData); + createUser(formData); } catch (error) { console.error("Error creating user:", error); setError("Registration failed. Please try again."); @@ -54,26 +52,20 @@ export default function SignUp() { const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); - console.log(formData); }; { /* Particles Loader*/ } const particlesInit = useCallback(async (engine) => { - console.log(engine); await loadFull(engine); }, []); - const particlesLoaded = useCallback(async (container) => { - console.log(container); - }, []); - const googleLoginImplicit = useGoogleLogin({ flow: "auth-code", redirect_uri: "postmessage", onSuccess: async (response) => { try { - const loginResponse = await axiosapi.googleLogin(response.code); + const loginResponse = await googleLogin(response.code); if (loginResponse && loginResponse.data) { const { access_token, refresh_token } = loginResponse.data; @@ -91,16 +83,12 @@ export default function SignUp() { }); return ( -
+
{/* Particles Container */}
*

- +
{/* Username Input */}
@@ -225,17 +207,13 @@ export default function SignUp() {
OR
{/* Login with Google Button */} - {/* Already have an account? */}
diff --git a/frontend/src/components/authentication/refreshAcessToken.jsx b/frontend/src/components/authentication/refreshAcessToken.jsx deleted file mode 100644 index e07395b..0000000 --- a/frontend/src/components/authentication/refreshAcessToken.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import axios from "axios"; - -const baseURL = import.meta.env.VITE_BASE_URL; - -async function refreshAccessToken() { - const refresh_token = localStorage.getItem("refresh_token"); - const access_token = localStorage.getItem("access_token"); - - if (access_token) { - return true; - } - - if (!refresh_token) { - return false; - } - - const refreshUrl = `${baseURL}token/refresh/`; - - try { - const response = await axios.post(refreshUrl, { refresh: refresh_token }); - - if (response.status === 200) { - // Successful refresh - save the new access token and refresh token - const newAccessToken = response.data.access; - const newRefreshToken = response.data.refresh; - - localStorage.setItem("access_token", newAccessToken); - localStorage.setItem("refresh_token", newRefreshToken); - - return true; - } else { - return false; - } - } catch (error) { - return false; - } -} - -export default refreshAccessToken; diff --git a/frontend/src/components/calendar/TaskDataHandler.jsx b/frontend/src/components/calendar/TaskDataHandler.jsx index ff8a5df..793ca4b 100644 --- a/frontend/src/components/calendar/TaskDataHandler.jsx +++ b/frontend/src/components/calendar/TaskDataHandler.jsx @@ -1,9 +1,9 @@ -import { readTodoTasks } from "../../api/TaskApi"; +import { readTodoTasks } from "src/api/TaskApi"; let eventGuid = 0; -const mapResponseToEvents = response => { - return response.map(item => ({ +const mapResponseToEvents = (response) => { + return response.map((item) => ({ id: item.id, title: item.title, start: item.start_event, diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx index e4f1bdd..a85ea2d 100644 --- a/frontend/src/components/calendar/calendar.jsx +++ b/frontend/src/components/calendar/calendar.jsx @@ -5,9 +5,9 @@ import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; import interactionPlugin from "@fullcalendar/interaction"; import { getEvents, createEventId } from "./TaskDataHandler"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; -export default class Calendar extends React.Component { +export class Calendar extends React.Component { state = { weekendsVisible: true, currentEvents: [], diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx index 862fa21..cd6bb93 100644 --- a/frontend/src/components/dashboard/Areachart.jsx +++ b/frontend/src/components/dashboard/Areachart.jsx @@ -1,6 +1,6 @@ import { AreaChart, Title } from "@tremor/react"; import { useState, useEffect } from "react"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; export const AreaChartGraph = () => { const [areaChartDataArray, setAreaChartDataArray] = useState([]); diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index 63a2c4f..bf84a2b 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -1,6 +1,6 @@ import { BarChart, Title } from "@tremor/react"; import { useState, useEffect } from "react"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; export const BarChartGraph = () => { const [barchartDataArray, setBarChartDataArray] = useState([]); diff --git a/frontend/src/components/dashboard/DonutChart.jsx b/frontend/src/components/dashboard/DonutChart.jsx index ccab32f..63fc591 100644 --- a/frontend/src/components/dashboard/DonutChart.jsx +++ b/frontend/src/components/dashboard/DonutChart.jsx @@ -1,8 +1,8 @@ import { DonutChart } from "@tremor/react"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; import { useState, useEffect } from "react"; -export default function DonutChartGraph() { +export function DonutChartGraph() { const [donutData, setDonutData] = useState([]); useEffect(() => { diff --git a/frontend/src/components/dashboard/KpiCard.jsx b/frontend/src/components/dashboard/KpiCard.jsx index 47c7162..c5c3165 100644 --- a/frontend/src/components/dashboard/KpiCard.jsx +++ b/frontend/src/components/dashboard/KpiCard.jsx @@ -1,8 +1,8 @@ import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react"; import { useEffect, useState } from "react"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; -export default function KpiCard() { +export function KpiCard() { const [kpiCardData, setKpiCardData] = useState({ completedThisWeek: 0, completedLastWeek: 0, diff --git a/frontend/src/components/dashboard/ProgressCircle.jsx b/frontend/src/components/dashboard/ProgressCircle.jsx index c6d09b3..683781e 100644 --- a/frontend/src/components/dashboard/ProgressCircle.jsx +++ b/frontend/src/components/dashboard/ProgressCircle.jsx @@ -1,8 +1,8 @@ import { Card, Flex, ProgressCircle } from "@tremor/react"; import { useState, useEffect } from "react"; -import axiosInstance from "src/api/AxiosConfig"; +import { axiosInstance } from "src/api/AxiosConfig"; -export default function ProgressCircleChart() { +export function ProgressCircleChart() { const [progressData, setProgressData] = useState(0); useEffect(() => { diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 761f0ca..f735146 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -1,11 +1,11 @@ import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react"; -import KpiCard from "./KpiCard"; +import { KpiCard } from "./KpiCard"; import { BarChartGraph } from "./Barchart"; -import DonutChartGraph from "./DonutChart"; +import { DonutChartGraph } from "./DonutChart"; import { AreaChartGraph } from "./Areachart"; -import ProgressCircleChart from "./ProgressCircle"; +import { ProgressCircleChart } from "./ProgressCircle"; -export default function Dashboard() { +export function Dashboard() { return (
diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx index 80bd445..819a980 100644 --- a/frontend/src/components/kanbanBoard/columnContainer.jsx +++ b/frontend/src/components/kanbanBoard/columnContainer.jsx @@ -3,13 +3,13 @@ import { BsFillTrashFill } from "react-icons/bs"; import { AiOutlinePlusCircle } from "react-icons/ai"; import { CSS } from "@dnd-kit/utilities"; import { useMemo, useState } from "react"; -import TaskCard from "./taskCard"; +import { TaskCard } from "./taskCard"; -function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) { +export 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({ @@ -78,12 +78,12 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks 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); }} @@ -109,7 +109,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks {/* Column task container */}
- {tasks.map(task => ( + {tasks.map((task) => ( ))} @@ -126,5 +126,3 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
); } - -export default ColumnContainer; diff --git a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx index 478a529..b14adb1 100644 --- a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx +++ b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx @@ -1,6 +1,6 @@ -import ColumnContainer from "./columnContainer"; +import { ColumnContainer } from "./columnContainer"; -function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) { +export function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) { return (
); } - -export default ColumnContainerCard; diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx index a4ecd79..a91b2db 100644 --- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx +++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx @@ -1,13 +1,12 @@ import { useMemo, useState, useEffect } from "react"; -import ColumnContainerCard from "./columnContainerWrapper"; +import { ColumnContainerCard } from "./columnContainerWrapper"; 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"; -import { AiOutlinePlusCircle } from "react-icons/ai"; -import axiosInstance from "src/api/AxiosConfig"; +import { TaskCard } from "./taskCard"; +import { axiosInstance } from "src/api/AxiosConfig"; -function KanbanBoard() { +export function KanbanBoard() { const [columns, setColumns] = useState([]); const columnsId = useMemo(() => columns.map((col) => col.id), [columns]); const [boardId, setBoardData] = useState(); @@ -26,40 +25,6 @@ function KanbanBoard() { }) ); - // Example - // { - // "id": 95, - // "title": "Test Todo", - // "notes": "Test TodoTest TodoTest Todo", - // "importance": 1, - // "difficulty": 1, - // "challenge": false, - // "fromSystem": false, - // "creation_date": "2023-11-20T19:50:16.369308Z", - // "last_update": "2023-11-20T19:50:16.369308Z", - // "is_active": true, - // "is_full_day_event": false, - // "start_event": "2023-11-20T19:49:49Z", - // "end_event": "2023-11-23T18:00:00Z", - // "google_calendar_id": null, - // "completed": true, - // "completion_date": "2023-11-20T19:50:16.369308Z", - // "priority": 3, - // "user": 1, - // "list_board": 1, - // "tags": [] - // } - // ] - - // [ - // { - // "id": 8, - // "name": "test", - // "position": 2, - // "board": 3 - // } - // ] - useEffect(() => { const fetchData = async () => { try { @@ -73,7 +38,6 @@ function KanbanBoard() { difficulty: task.difficulty, notes: task.notes, importance: task.importance, - difficulty: task.difficulty, challenge: task.challenge, fromSystem: task.fromSystem, creation_date: task.creation_date, @@ -149,31 +113,6 @@ function KanbanBoard() { ))}
- {/* create new column */} -
{createPortal( @@ -409,10 +348,4 @@ function KanbanBoard() { }); } } - - function generateId() { - return Math.floor(Math.random() * 10001); - } } - -export default KanbanBoard; diff --git a/frontend/src/components/kanbanBoard/kanbanPage.jsx b/frontend/src/components/kanbanBoard/kanbanPage.jsx index 37671ae..9225ae7 100644 --- a/frontend/src/components/kanbanBoard/kanbanPage.jsx +++ b/frontend/src/components/kanbanBoard/kanbanPage.jsx @@ -1,12 +1,12 @@ -import KanbanBoard from "./kanbanBoard"; -import React, { useState } from 'react'; +import { KanbanBoard } from "./kanbanBoard"; +import { useState } from "react"; -const KanbanPage = () => { - const [activeTab, setActiveTab] = useState('kanban'); +export const KanbanPage = () => { + const [activeTab, setActiveTab] = useState("kanban"); - const handleTabClick = (tabId) => { - setActiveTab(tabId); - }; + const handleTabClick = (tabId) => { + setActiveTab(tabId); + }; return (
@@ -29,10 +29,7 @@ const KanbanPage = () => {
-
-
+
); }; - -export default KanbanPage; diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx index 2c5053f..e1814c6 100644 --- a/frontend/src/components/kanbanBoard/taskCard.jsx +++ b/frontend/src/components/kanbanBoard/taskCard.jsx @@ -2,9 +2,9 @@ import { useState } from "react"; import { BsFillTrashFill } from "react-icons/bs"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; -import TaskDetailModal from "./taskDetailModal"; +import { TaskDetailModal } from "./taskDetailModal"; -function TaskCard({ task, deleteTask, updateTask}) { +export function TaskCard({ task, deleteTask, updateTask }) { const [mouseIsOver, setMouseIsOver] = useState(false); const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({ @@ -15,7 +15,6 @@ function TaskCard({ task, deleteTask, updateTask}) { }, }); - const style = { transition, transform: CSS.Transform.toString(transform), @@ -79,5 +78,3 @@ function TaskCard({ task, deleteTask, updateTask}) {
); } - -export default TaskCard; diff --git a/frontend/src/components/kanbanBoard/taskDetailModal.jsx b/frontend/src/components/kanbanBoard/taskDetailModal.jsx index ddf954b..e151d8f 100644 --- a/frontend/src/components/kanbanBoard/taskDetailModal.jsx +++ b/frontend/src/components/kanbanBoard/taskDetailModal.jsx @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { FaTasks, FaRegListAlt } from "react-icons/fa"; import { FaPlus } from "react-icons/fa6"; import { TbChecklist } from "react-icons/tb"; -function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) { +export function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) { const [isChallengeChecked, setChallengeChecked] = useState(challenge); const [isImportantChecked, setImportantChecked] = useState(importance); const [currentDifficulty, setCurrentDifficulty] = useState(difficulty); @@ -28,7 +28,8 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo

- {}{title} + {} + {title}

{title}

@@ -45,13 +46,13 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
-
+
@@ -144,5 +145,3 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo ); } - -export default TaskDetailModal; diff --git a/frontend/src/components/navigations/IconSideNav.jsx b/frontend/src/components/navigations/IconSideNav.jsx index dc364f3..02cc1a0 100644 --- a/frontend/src/components/navigations/IconSideNav.jsx +++ b/frontend/src/components/navigations/IconSideNav.jsx @@ -1,9 +1,9 @@ import { useState } from "react"; -import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai"; +import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList } from "react-icons/ai"; import { PiStepsDuotone } from "react-icons/pi"; import { IoSettingsOutline } from "react-icons/io5"; import { AnimatePresence, motion } from "framer-motion"; -import { Link, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; const menuItems = [ { id: 0, path: "/", icon: }, @@ -13,20 +13,12 @@ const menuItems = [ { id: 4, path: "/priority", icon: }, ]; -const IconSideNav = () => { - return ( -
- -
- ); -}; - -const SideNav = () => { +export const SideNav = () => { const [selected, setSelected] = useState(0); return (
); } -export default NavBar; diff --git a/frontend/src/components/ProfileUpdateComponent.jsx b/frontend/src/components/profile/ProfileUpdateComponent.jsx similarity index 88% rename from frontend/src/components/ProfileUpdateComponent.jsx rename to frontend/src/components/profile/ProfileUpdateComponent.jsx index 74da41f..12f5e98 100644 --- a/frontend/src/components/ProfileUpdateComponent.jsx +++ b/frontend/src/components/profile/ProfileUpdateComponent.jsx @@ -1,7 +1,7 @@ -import React, { useState, useRef } from "react"; -import { ApiUpdateUserProfile } from "../api/UserProfileApi"; +import { useState, useRef } from "react"; +import { ApiUpdateUserProfile } from "src/api/UserProfileApi"; -function ProfileUpdateComponent() { +export function ProfileUpdateComponent() { const [file, setFile] = useState(null); const [username, setUsername] = useState(""); const [fullName, setFullName] = useState(""); @@ -15,7 +15,7 @@ function ProfileUpdateComponent() { } }; - const handleFileChange = e => { + const handleFileChange = (e) => { const selectedFile = e.target.files[0]; if (selectedFile) { setFile(selectedFile); @@ -66,7 +66,7 @@ function ProfileUpdateComponent() { placeholder="Enter your username" className="input w-full" value={username} - onChange={e => setUsername(e.target.value)} + onChange={(e) => setUsername(e.target.value)} /> @@ -78,7 +78,7 @@ function ProfileUpdateComponent() { placeholder="Enter your full name" className="input w-full" value={fullName} - onChange={e => setFullName(e.target.value)} + onChange={(e) => setFullName(e.target.value)} /> @@ -89,7 +89,7 @@ function ProfileUpdateComponent() { 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)} /> @@ -100,5 +100,3 @@ function ProfileUpdateComponent() { ); } - -export default ProfileUpdateComponent; diff --git a/frontend/src/components/profilePage.jsx b/frontend/src/components/profile/profilePage.jsx similarity index 82% rename from frontend/src/components/profilePage.jsx rename to frontend/src/components/profile/profilePage.jsx index 4b0d0b4..d61368a 100644 --- a/frontend/src/components/profilePage.jsx +++ b/frontend/src/components/profile/profilePage.jsx @@ -1,7 +1,6 @@ -import * as React from "react"; -import ProfileUpdateComponent from "./ProfileUpdateComponent"; +import { ProfileUpdateComponent } from "./ProfileUpdateComponent"; -function ProfileUpdatePage() { +export function ProfileUpdatePage() { return (
@@ -47,7 +46,7 @@ function ProfileUpdatePage() {
3213/321312321 points
- +
@@ -75,10 +74,10 @@ function ProfileUpdatePage() {
-
-

About me

-
-