Simplify API Client and fix token expiry issue

apps/admin/src/App.tsx

@@ -9,16 +9,27 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import Attendance from "./routes/Attendance";
 import routes from "./routes";
-import { AuthCallback } from "@rp/shared";
-import api from "./util/api";
+import { AuthCallback, googleAuth } from "@rp/shared";
 import Main from "./routes/Main";
+import { useEffect } from "react";
+
+function RefreshHandler() {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get("redirect");
+    googleAuth(false, redirect ?? undefined);
+  }, []);
+
+  return <p>Redirecting to login...</p>;
+}
 
 function App() {
   return (
     <ChakraProvider theme={theme}>
       <BrowserRouter>
         <Routes>
-          <Route path="/auth/callback" element={<AuthCallback api={api} />} />
+          <Route path="/auth/refresh" element={<RefreshHandler />} />
+          <Route path="/auth/callback" element={<AuthCallback />} />
           <Route path="/attendance" element={<Attendance />} />
           <Route element={<Main />}>
             {routes.map(({ path, element }) => (

apps/admin/src/components/AttendanceTable.tsx

@@ -29,14 +29,14 @@ import {
 import React, { useEffect, useMemo, useState } from "react";
 import AttendanceModal from "./AttendanceModal";
 import { ChevronDownIcon } from "@chakra-ui/icons";
-import api from "../util/api";
 import {
   AttendanceType,
   Meeting,
   path,
   Staff,
   CommitteeType,
-  usePolling
+  usePolling,
+  api
 } from "@rp/shared";
 import { useMirrorStyles } from "@/styles/Mirror";
 import { MainContext } from "@/routes/Main";
@@ -93,9 +93,8 @@ const AttendanceBox = () => {
     data: staff,
     isLoading: staffLoading,
     mutate: mutateStaff
-  } = usePolling(api, "/staff", authorized);
+  } = usePolling("/staff", authorized);
   const { data: meetings, isLoading: meetingsLoading } = usePolling(
-    api,
     "/meetings",
     authorized
   );

apps/admin/src/components/Events/AddModal.tsx

@@ -1,5 +1,4 @@
 import { useMirrorStyles } from "@/styles/Mirror";
-import api from "@/util/api";
 import { AddIcon } from "@chakra-ui/icons";
 import {
   Modal,
@@ -12,6 +11,7 @@ import {
 import { FormikHelpers } from "formik";
 import { EventFormInitialValues, EventFormValues } from "./EventSchema";
 import EventForm from "./EventForm";
+import { api } from "@rp/shared";
 
 type AddModalProps = {
   updateEvents: () => void;

apps/admin/src/components/Events/DeleteModal.tsx

@@ -1,5 +1,4 @@
 import { MainContext } from "@/routes/Main";
-import api from "@/util/api";
 import {
   Button,
   Modal,
@@ -12,7 +11,7 @@ import {
   useDisclosure,
   useToast
 } from "@chakra-ui/react";
-import { Event, path } from "@rp/shared";
+import { api, Event, path } from "@rp/shared";
 import { useOutletContext } from "react-router-dom";
 
 type DeleteModalProps = {

apps/admin/src/components/Events/EditModal.tsx

@@ -1,4 +1,3 @@
-import api from "@/util/api";
 import { EditIcon } from "@chakra-ui/icons";
 import {
   useDisclosure,
@@ -8,7 +7,7 @@ import {
   ModalContent,
   useToast
 } from "@chakra-ui/react";
-import { Event, path } from "@rp/shared";
+import { api, Event, path } from "@rp/shared";
 import React from "react";
 import EventForm from "./EventForm";
 import { EventFormValues } from "./EventSchema";

apps/admin/src/components/Login.tsx

@@ -14,7 +14,7 @@ import {
   HStack,
   Heading
 } from "@chakra-ui/react";
-import { Config, googleAuth } from "@rp/shared";
+import { googleAuth } from "@rp/shared";
 
 export default function Login() {
   return (
@@ -84,7 +84,7 @@ export default function Login() {
         size="lg"
         fontWeight="bold"
         onClick={() => {
-          googleAuth(Config.GOOGLE_OAUTH_CLIENT_ID, true);
+          googleAuth(true);
         }}
         fontFamily={"Nunito"}
       >

apps/admin/src/components/Meetings/AddModal.tsx

@@ -1,5 +1,4 @@
 import { useMirrorStyles } from "@/styles/Mirror";
-import api from "@/util/api";
 import { AddIcon } from "@chakra-ui/icons";
 import {
   Modal,
@@ -12,6 +11,7 @@ import {
 import { FormikHelpers } from "formik";
 import { MeetingFormInitialValues, MeetingFormValues } from "./MeetingSchema";
 import MeetingForm from "./MeetingForm";
+import { api } from "@rp/shared";
 
 type AddModalProps = {
   updateMeetings: () => void;

apps/admin/src/components/Meetings/DeleteModal.tsx

@@ -1,5 +1,4 @@
 import { MainContext } from "@/routes/Main";
-import api from "@/util/api";
 import {
   Button,
   Modal,
@@ -12,7 +11,7 @@ import {
   useDisclosure,
   useToast
 } from "@chakra-ui/react";
-import { Meeting, path } from "@rp/shared";
+import { api, Meeting, path } from "@rp/shared";
 import { useOutletContext } from "react-router-dom";
 
 type DeleteModalProps = {

apps/admin/src/components/Meetings/EditModal.tsx

@@ -1,4 +1,3 @@
-import api from "@/util/api";
 import { EditIcon } from "@chakra-ui/icons";
 import {
   useDisclosure,
@@ -8,7 +7,7 @@ import {
   ModalContent,
   useToast
 } from "@chakra-ui/react";
-import { Meeting, path } from "@rp/shared";
+import { api, Meeting, path } from "@rp/shared";
 import React from "react";
 import MeetingForm from "./MeetingForm";
 import { MeetingFormValues } from "./MeetingSchema";

apps/admin/src/components/Roles/RoleCard.tsx

@@ -22,9 +22,8 @@ import {
   FormLabel,
   Button
 } from "@chakra-ui/react";
-import api from "../../util/api";
 import React from "react";
-import { path, Role, usePolling, RoleObject } from "@rp/shared";
+import { path, Role, usePolling, RoleObject, api } from "@rp/shared";
 import { Config } from "@/config";
 import { useMirrorStyles } from "@/styles/Mirror";
 import { Formik, FormikHelpers } from "formik";
@@ -48,13 +47,13 @@ const RolesCard: React.FC<RolesCardProps> = () => {
     data: adminUsers,
     update: updateAdminUsers,
     isLoading: adminLoading
-  } = usePolling(api, path("/auth/:role", { role: "ADMIN" }), authorized);
+  } = usePolling(path("/auth/:role", { role: "ADMIN" }), authorized);
 
   const {
     data: staffUsers,
     update: updateStaffUsers,
     isLoading: staffLoading
-  } = usePolling(api, path("/auth/:role", { role: "STAFF" }), authorized);
+  } = usePolling(path("/auth/:role", { role: "STAFF" }), authorized);
 
   // Combine and deduplicate users
   const allUsers = React.useMemo((): UserWithRoles[] => {

apps/admin/src/components/StatCard.tsx

@@ -1,9 +1,8 @@
-import api from "@/util/api";
 import { Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import { APIRoutes, usePolling } from "@rp/shared";
-import { GettablePaths } from "@rp/shared/src/api/type-wrapper";
 import { AnimatedCounter } from "@rp/shared";
 import { useMirrorStyles } from "@/styles/Mirror";
+import { GettablePaths } from "@rp/shared/src/api/type-wrapper";
 
 type Transformer<T extends GettablePaths> = (
   data: APIRoutes[T]["GET"]["response"]
@@ -26,7 +25,6 @@ const StatCard = <T extends GettablePaths>({
 }: StatCardProps<T>) => {
   const mirrorStyles = useMirrorStyles(true);
   const { data, error, isLoading } = usePolling(
-    api,
     endpoint,
     enabled ?? true,
     interval

apps/admin/src/components/StatusMonitor.tsx

@@ -1,6 +1,6 @@
 import { HStack, Icon, Text, Tooltip } from "@chakra-ui/react";
+import { api } from "@rp/shared";
 import { useEffect, useState } from "react";
-import api from "../util/api";
 import {
   MdSignalWifi4Bar,
   MdSignalWifiConnectedNoInternet4

apps/admin/src/routes/Attendance.tsx

@@ -12,10 +12,10 @@ import {
 } from "@chakra-ui/react";
 import Lottie from "lottie-react";
 import successAnimation from "../assets/animations/success.json";
-import api from "../util/api";
 import axios from "axios";
 import { useMirrorStyles } from "@/styles/Mirror";
 import { MdArrowBack } from "react-icons/md";
+import { api } from "@rp/shared";
 
 type Status =
   | "loading"

apps/admin/src/routes/Main.tsx

@@ -1,9 +1,8 @@
 import { Outlet } from "react-router-dom";
-import api from "../util/api";
 import { useEffect, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import Navbar from "@/components/Navbar";
-import { Role } from "@rp/shared";
+import { api, Role } from "@rp/shared";
 import Unauthorized from "@/components/Unauthorized";
 import Login from "@/components/Login";
 import {

apps/admin/src/routes/pages/Dashboard.tsx

@@ -7,7 +7,6 @@ import {
   CardBody,
   VStack
 } from "@chakra-ui/react";
-import api from "../../util/api";
 import StatCard from "@/components/StatCard";
 import { motion } from "framer-motion";
 import { usePolling } from "@rp/shared";
@@ -21,7 +20,6 @@ const MotionHeader = motion(Heading);
 function Dashboard() {
   const { authorized, displayName } = useOutletContext<MainContext>();
   const { data: currentEvent } = usePolling(
-    api,
     "/events/currentOrNext",
     authorized
   );

apps/admin/src/routes/pages/EventCheckin.tsx

@@ -14,16 +14,15 @@ import {
   Text
 } from "@chakra-ui/react";
 import { IDetectedBarcode, Scanner } from "@yudiel/react-qr-scanner";
-import api from "../../util/api.ts";
-import { Event, usePolling } from "@rp/shared";
-import { ApiError } from "@rp/shared/src/api/axios.ts";
+import { api, Event, usePolling } from "@rp/shared";
 import { useOutletContext } from "react-router-dom";
 import { MainContext } from "../Main.tsx";
+import { ApiError } from "@rp/shared/src/api/type-wrapper.ts";
 
 const EventCheckin = () => {
   const { authorized } = useOutletContext<MainContext>();
-  const { data: attendees } = usePolling(api, "/attendee/emails", authorized);
-  const { data: events } = usePolling(api, "/events", authorized);
+  const { data: attendees } = usePolling("/attendee/emails", authorized);
+  const { data: events } = usePolling("/events", authorized);
   const [showWebcam, setShowWebcam] = useState(false); // Toggle between webcam and email input
   const toast = useToast();
   const [email, setEmail] = useState("");
@@ -53,7 +52,7 @@ const EventCheckin = () => {
       {
         success: { title: "Succesfully checked into event!" },
         error: (error: ApiError) => {
-          switch (error.response.data.error) {
+          switch (error?.response?.data?.error) {
             case "QR code has expired":
               return { title: "Event QR code has expired", status: "error" };
             case "IsDuplicate":

apps/admin/src/routes/pages/Events.tsx

@@ -1,5 +1,4 @@
 import { Heading, Flex, VStack } from "@chakra-ui/react";
-import api from "../../util/api.ts";
 import { Event, usePolling } from "@rp/shared";
 import EventCard, {
   EventCardSkeleton
@@ -18,7 +17,7 @@ function Events() {
     data: events,
     update: updateEvents,
     isLoading
-  } = usePolling(api, "/events", authorized);
+  } = usePolling("/events", authorized);
 
   return (
     <VStack spacing={4} align="stretch">

apps/admin/src/routes/pages/Meetings.tsx

@@ -1,5 +1,4 @@
 import { Heading, Flex } from "@chakra-ui/react";
-import api from "../../util/api.ts";
 import { usePolling } from "@rp/shared";
 import AddModal from "@/components/Meetings/AddModal.tsx";
 import MeetingCard, {
@@ -14,7 +13,7 @@ function Meetings() {
     data: meetings,
     update: updateMeetings,
     isLoading
-  } = usePolling(api, "/meetings", authorized);
+  } = usePolling("/meetings", authorized);
 
   return (
     <>

apps/admin/src/routes/pages/Merch.tsx

@@ -15,15 +15,14 @@ import {
   Text
 } from "@chakra-ui/react";
 import { Scanner } from "@yudiel/react-qr-scanner";
-import api from "../../util/api.ts";
-import { path, usePolling } from "@rp/shared";
+import { api, path, usePolling } from "@rp/shared";
 import { useOutletContext } from "react-router-dom";
 import { MainContext } from "../Main.tsx";
 
 function Merch() {
   const { authorized } = useOutletContext<MainContext>();
   const toast = useToast();
-  const { data: emails } = usePolling(api, "/attendee/emails", authorized);
+  const { data: emails } = usePolling("/attendee/emails", authorized);
   const [showWebcam, setShowWebcam] = useState(false); // Toggle between webcam and email input
   const [email, setEmail] = useState("");
   const [userId, setUserId] = useState("");

apps/admin/src/routes/pages/Sponsors.tsx

@@ -13,8 +13,7 @@ import {
   FormErrorMessage,
   Heading
 } from "@chakra-ui/react";
-import api from "../../util/api";
-import { usePolling } from "@rp/shared";
+import { api, usePolling } from "@rp/shared";
 import { useMirrorStyles } from "@/styles/Mirror";
 import { Formik, FormikHelpers } from "formik";
 import {
@@ -31,7 +30,7 @@ const Sponsors = () => {
     data: sponsors,
     update: updateSponsors,
     isLoading
-  } = usePolling(api, "/auth/corporate", authorized);
+  } = usePolling("/auth/corporate", authorized);
   const toast = useToast();
   const mirrorStyle = useMirrorStyles();
 

apps/admin/src/routes/pages/Stats.tsx

@@ -24,7 +24,6 @@ import { Chart, registerables } from "chart.js";
 Chart.register(...registerables);
 
 import { useMemo, useState } from "react";
-import api from "../../util/api";
 import { path, usePolling } from "@rp/shared";
 import StatCard from "@/components/StatCard";
 import { useMirrorStyles } from "@/styles/Mirror";
@@ -39,14 +38,13 @@ function Stats() {
 
   const mirrorStyles = useMirrorStyles(true);
   const { data: pastAttendanceData, isLoading: pastAttendanceLoading } =
-    usePolling(api, path("/stats/attendance/:n", { n: numEvents }), authorized);
+    usePolling(path("/stats/attendance/:n", { n: numEvents }), authorized);
   const { data: eligiblePrize, isLoading: eligiblePrizeLoading } = usePolling(
-    api,
     path("/stats/merch-item/:price", { price }),
     authorized
   );
   const { data: dietaryRestrictions, isLoading: dietaryRestrictionsLoading } =
-    usePolling(api, "/stats/dietary-restrictions", authorized);
+    usePolling("/stats/dietary-restrictions", authorized);
 
   const pastAttendance = useMemo(() => {
     if (!pastAttendanceData) {

apps/admin/tsconfig.json

@@ -8,7 +8,7 @@
       "@rp/shared": ["../../shared"]
     }
   },
-  "include": ["src", "vite.config.ts"],
+  "include": ["src", "vite.config.ts", "../../shared/src/api/api.ts"],
   "references": [
     {
       "path": "../../shared"