Convert to a Next + Redux app

app/dashboard/admin/page.tsx

@@ -1,12 +1,151 @@
-import AdminGuard from "@/app/components/Admin/AdminGuard";
+'use client';
+import React, { useEffect, useState } from "react";
+import { Box, Button, ColorPaletteProp, Link, Tab, TabList, TabPanel, Tabs, Typography } from "@mui/joy";
+import { tabClasses } from "@mui/joy";
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { toast } from "sonner";
+import { getAuthenticatedUser, useSelector } from "@/lib/redux";
+
+/**
+ * Depicts the station management page from a station manager perspective.
+ * @page
+ * @category Station Management
+ * 
+ * @param {Object} props - The component props.
+ * @param {string} [props.style] - The style of the page. Defaults to the success color.
+ * 
+ * @returns {JSX.Element} The rendered StationManagementPage component.
+ * @example
+ * return (
+ *  <StationManagementPage />
+ * )
+ */
+const StationManagementPage = (props: { style: ColorPaletteProp }) => {
+
+  const user = useSelector(getAuthenticatedUser);
+
+  const [djs, setDjs] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const updateDjs = async () => {
+    setLoading(true);
+    listUsers().then((data: any) => {
+      setDjs(data);
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    updateDjs();
+  }, []);
 
-const AdminPage = () => {
     return (
-        <div>
-        <AdminGuard />
-        <h1>Admin Page</h1>
-        </div>
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+                justifyContent: 'flex-end',
+              my: 1,
+              gap: 1,
+              flexWrap: 'wrap',
+              '& > *': {
+                minWidth: 'clamp(0px, (500px - 100%) * 999, 100%)',
+                flexGrow: 1,
+              },
+            }}
+          >
+            <Typography level="h1">
+              Station Management
+            </Typography>
+            <Box sx = {{ justifyContent: 'flex-end', display: 'flex' }}>
+                <Link
+                    href="https://wxyc.awsapps.com/start#/"
+                    target="_blank"
+                    sx = {{
+                        '&:hover': {
+                            textDecoration: 'none',
+                        },
+                    }}
+                >
+                    <Button variant="outlined" color={props.style ?? 'success'} endDecorator={<OpenInNewIcon fontSize="small" />} >AWS Management Console</Button>
+                </Link>
+            </Box>
+        </Box>
+        <Tabs
+            size="sm"
+            aria-label="Station Management Tabs"
+            defaultValue={0}
+            color={props.style ?? 'success'}
+            sx = {(theme) => ({
+                '--Tabs-gap': '0px',
+                borderRadius: 'lg',
+                border: `1px solid ${theme.palette.divider}`,
+                width: '100%',
+                flex: 1,
+
+
+                position: 'relative',
+            })}
+        >
+        <TabList
+        sx={{
+          '--ListItem-radius': '0px',
+          borderRadius: 0,
+          [`& .${tabClasses.root}`]: {
+            fontWeight: 'md',
+            flex: 1,
+            bgcolor: 'background.body',
+            [`&.${tabClasses.selected}`]: {
+              color: `${props.style ?? 'success'}.500`,
+            },
+            [`&.${tabClasses.selected}:before`]: {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              bottom: -1,
+              width: '100%',
+              height: 2,
+              bgcolor: `${props.style ?? 'success'}.400`,
+            },
+            [`&.${tabClasses.focusVisible}`]: {
+              outlineOffset: '-3px',
+            },
+          },
+        }}
+      >
+        <Tab sx = {{ py: 1.5 }}>Roster</Tab>
+        <Tab sx = {{ py: 1.5 }}>Schedule</Tab>
+        <Tab sx = {{ py: 1.5 }}>Rotation</Tab>
+        <Tab sx = {{ py: 1.5 }}>Catalog</Tab>
+      </TabList>
+      <TabPanel value={0}>
+        <DJRoster  
+          roster={djs} 
+          updateDjs={updateDjs}
+          setDjs={setDjs}
+          loading={loading}
+          setLoading={setLoading}
+        />
+        </TabPanel>
+        <TabPanel value={1}
+        sx = {{
+          flex: '0 1 auto',
+        }}
+        >
+        <StationSchedule
+          roster={djs}
+        />
+        </TabPanel>
+        <TabPanel value={2}>
+          <RotationManagement />
+        </TabPanel>
+        <TabPanel value={3}>
+          <CatalogEditor />
+        </TabPanel>
+        </Tabs>
+        </>
     );
-};
+}
 
