Front end changes

Fixed interval Tiny elevation changes on widgets Back arrow sorted authentication routes removed sign up button fixed home dashboard padding and text issues removed uneccesary pages
hack4impact-upenn · May 12, 2023 · 6b798f5 · 6b798f5
1 parent c86d830
commit 6b798f5
Show file tree

Hide file tree

Showing 29 changed files with 308 additions and 72 deletions.
diff --git a/client/package.json b/client/package.json
@@ -32,9 +32,11 @@
     ]
   },
   "dependencies": {
-    "@material-ui/icons": "^4.11.2",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.118",
-    "@mui/material": "^5.5.3",
+    "@mui/material": "^5.13.0",
     "@mui/system": "^5.5.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.1.2",

diff --git a/client/public/BTS.National.jpg b/client/public/BTS.National.jpg
diff --git a/client/public/index.html b/client/public/index.html
@@ -6,11 +6,11 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
-    <link rel="icon" href="%PUBLIC_URL%/hack4impact.ico" />
+    <link rel="icon" href=https://beatthestreets.org/wp-content/uploads/2021/09/64.png />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Boilerplate for Hack4Impact" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/hack4impact.ico" />
+    <meta name="description" content="Dashboard for Beat The Streets National" />
+    <link rel="apple-touch-icon" href=https://beatthestreets.org/wp-content/uploads/2021/09/64.png />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +25,7 @@
       will work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Boilerplate</title>
+    <title>BTS Dashboard</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Boilerplate",
-  "name": "Hack4Impact",
+  "short_name": "BTS Dashboard",
+  "name": "BTS Dashboard",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -38,12 +38,6 @@ function App() {
                 <Header />
                 <AlertPopup />
                 <Routes>
-                  <Route path="/header" element={<Header />} />
-                  <Route path="/home-dashboard" element={<SplitGrid />} />
-                  <Route
-                    path="/city-dashboard/:cityName"
-                    element={<CityDashboard />}
-                  />
                   {/* Routes accessed only if user is not authenticated */}
                   <Route element={<UnauthenticatedRoutesWrapper />}>
                     <Route path="/login" element={<LoginPage />} />
@@ -68,8 +62,13 @@ function App() {
                   />
                   {/* Routes accessed only if user is authenticated */}
                   <Route element={<ProtectedRoutesWrapper />}>
-                    <Route path="/home" element={<HomePage />} />
+                    <Route path="/home-dashboard" element={<SplitGrid />} />
+                    <Route
+                      path="/city-dashboard/:cityName"
+                      element={<CityDashboard />}
+                    />
                   </Route>
+                  {/* Routes accessed only if user is admin */}
                   <Route element={<AdminRoutesWrapper />}>
                     <Route
                       path="/admin-dashboard"
@@ -84,7 +83,10 @@ function App() {
                   <Route
                     path="/"
                     element={
-                      <DynamicRedirect unAuthPath="/login" authPath="/home" />
+                      <DynamicRedirect
+                        unAuthPath="/login"
+                        authPath="/home-dashboard"
+                      />
                     }
                   />
                   {/* Route which is accessed if no other route is matched */}

diff --git a/client/src/Authentication/LoginPage.tsx b/client/src/Authentication/LoginPage.tsx
@@ -185,14 +185,14 @@ function LoginPage() {
             >
               Login
             </PrimaryButton>
-            <Button
+            {/* <Button
               type="submit"
               variant="outlined"
               onClick={() => handleSignup()}
               style={{ marginLeft: '10%', padding: '0.7rem 2rem' }}
             >
               Sign Up
-            </Button>
+            </Button> */}
           </Grid>
         </FormCol>
       </FormGrid>

diff --git a/client/src/CityDashboard.tsx b/client/src/CityDashboard.tsx
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Typography, Grid, Toolbar, Button, Icon } from '@mui/material';
+import { ArrowBack } from '@mui/icons-material';
 import { useData } from './util/api';
 import Header from './components/Header';
 import PieComponent from './components/cityIndicators/CityPieComponent';
@@ -74,6 +75,7 @@ function CityDashboard() {
               variant="text"
               color="primary"
               onClick={onNavigateMainDashboard}
+              startIcon={<ArrowBack />}
             >
               Back to all cities
             </Button>
@@ -120,6 +122,7 @@ function CityDashboard() {
             variant="text"
             color="primary"
             onClick={onNavigateMainDashboard}
+            startIcon={<ArrowBack />}
           >
             Back to all cities
           </Button>

diff --git a/client/src/HomeDashboard.tsx b/client/src/HomeDashboard.tsx
@@ -42,7 +42,27 @@ function createCityCard(city: any) {
 
 // eslint-disable-next-line
 function createData(cityData: any) {
-  return cityData.map(createCityCard);
+  const sortedCityData = cityData.slice().sort((a: any, b: any) => {
+    // Sort by isAccredited (true values first)
+    if (a.isAccredited && !b.isAccredited) {
+      return -1; // a comes first
+    }
+    if (!a.isAccredited && b.isAccredited) {
+      return 1; // b comes first
+    }
+
+    // Sort alphabetically by cityName
+    if (a.cityName < b.cityName) {
+      return -1; // a comes first
+    }
+    if (a.cityName > b.cityName) {
+      return 1; // b comes first
+    }
+
+    return 0; // same order
+  });
+
+  return sortedCityData.map(createCityCard);
 }
 
 function SplitGrid() {
@@ -91,13 +111,14 @@ function SplitGrid() {
             maxHeight: 'calc(100vh - 64px)', // Subtract the Toolbar height (default is 64px)
             bgcolor: '#EDEDED',
             p: 2,
+            paddingX: 4,
           }}
           elevation={0}
           square
         >
           <h2>National Statistics</h2>
           <Grid item xs={8}>
-            <Masonry columns={3} spacing={4}>
+            <Masonry columns={3} spacing={4} sx={{ width: 'auto' }}>
               <TotalChapters data1={cities} />
               <TotalCoaches maleData1={maleData} femaleData1={femaleData} />
               <TotalParticipants

diff --git a/client/src/components/buttons/CityCard.tsx b/client/src/components/buttons/CityCard.tsx
@@ -17,27 +17,20 @@ function CityCard({ cityName, accredited }: CityCardProps) {
     navigate(s);
   }
 
-  if (accredited) {
-    return (
-      <Card sx={{ p: 2, bgcolor: '#EDEDED', mb: 2, borderRadius: '8px' }}>
-        <CardActionArea>
-          <CardContent onClick={handleClick}>
-            <Typography variant="h5">{label}</Typography>
-            <Typography variant="subtitle1">
-              <i>Accredited</i>
-            </Typography>
-          </CardContent>
-        </CardActionArea>
-      </Card>
-    );
-  }
   return (
     <Card sx={{ p: 2, bgcolor: '#EDEDED', mb: 2, borderRadius: '8px' }}>
-      <CardActionArea>
-        <CardContent onClick={handleClick}>
+      <CardActionArea onClick={handleClick}>
+        <CardContent>
           <Typography variant="h5">{label}</Typography>
-          <Typography variant="subtitle1">
-            <i>Not Accredited</i>
+          <Typography
+            sx={{
+              color: accredited ? '#0175C0' : '#657788',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+            variant="subtitle1"
+          >
+            <b>{accredited ? <i>Accredited</i> : <i>Not Accredited</i>}</b>
           </Typography>
         </CardContent>
       </CardActionArea>

diff --git a/client/src/components/cityIndicators/CityBachelorComponent.tsx b/client/src/components/cityIndicators/CityBachelorComponent.tsx
@@ -62,7 +62,7 @@ function Bachelor({ data1 }: BachelorProps) {
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/cityIndicators/CityCoachesComponent.tsx b/client/src/components/cityIndicators/CityCoachesComponent.tsx
@@ -103,7 +103,7 @@ function CoachesWidget({ data }: DefaultWidgetProps) {
   }
 
   return (
-    <Paper elevation={0} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
+    <Paper elevation={1} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
       <Typography variant="h6" sx={{ fontWeight: 700 }}>
         Coaches
       </Typography>

diff --git a/client/src/components/cityIndicators/CityHighSchoolGradsPercentComponent.tsx b/client/src/components/cityIndicators/CityHighSchoolGradsPercentComponent.tsx
@@ -27,7 +27,7 @@ function HighSchoolGradsPercent({ data1 }: RevenueWidgetProps) {
 
     return (
       <Paper
-        elevation={0}
+        elevation={1}
         key={-1}
         sx={{ overflow: 'hidden', borderRadius: '16px' }}
       >

diff --git a/client/src/components/cityIndicators/CityLineComponent.tsx b/client/src/components/cityIndicators/CityLineComponent.tsx
@@ -99,7 +99,7 @@ function RevenueWidget({ data1, variant }: RevenueWidgetProps) {
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/cityIndicators/CityNameComponent.tsx b/client/src/components/cityIndicators/CityNameComponent.tsx
@@ -75,7 +75,7 @@ function CityNameWidget({ data1 }: DefaultWidgetProps) {
         : 0;
 
     return (
-      <Paper elevation={1} sx={{ p: 3, mr: 8, borderRadius: '16px' }}>
+      <Paper elevation={4} sx={{ p: 3, mr: 8, borderRadius: '16px' }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', mr: 1 }}>
           <Box>
             <Typography variant="h4">

diff --git a/client/src/components/cityIndicators/CityParticipantsComponent.tsx b/client/src/components/cityIndicators/CityParticipantsComponent.tsx
@@ -129,7 +129,7 @@ function ParticipantsWidget({ data }: DefaultWidgetProps) {
   }
 
   return (
-    <Paper elevation={0} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
+    <Paper elevation={1} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
       <Typography variant="h6" sx={{ fontWeight: 700 }}>
         Participants
       </Typography>

diff --git a/client/src/components/cityIndicators/CityPieComponent.tsx b/client/src/components/cityIndicators/CityPieComponent.tsx
@@ -213,7 +213,7 @@ export default function PieComponent({ data1 }: PieComponentProps) {
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/cityIndicators/CityPovertyComponent.tsx b/client/src/components/cityIndicators/CityPovertyComponent.tsx
@@ -23,7 +23,7 @@ function Poverty({ data1 }: RevenueWidgetProps) {
 
     return (
       <Paper
-        elevation={0}
+        elevation={1}
         key={-1}
         sx={{ overflow: 'hidden', borderRadius: '16px' }}
       >

diff --git a/client/src/components/cityIndicators/CityUnder18Component.tsx b/client/src/components/cityIndicators/CityUnder18Component.tsx
@@ -23,7 +23,7 @@ function Under18({ data1 }: RevenueWidgetProps) {
 
     return (
       <Paper
-        elevation={0}
+        elevation={1}
         key={-1}
         sx={{ overflow: 'hidden', borderRadius: '16px' }}
       >

diff --git a/client/src/components/nationalIndicators/NationalActiveCitiesComponent.tsx b/client/src/components/nationalIndicators/NationalActiveCitiesComponent.tsx
@@ -103,7 +103,7 @@ function ActiveCitiesWidget({ cities1 }: DefaultWidgetProps) {
   }
 
   return (
-    <Paper elevation={0} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
+    <Paper elevation={1} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
       <Typography variant="h6" sx={{ fontWeight: 700 }}>
         Cities
       </Typography>

diff --git a/client/src/components/nationalIndicators/NationalCoachesComponent.tsx b/client/src/components/nationalIndicators/NationalCoachesComponent.tsx
@@ -122,7 +122,7 @@ function MainCoachesWidget({ maleData1, femaleData1 }: DefaultWidgetProps) {
   }
 
   return (
-    <Paper elevation={0} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
+    <Paper elevation={1} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
       <Typography variant="h6" sx={{ fontWeight: 700 }}>
         Coaches
       </Typography>

diff --git a/client/src/components/nationalIndicators/NationalLineComponent.tsx b/client/src/components/nationalIndicators/NationalLineComponent.tsx
@@ -69,7 +69,7 @@ export default function LineComponent({ data1, variant }: LineComponentProps) {
   if (variant === 'expenses') {
     return (
       <Paper
-        elevation={0}
+        elevation={1}
         key={-1}
         sx={{ overflow: 'hidden', borderRadius: '16px' }}
       >

diff --git a/client/src/components/nationalIndicators/NationalParticipantsComponent.tsx b/client/src/components/nationalIndicators/NationalParticipantsComponent.tsx
@@ -125,7 +125,7 @@ function MainParticipantsWidget({
   }
 
   return (
-    <Paper elevation={0} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
+    <Paper elevation={1} key={-1} sx={{ p: 3, borderRadius: '16px' }}>
       <Typography variant="h6" sx={{ fontWeight: 700 }}>
         Participants
       </Typography>

diff --git a/client/src/components/nationalIndicators/NationalPieComponent.tsx b/client/src/components/nationalIndicators/NationalPieComponent.tsx
@@ -260,7 +260,7 @@ export default function MainPieComponent({
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/nationalIndicators/NationalTotalChaptersComponent.tsx b/client/src/components/nationalIndicators/NationalTotalChaptersComponent.tsx
@@ -28,7 +28,7 @@ function TotalChapters({ data1 }: DefaultWidgetProps) {
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/nationalIndicators/NationalTotalCoachesComponent.tsx b/client/src/components/nationalIndicators/NationalTotalCoachesComponent.tsx
@@ -28,7 +28,7 @@ function TotalCoaches({ maleData1, femaleData1 }: DefaultWidgetProps) {
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/client/src/components/nationalIndicators/NationalTotalParticipantsComponent.tsx b/client/src/components/nationalIndicators/NationalTotalParticipantsComponent.tsx
@@ -31,7 +31,7 @@ function TotalParticipants({
 
   return (
     <Paper
-      elevation={0}
+      elevation={1}
       key={-1}
       sx={{ overflow: 'hidden', borderRadius: '16px' }}
     >

diff --git a/server/index.ts b/server/index.ts
@@ -52,8 +52,8 @@ const main = async () => {
     console.log('  Press Control-C to stop\n');
   });
 
-  // setInterval(executePythonScript, 60 * 60 * 1000);
   executePythonScript();
+  setInterval(executePythonScript, 2_147_483_647); // 24.8 Days (Max)
 };
 
 // Run the server

diff --git a/server/src/services/mail.service.ts b/server/src/services/mail.service.ts
@@ -4,8 +4,8 @@
 import 'dotenv/config';
 import SGmail, { MailDataRequired } from '@sendgrid/mail';
 
-const appName = 'Boilerplate'; // Replace with a relevant project name
-const senderName = 'Hack4Impact UPenn'; // Replace with a relevant project sender
+const appName = 'BTS Dashboard'; // Replace with a relevant project name
+const senderName = 'Beat The Streets National'; // Replace with a relevant project sender
 const baseUrl = 'http://localhost:3000'; // TODO: figure out better place to put this
 
 // eslint-disable-next-line no-useless-concat
@@ -77,11 +77,11 @@ const emailInviteLink = async (email: string, token: string) => {
       name: senderName,
     },
     to: email,
-    subject: 'Verify account',
+    subject: `You've been invited to use ${appName}!`,
     html:
       `<p> Please visit the following ` +
       `<a href=${resetLink}>link</a> ` +
-      `to create your account for ${appName} and complete registration</p>` +
+      `to create your account for <b>${appName}</b> and complete registration!</p>` +
       `<p>If you did not attempt to register an account with this email address, ` +
       `please ignore this message.</p>`,
   };