Members expansion (#217)

* Only retrieve user id and username from the backend on neighborhood load

* Only retrieving admin id and username on neighborhood load

* Fixed failing test

* Working dropdown on mobile

* Fixed single neighborhood page height

* Solved scrolling bug on Single Neighborhood Page

* Removed social media links from root layout

apps/backend/src/services/neighborhoodServices.ts

@@ -166,11 +166,28 @@ const getNeighborhoodDetailsForMembers = async (
   neighborhoodId: number,
 ): Promise<NeighborhoodDetailsForMembers> => {
   const FIELDS_TO_INCLUDE_FOR_MEMBERS = {
-    admin: true,
-    users: true,
+    admin: {
+      select: {
+        id: true,
+        username: true
+      }
+    },
+    users: {
+      select: {
+        id: true,
+        username: true,
+        email: true,
+      }
+    },
     requests: {
       include: {
-        user: true,
+        user: {
+          select: {
+            id: true,
+            username: true,
+            email: true
+          }
+        },
         responses: {
           include: {
             user: true,

apps/backend/src/types.ts

@@ -129,8 +129,18 @@ export type NeighborhoodDetailsForNonMembers = Omit<Neighborhood, 'admin_id'>;
 
 const neighborhoodDetailsForMembers = schema.Prisma.validator<schema.Prisma.NeighborhoodArgs>()({
   include: {
-    admin: true,
-    users: true,
+    admin: {
+      select: {
+        id: true,
+        username: true,
+      }
+    },
+    users: {
+      select: {
+        id: true,
+        username: true,
+      }
+    },
     requests: true,
   },
 });

apps/frontend/package.json

@@ -20,6 +20,7 @@
     "@types/node": "^16.18.25",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.3",
+    "@types/react-outside-click-handler": "^1.3.3",
     "@types/react-responsive-masonry": "^2.1.3",
     "@types/react-router": "^5.1.20",
     "axios": "^1.4.0",
@@ -32,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-leaflet": "^4.2.1",
+    "react-outside-click-handler": "^1.3.0",
     "react-responsive-masonry": "^2.1.7",
     "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",

apps/frontend/src/components/Footer/Footer.tsx

@@ -12,7 +12,7 @@ const Footer = ({ variant = 'layout' }: Props) => (
         {/*
               Icons are too small
             */}
-        <a href="#">
+        {/* <a href="#">
           <i className="bx bxl-facebook-square"></i>
         </a>
         <a href="#">
@@ -21,11 +21,15 @@ const Footer = ({ variant = 'layout' }: Props) => (
         </a>
         <a href="#">
           <i className="bx bxl-twitter"></i>
-        </a>
+        </a> */}
         <a href="https://github.com/neighborhood-app/app">
           {' '}
           <i className="bx bxl-github"></i>
         </a>
+        <a href="#">
+          {' '}
+          <i className="bx bxl-linkedin"></i>
+        </a>
       </div>
     </div>
     {variant === 'landing' ? (

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

@@ -2,6 +2,7 @@ import { User } from '@prisma/client';
 import { Link } from 'react-router-dom';
 import { Dropdown } from 'react-bootstrap';
 import { useState } from 'react';
+import OutsideClickHandler from 'react-outside-click-handler';
 import UserCircle from '../UserCircle/UserCircle';
 import styles from './UserCircleStack.module.css';
 
@@ -28,10 +29,12 @@ export default function UserCircleStack({ users }: { users?: User[] | null }) {
         )}
         {/* If there are more than 3 users a circle is shown with how many users there are left. */}
         {usersLeft > 0 ? (
+          <OutsideClickHandler onOutsideClick={() => setShowUserList(false)}>
           <div
             className={styles.dropdownContainer}
             onMouseEnter={() => setShowUserList(true)}
-            onMouseLeave={() => setShowUserList(false)}>
+            onMouseLeave={() => setShowUserList(false)}
+            onTouchEnd={() => setShowUserList(true)}>
             <UserCircle username={`...`} isLast={true} />
             <Dropdown show={showUserList} className={styles.dropdown}>
               <Dropdown.Menu className={styles.dropdownMenu}>
@@ -40,13 +43,14 @@ export default function UserCircleStack({ users }: { users?: User[] | null }) {
                     key={user.id}
                     href={`/users/${user.id}`}
                     className={styles.dropdownItem}>
-                    <UserCircle username={user.username} inList={true} />
                     {user.username}
                   </Dropdown.Item>
                 ))}
               </Dropdown.Menu>
             </Dropdown>
+
           </div>
+          </OutsideClickHandler>
         ) : null}
       </div>
     );

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

@@ -1,5 +1,6 @@
 .wrapper {
-  padding: 50px;
+  /* padding: 50px;
+  height: 100vh; */
 }
 
 .neighborhoodImg {