first commit

hack4impact-upenn · Sep 28, 2024 · 74d9ef3 · 74d9ef3
1 parent 9044abd
commit 74d9ef3
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 86 deletions.
diff --git a/client/package.json b/client/package.json
@@ -47,6 +47,7 @@
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.5",
     "typeface-hk-grotesk": "^1.0.0",
+    "typewriter-effect": "^2.21.0",
     "web-vitals": "^3.0.3"
   },
   "devDependencies": {

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -22,6 +22,7 @@ import EmailResetPasswordPage from './Authentication/EmailResetPasswordPage';
 import ResetPasswordPage from './Authentication/ResetPasswordPage';
 import AlertPopup from './components/AlertPopup';
 import InviteRegisterPage from './Authentication/InviteRegisterPage';
+import User from './User/User';
 
 function App() {
   return (
@@ -54,9 +55,10 @@ function App() {
                     path="/invite/:token"
                     element={<InviteRegisterPage />}
                   />
-                  {/* Routes accessed only if user is authenticated */}
-                  <Route element={<ProtectedRoutesWrapper />}>
+                  {/* Routes accessed only if user is authenticated, change to authenticated wrapper when backend */}
+                  <Route element={<UnauthenticatedRoutesWrapper />}>
                     <Route path="/home" element={<HomePage />} />
+                    <Route path="/home/:userId" element={<User />} />
                   </Route>
                   <Route element={<AdminRoutesWrapper />}>
                     <Route path="/users" element={<AdminDashboardPage />} />
@@ -69,7 +71,6 @@ function App() {
                       <DynamicRedirect unAuthPath="/login" authPath="/home" />
                     }
                   />
-
                   {/* Route which is accessed if no other route is matched */}
                   <Route path="*" element={<NotFoundPage />} />
                 </Routes>

diff --git a/client/src/Home/HomePage.tsx b/client/src/Home/HomePage.tsx
@@ -1,89 +1,68 @@
-import React, { useState } from 'react';
-import Button from '@mui/material/Button';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
-import { Typography, Grid } from '@mui/material';
-import { useAppDispatch, useAppSelector } from '../util/redux/hooks';
-import {
-  logout as logoutAction,
-  toggleAdmin,
-  selectUser,
-} from '../util/redux/userSlice';
-import { logout as logoutApi, selfUpgrade } from './api';
+import React from 'react';
+import Typography from '@mui/material';
+import Typewriter from 'typewriter-effect';
 import ScreenGrid from '../components/ScreenGrid';
-import PrimaryButton from '../components/buttons/PrimaryButton';
-
-interface PromoteButtonProps {
-  admin: boolean | null;
-  handleSelfPromote: () => void;
-  navigator: NavigateFunction;
-}
+import UserCard from '../components/card/Card';
 
-/**
- * A button which, when clicked, will promote the user to admin. If the user is already admin, the button will be a link to the admin dashboard.
- * @param admin - a boolean indicating whether the user is an admin
- * @param handleSelfPromote - a function which promotes the user to admin
- * @param navigator - a function which navigates to a new page (passed in from parent function)
- */
-function PromoteButton({
-  admin,
-  handleSelfPromote,
-  navigator,
-}: PromoteButtonProps) {
-  if (admin === null) {
-    return null;
-  }
-  return !admin ? (
-    <PrimaryButton variant="contained" onClick={handleSelfPromote}>
-      Promote self to admin
-    </PrimaryButton>
-  ) : (
-    <PrimaryButton
-      variant="contained"
-      onClick={() => navigator('/users', { replace: true })}
-    >
-      View all users
-    </PrimaryButton>
-  );
-}
 /**
  * The HomePage of the user dashboard. Displays a welcome message, a logout button and a button to promote the user to admin if they are not already an admin. If the user is an admin, the button will navigate them to the admin dashboard. This utilizes redux to access the current user's information.
  */
-function HomePage() {
-  const user = useAppSelector(selectUser);
-  const dispatch = useAppDispatch();
-  const navigator = useNavigate();
-  const [admin, setAdmin] = useState(user.admin);
-  const logoutDispatch = () => dispatch(logoutAction());
-  const handleLogout = async () => {
-    if (await logoutApi()) {
-      logoutDispatch();
-      navigator('/login', { replace: true });
-    }
-  };
+const users = [
+  {
+    id: 1,
+    name: 'James',
+    imgUrl:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/440px-Image_created_with_a_mobile_phone.png',
+  },
+  {
+    id: 2,
+    name: 'Evelyn',
+    imgUrl:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/440px-Image_created_with_a_mobile_phone.png',
+  },
+  {
+    id: 3,
+    name: 'Khoi',
+    imgUrl:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/440px-Image_created_with_a_mobile_phone.png',
+  },
+  {
+    id: 4,
+    name: 'Yeon',
+    imgUrl:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/440px-Image_created_with_a_mobile_phone.png',
+  },
+];
 
-  const handleSelfPromote = async () => {
-    const newAdminStatus = await selfUpgrade(user.email as string);
-    if (newAdminStatus) {
-      dispatch(toggleAdmin());
-      setAdmin(true);
-    }
-  };
-
-  const message = `Welcome to the Boilerplate, ${user.firstName} ${user.lastName}!`;
+function HomePage() {
   return (
-    <ScreenGrid>
-      <Typography variant="h2">{message}</Typography>
-      <Grid item container justifyContent="center">
-        <PromoteButton
-          admin={admin}
-          handleSelfPromote={handleSelfPromote}
-          navigator={navigator}
-        />
-      </Grid>
-      <Grid item container justifyContent="center">
-        <Button onClick={handleLogout}>Logout</Button>
-      </Grid>
-    </ScreenGrid>
+    <div>
+      <Typewriter
+        onInit={(typewriter) => {
+          typewriter
+            .typeString('Toxic Traits')
+            .callFunction(() => {
+              console.log('String typed out!');
+            })
+            .pauseFor(2500)
+            .deleteAll()
+            .callFunction(() => {
+              console.log('All strings were deleted');
+            })
+            .start();
+        }}
+      />
+      <div style={{ display: 'grid' }}>
+        {users.map((user) => (
+          <UserCard
+            key={user.id}
+            id={user.id}
+            name={user.name}
+            imgurl={user.imgUrl}
+          />
+        ))}
+      </div>
+    </div>
   );
 }
 

diff --git a/client/src/User/User.tsx b/client/src/User/User.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function User() {
+  return <div>User</div>;
+}
diff --git a/client/src/assets/images/image.jpg b/client/src/assets/images/image.jpg
diff --git a/client/src/assets/images/mouse.jpeg b/client/src/assets/images/mouse.jpeg
diff --git a/client/src/components/card/Card.tsx b/client/src/components/card/Card.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import CardActionArea from '@mui/material/CardActionArea';
+import { useNavigate } from 'react-router-dom';
+
+interface UserCardProps {
+  id: number;
+  name: string;
+  imgurl: string;
+}
+
+export default function UserCard({ id, name, imgurl }: UserCardProps) {
+  const navigate = useNavigate();
+
+  const redirectToUser = (userId: number) => {
+    navigate(`/home/${userId}`);
+  };
+
+  return (
+    <Card sx={{ maxWidth: 345 }} onClick={() => redirectToUser(id)}>
+      <CardActionArea>
+        <CardMedia
+          component="img"
+          height="140"
+          image={imgurl}
+          alt="green meow"
+        />
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="div">
+            {name}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -10358,10 +10358,10 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
-styled-components@^5.3.3, styled-components@^5.3.5:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
-  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+styled-components@^5, styled-components@^5.3.3, styled-components@^5.3.5:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
+  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
@@ -10841,6 +10841,14 @@ typescript@^4.4.2, typescript@^4.5.5, typescript@^4.6.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
+typewriter-effect@^2.21.0:
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/typewriter-effect/-/typewriter-effect-2.21.0.tgz#7150f12fd2c188248ab2b2b031f77c0663d24c54"
+  integrity sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==
+  dependencies:
+    prop-types "^15.8.1"
+    raf "^3.4.1"
+
 uid-safe@~2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/uid-safe/-/uid-safe-2.1.5.tgz#2b3d5c7240e8fc2e58f8aa269e5ee49c0857bd3a"