Merge pull request #193 from Speedrunyourknowledge/fix/sessions

fix: refactor sessions in frontend

Author: Speedrunyourknowledge

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 (
-    <AuthProvider>
+    <>
       <Toaster position="bottom-left" richColors />
       <RouterProvider router={router} />
-    </AuthProvider>
+    </>
   )
 }
 

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<AuthContextType | undefined>(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 (
-        <AuthContext.Provider value={{session, isPending, error, refetch}}>
-            {children}
-        </AuthContext.Provider>
-    );
-};

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() {
           </div>
 
         </div>
-        {session ? (
-          session.user.image ? (
+        {session.data?.session ? (
+          session.data?.user.image ? (
             <Link to="/dashboard">
               <Avatar className="mr-5 cursor-pointer w-12 h-12">
-                <AvatarImage src={session.user.image} />
-                <AvatarFallback>{session.user.name.charAt(0)}</AvatarFallback>
+                <AvatarImage src={session.data?.user.image} />
+                <AvatarFallback>{session.data?.user.name.charAt(0)}</AvatarFallback>
               </Avatar>
             </Link>
           ) : (

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(
-    <AuthProvider>
+    <>
       <Toaster />
       <RouterProvider router={router} />
-    </AuthProvider>,
+    </>,
     {}
   );
 

calc-frontend/src/components/ProtectedRoute.tsx

@@ -1,21 +1,21 @@
 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  <Blocks height="80" width="80" color="#4fa94d" ariaLabel="loading" 
           wrapperStyle={{marginLeft:'auto', marginRight:'auto'}}
           wrapperClass="blocks-wrapper loading" visible={true}
           />
     }
 
     // user is not logged in - go to sign in page
-    if(!session) {
+    if(!session.data?.session) {
         return <Navigate to="/sign-in" replace />
     }
 

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 <Outlet/>
     }
 

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){

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,23 +19,23 @@ function Dashboard()
     // each user starts with a userFunction array of size 0
     const [userFunctions, setUserFunctions] = useState<userFunction[]>([]);
 
-    const { session, isPending } = useAuth();
+    const session = authClient.useSession();
 
     const navigate = useNavigate()
 
     const serverUrl = import.meta.env.VITE_SERVER_URL || 'http://localhost:3000'
 
     useEffect(() => {
       // user is not logged in
-      if(!isPending && !session){
+      if(!session.isPending && !session.data?.session){
         navigate("/sign-in", { replace: true })
         return
       }
 
       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 (
         <div>
-            <h2 className="mb-5 ml-[20px]">{session.user.name}'s Dashboard</h2>
+            <h2 className="mb-5 ml-[20px]">{session.data?.user.name}'s Dashboard</h2>
 
             {userFunctions.length > 0?
               <div className="dashboard">

calc-frontend/src/pages/Home.tsx

@@ -1,14 +1,14 @@
 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';
 import integralVideo from '../animations/manim-videos/integralAnimation/1080p60/RightRiemannSum.mp4';
 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() {
         <Link to="/dashboard" tabIndex={-1} style={{marginRight:'2px'}}>
           <button className="link-box cursor-pointer" style={{borderRadius:'5px'}}>Dashboard</button>
         </Link>
-        {isPending === true? 
+        {session.isPending === true? 
           null
           : 
-          !session ? <SignInButton/> : <SignOutButton/> 
+          !session.data?.session ? <SignInButton/> : <SignOutButton/> 
         }
       </div>