diff --git a/calc-frontend/src/App/App.tsx b/calc-frontend/src/App/App.tsx index 35dab8a..a979d71 100644 --- a/calc-frontend/src/App/App.tsx +++ b/calc-frontend/src/App/App.tsx @@ -5,7 +5,6 @@ import './app.css' import './widgets.css' import RoutesList from "./RoutesList"; -import { AuthProvider } from "./AuthContext"; import { Toaster } from "@/components/ui/sonner"; @@ -19,10 +18,10 @@ function App() { createRoutesFromElements(RoutesList)); return ( - + <> - + ) } diff --git a/calc-frontend/src/App/AuthContext.tsx b/calc-frontend/src/App/AuthContext.tsx index d903372..e69de29 100644 --- a/calc-frontend/src/App/AuthContext.tsx +++ b/calc-frontend/src/App/AuthContext.tsx @@ -1,32 +0,0 @@ -import { createContext, useContext } from "react"; -import { authClient } from "../lib/auth-client"; -import { Session } from "../lib/auth-client"; -import { BetterFetchError } from "better-auth/react"; - -interface AuthContextType { - session: Session | null; - isPending: boolean; - error: BetterFetchError | null; - refetch: () => void; -} - -const AuthContext = createContext(undefined); - -export const useAuth = () => { - const context = useContext(AuthContext); - if(context === undefined) { - throw new Error("useAuth must be used within an AuthProvider"); - } - return context; -} -// To get the data from useSession(). {data: session, isPending, error, refetch} -// instead call useAuth() anywhere in the application, you will get the same data -export const AuthProvider = ({children}: {children: React.ReactNode}) => { - const {data: session, isPending, error, refetch } = authClient.useSession(); - - return ( - - {children} - - ); -}; \ No newline at end of file diff --git a/calc-frontend/src/App/RootLayout.tsx b/calc-frontend/src/App/RootLayout.tsx index e62fd79..89a5e0a 100644 --- a/calc-frontend/src/App/RootLayout.tsx +++ b/calc-frontend/src/App/RootLayout.tsx @@ -4,12 +4,11 @@ import { ScrollRestoration } from "react-router"; import ucfLogo from "../assets/ucf-logo.png" import CalcLogo from "../components/CalcLogo" -import { useAuth } from "./AuthContext"; +import { authClient } from "../lib/auth-client"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar" - function RootLayout() { - const { session } = useAuth(); + const session = authClient.useSession(); return ( <> @@ -29,12 +28,12 @@ function RootLayout() { - {session ? ( - session.user.image ? ( + {session.data?.session ? ( + session.data?.user.image ? ( - - {session.user.name.charAt(0)} + + {session.data?.user.name.charAt(0)} ) : ( diff --git a/calc-frontend/src/__tests__/App.test.tsx b/calc-frontend/src/__tests__/App.test.tsx index 035d7b2..c0efa42 100644 --- a/calc-frontend/src/__tests__/App.test.tsx +++ b/calc-frontend/src/__tests__/App.test.tsx @@ -2,7 +2,6 @@ import {expect, test} from 'vitest' import {render, screen} from '@testing-library/react' import { createMemoryRouter, createRoutesFromElements, RouterProvider } from 'react-router' -import { AuthProvider } from '../App/AuthContext' import RoutesList from '../App/RoutesList' import { Toaster } from '@/components/ui/sonner' @@ -13,10 +12,10 @@ test('full app rendering', () => { }) render( - + <> - , + , {} ); diff --git a/calc-frontend/src/components/ProtectedRoute.tsx b/calc-frontend/src/components/ProtectedRoute.tsx index 176ec48..6d74693 100644 --- a/calc-frontend/src/components/ProtectedRoute.tsx +++ b/calc-frontend/src/components/ProtectedRoute.tsx @@ -1,13 +1,13 @@ import { Navigate, Outlet, } from "react-router"; -import { useAuth } from "../App/AuthContext"; +import { authClient } from "../lib/auth-client"; import { Blocks } from "react-loader-spinner"; function ProtectedRoute() { - const { session, isPending } = useAuth(); + const session = authClient.useSession(); // show loading if waiting for session info - if(isPending){ + if(session.isPending){ return } diff --git a/calc-frontend/src/components/RedirectIfAuth.tsx b/calc-frontend/src/components/RedirectIfAuth.tsx index c61c6bb..e8ab331 100644 --- a/calc-frontend/src/components/RedirectIfAuth.tsx +++ b/calc-frontend/src/components/RedirectIfAuth.tsx @@ -1,12 +1,12 @@ import { Navigate, Outlet } from "react-router"; -import { useAuth } from "../App/AuthContext"; +import { authClient } from "../lib/auth-client"; function RedirectIfAuth() { - const { session, isPending } = useAuth(); + const session = authClient.useSession(); // user is not logged in - let them go to sign in page - if(isPending || !session) { + if(session.isPending || !session.data?.session) { return } diff --git a/calc-frontend/src/components/ui/SaveFunctionButton.tsx b/calc-frontend/src/components/ui/SaveFunctionButton.tsx index 533eff2..4c462f3 100644 --- a/calc-frontend/src/components/ui/SaveFunctionButton.tsx +++ b/calc-frontend/src/components/ui/SaveFunctionButton.tsx @@ -1,5 +1,5 @@ import { useNavigate } from "react-router"; -import { useAuth } from "../../App/AuthContext"; +import { authClient } from "../../lib/auth-client"; import { Session } from "../../lib/auth-client"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipArrow } from "@radix-ui/react-tooltip"; @@ -8,14 +8,14 @@ function SaveFunctionButton({onSave, saving, enableSave}: {onSave: (session: Ses saving: boolean, enableSave: boolean}) { const navigate = useNavigate(); - const { session } = useAuth(); + const session = authClient.useSession(); const handleClick = () => { - if(!session) { + if(!session.data?.session ) { navigate("/sign-in"); return; } - onSave(session); + onSave(session.data); } if(saving){ diff --git a/calc-frontend/src/pages/Dashboard.tsx b/calc-frontend/src/pages/Dashboard.tsx index 26d5d28..5599176 100644 --- a/calc-frontend/src/pages/Dashboard.tsx +++ b/calc-frontend/src/pages/Dashboard.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { useAuth } from "../App/AuthContext"; +import { authClient } from "../lib/auth-client"; import FunctionCard from "../components/ui/FunctionCard"; import axios from "axios"; import { Blocks } from "react-loader-spinner"; @@ -19,7 +19,7 @@ function Dashboard() // each user starts with a userFunction array of size 0 const [userFunctions, setUserFunctions] = useState([]); - const { session, isPending } = useAuth(); + const session = authClient.useSession(); const navigate = useNavigate() @@ -27,7 +27,7 @@ function Dashboard() useEffect(() => { // user is not logged in - if(!isPending && !session){ + if(!session.isPending && !session.data?.session){ navigate("/sign-in", { replace: true }) return } @@ -35,7 +35,7 @@ function Dashboard() if(session){ getFuncs(); } - }, [isPending]); + }, [session.isPending]); // show loading while checking if user is logged in if(!session){ @@ -46,7 +46,7 @@ function Dashboard() } const getFuncs = async () => { - const userId = session.user.id; + const userId = session.data?.user.id; try { const response = await axios.get(serverUrl + `/func/all/${userId}`); setUserFunctions(response.data); @@ -72,7 +72,7 @@ function Dashboard() return (
-