-export default AdminPage;
+export default StationManagementPage;

app/dashboard/verify/page.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import { getAuthenticatedUser, useSelector } from "@/lib/redux";
+import { fetchDJs, getAuthenticatedUser, useDispatch, useSelector } from "@/lib/redux";
 import { getter } from "@/lib/services";
 import { useEffect } from "react";
 import { toast } from "sonner";
 
 export default function VerifyPage() {
 
+  const user = useSelector(getAuthenticatedUser);
+  const dispatch = useDispatch();
+
   useEffect(() => {
     console.log("mounted");
 
     const process = async (e: KeyboardEvent) => {
       if ((e as KeyboardEvent).key === 'v') {
-        const { data, error } = await getter('testAuth')();
-
-        if (error) {
-          console.error(error);
-          toast.error(error.message);
-        } else {
-          console.table(data);
-          toast.success(data.message);
+        let token = sessionStorage.getItem("idToken");
+        if (!token) {
+          toast.error("No TOKEN!!!");
+          return;
         }
+        await dispatch(fetchDJs(token));
       }
     }
 
@@ -30,9 +30,7 @@ export default function VerifyPage() {
       console.log('Verify page unmounted');
       window.removeEventListener('keydown', process);
     }
-  }, []);
-
-  const user = useSelector(getAuthenticatedUser);
+  }, [user?.djId]);
 
   return (
     <>

lib/redux/model/admin/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./slice";
+export * from "./thunks";
+export * from "./selectors";

lib/redux/model/admin/selectors.ts

@@ -0,0 +1,6 @@
+/* Instruments */
+import { type ReduxState } from "@/lib/redux";
+
+
+const getAdminLoading = (state: ReduxState) => state.admin.loading;
+const getDJs = (state: ReduxState) => state.admin.djs;

lib/redux/model/admin/slice.ts

@@ -0,0 +1,15 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { AdminState } from "./types";
+
+const initialState: AdminState = {
+    loading: false,
+    djs: [],
+};
+
+export const adminSlice = createSlice({
+    name: "admin",
+    initialState,
+    reducers: {
+
+    }
+});

lib/redux/model/admin/thunks.ts

@@ -0,0 +1,32 @@
+import { CognitoIdentityProviderClient, ListUsersCommand, ListUsersCommandInput } from "@aws-sdk/client-cognito-identity-provider";
+import { createAppAsyncThunk } from "../../createAppAsyncThunk";
+import { User } from "../authentication";
+import { getCredentials } from "../..";
+
+export const fetchDJs = createAppAsyncThunk(
+    "admin/fetchDJs",
+    async (idToken: string): Promise<boolean> => {
+
+        const client = new CognitoIdentityProviderClient({
+            credentials: await getCredentials(idToken),
+            region: process.env.NEXT_PUBLIC_AWS_REGION
+        });
+
+        const params: ListUsersCommandInput = {
+            UserPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID,
+            AttributesToGet: [
+                "email",
+                "name",
+                "custom:dj-name",
+            ]
+        };
+
+        const listCommand = new ListUsersCommand(params);
+        const listResponse = await client.send(listCommand);
+
+        console.table(listResponse);
+        console.table(listResponse.Users);
+
+        return true;
+    }
+);

lib/redux/model/admin/types.ts

@@ -0,0 +1,11 @@
+
+export interface AdminState {
+    loading: boolean;
+    djs: DJ[];
+};
+
+export interface DJ {
+    id: number;
+    real_name: string;
+    dj_name: string;
+}

lib/redux/model/authentication/thunks.ts

@@ -2,10 +2,9 @@
 import { CognitoIdentityProviderClient, GetUserCommand, GetUserCommandOutput, InitiateAuthCommand, InitiateAuthCommandInput } from "@aws-sdk/client-cognito-identity-provider";
 import { jwtDecode } from 'jwt-decode';
 import { toast } from 'sonner';
-import { AuthenticationState, BackendResponse, DJwtPayload, getter, nullState, setter } from "../..";
+import { AuthenticationState, BackendResponse, DJwtPayload, getter, nullState, setter, updater } from "../..";
 import { createAppAsyncThunk } from "../../createAppAsyncThunk";
-import { LoginCredentials, User } from "./types";
-import { AxiosResponse } from "axios";
+import { LoginCredentials } from "./types";
 
 export const login = createAppAsyncThunk(
     "authentication/authenticateAsync",
@@ -63,14 +62,30 @@ export const login = createAppAsyncThunk(
                     return nullState;
                 }
 
+                let djName = "";
+                if (!backendData.dj_name || !backendData.real_name) {
+                    const { data: updateData, error: updateError } = await (updater(`djs/register`))({
+                        cognito_user_name: userResponse.Username,
+                        real_name: userResponse?.UserAttributes?.find(attr => attr.Name == 'name')?.Value,
+                        dj_name: userResponse?.UserAttributes?.find(attr => attr.Name == 'custom:dj-name')?.Value,
+                    });
+
+                    if (updateError) {
+                        toast.error("The backend is out of sync with the user database. This is fatal. Contact a site admin immediately.");
+                        return nullState;
+                    }
+
+                    djName = updateData.dj_name;
+                }
+
                 return {
                     authenticating: false,
                     isAuthenticated: true,
                     user: {
                         username: userResponse.Username || credentials.username,
-                        djName: userResponse.UserAttributes?.find(x => x.Name == "custom:dj-name")?.Value || "",
-                        djId: backendData.id,
-                        name: userResponse.UserAttributes?.find(x => x.Name == "name")?.Value || "",
+                        djName: backendData.dj_name || userResponse.UserAttributes?.find(x => x.Name == "custom:dj-name")?.Value || "",
+                        djId: Number(backendData.id),
+                        name: backendData.real_name || userResponse.UserAttributes?.find(x => x.Name == "name")?.Value || "",
                         isAdmin: isAdmin,
                         showRealName: false
                     }

lib/redux/model/flowsheet/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { FlowSheetState } from "./types";
-import { getIsLive, join, leave, loadFlowsheet } from "./thunks";
+import { getIsLive, join, leave, loadFlowsheet, loadFlowsheetEntries } from "./thunks";
 import { toast } from "sonner";
 
 
@@ -90,7 +90,11 @@ export const flowSheetSlice = createSlice({
         .addCase(getIsLive.fulfilled, (state, action) => {
             state.changingAir = false;
             state.live = action.payload;
-            toast.success("You are live!");
+            if (action.payload) {
+                toast.success("You are live!");
+            } else {
+                toast.info("You are not live.");
+            }
         })
         .addCase(getIsLive.rejected, (state) => {
             state.changingAir = false;
@@ -109,6 +113,20 @@ export const flowSheetSlice = createSlice({
         .addCase(leave.fulfilled, (state, action) => {
             state.changingAir = false;
             state.live = !action.payload;
+        })
+        .addCase(loadFlowsheetEntries.pending, (state) => {
+            state.loading = true;
+        })
+        .addCase(loadFlowsheetEntries.fulfilled, (state, action) => {
+            state.loading = false;
+            const numberUpdated = action.payload.length;
+            // replace the first numberUpdated entries with the new ones
+            state.entries = action.payload.concat(state.entries.slice(numberUpdated));
+            toast.info(`Flowsheet saved and updated.`);
+        })
+        .addCase(loadFlowsheetEntries.rejected, (state) => {
+            state.loading = false;
+            toast.error("Could not save and update the flowsheet.");
         });
     }
 });