Merge pull request PelicanPlatform#1216 from CannonLock/cached-user-1149

Upgrade the director login

web_ui/frontend/app/director/page.tsx

@@ -25,7 +25,7 @@ import useSWR from "swr";
 import {Server} from "@/components/Main";
 import CardList from "@/components/Namespace/CardList";
 import DirectorCard, {DirectorCardProps} from "@/components/Namespace/DirectorCard";
-import {Authenticated, getAuthenticated, isLoggedIn} from "@/helpers/login";
+import {getUser} from "@/helpers/login";
 
 
 const getServers = async () => {
@@ -43,18 +43,9 @@ const getServers = async () => {
 
 export default function Home() {
 
-    const [error, setError] = useState<string | undefined>(undefined);
-    const [authenticated, setAuthenticated] = useState<Authenticated | undefined>(undefined)
-
     const {data} = useSWR<Server[]>("getServers", getServers)
 
-    useEffect(() => {
-        (async () => {
-            if(await isLoggedIn()){
-                setAuthenticated(getAuthenticated() as Authenticated)
-            }
-        })();
-    }, [])
+    const {data: user, error} = useSWR("getUser", getUser)
 
     const cacheData = useMemo(() => {
         return data?.filter((server) => server.type === "Cache")
@@ -70,7 +61,7 @@ export default function Home() {
                 <Grid item xs={12} lg={8} xl={6}>
                     <Typography variant={"h4"} pb={2}>Origins</Typography>
                     {originData ?
-                        <CardList<DirectorCardProps> Card={DirectorCard} cardProps={{authenticated: authenticated}} data={originData.map(x => {return {server: x}})}/> :
+                        <CardList<DirectorCardProps> Card={DirectorCard} cardProps={{authenticated: user}} data={originData.map(x => {return {server: x}})}/> :
                         <Box>
                             <Skeleton variant="rectangular" height={118} />
                         </Box>
@@ -79,7 +70,7 @@ export default function Home() {
                 <Grid item xs={12} lg={8} xl={6}>
                     <Typography variant={"h4"} pb={2}>Caches</Typography>
                     {cacheData ?
-                        <CardList<DirectorCardProps> Card={DirectorCard} cardProps={{authenticated: authenticated}} data={cacheData.map(x => {return {server: x}})}/> :
+                        <CardList<DirectorCardProps> Card={DirectorCard} cardProps={{authenticated: user}} data={cacheData.map(x => {return {server: x}})}/> :
                         <Box>
                             <Skeleton variant="rectangular" height={118} />
                         </Box>

web_ui/frontend/components/Namespace/CardList.tsx

@@ -53,7 +53,7 @@ function CardList<T>({ data, Card, cardProps }: CardListProps<T>) {
                                 ...o
                             } as T
 
-                            return <Box pb={1} key={JSON.stringify(o)}>
+                            return <Box pb={1} key={JSON.stringify(props)}>
                                 <Card {...props} />
                             </Box>
                         })}

web_ui/frontend/components/Namespace/DirectorCard.tsx

@@ -18,10 +18,11 @@ import {Language} from "@mui/icons-material";
 import {NamespaceIcon} from "@/components/Namespace/index";
 import useSWR from "swr";
 import Link from "next/link";
+import {User} from "@/index";
 
 export interface DirectorCardProps {
     server: Server
-    authenticated?: Authenticated
+    authenticated?: User
 }
 
 export const DirectorCard = ({ server, authenticated } : DirectorCardProps) => {