feat: add staffs page

AAISS · Nov 25, 2023 · d0719c4 · d0719c4
1 parent 032b4a7
commit d0719c4
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 39 deletions.
diff --git a/frontend/src/Components/presenters/PresenterCard.jsx b/frontend/src/Components/presenters/PresenterCard.jsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import { Box, Button, Card, CardActions, CardContent, Chip, Stack, Typography } from '@mui/material';
+import { Box, Button, Card, CardActions, CardContent, Chip, Divider, Stack, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import '../../css/PresenterCard.css';
 import URL from '../../providers/APIProvider/URL.js';
 import Image from '../image/Image.jsx';
 
-const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, showDivider = true, role }) => {
+const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, role, containerHeight }) => {
   return (
     <Box className="presenter-card">
       <Card
         sx={{
-          //   height: 430,
-          height: 'max-content',
+          height: containerHeight || 430,
           minWidth: 275,
           maxWidth: 300,
           bgcolor: 'var(--background-color-lighter-20)',
@@ -39,25 +38,31 @@ const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, sh
               <Typography
                 sx={{
                   textAlign: 'center',
-                  borderBottom: showDivider && '1px solid var(--light-text-color-lighter)',
                   width: '100%',
+                  pt: 1,
                 }}
-                variant="h5">
+                variant="h5"
+              >
                 {name}
               </Typography>
             </Stack>
-            {role && <Chip label={role}/>}
+            {role && <Chip label={role} />}
             {logo && (
-              <Stack flexDirection="column" alignItems="center" justifyContent="center" gap={1}
-                     sx={{
-                       bgcolor: '#3f579a',
-                       padding: '10px',
-                       boxSizing: 'border-box',
-                       borderRadius: '10px',
-                       width: '100%',
-                       minHeight: '115px',
-                       position: 'relative',
-                     }}>
+              <Stack
+                flexDirection="column"
+                alignItems="center"
+                justifyContent="center"
+                gap={1}
+                sx={{
+                  bgcolor: '#3f579a',
+                  padding: '10px',
+                  boxSizing: 'border-box',
+                  borderRadius: '10px',
+                  width: '100%',
+                  minHeight: '115px',
+                  position: 'relative',
+                }}
+              >
                 <Image
                   src={`${URL.baseURL}${logo}`}
                   style={{
@@ -68,11 +73,14 @@ const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, sh
                     objectPosition: 'center',
                   }}
                 />
-                <Typography fontSize="15px" sx={{
-                  fontWeight: 'lighter',
-                  textWrap: 'balance',
-                  textAlign: 'center',
-                }}>
+                <Typography
+                  fontSize="15px"
+                  sx={{
+                    fontWeight: 'lighter',
+                    textWrap: 'balance',
+                    textAlign: 'center',
+                  }}
+                >
                   {desc}
                 </Typography>
               </Stack>
@@ -95,8 +103,8 @@ PresenterCard.propTypes = {
   desc: PropTypes.string,
   onClick: PropTypes.func,
   showButton: PropTypes.bool,
-  showDivider: PropTypes.bool,
   role: PropTypes.string,
+  containerHeight: PropTypes.number,
 };
 
 export default PresenterCard;
diff --git a/frontend/src/pages/Staff/Staff.jsx b/frontend/src/pages/Staff/Staff.jsx
@@ -0,0 +1,81 @@
+import { Box, Divider, Stack, Skeleton, Typography } from '@mui/material';
+import PresenterCard from '../../components/presenters/PresenterCard.jsx';
+import useStaff from './useStaff.js';
+import '../../css/Presenters.css';
+
+const StaffSection = ({ section, people }) => {
+  return (
+    <Stack
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      gap={2}
+      sx={{ borderRadius: 4, bgcolor: 'var(--background-color)', mx: 20, px: 20, pb: 10 }}
+    >
+      <Box sx={{ width: '100%' }}>
+        <Divider sx={{ py: 3 }}>
+          <Typography variant="h2" fontSize="24px">
+            {section}
+          </Typography>
+        </Divider>
+      </Box>
+      <Stack
+        useFlexGap
+        flexWrap="wrap"
+        direction="row"
+        justifyContent="center"
+        className="presenters-container"
+        gap={5}
+      >
+        {people.map((member, index) => (
+          <PresenterCard
+            key={index}
+            name={member.name}
+            photo={member.img}
+            role={member.role}
+            showButton={false}
+            containerHeight={350}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default function PresenterPage() {
+  const { staff } = useStaff();
+
+  if (staff) {
+    return (
+      <Stack>
+        <Typography variant="h1" fontSize="50px" sx={{ textAlign: 'center', pb: 5 }}>
+          Staff Members
+        </Typography>
+        <Stack justifyContent="center" alignItems="center" gap={5}>
+          {staff.map((item, index) => (
+            <StaffSection section={item.section} people={item.people} key={index} />
+          ))}
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack>
+      <Typography variant="h1" fontSize="50px" sx={{ textAlign: 'center', pb: 5 }}>
+        Staff Members
+      </Typography>
+      <Stack useFlexGap flexWrap="wrap" direction="row" justifyContent="center" gap={2}>
+        {new Array(8).fill(
+          <Skeleton
+            variant="rounded"
+            animation="wave"
+            width={330}
+            height={360}
+            sx={{ bgColor: 'var(--background-color-lighter-20)', borderRadius: 10 }}
+          />,
+        )}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/frontend/src/pages/Staff/useStaff.js b/frontend/src/pages/Staff/useStaff.js
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { useAPI } from '../../providers/APIProvider/APIProvider';
+
+export default function usePresenterPage() {
+  const { staffData, getStaffData } = useAPI();
+  const [staff, setStaff] = useState();
+  useEffect(() => {
+    getStaffData();
+  }, []);
+
+  useEffect(() => {
+    if (staffData === null) return;
+    setStaff(staffData);
+  }, [staffData]);
+
+  return {
+    staff,
+  };
+}
diff --git a/frontend/src/providers/config-provider/ROUTES.jsx b/frontend/src/providers/config-provider/ROUTES.jsx
@@ -4,6 +4,7 @@ import PresenterDetailPage from '../../pages/presenters/PresenterDetailPage.jsx'
 import PresenterPage from '../../pages/presenters/PresentersPage.jsx';
 import SchedulePage from '../../pages/schedule/SchedulePage.jsx';
 import Signup from '../../pages/Signup/Signup.jsx';
+import Staff from '../../pages/Staff/Staff.jsx';
 import WorkshopsPage from '../../pages/workshops/WorkshopsPage.jsx';
 
 const ROUTES = {
@@ -28,31 +29,16 @@ const ROUTES = {
     title: 'talks',
     component: <WorkshopsPage />,
   },
-  // committee: {
-  //     path: "/committee",
-  //     title: "Committee",
-  // },
   schedule: {
     path: '/schedule',
     title: 'Schedule',
     component: <SchedulePage />,
   },
-  // organizer: {
-  //     path: "/organizer",
-  //     title: "Organizer",
-  // },
-  // wnp: {
-  //     path: "/wnp",
-  //     title: "Workshops and Presentations",
-  // },
   staff: {
     path: '/staff',
     title: 'Staff',
+    component: <Staff />,
   },
-  // history: {
-  //   path: '/history',
-  //   title: 'History',
-  // },
   signup: {
     path: '/signup',
     title: 'Signup',