diff --git a/frontend/app/components/features/OnboardingBanner.tsx b/frontend/app/components/features/OnboardingBanner.tsx index 9bbc003..ee97858 100644 --- a/frontend/app/components/features/OnboardingBanner.tsx +++ b/frontend/app/components/features/OnboardingBanner.tsx @@ -1,5 +1,4 @@ -import { FC } from "react" -import Link from "next/link" +import { Link } from "react-router" import useRoutes from "@/hooks/useRoutes" import { UserType } from "@/types/UserType" import { DishType } from "@/types/DishType" @@ -9,7 +8,7 @@ interface Props { users: UserType[] } -const OnboardingBanner: FC = ({ dishes, users }) => { +const OnboardingBanner = ({ dishes, users }: Props) => { const routes = useRoutes(); const steps = [ @@ -36,7 +35,7 @@ const OnboardingBanner: FC = ({ dishes, users }) => {
{ step.count === 0 - ? { step.label } + ? { step.label } :
{ step.label }
}
diff --git a/frontend/app/components/features/dishes/AddUserToDishForm.tsx b/frontend/app/components/features/dishes/AddUserToDishForm.tsx index 2e2d2c8..974cd11 100644 --- a/frontend/app/components/features/dishes/AddUserToDishForm.tsx +++ b/frontend/app/components/features/dishes/AddUserToDishForm.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from "react"; +import React, { useState } from "react"; import { DishType } from "@/types/DishType"; import { UserType } from "@/types/UserType"; import { useFetchUsers } from "@/hooks/useFetchUsers"; @@ -12,7 +12,7 @@ interface Props { reloadDish: () => void; } -const AddUserToDishForm: FC = ({ dish, reloadDish }) => { +const AddUserToDishForm = ({ dish, reloadDish }: Props) => { const [showAdd, setShowAdd] = useState(false); const [selectedUser, setSelectedUser] = useState("-1"); const { users, isLoading: isUsersLoading } = useFetchUsers(); diff --git a/frontend/app/components/features/dishes/CreateDishForm.tsx b/frontend/app/components/features/dishes/CreateDishForm.tsx index 242c1f2..69a139f 100644 --- a/frontend/app/components/features/dishes/CreateDishForm.tsx +++ b/frontend/app/components/features/dishes/CreateDishForm.tsx @@ -1,15 +1,15 @@ import React, { useState } from "react"; -import { useRouter } from "next/navigation"; -import { createDish } from "@/utils/api/dishApi"; -import PageTitle from "@/components/ui/PageTitle"; -import Alert from "@/components/ui/Alert"; -import SolidButton from "@/components/ui/Buttons/SolidButton"; -import OutlineLinkButton from "@/components/ui/Buttons/OutlineLinkButton"; +import { useNavigate } from "react-router"; +import { createDish } from "~/utils/api/dishApi"; +import PageTitle from "~/components/ui/PageTitle"; +import Alert from "~/components/ui/Alert"; +import SolidButton from "~/components/ui/Buttons/SolidButton"; +import OutlineLinkButton from "~/components/ui/Buttons/OutlineLinkButton"; import { ChevronLeftIcon } from "@heroicons/react/16/solid"; -import Hr from "@/components/ui/Hr" +import Hr from "~/components/ui/Hr" const CreateDishForm = () => { - const router = useRouter() + const navigate = useNavigate() const [name, setName] = useState(""); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); @@ -35,7 +35,7 @@ const CreateDishForm = () => { try { const result = await createDish(name); if (result) { - router.push('/dishes') + navigate('/dishes') } } catch (error: unknown) { setError(error instanceof Error ? error.message : "An unexpected error occurred."); diff --git a/frontend/app/components/features/dishes/Dish.tsx b/frontend/app/components/features/dishes/Dish.tsx index 7933a41..44128c7 100644 --- a/frontend/app/components/features/dishes/Dish.tsx +++ b/frontend/app/components/features/dishes/Dish.tsx @@ -1,10 +1,10 @@ -import {DishType} from "@/types/DishType"; +import {DishType} from "~/types/DishType"; import {PencilIcon, TrashIcon} from '@heroicons/react/24/solid' -import Link from "next/link"; -import useRoutes from "@/hooks/useRoutes"; -import {UserType} from "@/types/UserType"; -import Card from "@/components/layout/Card"; +import { Link } from "react-router"; +import useRoutes from "~/hooks/useRoutes"; +import {UserType} from "~/types/UserType"; +import Card from "~/components/layout/Card"; const Dish = ({ dish }: { dish: DishType}) => { const routes = useRoutes(); @@ -21,12 +21,12 @@ const Dish = ({ dish }: { dish: DishType}) => { }
- +
- +
diff --git a/frontend/app/components/features/dishes/DishCard.tsx b/frontend/app/components/features/dishes/DishCard.tsx index 66b2c52..d36a656 100644 --- a/frontend/app/components/features/dishes/DishCard.tsx +++ b/frontend/app/components/features/dishes/DishCard.tsx @@ -1,5 +1,4 @@ import {UserType} from "@/types/UserType"; -import {FC} from "react"; import {DishType} from "@/types/DishType"; interface Props { @@ -7,7 +6,7 @@ interface Props { dish: DishType, } -const DishCard: FC = ({ user, dish }: Props) => { +const DishCard = ({ user, dish }: Props) => { return (
diff --git a/frontend/app/components/features/dishes/EditDishForm.tsx b/frontend/app/components/features/dishes/EditDishForm.tsx index cfffb2a..a35002e 100644 --- a/frontend/app/components/features/dishes/EditDishForm.tsx +++ b/frontend/app/components/features/dishes/EditDishForm.tsx @@ -1,20 +1,20 @@ -import React, {FC, useState} from "react"; -import {useRouter} from "next/navigation"; -import Alert from "@/components/ui/Alert"; -import {updateDish} from "@/utils/api/dishApi"; -import {DishType} from "@/types/DishType"; -import useRoutes from "@/hooks/useRoutes"; -import Spinner from "@/components/Spinner"; -import Button from "@/components/ui/Button" +import React, {useState} from "react"; +import { useNavigate } from "react-router"; +import Alert from "~/components/ui/Alert"; +import {updateDish} from "~/utils/api/dishApi"; +import {DishType} from "~/types/DishType"; +import useRoutes from "~/hooks/useRoutes"; +import Spinner from "~/components/Spinner"; +import Button from "~/components/ui/Button" interface Props { dish: DishType } -const EditDishForm: FC = ({ dish }) => { +const EditDishForm = ({ dish }: Props) => { const [name, setName] = useState(dish.name); const [error, setError] = useState(""); - const router = useRouter() + const navigate = useNavigate() const [loading, setLoading] = useState(false); const routes = useRoutes(); @@ -38,7 +38,7 @@ const EditDishForm: FC = ({ dish }) => { try { const result = await updateDish(dish.id, name); if (result) { - router.push(routes.dish.index()) + navigate(routes.dish.index()) } } catch (error: unknown) { setError(error instanceof Error ? error.message : "An unexpected error occurred"); diff --git a/frontend/app/components/features/dishes/EditDishUserCardEditForm.tsx b/frontend/app/components/features/dishes/EditDishUserCardEditForm.tsx index eb4bc06..1ac08cd 100644 --- a/frontend/app/components/features/dishes/EditDishUserCardEditForm.tsx +++ b/frontend/app/components/features/dishes/EditDishUserCardEditForm.tsx @@ -1,9 +1,9 @@ -import React, {FC} from "react"; +import React from "react"; import SectionTitle from "@/components/ui/SectionTitle"; import {syncUserDishRecurrences} from "@/utils/api/usersApi"; import Spinner from "@/components/Spinner"; import {UserDishType} from "@/types/ScheduledUserDishType"; -import {RecurrenceType} from "@/types/ScheduleType"; +import {RecurrenceType} from "@/types/RecurrenceType"; import SolidButton from "@/components/ui/Buttons/SolidButton"; interface Props { @@ -11,7 +11,7 @@ interface Props { onSubmit: () => void } -const EditDishUserCardEditForm: FC = ({ userDish, onSubmit}) => { +const EditDishUserCardEditForm = ({ userDish, onSubmit}: Props) => { const weeklyRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\WeeklyRecurrence') const minimumRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\MinimumRecurrence') diff --git a/frontend/app/components/features/dishes/RecurrenceLabels.tsx b/frontend/app/components/features/dishes/RecurrenceLabels.tsx index bba81ba..deff7c3 100644 --- a/frontend/app/components/features/dishes/RecurrenceLabels.tsx +++ b/frontend/app/components/features/dishes/RecurrenceLabels.tsx @@ -1,11 +1,10 @@ -import {FC} from "react"; -import {RecurrenceType} from "@/types/ScheduleType"; +import {RecurrenceType} from "@/types/RecurrenceType"; interface Props { recurrences: RecurrenceType[]; } -const RecurrenceLabels: FC = ({recurrences}) => { +const RecurrenceLabels = ({recurrences}: Props) => { const weeklyRecurrences = recurrences.filter(recurrence => recurrence.type === 'App\\Models\\WeeklyRecurrence'); const minimumRecurrences = recurrences.filter(recurrence => recurrence.type === 'App\\Models\\MinimumRecurrence'); diff --git a/frontend/app/components/features/dishes/SyncUsersForm.tsx b/frontend/app/components/features/dishes/SyncUsersForm.tsx index 296167d..d1f7264 100644 --- a/frontend/app/components/features/dishes/SyncUsersForm.tsx +++ b/frontend/app/components/features/dishes/SyncUsersForm.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React from "react"; import { DishType } from "@/types/DishType"; import { UserType } from "@/types/UserType"; import UserDishCard from "@/components/features/dishes/UserDishCard"; @@ -10,7 +10,7 @@ interface Props { reloadDish: () => void; } -const SyncUsersForm: FC = ({ dish, reloadDish }) => { +const SyncUsersForm = ({ dish, reloadDish }: Props) => { return (
Users diff --git a/frontend/app/components/features/dishes/UserDishCard.tsx b/frontend/app/components/features/dishes/UserDishCard.tsx index 4e06e8c..5681434 100644 --- a/frontend/app/components/features/dishes/UserDishCard.tsx +++ b/frontend/app/components/features/dishes/UserDishCard.tsx @@ -1,14 +1,14 @@ -import React, {FC, useEffect} from "react"; -import {DishType} from "@/types/DishType"; -import {UserType} from "@/types/UserType"; -import Link from "next/link"; +import React, {useEffect} from "react"; +import {DishType} from "~/types/DishType"; +import {UserType} from "~/types/UserType"; +import { Link } from "react-router"; import {PencilIcon, TrashIcon} from "@heroicons/react/24/solid"; -import {removeUserFromDish} from "@/utils/api/dishApi"; -import EditDishUserCardEditForm from "@/components/features/dishes/EditDishUserCardEditForm"; -import {getUserDishForUserAndDish} from "@/utils/api/usersApi"; -import Spinner from "@/components/Spinner"; -import RecurrenceLabels from "@/components/features/dishes/RecurrenceLabels"; -import {UserDishType} from "@/types/ScheduledUserDishType"; +import {removeUserFromDish} from "~/utils/api/dishApi"; +import EditDishUserCardEditForm from "~/components/features/dishes/EditDishUserCardEditForm"; +import {getUserDishForUserAndDish} from "~/utils/api/usersApi"; +import Spinner from "~/components/Spinner"; +import RecurrenceLabels from "~/components/features/dishes/RecurrenceLabels"; +import {UserDishType} from "~/types/ScheduledUserDishType"; interface Props { dish: DishType @@ -16,7 +16,7 @@ interface Props { reloadDish: () => void } -const UserDishCard: FC = ({dish, user, reloadDish}) => { +const UserDishCard = ({dish, user, reloadDish}: Props) => { const [userDish, setUserDish] = React.useState(null); const [userDishLoading, setUserDishLoading] = React.useState(true); const [isEditMode, setIsEditMode] = React.useState(false); @@ -56,14 +56,14 @@ const UserDishCard: FC = ({dish, user, reloadDish}) => {
- setIsEditMode(!isEditMode)} href="#"> + setIsEditMode(!isEditMode)} to="#">
- +
diff --git a/frontend/app/components/features/navbar/MobileDropdownMenu.tsx b/frontend/app/components/features/navbar/MobileDropdownMenu.tsx index 3e8639a..46ccdf0 100644 --- a/frontend/app/components/features/navbar/MobileDropdownMenu.tsx +++ b/frontend/app/components/features/navbar/MobileDropdownMenu.tsx @@ -1,6 +1,6 @@ -import Link from "next/link"; -import React, {FC} from "react"; -import useRoutes from "@/hooks/useRoutes"; +import { Link } from "react-router"; +import React from "react"; +import useRoutes from "~/hooks/useRoutes"; import classNames from "classnames"; interface Props { @@ -21,7 +21,7 @@ const linkStyles = classNames( 'space-grotesk', 'text-xl' ) -const MobileDropdownMenu: FC = ({ isOpen, setIsOpen, handleLogout }) => { +const MobileDropdownMenu = ({ isOpen, setIsOpen, handleLogout }: Props) => { const routes = useRoutes(); if (!isOpen) return null; @@ -29,35 +29,35 @@ const MobileDropdownMenu: FC = ({ isOpen, setIsOpen, handleLogout }) => { return (
setIsOpen(false)} > Home setIsOpen(false)} > Dishes setIsOpen(false)} > Users setIsOpen(false)} > History Logout diff --git a/frontend/app/components/features/schedule/ScheduleCalendar.tsx b/frontend/app/components/features/schedule/ScheduleCalendar.tsx index b146f6a..fce02c2 100644 --- a/frontend/app/components/features/schedule/ScheduleCalendar.tsx +++ b/frontend/app/components/features/schedule/ScheduleCalendar.tsx @@ -1,6 +1,3 @@ -"use client" - -import {FC} from "react"; import ScheduleDayCard from "@/components/features/schedule/dayCard/ScheduleDayCard"; import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType"; import {useFetchUsers} from "@/hooks/useFetchUsers"; @@ -52,7 +49,7 @@ interface Props { schedule: ScheduleType[]; } -const ScheduleCalendar: FC = ({ schedule }: Props) => { +const ScheduleCalendar = ({ schedule }: Props) => { const {users, isLoading: areUsersLoading} = useFetchUsers(); if (areUsersLoading) return diff --git a/frontend/app/components/features/schedule/ScheduleEditForm.tsx b/frontend/app/components/features/schedule/ScheduleEditForm.tsx index 0f436a9..df5db7b 100644 --- a/frontend/app/components/features/schedule/ScheduleEditForm.tsx +++ b/frontend/app/components/features/schedule/ScheduleEditForm.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { FC, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { ScheduleType } from "@/types/ScheduleType"; import Spinner from "@/components/Spinner"; import PageTitle from "@/components/ui/PageTitle"; @@ -20,7 +20,7 @@ interface Props { date: string; } -const ScheduleEditForm: FC = ({ date }) => { +const ScheduleEditForm = ({ date }: Props) => { const [schedule, setSchedule] = useState() const [userDishes, setUserDishes] = useState([]) const [isScheduleLoading, setIsScheduleLoading] = useState(true); diff --git a/frontend/app/components/features/schedule/ScheduleRegenerateButton.tsx b/frontend/app/components/features/schedule/ScheduleRegenerateButton.tsx index a795bb1..3a27044 100644 --- a/frontend/app/components/features/schedule/ScheduleRegenerateButton.tsx +++ b/frontend/app/components/features/schedule/ScheduleRegenerateButton.tsx @@ -1,4 +1,4 @@ -import { type FC, useState} from "react"; +import { useState} from "react"; import Modal from "@/components/ui/Modal"; import ScheduleRegenerateForm from "@/components/features/schedule/ScheduleRegenerateForm"; import {ArrowPathIcon} from "@heroicons/react/16/solid"; @@ -7,7 +7,7 @@ interface ScheduleRegenerateButtonProps { onModalClose?: () => void; } -const ScheduleRegenerateButton: FC = ({ onModalClose }) => { +const ScheduleRegenerateButton = ({ onModalClose }: ScheduleRegenerateButtonProps) => { const [open, setOpen] = useState(false); const handleCloseModal = () => { diff --git a/frontend/app/components/features/schedule/ScheduleRegenerateForm.tsx b/frontend/app/components/features/schedule/ScheduleRegenerateForm.tsx index 017b8c2..3a9a4bf 100644 --- a/frontend/app/components/features/schedule/ScheduleRegenerateForm.tsx +++ b/frontend/app/components/features/schedule/ScheduleRegenerateForm.tsx @@ -1,6 +1,6 @@ import {DialogTitle} from "@headlessui/react"; import Toggle from "@/components/ui/Toggle"; -import {FC, useEffect, useState} from "react"; +import {useEffect, useState} from "react"; import {generateSchedule} from "@/utils/api/scheduleApi"; import Alert from "@/components/ui/Alert"; import SolidButton from "@/components/ui/Buttons/SolidButton"; @@ -9,7 +9,7 @@ interface ScheduleRegenerateFormProps { closeModal: () => void; } -const ScheduleRegenerateForm: FC = ({closeModal}) => { +const ScheduleRegenerateForm = ({closeModal}: ScheduleRegenerateFormProps) => { const [overwrite, setOverwrite] = useState(false); const [error, setError] = useState(""); diff --git a/frontend/app/components/features/schedule/UpcomingDishes.tsx b/frontend/app/components/features/schedule/UpcomingDishes.tsx index c7731d0..99f69d4 100644 --- a/frontend/app/components/features/schedule/UpcomingDishes.tsx +++ b/frontend/app/components/features/schedule/UpcomingDishes.tsx @@ -1,5 +1,3 @@ -"use client" - import { useCallback, useEffect, useState } from "react"; import { DateTime } from "luxon"; import ScheduleCalendar from "@/components/features/schedule/ScheduleCalendar"; diff --git a/frontend/app/components/features/schedule/UserDishEditCard.tsx b/frontend/app/components/features/schedule/UserDishEditCard.tsx index b82fc1b..653efbd 100644 --- a/frontend/app/components/features/schedule/UserDishEditCard.tsx +++ b/frontend/app/components/features/schedule/UserDishEditCard.tsx @@ -1,4 +1,4 @@ -import {FC, FormEvent, useMemo, useState} from "react"; +import {FormEvent, useMemo, useState} from "react"; import {DishType} from "@/types/DishType"; import {ScheduledUserDishType} from "@/types/ScheduledUserDishType"; import {updateScheduledUserDish} from "@/utils/api/scheduledUserDishesApi"; @@ -10,7 +10,7 @@ interface Props { allDishes: DishType[] } -const UserDishEditCard: FC = ({ scheduledUserDish, allDishes }) => { +const UserDishEditCard = ({ scheduledUserDish, allDishes }: Props) => { const [selectedUserDishId, setSelectedUserDishId] = useState(scheduledUserDish.user_dish ? scheduledUserDish.user_dish.id : 0) const [errorMessage, setErrorMessage] = useState("") const [isSuccess, setIsSuccess] = useState(false); diff --git a/frontend/app/components/features/schedule/dayCard/DateBadge.tsx b/frontend/app/components/features/schedule/dayCard/DateBadge.tsx index 9a61d87..1338f51 100644 --- a/frontend/app/components/features/schedule/dayCard/DateBadge.tsx +++ b/frontend/app/components/features/schedule/dayCard/DateBadge.tsx @@ -1,5 +1,5 @@ import {DateTime} from "luxon"; -import React, {FC} from "react"; +import React from "react"; import classNames from "classnames"; interface Props { @@ -7,7 +7,7 @@ interface Props { className?: string; } -const DateBadge: FC = ({ className, date }) => { +const DateBadge = ({ className, date }: Props) => { const isToday = DateTime.fromISO(date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd") const textStyle = classNames("inline font-bold", { diff --git a/frontend/app/components/features/schedule/dayCard/ScheduleDayCard.tsx b/frontend/app/components/features/schedule/dayCard/ScheduleDayCard.tsx index 77c68e0..8c6b874 100644 --- a/frontend/app/components/features/schedule/dayCard/ScheduleDayCard.tsx +++ b/frontend/app/components/features/schedule/dayCard/ScheduleDayCard.tsx @@ -1,11 +1,11 @@ -import React, {FC} from "react"; -import {UserType} from "@/types/UserType"; -import ScheduleDayCardUserDish from "@/components/features/schedule/dayCard/ScheduleDayCardUserDish"; -import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType"; -import Link from "next/link"; +import React from "react"; +import {UserType} from "~/types/UserType"; +import ScheduleDayCardUserDish from "~/components/features/schedule/dayCard/ScheduleDayCardUserDish"; +import { FilledScheduleType, ScheduleType } from "~/types/ScheduleType"; +import { Link } from "react-router"; import {PencilSquareIcon} from "@heroicons/react/24/outline"; -import useRoutes from "@/hooks/useRoutes"; -import DateBadge from "@/components/features/schedule/dayCard/DateBadge"; +import useRoutes from "~/hooks/useRoutes"; +import DateBadge from "~/components/features/schedule/dayCard/DateBadge"; import { DateTime } from "luxon" import classNames from "classnames" @@ -14,7 +14,7 @@ interface Props { users: UserType[]; } -const ScheduleDayCard: FC = ({schedule, users}) => { +const ScheduleDayCard = ({schedule, users}: Props) => { const routes = useRoutes() const isToday = DateTime.fromISO(schedule.date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd") @@ -37,7 +37,7 @@ const ScheduleDayCard: FC = ({schedule, users}) => { Edit diff --git a/frontend/app/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx b/frontend/app/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx index 64f0f0e..35cf58d 100644 --- a/frontend/app/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx +++ b/frontend/app/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React from "react"; import { ScheduledUserDishType } from "@/types/ScheduledUserDishType"; import { UserType } from "@/types/UserType"; import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType"; @@ -8,7 +8,7 @@ interface Props { user: UserType; } -const ScheduleDayCardUserDish: FC = ({ schedule, user }) => { +const ScheduleDayCardUserDish = ({ schedule, user }: Props) => { const getDish = (user: UserType) => { const scheduled_dishes = schedule.scheduled_user_dishes.filter((scheduled_user_dish: ScheduledUserDishType) => ( scheduled_user_dish.user_dish?.user.id == user.id diff --git a/frontend/app/components/features/users/EditUserForm.tsx b/frontend/app/components/features/users/EditUserForm.tsx index 1593dd9..e26cf58 100644 --- a/frontend/app/components/features/users/EditUserForm.tsx +++ b/frontend/app/components/features/users/EditUserForm.tsx @@ -1,22 +1,22 @@ -import React, {FC, useState} from "react"; -import {useRouter} from "next/navigation"; -import useRoutes from "@/hooks/useRoutes"; -import {updateUser} from "@/utils/api/usersApi"; -import PageTitle from "@/components/ui/PageTitle"; -import Link from "next/link"; -import Alert from "@/components/ui/Alert"; -import {UserType} from "@/types/UserType"; -import SolidButton from "@/components/ui/Buttons/SolidButton"; +import React, {useState} from "react"; +import { useNavigate } from "react-router"; +import useRoutes from "~/hooks/useRoutes"; +import {updateUser} from "~/utils/api/usersApi"; +import PageTitle from "~/components/ui/PageTitle"; +import { Link } from "react-router"; +import Alert from "~/components/ui/Alert"; +import {UserType} from "~/types/UserType"; +import SolidButton from "~/components/ui/Buttons/SolidButton"; interface Props { user: UserType; } -const EditUserForm: FC = ({ user }) => { +const EditUserForm = ({ user }: Props) => { const [name, setName] = useState(user.name); const [error, setError] = useState(''); - const router = useRouter(); + const navigate = useNavigate(); const routes = useRoutes(); const handleSubmit = (e: React.FormEvent) => { @@ -30,14 +30,14 @@ const EditUserForm: FC = ({ user }) => { updateUser(user, name) .then(() => { - router.push(routes.user.index()) + navigate(routes.user.index()) }) } return (
Create User - Back to users + Back to users
{ diff --git a/frontend/app/components/layout/AuthGuard.tsx b/frontend/app/components/layout/AuthGuard.tsx index d3029d8..9f6cf29 100644 --- a/frontend/app/components/layout/AuthGuard.tsx +++ b/frontend/app/components/layout/AuthGuard.tsx @@ -1,45 +1,26 @@ import { useAuth } from '@/context/AuthContext'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { useLocation, useNavigate } from "react-router" -// Optional Loading spinner component to display while loading -const LoadingSpinner = () => ( -
-
-
-); - export default function AuthGuard({ children }: { children: React.ReactNode }) { - const { isAuthenticated } = useAuth(); // Access the authentication state from AuthContext + const { isAuthenticated } = useAuth(); const navigate = useNavigate(); - const [loading, setLoading] = useState(true); const location = useLocation(); const publicRoutes = ['/login', '/register']; const isPublic = publicRoutes.includes(location.pathname); useEffect(() => { - // Determine behavior based on auth state and route type - if (isAuthenticated === null) { - // Await authentication resolution (e.g., token check) - setLoading(true); - } else if (isAuthenticated && isPublic) { + // Handle redirects based on auth state + if (isAuthenticated && isPublic) { // Redirect authenticated users away from public pages navigate('/', { replace: true }); } else if (!isAuthenticated && !isPublic) { // Redirect unauthenticated users trying to access protected pages navigate('/login', { replace: true }); - } else { - // Otherwise, stop loading since the state is resolved - setLoading(false); } }, [isAuthenticated, location.pathname, isPublic, navigate]); - // Show a spinner while authentication state is loading - if (loading) { - return ; - } - - // Render children only when the authentication state and path are valid + // Render children for all routes - redirects will happen via useEffect return <>{children}; } \ No newline at end of file diff --git a/frontend/app/components/layout/Card.tsx b/frontend/app/components/layout/Card.tsx index 6784526..4491cab 100644 --- a/frontend/app/components/layout/Card.tsx +++ b/frontend/app/components/layout/Card.tsx @@ -1,10 +1,10 @@ -import React, {FC} from "react"; +import React from "react"; interface Props { children: React.ReactNode; } -const Card: FC = ({ children }) => { +const Card = ({ children }: Props) => { return (
{ children } diff --git a/frontend/app/components/layout/NavBar.tsx b/frontend/app/components/layout/NavBar.tsx index 67cadb2..05d71a9 100644 --- a/frontend/app/components/layout/NavBar.tsx +++ b/frontend/app/components/layout/NavBar.tsx @@ -1,29 +1,26 @@ -"use client"; - import React, { useState } from "react"; -import Link from "next/link"; -import useRoutes from "@/hooks/useRoutes"; -import MobileDropdownMenu from "@/components/features/navbar/MobileDropdownMenu"; -import {useRouter} from "next/navigation"; -import {useAuth} from "@/context/AuthContext"; +import { Link, useNavigate } from "react-router"; +import useRoutes from "~/hooks/useRoutes"; +import MobileDropdownMenu from "~/components/features/navbar/MobileDropdownMenu"; +import { useAuth } from "~/context/AuthContext"; const NavBar = () => { const [isOpen, setIsOpen] = useState(false); const routes = useRoutes(); - const router = useRouter(); + const navigate = useNavigate(); const {isAuthenticated, logout} = useAuth(); const handleLogout = (e: React.MouseEvent) => { e.preventDefault(); logout(); - router.replace('/login'); + navigate('/login', { replace: true }); }; return (