Style error page

apps/backend/prisma/seed.ts

@@ -104,6 +104,20 @@
     },
   });
 
+  await prismaClient.user.createMany({
+    data: [
+      {username: 'user1', email: 'user1@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user2', email: 'user2@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user3', email: 'user3@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user4', email: 'user4@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user5', email: 'user5@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user6', email: 'user6@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user7', email: 'user7@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user8', email: 'user8@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+      {username: 'user9', email: 'user9@example.com', password_hash: await getPasswordHash(SAMPLE_PASSWORD)},
+    ]
+  })
+
   const users = [bob, radu, shwetank, antonina, maria, mike, leia];
 
   //---------------------------------------------------------
@@ -278,10 +292,10 @@
           name: `Neighborhood ${count}`,
           description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
         },
       }).then(neighborhood => {        
         connectUserToNeighborhood(user.id, neighborhood.id).catch(console.error);
         return neighborhood;
       }).then(async neighborhood => {
         const topicKey = `neighborhood:${neighborhood.id}`;
         createTopic(topicKey, neighborhood.name)
           .then(_ => {

apps/backend/src/services/neighborhoodServices.ts

@@ -123,7 +123,7 @@ const isUserMemberOfNeighborhood = async (
     return userIdsAssociatedWithNeighborhood.includes(loggedUserID);
   }
 
-  const error = new Error('No Neighborhood found');
+  const error = new Error('Neighborhood not found.');
   error.name = 'ResourceDoesNotExistError';
   throw error;
 };

apps/backend/src/tests/neighborhood_api.test.ts

@@ -100,10 +100,10 @@ describe('Tests for getting all neighborhoods: GET /neighborhoods', () => {
       .set('Authorization', `Bearer ${token}`);
 
     expect(res1.status).toEqual(404);
-    expect(res1.body).toEqual({ error: 'No Neighborhood found' });
+    expect(res1.body).toEqual({ error: 'Neighborhood not found.' });
 
     expect(res2.status).toEqual(404);
-    expect(res2.body).toEqual({ error: 'No Neighborhood found' });
+    expect(res2.body).toEqual({ error: 'Neighborhood not found.' });
   });
 
   test('/?searchTerm=:searchTerm returns neighborhoods that match the search term', async () => {
@@ -222,7 +222,7 @@ describe('Tests for getting a single neighborhood: GET /neighborhoods/:id', () =
       .get('/api/neighborhoods/0')
       .set('Authorization', `Bearer ${token}`);
     expect(response.status).toEqual(404);
-    expect(response.body.error).toEqual('No Neighborhood found');
+    expect(response.body.error).toEqual('Neighborhood not found.');
   });
 
   test('GET /neighborhoods/:id only returns the id, name, description and location of neighborhood if user is not logged in', async () => {
@@ -323,7 +323,8 @@ describe('Tests for creating a single neighborhood: POST /neighborhoods/:id ', (
 
     const neighborhoodUsers = createNeighborhoodResponse.body.users;
 
-    const userNames = neighborhoodUsers.map((u: { username: any }) => u.username);
+    const userNames = neighborhoodUsers.map((u: { username: string }) => u.username);
+
     expect(userNames).toContain(BOBS_LOGIN_DATA.username);
 
     expect(createNeighborhoodResponse.body.name).toBe(NEW_NEIGHBORHOOD_NAME);

apps/frontend/public/index.html

@@ -21,6 +21,7 @@
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script src="https://unpkg.com/scrollreveal"></script>
     <!--
@@ -36,7 +37,7 @@
       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>React App</title>
+    <title>Neighborhood</title>
   </head>
 
   <body>

apps/frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Neighborhood",
+  "name": "Neighborhood",
   "icons": [
 
   ],

apps/frontend/src/components/UserCircle/UserCircle.module.css

@@ -6,7 +6,7 @@
   border: 2px solid #340900; /* rgb(123, 123, 123); */
   color: #333333;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   padding: 0 5px;
   font-size: 0.9rem;
@@ -21,10 +21,30 @@
 .lastCircle {
   display: flex;
   justify-content: center;
+  cursor: pointer;
 }
 
 .inStack {
-  margin-left: -19px;
+  margin-left: -16px;
   letter-spacing: 0.1rem;
   font-size: 0.62rem;
+  transition: all 0.5s ease-in-out;
+}
+
+.inStack:hover {
+  margin-top: -3px;
+  transform: scale(1.1);
+}
+
+.inList {
+  margin: 0 10px 0 5px;
+  width: 30px;
+  height: 30px;
+}
+
+.inList:hover {
+  background-color: inherit;
+  color: inherit;
+  margin-top: 0;
+  transform: none;
 }

apps/frontend/src/components/UserCircle/UserCircle.tsx

@@ -4,18 +4,23 @@ export default function UserCircle({
   username,
   isLast = false,
   inStack = true,
+  inList = false,
+  onHover,
 }: {
   username: string;
+  onHover?: () => void;
   isLast?: boolean;
   inStack?: boolean;
-  }) {  
+  inList?: boolean;
+}) {
   const firstTwoLetters = username?.slice(0, 2).toUpperCase();
 
   return (
     <div
       className={`${styles.circle} ${isLast ? styles.lastCircle : ''} ${
         inStack ? styles.inStack : ''
-      }`}>
+      } ${inList ? styles.inList : ' '}`}
+      onMouseOver={onHover}>
       {firstTwoLetters}
     </div>
   );

apps/frontend/src/components/UserCircleStack/UserCircleStack.module.css

@@ -1,3 +1,39 @@
 .circleContainer {
   display: flex;
 }
+
+.circleLink {
+  height: fit-content;
+}
+
+.dropdownContainer {
+  width: fit-content;
+  padding-bottom: 2rem;
+}
+
+.dropdown {
+  position: relative;
+  right: 5rem;
+  top: 0.5rem;
+}
+
+.dropdownMenu {
+  max-height: 50vh;
+  overflow-y: scroll;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+}
+
+.dropdownItem:active {
+  background-color: pink;
+}
+
+.hiddenOverlay {
+  position: relative;
+  z-index: -1;
+  height: 5rem;
+  width: 5rem;
+}

apps/frontend/src/components/UserCircleStack/UserCircleStack.tsx

@@ -1,22 +1,53 @@
+import { User } from '@prisma/client';
+import { Link } from 'react-router-dom';
+import { Dropdown } from 'react-bootstrap';
+import { useState } from 'react';
 import UserCircle from '../UserCircle/UserCircle';
 import styles from './UserCircleStack.module.css';
 
-export default function UserCircleStack({ usernames }: { usernames?: string[] }) {
-  if (Array.isArray(usernames)) {
-    const displayUsers = usernames.slice(0, 3);
-    const usersLeft = usernames.length - 3;
+export default function UserCircleStack({ users }: { users?: User[] | null }) {
+  const [showUserList, setShowUserList] = useState(false);
+
+  if (Array.isArray(users)) {
+    const displayUsers = users.slice(0, 3);
+    // const restOfUsers = users.slice(3);
+    const usersLeft = users.length - 3;
 
     return (
       <div className={styles.circleContainer}>
-        {displayUsers.map((username, index) =>
+        {displayUsers.map((user, index) =>
           index === displayUsers.length - 1 ? (
-            <UserCircle key={username} username={username} isLast={true} />
+            <Link key={user.id} to={`/users/${user.id}`} className={styles.circleLink}>
+              <UserCircle username={user.username} isLast={true} />
+            </Link>
           ) : (
-            <UserCircle key={username} username={username} />
+            <Link key={user.id} to={`/users/${user.id}`} className={styles.circleLink}>
+              <UserCircle key={user.id} username={user.username} />
+            </Link>
           ),
         )}
         {/* If there are more than 3 users a circle is shown with how many users there are left. */}
-        {usersLeft > 0 ? <UserCircle username={`+1${usersLeft}`} isLast={true} /> : null}
+        {usersLeft > 0 ? (
+          <div
+            className={styles.dropdownContainer}
+            onMouseEnter={() => setShowUserList(true)}
+            onMouseLeave={() => setShowUserList(false)}>
+            <UserCircle username={`...`} isLast={true} />
+            <Dropdown show={showUserList} className={styles.dropdown}>
+              <Dropdown.Menu className={styles.dropdownMenu}>
+                {users.map((user) => (
+                  <Dropdown.Item
+                    key={user.id}
+                    href={`/users/${user.id}`}
+                    className={styles.dropdownItem}>
+                    <UserCircle username={user.username} inList={true} />
+                    {user.username}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        ) : null}
       </div>
     );
   }

apps/frontend/src/pages/ErrorPage/ErrorPage.module.css

@@ -1,15 +1,22 @@
 .error {
-  text-align: center;
+  margin: auto;
+  text-align: justify;
+  padding: 0 2rem;
+  width: fit-content;
+}
+
+.imgContainer {
+  padding: 0 2rem;
 }
 
 .row {
   min-height: 100vh;
 }
 
 .column {
-  min-height: 100vh;
+  /* min-height: 100vh; */
   padding: 0;
-  min-width: 0;
+  /* min-width: 0; */
 }
 
 .errorColumn {
@@ -20,6 +27,15 @@
   position: sticky;
   top: 0;
 }
+
+.p {
+  margin: 0;
+}
+
+.errorImg {
+  max-width: 400px;
+  margin: auto;
+}
 
 @media (max-width: 576px) {
   .column {

apps/frontend/src/pages/ErrorPage/ErrorPage.tsx

@@ -1,12 +1,15 @@
 import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Image } from 'react-bootstrap';
+import { AxiosError } from 'axios';
 import MainNav from '../../components/MainNavigation/MainNav';
 import styles from './ErrorPage.module.css';
 
+const errorImg = require('../../assets/robots.png');
+
 function ErrorPage() {
   const error = useRouteError();
   let errorMessage: string;
-  let errorStatus: string = 'Unknown';
+  let errorStatus: string | number = 'Unknown';
 
   // inspired from keipala's response in this forum at SO
   // https://stackoverflow.com/questions/75944820/whats-the-correct-type-for-error-in-userouteerror-from-react-router-dom
@@ -15,31 +18,49 @@ function ErrorPage() {
 
   if (isRouteErrorResponse(error)) {
     // error is type `ErrorResponse`
-    errorMessage = error.statusText;
+    if (error.status === 404) {
+      errorMessage = "We couldn't find what you're looking for."
+    } else {
+      errorMessage = error.statusText;
+    }
+
     errorStatus = String(error.status);
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
+  } else if (error instanceof AxiosError) {
+    console.log(error);
+    errorStatus = error.response?.status || 'Unknown';
+    errorMessage = error.response?.data.error || error.message;
   } else if (typeof error === 'string') {
     errorMessage = error;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
   } else {
     console.error(error);
     errorMessage = 'Unknown error';
   }
 
   const errorContent = (
     <main className={styles.error}>
-      <h1>Oops, An Error Occurred</h1>
-      <p>{`${errorStatus}, ${errorMessage}`}</p>
+      <h1>Oops! A {errorStatus} error occurred...</h1>
+      <p className="mt-3">{errorMessage}</p>
+      <p className={styles.p}>
+        Don't worry. Our team of robot experts will get to the bottom of this.
+      </p>
+      <p className={styles.p}>Just kidding - we will!</p>
     </main>
   );
 
   return (
     <Container fluid>
-      <Row>
+      <Row className='m-0'>
         <Col className={`${styles.column} ${styles.sticky}`} sm="auto">
           <MainNav />
         </Col>
-        <Col className={`${styles.column} ${styles.errorColumn}`}>{errorContent}</Col>
+        <Col className={`${styles.column} ${styles.errorColumn}`}>
+          <Row className={styles.imgContainer}>
+            <Image className={styles.errorImg} src={errorImg} rounded fluid></Image>
+          </Row>
+          <Row>{errorContent}</Row>
+        </Col>
       </Row>
     </Container>
   );

apps/frontend/src/pages/RootLayout/RootLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { Row, Col, Container } from 'react-bootstrap';
 import Footer from '../../components/Footer/Footer';
 import styles from './RootLayout.module.css';
@@ -20,6 +20,7 @@ const RootLayout = () => (
     <Row>
       <Footer />
     </Row>
+    <ScrollRestoration />
   </Container>
 );
 

apps/frontend/src/pages/SingleNeighborhoodPage/SingleNeighborhoodPage.module.css

@@ -19,6 +19,7 @@
 
 .membersContainer {
   margin-top: 10px;
+  margin-right: 30px;
   display: flex;
   align-self: flex-start;
 }