feat: render programs enrolled in client settings (#102)

Co-authored-by: Rudra Patel <patelrudra2003@gmail.com>
hack4impact-utk · Jan 27, 2025 · 351d256 · 351d256
1 parent 034aeb3
commit 351d256
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 23 deletions.
diff --git a/src/app/settings/client/page.tsx b/src/app/settings/client/page.tsx
@@ -1,7 +1,8 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { redirect } from "next/navigation";
 
 import ClientSettings from "@/components/Settings/ClientSettings";
+import { getUserByEmail } from "@/server/api/users/queries";
 import getUserSession from "@/utils/getUserSession";
 
 export default async function AdminSettingsPage() {
@@ -13,6 +14,25 @@ export default async function AdminSettingsPage() {
 
   const { user } = session;
 
+  const [userWithProgramEnrollments, error] = await getUserByEmail(user.email, {
+    populateProgramEnrollments: true,
+  });
+
+  if (error !== null) {
+    return (
+      <Box
+        sx={{
+          height: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Typography>There was an error loading the settings.</Typography>
+      </Box>
+    );
+  }
+
   return (
     <Box
       sx={{
@@ -25,7 +45,7 @@ export default async function AdminSettingsPage() {
         gap: 2,
       }}
     >
-      <ClientSettings user={user} />
+      <ClientSettings user={userWithProgramEnrollments} />
     </Box>
   );
 }
diff --git a/src/components/Settings/AdminSettings.tsx b/src/components/Settings/AdminSettings.tsx
@@ -13,19 +13,35 @@ export default function AdminSettings({ user }: AdminSettingsProps) {
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 2,
+        width: "min(90vw, 700px)",
+        boxShadow: 3,
+        borderRadius: 2,
+        padding: 4,
       }}
     >
-      <Typography variant="h4">Admin Settings</Typography>
-      <Typography>
-        Name: {user.firstName} {user.lastName}
+      <Typography variant="h4" textAlign="center">
+        Admin Settings
       </Typography>
-      <Typography variant="body1">Email: {user.email}</Typography>
-      <ChangePasswordButton />
-      <SignOutButton />
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        <Typography>
+          <strong>Name:</strong> {user.firstName} {user.lastName}
+        </Typography>
+        <Typography>
+          <strong>Email:</strong> {user.email}
+        </Typography>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          gap: 2,
+          mt: 4,
+        }}
+      >
+        <ChangePasswordButton />
+        <SignOutButton />
+      </Box>
     </Box>
   );
 }
diff --git a/src/components/Settings/ClientSettings.tsx b/src/components/Settings/ClientSettings.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Divider, List, ListItem, Typography } from "@mui/material";
 
 import { User } from "@/types";
 
@@ -10,22 +10,55 @@ type ClientSettingsProps = {
 };
 
 export default function ClientSettings({ user }: ClientSettingsProps) {
+  if (user.role !== "client") {
+    return null;
+  }
+
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 2,
+        width: "min(90vw, 700px)",
+        boxShadow: 3,
+        borderRadius: 2,
+        padding: 4,
       }}
     >
-      <Typography variant="h4">Client Settings</Typography>
-      <Typography>
-        Name: {user.firstName} {user.lastName}
+      <Typography variant="h4" textAlign="center">
+        Client Settings
       </Typography>
-      <Typography variant="body1">Email: {user.email}</Typography>
-      <ChangePasswordButton />
-      <SignOutButton />
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        <Typography>
+          <strong>Name:</strong> {user.firstName} {user.lastName}
+        </Typography>
+        <Typography>
+          <strong>Email:</strong> {user.email}
+        </Typography>
+      </Box>
+
+      <Divider sx={{ my: 3 }} />
+
+      <Typography variant="h6">Accepted Programs</Typography>
+      <List>
+        {user.programEnrollments.map((programEnrollment) => {
+          return programEnrollment.status === "accepted" ? (
+            <ListItem key={programEnrollment._id} disablePadding>
+              <Typography>{programEnrollment.program}</Typography>
+            </ListItem>
+          ) : null;
+        })}
+      </List>
+
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          gap: 2,
+          mt: 4,
+        }}
+      >
+        <ChangePasswordButton />
+        <SignOutButton />
+      </Box>
     </Box>
   );
 }