Merge pull request #117 from sandboxnu/mapInactiveView

Map inactive blocker + logic for blocking other actions, View route improvements

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

src/components/Map/InactiveBlocker.tsx

@@ -0,0 +1,43 @@
+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"
+        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>
+        <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>
+  );
+};
+
+export default InactiveBlocker;

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>
   );
 };

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>

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);
       }
@@ -333,6 +341,7 @@ const Home: NextPage<any> = () => {
     type: "address%2Cpostcode",
     setFunc: setStartAddressSuggestions,
   });
+
   useGetDirections({ points: points, map: mapState! });
 
   if (!user) {
@@ -343,7 +352,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 +371,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 +415,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 +475,9 @@ const Home: NextPage<any> = () => {
                       setPopupUsers(null);
                     }}
                   />
+                  {user.status === "INACTIVE" && user.role !== "VIEWER" && (
+                    <InactiveBlocker />
+                  )}
                 </div>
               </div>
             </div>

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: {

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 = (
@@ -15,6 +16,7 @@ const updateCompanyLocation = (
   if (role === Role.DRIVER) {
     img = BlueDriverEnd.src;
   }
+
   map.loadImage(
     img,
     (