{session.user.name}'s Dashboard

+

{session.data?.user.name}'s Dashboard

{userFunctions.length > 0?
diff --git a/calc-frontend/src/pages/Home.tsx b/calc-frontend/src/pages/Home.tsx index 9b4552d..4a25dca 100644 --- a/calc-frontend/src/pages/Home.tsx +++ b/calc-frontend/src/pages/Home.tsx @@ -1,6 +1,6 @@ import { useLayoutEffect, useRef } from "react"; import { Link } from "react-router" -import { useAuth } from "../App/AuthContext"; +import { authClient } from "../lib/auth-client"; import SignInButton from "../components/ui/SignInButton"; import SignOutButton from "../components/ui/SignOutButton"; import derivativeVideo from '../animations/manim-videos/derivativeAnimation/1080p60/DerivativeAnimation.mp4'; @@ -8,7 +8,7 @@ import integralVideo from '../animations/manim-videos/integralAnimation/1080p60/ import limitVideo from '../animations/manim-videos/limitsAnimation/1080p60/Limit.mp4'; function Home() { - const { session, isPending } = useAuth(); + const session = authClient.useSession(); const d1 = useRef(null); const d2 = useRef(null); @@ -78,10 +78,10 @@ function Home() { - {isPending === true? + {session.isPending === true? null : - !session ? : + !session.data?.session ? : }