From 3bf12d052958ff3bd4a9bfe0439251b71afdc57a Mon Sep 17 00:00:00 2001
From: Graham Mather <mather.g@northeastern.edu>
Date: Wed, 23 Oct 2024 17:56:11 -0400
Subject: [PATCH 1/4] stopping point

---
 src/components/Header.tsx              |  6 ++
 src/components/Map/InactiveBlocker.tsx | 26 ++++++++
 src/components/UserCards/UserCard.tsx  |  3 +-
 src/pages/index.tsx                    | 85 +++++++++++++++++---------
 src/utils/map/updateCompanyLocation.ts |  1 +
 src/utils/map/viewRoute.ts             | 77 +++++++++++++----------
 6 files changed, 137 insertions(+), 61 deletions(-)
 create mode 100644 src/components/Map/InactiveBlocker.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ec2a905a..b33227c2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -34,6 +34,7 @@ interface HeaderProps {
   data?: {
     sidebarValue: string;
     setSidebar: Dispatch<SetStateAction<HeaderOptions>>;
+    disabled: boolean;
   };
 }
 
@@ -66,9 +67,11 @@ const Header = (props: HeaderProps) => {
   const renderSidebarOptions = ({
     sidebarValue,
     setSidebar,
+    disabled,
   }: {
     sidebarValue: string;
     setSidebar: Dispatch<SetStateAction<HeaderOptions>>;
+    disabled: boolean;
   }) => {
     // @ts-ignore
     return (
@@ -77,6 +80,7 @@ const Header = (props: HeaderProps) => {
           onClick={() => {
             setSidebar("explore");
           }}
+          disabled={disabled}
           className={renderClassName(sidebarValue, "explore")}
         >
           Explore
@@ -85,6 +89,7 @@ const Header = (props: HeaderProps) => {
           onClick={() => {
             setSidebar("requests");
           }}
+          disabled={disabled}
           className={`${renderClassName(sidebarValue, "requests")} relative`}
         >
           Requests
@@ -98,6 +103,7 @@ const Header = (props: HeaderProps) => {
         </button>
         <button
           onClick={() => setDisplayGroup(true)}
+          disabled={disabled}
           className={renderClassName(sidebarValue, "filler")}
         >
           My Group
diff --git a/src/components/Map/InactiveBlocker.tsx b/src/components/Map/InactiveBlocker.tsx
new file mode 100644
index 00000000..ee74bf46
--- /dev/null
+++ b/src/components/Map/InactiveBlocker.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+const InactiveBlocker = () => {
+  return (
+    <div className="absolute inset-0 z-10 flex items-center justify-center bg-black bg-opacity-30 backdrop-blur-md">
+      <div
+        className="mx-auto max-w-md rounded-lg bg-white p-8 text-center shadow-lg"
+        role="alert"
+        aria-live="assertive"
+      >
+        <h1 className="mb-4 text-3xl font-bold">You are currently inactive</h1>
+        <p className="text-lg font-medium">
+          To view and interact with the map, please change your activity status
+          in your profile.
+        </p>
+        <Link href="/profile">
+          <a className="mt-6 inline-block rounded-lg bg-northeastern-red px-6 py-3 font-semibold text-white hover:bg-red-800">
+            Go to Profile
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default InactiveBlocker;
diff --git a/src/components/UserCards/UserCard.tsx b/src/components/UserCards/UserCard.tsx
index 81494d67..252922ca 100644
--- a/src/components/UserCards/UserCard.tsx
+++ b/src/components/UserCards/UserCard.tsx
@@ -201,11 +201,12 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
       {props.onViewRouteClick && props.rightButton ? (
         <div className="flex flex-row justify-between gap-2">
           <button
+            disabled={user.status === "INACTIVE" && user.role !== "VIEWER"}
             onClick={() =>
               props.onViewRouteClick &&
               props.onViewRouteClick(user, props.otherUser)
             }
-            className="my-1 w-1/2 rounded-md border border-black p-1 text-center hover:bg-stone-200"
+            className="my-1 w-1/2 rounded-md border border-black p-1 text-center hover:bg-stone-200 disabled:hover:bg-transparent"
           >
             View Route
           </button>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 83f6e0a5..6436e4bb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -35,6 +35,7 @@ import BlueCircle from "../../public/blue-circle.png";
 import VisibilityToggle from "../components/Map/VisibilityToggle";
 import updateCompanyLocation from "../utils/map/updateCompanyLocation";
 import MessagePanel from "../components/Messages/MessagePanel";
+import InactiveBlocker from "../components/Map/InactiveBlocker";
 
 mapboxgl.accessToken = browserEnv.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
@@ -71,7 +72,6 @@ const Home: NextPage<any> = () => {
   const { data: favorites = [] } = trpc.user.favorites.me.useQuery(undefined, {
     refetchOnMount: true,
   });
-
   const requestsQuery = trpc.user.requests.me.useQuery(undefined, {
     refetchOnMount: true,
   });
@@ -172,20 +172,26 @@ const Home: NextPage<any> = () => {
     const userCompanyLat = isViewerAddressSelected
       ? companyCord[1]
       : user.companyCoordLat;
-    const userCoord = {
-      startLat: userStartLat,
-      startLng: userStartLng,
-      endLat: userCompanyLat,
-      endLng: userCompanyLng,
-    };
+    const userCoord =
+      !isViewerAddressSelected && user.role === "VIEWER"
+        ? undefined
+        : {
+            startLat: userStartLat,
+            startLng: userStartLng,
+            endLat: userCompanyLat,
+            endLng: userCompanyLng,
+          };
+
     if (mapState) {
-      updateUserLocation(mapState, userStartLng, userStartLat);
-      updateCompanyLocation(
-        mapState,
-        userCompanyLng,
-        userCompanyLat,
-        user.role
-      );
+      if (user.role !== "VIEWER") {
+        updateUserLocation(mapState, userStartLng, userStartLat);
+        updateCompanyLocation(
+          mapState,
+          userCompanyLng,
+          userCompanyLat,
+          user.role
+        );
+      }
       const viewProps = {
         user,
         otherUser,
@@ -245,7 +251,7 @@ const Home: NextPage<any> = () => {
       newMap.setMaxZoom(13);
       newMap.on("load", () => {
         addClusters(newMap, geoJsonUsers);
-        if (!isViewer) {
+        if (user.role !== "VIEWER") {
           updateUserLocation(newMap, user.startCoordLng, user.startCoordLat);
           updateCompanyLocation(
             newMap,
@@ -263,17 +269,19 @@ const Home: NextPage<any> = () => {
   // separate use effect for user location rendering
   useEffect(() => {
     if (mapState) {
-      updateUserLocation(
-        mapState,
-        startAddressSelected.center[0],
-        startAddressSelected.center[1]
-      );
-      updateCompanyLocation(
-        mapState,
-        companyAddressSelected.center[0],
-        companyAddressSelected.center[1],
-        Role.VIEWER
-      );
+      if (user!.role === "VIEWER") {
+        updateUserLocation(
+          mapState,
+          startAddressSelected.center[0],
+          startAddressSelected.center[1]
+        );
+        updateCompanyLocation(
+          mapState,
+          companyAddressSelected.center[0],
+          companyAddressSelected.center[1],
+          Role.VIEWER
+        );
+      }
       if (mapState.getLayer("route") && user && otherUser) {
         onViewRouteClick(user, otherUser);
       }
@@ -343,7 +351,13 @@ const Home: NextPage<any> = () => {
     <div className="absolute left-0 top-0 z-10 m-2 flex min-w-[25rem] flex-col rounded-xl bg-white p-4 shadow-lg ">
       <h2 className="mb-4 text-xl">Search my route</h2>
       <div className="flex items-center space-x-4">
-        <Image className="h-8 w-8" src={BlueCircle} width={32} height={32} />
+        <Image
+          className="h-8 w-8"
+          src={BlueCircle}
+          alt="start"
+          width={32}
+          height={32}
+        />
         <AddressCombobox
           name="startAddress"
           placeholder="Enter start address"
@@ -356,7 +370,13 @@ const Home: NextPage<any> = () => {
       </div>
 
       <div className="mt-4 flex items-center space-x-4">
-        <Image className="h-8 w-8 " src={BlueSquare} width={32} height={42} />
+        <Image
+          className="h-8 w-8 "
+          alt="end"
+          src={BlueSquare}
+          width={32}
+          height={42}
+        />
         <AddressCombobox
           name="companyAddress"
           placeholder="Enter company address"
@@ -394,7 +414,11 @@ const Home: NextPage<any> = () => {
           </Head>
           <div className="m-0 h-full max-h-screen w-full">
             <Header
-              data={{ sidebarValue: sidebarType, setSidebar: setSidebarType }}
+              data={{
+                sidebarValue: sidebarType,
+                setSidebar: setSidebarType,
+                disabled: user.status === "INACTIVE" && user.role !== "VIEWER",
+              }}
             />
             <div className="flex h-[91.5%] flex-auto">
               <div className="w-96">
@@ -450,6 +474,9 @@ const Home: NextPage<any> = () => {
                       setPopupUsers(null);
                     }}
                   />
+                  {user.status === "INACTIVE" && user.role !== "VIEWER" && (
+                    <InactiveBlocker />
+                  )}
                 </div>
               </div>
             </div>
diff --git a/src/utils/map/updateCompanyLocation.ts b/src/utils/map/updateCompanyLocation.ts
index bf0763f9..18aeca46 100644
--- a/src/utils/map/updateCompanyLocation.ts
+++ b/src/utils/map/updateCompanyLocation.ts
@@ -15,6 +15,7 @@ const updateCompanyLocation = (
   if (role === Role.DRIVER) {
     img = BlueDriverEnd.src;
   }
+
   map.loadImage(
     img,
     (
diff --git a/src/utils/map/viewRoute.ts b/src/utils/map/viewRoute.ts
index a5b4bb78..20c61ad4 100644
--- a/src/utils/map/viewRoute.ts
+++ b/src/utils/map/viewRoute.ts
@@ -1,6 +1,5 @@
 import mapboxgl from "mapbox-gl";
 import { CarpoolAddress, CarpoolFeature, PublicUser, User } from "../types";
-import { Role } from "@prisma/client";
 import { trpc } from "../trpc";
 import { SetStateAction, useEffect } from "react";
 import { toast } from "react-toastify";
@@ -47,28 +46,35 @@ interface ViewRouteProps {
   user: User;
   otherUser: PublicUser | undefined;
   map: mapboxgl.Map;
-  userCoord: {
-    startLat: number;
-    startLng: number;
-    endLat: number;
-    endLng: number;
-  };
+  userCoord:
+    | {
+        startLat: number;
+        startLng: number;
+        endLat: number;
+        endLng: number;
+      }
+    | undefined;
 }
 
 // Creates MapBox markers showing user's start address and the start area of the other user.
 export const viewRoute = (props: ViewRouteProps) => {
   clearMarkers();
   clearDirections(props.map);
+  console.log(props.userCoord);
   const redCircle = createMarkerEl(DriverStart);
   const selfStartPopup = createPopup("My Start");
   const selfEndPopup = createPopup("My Dest.");
   const orangeStart = createMarkerEl(RiderStart);
   const redStart = createMarkerEl(redCircle);
+
+  let startPoiLng, startPoiLat, endPoiLng, endPoiLat;
+
   if (props.otherUser !== undefined) {
     const otherRole =
       props.otherUser.role.charAt(0).toUpperCase() +
       props.otherUser.role.slice(1).toLowerCase();
-    const otherUserStartPopup = createPopup(otherRole + " Start");
+
+    const otherUserStartPopup = createPopup(`${otherRole} Start`);
     const otherUserStartMarker = new mapboxgl.Marker({
       element: otherRole === "Rider" ? orangeStart : redStart,
     })
@@ -78,47 +84,56 @@ export const viewRoute = (props: ViewRouteProps) => {
       ])
       .setPopup(otherUserStartPopup)
       .addTo(props.map);
-    const otherUserEndPopup = createPopup(otherRole + " Dest.");
+
+    const otherUserEndPopup = createPopup(`${otherRole} Dest.`);
     otherUserEndPopup
       .setLngLat([
         props.otherUser.companyCoordLng,
         props.otherUser.companyCoordLat,
       ])
       .addTo(props.map);
+
     otherUserStartMarker.togglePopup();
     previousMarkers.push(otherUserStartMarker);
     previousMarkers.push(otherUserEndPopup);
-  }
 
-  selfEndPopup
-    .setLngLat([props.userCoord.endLng, props.userCoord.endLat])
-    .addTo(props.map);
-  selfStartPopup
-    .setLngLat([props.userCoord.startLng, props.userCoord.startLat])
-    .addTo(props.map);
-  previousMarkers.push(selfEndPopup);
-  previousMarkers.push(selfStartPopup);
-  let startPoiLng = props.userCoord.startLng;
-  let startPoiLat = props.userCoord.startLat;
-  let endPoiLng = props.userCoord.endLng;
-  let endPoiLat = props.userCoord.endLat;
-  if (props.otherUser) {
     startPoiLng = props.otherUser.startPOICoordLng;
     startPoiLat = props.otherUser.startPOICoordLat;
     endPoiLng = props.otherUser.companyCoordLng;
     endPoiLat = props.otherUser.companyCoordLat;
+  } else if (props.userCoord !== undefined) {
+    selfStartPopup
+      .setLngLat([props.userCoord.startLng, props.userCoord.startLat])
+      .addTo(props.map);
+
+    selfEndPopup
+      .setLngLat([props.userCoord.endLng, props.userCoord.endLat])
+      .addTo(props.map);
+
+    previousMarkers.push(selfStartPopup);
+    previousMarkers.push(selfEndPopup);
+
+    startPoiLng = props.userCoord.startLng;
+    startPoiLat = props.userCoord.startLat;
+    endPoiLng = props.userCoord.endLng;
+    endPoiLat = props.userCoord.endLat;
+  } else {
+    return;
   }
 
-  props.map.fitBounds([
+  props.map.fitBounds(
     [
-      Math.min(startPoiLng, endPoiLng) - 0.0075,
-      Math.max(startPoiLat, endPoiLat) + 0.0075,
+      [
+        Math.min(startPoiLng, endPoiLng) - 0.0075,
+        Math.min(startPoiLat, endPoiLat) - 0.0075,
+      ],
+      [
+        Math.max(startPoiLng, endPoiLng) + 0.0075,
+        Math.max(startPoiLat, endPoiLat) + 0.0075,
+      ],
     ],
-    [
-      Math.max(startPoiLng, endPoiLng) + 0.0075,
-      Math.min(startPoiLat, endPoiLat) - 0.0075,
-    ],
-  ]);
+    { padding: 20 }
+  );
 };
 
 export function useGetDirections({

From bac12e4d1bca93c57b86a2f0aee4acb59d003ad5 Mon Sep 17 00:00:00 2001
From: Graham Mather <mather.g@northeastern.edu>
Date: Thu, 24 Oct 2024 11:55:43 -0400
Subject: [PATCH 2/4] View route improvements and Inactive Blocker

---
 src/components/Map/InactiveBlocker.tsx | 29 ++++++++++++++++++++------
 src/components/Spinner.tsx             |  2 +-
 src/pages/index.tsx                    |  1 +
 src/utils/map/updateCompanyLocation.ts |  1 +
 src/utils/map/viewRoute.ts             | 15 ++++++++++---
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/Map/InactiveBlocker.tsx b/src/components/Map/InactiveBlocker.tsx
index ee74bf46..7ff45f30 100644
--- a/src/components/Map/InactiveBlocker.tsx
+++ b/src/components/Map/InactiveBlocker.tsx
@@ -1,8 +1,24 @@
-import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Spinner from "../Spinner";
 
 const InactiveBlocker = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleProfileClick = async () => {
+    setIsLoading(true);
+    await router.push("/profile");
+    setIsLoading(false);
+  };
+
   return (
     <div className="absolute inset-0 z-10 flex items-center justify-center bg-black bg-opacity-30 backdrop-blur-md">
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white ">
+          <Spinner />
+        </div>
+      )}
       <div
         className="mx-auto max-w-md rounded-lg bg-white p-8 text-center shadow-lg"
         role="alert"
@@ -13,11 +29,12 @@ const InactiveBlocker = () => {
           To view and interact with the map, please change your activity status
           in your profile.
         </p>
-        <Link href="/profile">
-          <a className="mt-6 inline-block rounded-lg bg-northeastern-red px-6 py-3 font-semibold text-white hover:bg-red-800">
-            Go to Profile
-          </a>
-        </Link>
+        <button
+          onClick={handleProfileClick}
+          className="mt-6 inline-block rounded-lg bg-northeastern-red px-9 py-3 text-lg font-medium text-white hover:bg-red-800"
+        >
+          Go to Profile
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index eba5a072..6223dbbd 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -23,7 +23,7 @@ const Spinner: React.FC = () => {
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         ></path>
       </svg>
-      <span className="text-xl">Loading</span>
+      <span className="text-xl">Loading...</span>
     </div>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6436e4bb..06e1e084 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -341,6 +341,7 @@ const Home: NextPage<any> = () => {
     type: "address%2Cpostcode",
     setFunc: setStartAddressSuggestions,
   });
+
   useGetDirections({ points: points, map: mapState! });
 
   if (!user) {
diff --git a/src/utils/map/updateCompanyLocation.ts b/src/utils/map/updateCompanyLocation.ts
index 18aeca46..cf491366 100644
--- a/src/utils/map/updateCompanyLocation.ts
+++ b/src/utils/map/updateCompanyLocation.ts
@@ -3,6 +3,7 @@ import BlueEnd from "../../../public/user-dest.png";
 import BlueDriverEnd from "../../../public/user-dest-driver.png";
 
 import { Role } from "@prisma/client";
+import { GeoJSON } from "geojson";
 
 let companyMarkerSourceId = "company-marker-source"; // Source ID for reference
 const updateCompanyLocation = (
diff --git a/src/utils/map/viewRoute.ts b/src/utils/map/viewRoute.ts
index 20c61ad4..86b55ba5 100644
--- a/src/utils/map/viewRoute.ts
+++ b/src/utils/map/viewRoute.ts
@@ -101,7 +101,9 @@ export const viewRoute = (props: ViewRouteProps) => {
     startPoiLat = props.otherUser.startPOICoordLat;
     endPoiLng = props.otherUser.companyCoordLng;
     endPoiLat = props.otherUser.companyCoordLat;
-  } else if (props.userCoord !== undefined) {
+  }
+  if (props.userCoord !== undefined) {
+    console.log("adding popups");
     selfStartPopup
       .setLngLat([props.userCoord.startLng, props.userCoord.startLat])
       .addTo(props.map);
@@ -109,7 +111,6 @@ export const viewRoute = (props: ViewRouteProps) => {
     selfEndPopup
       .setLngLat([props.userCoord.endLng, props.userCoord.endLat])
       .addTo(props.map);
-
     previousMarkers.push(selfStartPopup);
     previousMarkers.push(selfEndPopup);
 
@@ -117,7 +118,15 @@ export const viewRoute = (props: ViewRouteProps) => {
     startPoiLat = props.userCoord.startLat;
     endPoiLng = props.userCoord.endLng;
     endPoiLat = props.userCoord.endLat;
-  } else {
+  }
+  if (
+    !startPoiLat ||
+    !startPoiLat ||
+    !endPoiLat ||
+    !endPoiLat ||
+    !startPoiLng ||
+    !endPoiLng
+  ) {
     return;
   }
 

From b00c0a1e6b43da277af2aaab7900c5d546ccaceb Mon Sep 17 00:00:00 2001
From: Graham Mather <mather.g@northeastern.edu>
Date: Thu, 24 Oct 2024 11:56:33 -0400
Subject: [PATCH 3/4] packages

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 0f1a9aba..d55f6e51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8550,6 +8550,11 @@ symbol-observable@^1.0.4:
   resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
+tailwind-scrollbar@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz#ff7596407b6da5209261d8ff03860ab9206a59e3"
+  integrity sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==
+
 tailwindcss@^3.1.3:
   version "3.3.2"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz"

From 306822c7221542accb007884bc4e46e083117524 Mon Sep 17 00:00:00 2001
From: Graham Mather <mather.g@northeastern.edu>
Date: Thu, 24 Oct 2024 13:42:47 -0400
Subject: [PATCH 4/4] Inactive users can't be messaged

---
 src/server/router/user/requests.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/server/router/user/requests.ts b/src/server/router/user/requests.ts
index e6a767f8..094c254c 100644
--- a/src/server/router/user/requests.ts
+++ b/src/server/router/user/requests.ts
@@ -6,7 +6,6 @@ import { Request, User } from "@prisma/client";
 import { convertToPublic } from "../../../utils/publicUser";
 import { PublicUser, ResolvedRequest } from "../../../utils/types";
 
-
 // use this router to manage invitations
 export const requestsRouter = router({
   me: protectedRouter.query(async ({ ctx }) => {
@@ -23,6 +22,13 @@ export const requestsRouter = router({
       where: { id: userId },
       include: {
         sentRequests: {
+          where: {
+            toUser: {
+              is: {
+                status: { not: "INACTIVE" },
+              },
+            },
+          },
           include: {
             toUser: true,
             conversation: {
@@ -36,6 +42,13 @@ export const requestsRouter = router({
           },
         },
         receivedRequests: {
+          where: {
+            fromUser: {
+              is: {
+                status: { not: "INACTIVE" },
+              },
+            },
+          },
           include: {
             fromUser: true,
             conversation: {