From 99c80027293ed694ac58e0ea05ce83a6fb9e8253 Mon Sep 17 00:00:00 2001
From: Nathanial Ziegler <76403303+nziegler87@users.noreply.github.com>
Date: Wed, 15 Jan 2025 15:28:12 -0500
Subject: [PATCH] temporary change from start lat/long from POA to actual
 address

---
 src/components/Modals/ConnectModal.tsx |    2 +-
 src/components/UserCards/UserCard.tsx  |    2 +-
 src/pages/index.tsx                    | 1100 +++++++++++-------------
 src/server/router/mapbox.ts            |    6 +-
 src/utils/map/viewRoute.ts             |   12 +-
 src/utils/publicUser.ts                |   14 +-
 src/utils/types.ts                     |    6 +-
 7 files changed, 534 insertions(+), 608 deletions(-)

diff --git a/src/components/Modals/ConnectModal.tsx b/src/components/Modals/ConnectModal.tsx
index 241876d..b46e989 100644
--- a/src/components/Modals/ConnectModal.tsx
+++ b/src/components/Modals/ConnectModal.tsx
@@ -170,7 +170,7 @@ const ConnectModal = (props: ConnectModalProps): JSX.Element => {
                         />
                       </div>
                       <p className="ml-1.5  font-semibold">
-                        {props.otherUser.startPOILocation}
+                        {props.otherUser.startAddress}
                       </p>
                     </div>
 
diff --git a/src/components/UserCards/UserCard.tsx b/src/components/UserCards/UserCard.tsx
index 6854754..5197f95 100644
--- a/src/components/UserCards/UserCard.tsx
+++ b/src/components/UserCards/UserCard.tsx
@@ -161,7 +161,7 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
           <Image src={StartIcon} width={25} height={25} alt="Start icon" />
         </div>
         <p className="ml-2 text-sm font-semibold">
-          {props.otherUser.startPOILocation}
+          {props.otherUser.startAddress}
         </p>
       </div>
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1427ab6..cbd8c96 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,13 +15,13 @@ import { UserContext } from "../utils/userContext";
 import _, { debounce } from "lodash";
 import { SidebarPage } from "../components/Sidebar/Sidebar";
 import {
-  CarpoolAddress,
-  CarpoolFeature,
-  EnhancedPublicUser,
-  FiltersState,
-  GeoJsonUsers,
-  PublicUser,
-  Request,
+    CarpoolAddress,
+    CarpoolFeature,
+    EnhancedPublicUser,
+    FiltersState,
+    GeoJsonUsers,
+    PublicUser,
+    Request,
 } from "../utils/types";
 import { Role, User } from "@prisma/client";
 import { useGetDirections, viewRoute } from "../utils/map/viewRoute";
@@ -42,610 +42,526 @@ import updateGeoJsonUsers from "../utils/map/updateGeoJsonUsers";
 mapboxgl.accessToken = browserEnv.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const session = await getSession(context);
+    const session = await getSession(context);
+
+    if (!session?.user) {
+        return {
+            redirect: {
+                destination: "/sign-in",
+                permanent: false,
+            },
+        };
+    }
+    if (!session.user.isOnboarded) {
+        return {
+            redirect: {
+                destination: "/profile/setup",
+                permanent: false,
+            },
+        };
+    }
 
-  if (!session?.user) {
-    return {
-      redirect: {
-        destination: "/sign-in",
-        permanent: false,
-      },
-    };
-  }
-  if (!session.user.isOnboarded) {
     return {
-      redirect: {
-        destination: "/profile/setup",
-        permanent: false,
-      },
+        props: {},
     };
-  }
-
-  return {
-    props: {},
-  };
 }
 
 const Home: NextPage<any> = () => {
-  const initialFilters: FiltersState = {
-    days: 0,
-    flexDays: 1,
-    startDistance: 20,
-    endDistance: 20,
-    daysWorking: "",
-    startTime: 4,
-    endTime: 4,
-    startDate: new Date(Date.now()),
-    endDate: new Date(Date.now()),
-    dateOverlap: 0,
-    favorites: false,
-    messaged: false,
-  };
-  const [tempOtherUser, setTempOtherUser] = useState<PublicUser | null>(null);
-  const [tempOtherUserMarkerActive, setTempOtherUserMarkerActive] =
-    useState(false);
-  const [defaultFilters] = useState<FiltersState>(initialFilters);
-  const [filters, setFilters] = useState<FiltersState>(initialFilters);
-  const [sort, setSort] = useState<string>("any");
-  const [debouncedFilters, setDebouncedFilters] = useState(filters);
-  const [otherUser, setOtherUser] = useState<PublicUser | null>(null);
-  const isMapInitialized = useRef(false);
-  const [mapStateLoaded, setMapStateLoaded] = useState(false);
-  useEffect(() => {
-    const handler = debounce(() => {
-      setDebouncedFilters(filters);
-    }, 300);
-
-    handler();
-
-    return () => {
-      handler.cancel();
+    const initialFilters: FiltersState = {
+        days: 0,
+        flexDays: 1,
+        startDistance: 20,
+        endDistance: 20,
+        daysWorking: "",
+        startTime: 4,
+        endTime: 4,
+        startDate: new Date(Date.now()),
+        endDate: new Date(Date.now()),
+        dateOverlap: 0,
+        favorites: false,
+        messaged: false,
     };
-  }, [filters]);
-
-  const { data: geoJsonUsers } =
-    trpc.mapbox.geoJsonUserList.useQuery(debouncedFilters);
-
-  const { data: user = null } = trpc.user.me.useQuery();
-  const { data: recommendations = [] } = trpc.user.recommendations.me.useQuery(
-    {
-      sort: sort,
-      filters: filters,
-    },
-    { refetchOnMount: true }
-  );
-  const { data: favorites = [] } = trpc.user.favorites.me.useQuery(undefined, {
-    refetchOnMount: true,
-  });
-  const requestsQuery = trpc.user.requests.me.useQuery(undefined, {
-    refetchOnMount: "always",
-  });
-  const { data: requests = { sent: [], received: [] } } = requestsQuery;
-  const utils = trpc.useContext();
-  const handleUserSelect = (userId: string) => {
-    setSelectedUserId(userId);
-    if (userId !== "") {
-      setOtherUser(null);
-    }
-  };
-  const [mapState, setMapState] = useState<mapboxgl.Map>();
-  const [sidebarType, setSidebarType] = useState<HeaderOptions>("explore");
-  const [popupUsers, setPopupUsers] = useState<PublicUser[] | null>(null);
-  const mapContainerRef = useRef(null);
-  const [points, setPoints] = useState<[number, number][]>([]);
-  const [companyAddressSuggestions, setCompanyAddressSuggestions] = useState<
-    CarpoolFeature[]
-  >([]);
-  const [startAddressSuggestions, setStartAddressSuggestions] = useState<
-    CarpoolFeature[]
-  >([]);
-
-  const [companyAddressSelected, setCompanyAddressSelected] =
-    useState<CarpoolAddress>({
-      place_name: "",
-      center: [0, 0],
+
+    const [tempOtherUser, setTempOtherUser] = useState<PublicUser | null>(null);
+    const [tempOtherUserMarkerActive, setTempOtherUserMarkerActive] = useState(false);
+    const [defaultFilters] = useState<FiltersState>(initialFilters);
+    const [filters, setFilters] = useState<FiltersState>(initialFilters);
+    const [sort, setSort] = useState<string>("any");
+    const [debouncedFilters, setDebouncedFilters] = useState(filters);
+    const [otherUser, setOtherUser] = useState<PublicUser | null>(null);
+    const isMapInitialized = useRef(false);
+    const [mapStateLoaded, setMapStateLoaded] = useState(false);
+    
+    useEffect(() => {
+        const handler = debounce(() => {
+            setDebouncedFilters(filters);
+        }, 300);
+
+        handler();
+
+        return () => {
+            handler.cancel();
+        };
+    }, [filters]);
+
+    const { data: geoJsonUsers } = trpc.mapbox.geoJsonUserList.useQuery(debouncedFilters);
+
+    const { data: user = null } = trpc.user.me.useQuery();
+    const { data: recommendations = [] } = trpc.user.recommendations.me.useQuery(
+        {
+            sort: sort,
+            filters: filters,
+        },
+        { refetchOnMount: true }
+    );
+    const { data: favorites = [] } = trpc.user.favorites.me.useQuery(undefined, {
+        refetchOnMount: true,
     });
-  const [startAddressSelected, setStartAddressSelected] =
-    useState<CarpoolAddress>({
-      place_name: "",
-      center: [0, 0],
+    const requestsQuery = trpc.user.requests.me.useQuery(undefined, {
+        refetchOnMount: "always",
+    });
+    const { data: requests = { sent: [], received: [] } } = requestsQuery;
+    const utils = trpc.useContext();
+    const handleUserSelect = (userId: string) => {
+        setSelectedUserId(userId);
+        if (userId !== "") {
+            setOtherUser(null);
+        }
+    };
+    const [mapState, setMapState] = useState<mapboxgl.Map>();
+    const [sidebarType, setSidebarType] = useState<HeaderOptions>("explore");
+    const [popupUsers, setPopupUsers] = useState<PublicUser[] | null>(null);
+    const mapContainerRef = useRef(null);
+    const [points, setPoints] = useState<[number, number][]>([]);
+    const [companyAddressSuggestions, setCompanyAddressSuggestions] = useState<CarpoolFeature[]>([]);
+    const [startAddressSuggestions, setStartAddressSuggestions] = useState<CarpoolFeature[]>([]);
+
+    const [companyAddressSelected, setCompanyAddressSelected] = useState<CarpoolAddress>({
+        place_name: "",
+        center: [0, 0],
+    });
+    const [startAddressSelected, setStartAddressSelected] = useState<CarpoolAddress>({
+        place_name: "",
+        center: [0, 0],
     });
 
-  const [companyAddress, setCompanyAddress] = useState("");
-  const updateCompanyAddress = useMemo(
-    () => debounce(setCompanyAddress, 250),
-    []
-  );
-
-  const [startingAddress, setStartingAddress] = useState("");
-  const updateStartingAddress = useMemo(
-    () => debounce(setStartingAddress, 250),
-    []
-  );
-
-  const extendPublicUser = useCallback(
-    (user: PublicUser): EnhancedPublicUser => {
-      const incomingReq: Request | undefined = requests.received.find(
-        (req) => req.fromUserId === user.id
-      );
-      const outgoingReq: Request | undefined = requests.sent.find(
-        (req) => req.toUserId === user.id
-      );
-
-      return {
-        ...user,
-        isFavorited: favorites.some((favs) => favs.id === user.id),
-        incomingRequest: incomingReq,
-        outgoingRequest: outgoingReq,
-      };
-    },
-    [favorites, requests]
-  );
-
-  const handleMessageSent = (selectedUserId: string) => {
-    utils.user.requests.me.invalidate();
-    requestsQuery.refetch();
-    setSelectedUserId(selectedUserId);
-  };
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-
-  const selectedUser: EnhancedPublicUser | null = useMemo(() => {
-    if (!selectedUserId || !requests) return null;
-    const allRequests = [...requests.sent, ...requests.received];
-    for (const request of allRequests) {
-      const user: any =
-        request.fromUser.id === selectedUserId
-          ? request.fromUser
-          : request.toUser;
-      if (user.id === selectedUserId)
-        return extendPublicUser(user) as EnhancedPublicUser;
-    }
-    return null;
-  }, [selectedUserId, requests, extendPublicUser]);
-
-  const onViewRouteClick = useCallback(
-    (user: User, clickedUser: PublicUser) => {
-      if (!mapStateLoaded || !mapState || !geoJsonUsers) return;
-      const isOtherUserInGeoList = geoJsonUsers.features.some(
-        (f) => f.properties?.id === clickedUser.id
-      );
-      const isPrevOtherUserInGeoList = geoJsonUsers.features.some(
-        (f) => f.properties?.id === tempOtherUser?.id
-      );
-      const shouldRemoveMarker =
-        tempOtherUserMarkerActive &&
-        ((tempOtherUser && tempOtherUser.id !== clickedUser.id) ||
-          isPrevOtherUserInGeoList);
-      setOtherUser(clickedUser);
-      const isViewerAddressSelected =
-        companyAddressSelected.place_name !== "" &&
-        startAddressSelected.place_name !== "";
-      const companyCord: number[] = companyAddressSelected.center;
-      const startCord: number[] = startAddressSelected.center;
-      const userStartLng = isViewerAddressSelected
-        ? startCord[0]
-        : user.startCoordLng;
-      const userStartLat = isViewerAddressSelected
-        ? startCord[1]
-        : user.startCoordLat;
-      const userCompanyLng = isViewerAddressSelected
-        ? companyCord[0]
-        : user.companyCoordLng;
-      const userCompanyLat = isViewerAddressSelected
-        ? companyCord[1]
-        : user.companyCoordLat;
-      const userCoord =
-        !isViewerAddressSelected && user.role === "VIEWER"
-          ? undefined
-          : {
-              startLat: userStartLat,
-              startLng: userStartLng,
-              endLat: userCompanyLat,
-              endLng: userCompanyLng,
+    const [companyAddress, setCompanyAddress] = useState("");
+    const updateCompanyAddress = useMemo(() => debounce(setCompanyAddress, 250), []);
+
+    const [startingAddress, setStartingAddress] = useState("");
+    const updateStartingAddress = useMemo(() => debounce(setStartingAddress, 250), []);
+
+    const extendPublicUser = useCallback(
+        (user: PublicUser): EnhancedPublicUser => {
+            const incomingReq: Request | undefined = requests.received.find((req) => req.fromUserId === user.id);
+            const outgoingReq: Request | undefined = requests.sent.find((req) => req.toUserId === user.id);
+
+            return {
+                ...user,
+                isFavorited: favorites.some((favs) => favs.id === user.id),
+                incomingRequest: incomingReq,
+                outgoingRequest: outgoingReq,
+            };
+        },
+        [favorites, requests]
+    );
+
+    const handleMessageSent = (selectedUserId: string) => {
+        utils.user.requests.me.invalidate();
+        requestsQuery.refetch();
+        setSelectedUserId(selectedUserId);
+    };
+    const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+
+    const selectedUser: EnhancedPublicUser | null = useMemo(() => {
+        if (!selectedUserId || !requests) return null;
+        const allRequests = [...requests.sent, ...requests.received];
+        for (const request of allRequests) {
+            const user: any = request.fromUser.id === selectedUserId ? request.fromUser : request.toUser;
+            if (user.id === selectedUserId) return extendPublicUser(user) as EnhancedPublicUser;
+        }
+        return null;
+    }, [selectedUserId, requests, extendPublicUser]);
+
+    const onViewRouteClick = useCallback(
+        (user: User, clickedUser: PublicUser) => {
+            if (!mapStateLoaded || !mapState || !geoJsonUsers) return;
+            const isOtherUserInGeoList = geoJsonUsers.features.some((f) => f.properties?.id === clickedUser.id);
+            const isPrevOtherUserInGeoList = geoJsonUsers.features.some((f) => f.properties?.id === tempOtherUser?.id);
+            const shouldRemoveMarker =
+                tempOtherUserMarkerActive &&
+                ((tempOtherUser && tempOtherUser.id !== clickedUser.id) || isPrevOtherUserInGeoList);
+            setOtherUser(clickedUser);
+            const isViewerAddressSelected =
+                companyAddressSelected.place_name !== "" && startAddressSelected.place_name !== "";
+            const companyCord: number[] = companyAddressSelected.center;
+            const startCord: number[] = startAddressSelected.center;
+            const userStartLng = isViewerAddressSelected ? startCord[0] : user.startCoordLng;
+            const userStartLat = isViewerAddressSelected ? startCord[1] : user.startCoordLat;
+            const userCompanyLng = isViewerAddressSelected ? companyCord[0] : user.companyCoordLng;
+            const userCompanyLat = isViewerAddressSelected ? companyCord[1] : user.companyCoordLat;
+            const userCoord =
+                !isViewerAddressSelected && user.role === "VIEWER"
+                    ? undefined
+                    : {
+                          startLat: userStartLat,
+                          startLng: userStartLng,
+                          endLat: userCompanyLat,
+                          endLng: userCompanyLng,
+                      };
+
+            if (user.role !== "VIEWER") {
+                updateUserLocation(mapState, userStartLng, userStartLat);
+                updateCompanyLocation(mapState, userCompanyLng, userCompanyLat, user.role, user.id, true);
+            }
+            if (shouldRemoveMarker && tempOtherUser) {
+                updateCompanyLocation(
+                    mapState,
+                    tempOtherUser.companyCoordLng,
+                    tempOtherUser.companyCoordLat,
+                    tempOtherUser.role,
+                    tempOtherUser.id,
+                    false,
+                    true
+                );
+                setTempOtherUserMarkerActive(false);
+                setTempOtherUser(null);
+            }
+            if (!isOtherUserInGeoList && selectedUserId === clickedUser.id) {
+                updateCompanyLocation(
+                    mapState,
+                    clickedUser.companyCoordLng,
+                    clickedUser.companyCoordLat,
+                    clickedUser.role,
+                    clickedUser.id,
+                    false,
+                    false
+                );
+                setTempOtherUserMarkerActive(true);
+                setTempOtherUser(clickedUser);
+            } else if (!isOtherUserInGeoList && selectedUserId !== clickedUser.id) {
+                setOtherUser(null);
+                return;
+            }
+
+            const viewProps = {
+                user,
+                otherUser: clickedUser,
+                map: mapState,
+                userCoord,
             };
 
-      if (user.role !== "VIEWER") {
-        updateUserLocation(mapState, userStartLng, userStartLat);
-        updateCompanyLocation(
-          mapState,
-          userCompanyLng,
-          userCompanyLat,
-          user.role,
-          user.id,
-          true
-        );
-      }
-      if (shouldRemoveMarker && tempOtherUser) {
-        updateCompanyLocation(
-          mapState,
-          tempOtherUser.companyCoordLng,
-          tempOtherUser.companyCoordLat,
-          tempOtherUser.role,
-          tempOtherUser.id,
-          false,
-          true
-        );
-        setTempOtherUserMarkerActive(false);
-        setTempOtherUser(null);
-      }
-      if (!isOtherUserInGeoList && selectedUserId === clickedUser.id) {
-        updateCompanyLocation(
-          mapState,
-          clickedUser.companyCoordLng,
-          clickedUser.companyCoordLat,
-          clickedUser.role,
-          clickedUser.id,
-          false,
-          false
-        );
-        setTempOtherUserMarkerActive(true);
-        setTempOtherUser(clickedUser);
-      } else if (!isOtherUserInGeoList && selectedUserId !== clickedUser.id) {
-        setOtherUser(null);
-        return;
-      }
-
-      const viewProps = {
-        user,
-        otherUser: clickedUser,
-        map: mapState,
-        userCoord,
-      };
-
-      if (user.role === "RIDER") {
-        setPoints([
-          [clickedUser.startPOICoordLng, clickedUser.startPOICoordLat],
-          [userStartLng, userStartLat],
-          [userCompanyLng, userCompanyLat],
-          [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
-        ]);
-      } else if (isViewerAddressSelected || user.role == "DRIVER") {
-        setPoints([
-          [userStartLng, userStartLat],
-          [clickedUser.startPOICoordLng, clickedUser.startPOICoordLat],
-          [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
-          [userCompanyLng, userCompanyLat],
-        ]);
-      } else {
-        setPoints([
-          [clickedUser.startPOICoordLng, clickedUser.startPOICoordLat],
-          [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
-        ]);
-      }
-      viewRoute(viewProps);
-    },
-    [
-      geoJsonUsers,
-      selectedUserId,
-      companyAddressSelected,
-      startAddressSelected,
-      mapState,
-      mapStateLoaded,
-      tempOtherUser,
-      tempOtherUserMarkerActive,
-    ]
-  );
-  const enhancedSentUsers = requests.sent.map((request: { toUser: any }) =>
-    extendPublicUser(request.toUser!)
-  );
-  const enhancedReceivedUsers = requests.received.map(
-    (request: { fromUser: any }) => extendPublicUser(request.fromUser!)
-  );
-  const enhancedRecs = recommendations.map(extendPublicUser);
-  const enhancedFavs = favorites.map(extendPublicUser);
-  useEffect(() => {
-    if (user && user.role !== "VIEWER") {
-      // update filter params
-      setFilters((prev) => ({
-        ...prev,
-        startDate: user.coopStartDate ? user.coopStartDate : prev.startDate,
-        endDate: user.coopEndDate ? user.coopEndDate : prev.endDate,
-        daysWorking: user.daysWorking,
-      }));
-    }
-  }, [user]);
-
-  useEffect(() => {
-    // Map initialization
-    if (!isMapInitialized.current && user && mapContainerRef.current) {
-      isMapInitialized.current = true;
-      const isViewer = user.role === "VIEWER";
-      const neuLat = 42.33907;
-      const neuLng = -71.088748;
-      const newMap = new mapboxgl.Map({
-        container: "map",
-        style: "mapbox://styles/mapbox/light-v10",
-        center: isViewer
-          ? [neuLng, neuLat]
-          : [user.companyCoordLng, user.companyCoordLat],
-        zoom: 8,
-      });
-
-      newMap.on("load", () => {
-        newMap.setMaxZoom(13);
-        setMapState(newMap);
-        addMapEvents(newMap, user, setPopupUsers);
-
-        // Initial setting of user and company locations
-        if (user.role !== "VIEWER") {
-          updateUserLocation(newMap, user.startCoordLng, user.startCoordLat);
-          updateCompanyLocation(
-            newMap,
-            user.companyCoordLng,
-            user.companyCoordLat,
-            user.role,
-            user.id,
-            true
-          );
+            if (user.role === "RIDER") {
+                setPoints([
+                    [clickedUser.startCoordLng, clickedUser.startCoordLat],
+                    [userStartLng, userStartLat],
+                    [userCompanyLng, userCompanyLat],
+                    [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
+                ]);
+            } else if (isViewerAddressSelected || user.role == "DRIVER") {
+                setPoints([
+                    [userStartLng, userStartLat],
+                    [clickedUser.startCoordLng, clickedUser.startCoordLat],
+                    [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
+                    [userCompanyLng, userCompanyLat],
+                ]);
+            } else {
+                setPoints([
+                    [clickedUser.startCoordLng, clickedUser.startCoordLat],
+                    [clickedUser.companyCoordLng, clickedUser.companyCoordLat],
+                ]);
+            }
+            viewRoute(viewProps);
+        },
+        [
+            geoJsonUsers,
+            selectedUserId,
+            companyAddressSelected,
+            startAddressSelected,
+            mapState,
+            mapStateLoaded,
+            tempOtherUser,
+            tempOtherUserMarkerActive,
+        ]
+    );
+    const enhancedSentUsers = requests.sent.map((request: { toUser: any }) => extendPublicUser(request.toUser!));
+    const enhancedReceivedUsers = requests.received.map((request: { fromUser: any }) =>
+        extendPublicUser(request.fromUser!)
+    );
+    const enhancedRecs = recommendations.map(extendPublicUser);
+    const enhancedFavs = favorites.map(extendPublicUser);
+    useEffect(() => {
+        if (user && user.role !== "VIEWER") {
+            // update filter params
+            setFilters((prev) => ({
+                ...prev,
+                startDate: user.coopStartDate ? user.coopStartDate : prev.startDate,
+                endDate: user.coopEndDate ? user.coopEndDate : prev.endDate,
+                daysWorking: user.daysWorking,
+            }));
         }
-        setMapStateLoaded(true);
-      });
-    }
-  }, [mapContainerRef, user]);
+    }, [user]);
+
+    useEffect(() => {
+        // Map initialization
+        if (!isMapInitialized.current && user && mapContainerRef.current) {
+            isMapInitialized.current = true;
+            const isViewer = user.role === "VIEWER";
+            const neuLat = 42.33907;
+            const neuLng = -71.088748;
+            const newMap = new mapboxgl.Map({
+                container: "map",
+                style: "mapbox://styles/mapbox/light-v10",
+                center: isViewer ? [neuLng, neuLat] : [user.companyCoordLng, user.companyCoordLat],
+                zoom: 8,
+            });
+
+            newMap.on("load", () => {
+                newMap.setMaxZoom(13);
+                setMapState(newMap);
+                addMapEvents(newMap, user, setPopupUsers);
+
+                // Initial setting of user and company locations
+                if (user.role !== "VIEWER") {
+                    updateUserLocation(newMap, user.startCoordLng, user.startCoordLat);
+                    updateCompanyLocation(newMap, user.companyCoordLng, user.companyCoordLat, user.role, user.id, true);
+                }
+                setMapStateLoaded(true);
+            });
+        }
+    }, [mapContainerRef, user]);
 
-  useEffect(() => {
-    if (mapState && geoJsonUsers && mapStateLoaded) {
-      updateGeoJsonUsers(mapState, geoJsonUsers);
-    }
-  }, [mapState, geoJsonUsers, mapStateLoaded]);
-
-  // separate use effect for user location rendering
-  useEffect(() => {
-    if (mapStateLoaded && mapState && user) {
-      if (user.role === "VIEWER") {
-        updateUserLocation(
-          mapState,
-          startAddressSelected.center[0],
-          startAddressSelected.center[1]
-        );
-        updateCompanyLocation(
-          mapState,
-          companyAddressSelected.center[0],
-          companyAddressSelected.center[1],
-          Role.VIEWER,
-          user.id,
-          true
-        );
-      }
-      if (otherUser) {
-        onViewRouteClick(user, otherUser);
-      }
-    }
-  }, [
-    companyAddressSelected,
-    mapState,
-    mapStateLoaded,
-    onViewRouteClick,
-    otherUser,
-    startAddressSelected,
-    user,
-  ]);
-  useEffect(() => {
-    setSelectedUserId(null);
-  }, [sidebarType]);
-
-  // initial route rendering
-  useEffect(() => {
-    if (
-      user &&
-      !otherUser &&
-      mapState &&
-      mapStateLoaded &&
-      (user.role !== "VIEWER" ||
-        (startAddressSelected.center[0] !== 0 &&
-          companyAddressSelected.center[0] !== 0))
-    ) {
-      let userCoord = {
-        startLat: user.startCoordLat,
-        startLng: user.startCoordLng,
-        endLat: user.companyCoordLat,
-        endLng: user.companyCoordLng,
-      };
-      if (user.role == "VIEWER") {
-        userCoord = {
-          startLng: startAddressSelected.center[0],
-          startLat: startAddressSelected.center[1],
-          endLng: companyAddressSelected.center[0],
-          endLat: companyAddressSelected.center[1],
-        };
-      }
-      if (tempOtherUserMarkerActive && tempOtherUser) {
-        updateCompanyLocation(
-          mapState,
-          tempOtherUser.companyCoordLng,
-          tempOtherUser.companyCoordLat,
-          tempOtherUser.role,
-          tempOtherUser.id,
-          false,
-          true
-        );
-        setTempOtherUserMarkerActive(false);
-        setTempOtherUser(null);
-      }
-      const viewProps = {
+    useEffect(() => {
+        if (mapState && geoJsonUsers && mapStateLoaded) {
+            updateGeoJsonUsers(mapState, geoJsonUsers);
+        }
+    }, [mapState, geoJsonUsers, mapStateLoaded]);
+
+    // separate use effect for user location rendering
+    useEffect(() => {
+        if (mapStateLoaded && mapState && user) {
+            if (user.role === "VIEWER") {
+                updateUserLocation(mapState, startAddressSelected.center[0], startAddressSelected.center[1]);
+                updateCompanyLocation(
+                    mapState,
+                    companyAddressSelected.center[0],
+                    companyAddressSelected.center[1],
+                    Role.VIEWER,
+                    user.id,
+                    true
+                );
+            }
+            if (otherUser) {
+                onViewRouteClick(user, otherUser);
+            }
+        }
+    }, [companyAddressSelected, mapState, mapStateLoaded, onViewRouteClick, otherUser, startAddressSelected, user]);
+    useEffect(() => {
+        setSelectedUserId(null);
+    }, [sidebarType]);
+
+    // initial route rendering
+    useEffect(() => {
+        if (
+            user &&
+            !otherUser &&
+            mapState &&
+            mapStateLoaded &&
+            (user.role !== "VIEWER" || (startAddressSelected.center[0] !== 0 && companyAddressSelected.center[0] !== 0))
+        ) {
+            let userCoord = {
+                startLat: user.startCoordLat,
+                startLng: user.startCoordLng,
+                endLat: user.companyCoordLat,
+                endLng: user.companyCoordLng,
+            };
+            if (user.role == "VIEWER") {
+                userCoord = {
+                    startLng: startAddressSelected.center[0],
+                    startLat: startAddressSelected.center[1],
+                    endLng: companyAddressSelected.center[0],
+                    endLat: companyAddressSelected.center[1],
+                };
+            }
+            if (tempOtherUserMarkerActive && tempOtherUser) {
+                updateCompanyLocation(
+                    mapState,
+                    tempOtherUser.companyCoordLng,
+                    tempOtherUser.companyCoordLat,
+                    tempOtherUser.role,
+                    tempOtherUser.id,
+                    false,
+                    true
+                );
+                setTempOtherUserMarkerActive(false);
+                setTempOtherUser(null);
+            }
+            const viewProps = {
+                user,
+                otherUser: undefined,
+                map: mapState,
+                userCoord,
+            };
+
+            // Set initial points for directions or route viewing
+            setPoints([
+                [userCoord.startLng, userCoord.startLat],
+                [userCoord.endLng, userCoord.endLat],
+            ]);
+            viewRoute(viewProps);
+        }
+    }, [
+        companyAddressSelected,
+        mapState,
+        mapStateLoaded,
+        otherUser,
+        startAddressSelected,
         user,
-        otherUser: undefined,
-        map: mapState,
-        userCoord,
-      };
-
-      // Set initial points for directions or route viewing
-      setPoints([
-        [userCoord.startLng, userCoord.startLat],
-        [userCoord.endLng, userCoord.endLat],
-      ]);
-      viewRoute(viewProps);
+        tempOtherUser,
+        tempOtherUserMarkerActive,
+    ]);
+    useSearch({
+        value: companyAddress,
+        type: "address%2Cpostcode",
+        setFunc: setCompanyAddressSuggestions,
+    });
+
+    useSearch({
+        value: startingAddress,
+        type: "address%2Cpostcode",
+        setFunc: setStartAddressSuggestions,
+    });
+    useGetDirections({ points: points, map: mapState! });
+
+    if (!user) {
+        return <Spinner />;
     }
-  }, [
-    companyAddressSelected,
-    mapState,
-    mapStateLoaded,
-    otherUser,
-    startAddressSelected,
-    user,
-    tempOtherUser,
-    tempOtherUserMarkerActive,
-  ]);
-  useSearch({
-    value: companyAddress,
-    type: "address%2Cpostcode",
-    setFunc: setCompanyAddressSuggestions,
-  });
-
-  useSearch({
-    value: startingAddress,
-    type: "address%2Cpostcode",
-    setFunc: setStartAddressSuggestions,
-  });
-  useGetDirections({ points: points, map: mapState! });
-
-  if (!user) {
-    return <Spinner />;
-  }
-
-  const viewerBox = (
-    <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}
-          alt="start"
-          width={32}
-          height={32}
-        />
-        <AddressCombobox
-          name="startAddress"
-          placeholder="Enter start address"
-          addressSelected={startAddressSelected}
-          addressSetter={setStartAddressSelected}
-          addressSuggestions={startAddressSuggestions}
-          addressUpdater={updateStartingAddress}
-          className="flex-1"
-        />
-      </div>
-
-      <div className="mt-4 flex items-center space-x-4">
-        <Image
-          className="h-8 w-8 "
-          alt="end"
-          src={BlueSquare}
-          width={32}
-          height={42}
-        />
-        <AddressCombobox
-          name="companyAddress"
-          placeholder="Enter company address"
-          addressSelected={companyAddressSelected}
-          addressSetter={setCompanyAddressSelected}
-          addressSuggestions={companyAddressSuggestions}
-          addressUpdater={updateCompanyAddress}
-          className="flex-1 "
-        />
-      </div>
-      <div className="flex items-center space-x-4">
-        <VisibilityToggle
-          map={mapState}
-          style={{
-            width: "100%",
-            marginTop: "20px",
-            backgroundColor: "white",
-            borderRadius: "8px",
-            borderColor: "black",
-          }}
-        />
-      </div>
-    </div>
-  );
-  return (
-    <>
-      <UserContext.Provider value={user}>
-        <ToastProvider
-          placement="top-right"
-          autoDismiss={true}
-          newestOnTop={true}
-        >
-          <Head>
-            <title>CarpoolNU</title>
-          </Head>
-          <div className="m-0 h-full max-h-screen w-full">
-            <Header
-              data={{
-                sidebarValue: sidebarType,
-                setSidebar: setSidebarType,
-                disabled: user.status === "INACTIVE" && user.role !== "VIEWER",
-              }}
-            />
-            <div className="flex h-[91.5%] overflow-hidden">
-              <div className="w-[25rem]  ">
-                {mapState && (
-                  <SidebarPage
-                    setSort={setSort}
-                    sort={sort}
-                    setFilters={setFilters}
-                    filters={filters}
-                    defaultFilters={defaultFilters}
-                    sidebarType={sidebarType}
-                    role={user.role}
+
+    const viewerBox = (
+        <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} alt="start" width={32} height={32} />
+                <AddressCombobox
+                    name="startAddress"
+                    placeholder="Enter start address"
+                    addressSelected={startAddressSelected}
+                    addressSetter={setStartAddressSelected}
+                    addressSuggestions={startAddressSuggestions}
+                    addressUpdater={updateStartingAddress}
+                    className="flex-1"
+                />
+            </div>
+
+            <div className="mt-4 flex items-center space-x-4">
+                <Image className="h-8 w-8 " alt="end" src={BlueSquare} width={32} height={42} />
+                <AddressCombobox
+                    name="companyAddress"
+                    placeholder="Enter company address"
+                    addressSelected={companyAddressSelected}
+                    addressSetter={setCompanyAddressSelected}
+                    addressSuggestions={companyAddressSuggestions}
+                    addressUpdater={updateCompanyAddress}
+                    className="flex-1 "
+                />
+            </div>
+            <div className="flex items-center space-x-4">
+                <VisibilityToggle
                     map={mapState}
-                    recs={enhancedRecs}
-                    favs={enhancedFavs}
-                    received={enhancedReceivedUsers}
-                    sent={enhancedSentUsers}
-                    onViewRouteClick={onViewRouteClick}
-                    onUserSelect={handleUserSelect}
-                    selectedUser={selectedUser}
-                  />
-                )}
-              </div>
-
-              <button
-                className="absolute bottom-[150px] right-[8px] z-10 flex h-8 w-8 items-center justify-center rounded-md border-2 border-solid border-gray-300 bg-white shadow-sm hover:bg-gray-200"
-                id="fly"
-              >
-                <RiFocus3Line />
-              </button>
-              <div className="relative flex-auto">
-                {/* Message Panel */}
-                {selectedUser && (
-                  <div className=" pointer-events-none absolute inset-0 z-10 h-full w-full">
-                    <MessagePanel
-                      selectedUser={selectedUser}
-                      onMessageSent={handleMessageSent}
-                      onViewRouteClick={onViewRouteClick}
-                      onCloseConversation={handleUserSelect}
-                    />
-                  </div>
-                )}
-
-                {/* Map Container */}
-                <div
-                  ref={mapContainerRef}
-                  id="map"
-                  className="pointer-events-auto relative  z-0 h-full w-full flex-auto"
-                >
-                  {user.role === "VIEWER" && viewerBox}
-                  <MapLegend role={user.role} />
-                  <MapConnectPortal
-                    otherUsers={popupUsers}
-                    extendUser={extendPublicUser}
-                    onViewRouteClick={onViewRouteClick}
-                    onViewRequest={handleUserSelect}
-                    onClose={() => {
-                      setPopupUsers(null);
+                    style={{
+                        width: "100%",
+                        marginTop: "20px",
+                        backgroundColor: "white",
+                        borderRadius: "8px",
+                        borderColor: "black",
                     }}
-                  />
-                  {user.status === "INACTIVE" && user.role !== "VIEWER" && (
-                    <InactiveBlocker />
-                  )}
-                </div>
-              </div>
+                />
             </div>
-          </div>
-        </ToastProvider>
-      </UserContext.Provider>
-    </>
-  );
+        </div>
+    );
+    return (
+        <>
+            <UserContext.Provider value={user}>
+                <ToastProvider placement="top-right" autoDismiss={true} newestOnTop={true}>
+                    <Head>
+                        <title>CarpoolNU</title>
+                    </Head>
+                    <div className="m-0 h-full max-h-screen w-full">
+                        <Header
+                            data={{
+                                sidebarValue: sidebarType,
+                                setSidebar: setSidebarType,
+                                disabled: user.status === "INACTIVE" && user.role !== "VIEWER",
+                            }}
+                        />
+                        <div className="flex h-[91.5%] overflow-hidden">
+                            <div className="w-[25rem]">
+                                {mapState && (
+                                    <SidebarPage
+                                        setSort={setSort}
+                                        sort={sort}
+                                        setFilters={setFilters}
+                                        filters={filters}
+                                        defaultFilters={defaultFilters}
+                                        sidebarType={sidebarType}
+                                        role={user.role}
+                                        map={mapState}
+                                        recs={enhancedRecs}
+                                        favs={enhancedFavs}
+                                        received={enhancedReceivedUsers}
+                                        sent={enhancedSentUsers}
+                                        onViewRouteClick={onViewRouteClick}
+                                        onUserSelect={handleUserSelect}
+                                        selectedUser={selectedUser}
+                                    />
+                                )}
+                            </div>
+
+                            <button
+                                className="absolute bottom-[150px] right-[8px] z-10 flex h-8 w-8 items-center justify-center rounded-md border-2 border-solid border-gray-300 bg-white shadow-sm hover:bg-gray-200"
+                                id="fly"
+                            >
+                                <RiFocus3Line />
+                            </button>
+                            <div className="relative flex-auto">
+                                {/* Message Panel */}
+                                {selectedUser && (
+                                    <div className=" pointer-events-none absolute inset-0 z-10 h-full w-full">
+                                        <MessagePanel
+                                            selectedUser={selectedUser}
+                                            onMessageSent={handleMessageSent}
+                                            onViewRouteClick={onViewRouteClick}
+                                            onCloseConversation={handleUserSelect}
+                                        />
+                                    </div>
+                                )}
+
+                                {/* Map Container */}
+                                <div
+                                    ref={mapContainerRef}
+                                    id="map"
+                                    className="pointer-events-auto relative  z-0 h-full w-full flex-auto"
+                                >
+                                    {user.role === "VIEWER" && viewerBox}
+                                    <MapLegend role={user.role} />
+                                    <MapConnectPortal
+                                        otherUsers={popupUsers}
+                                        extendUser={extendPublicUser}
+                                        onViewRouteClick={onViewRouteClick}
+                                        onViewRequest={handleUserSelect}
+                                        onClose={() => {
+                                            setPopupUsers(null);
+                                        }}
+                                    />
+                                    {user.status === "INACTIVE" && user.role !== "VIEWER" && <InactiveBlocker />}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ToastProvider>
+            </UserContext.Provider>
+        </>
+    );
 };
 
 export default Home;
diff --git a/src/server/router/mapbox.ts b/src/server/router/mapbox.ts
index 80e50a2..cb6e4c6 100644
--- a/src/server/router/mapbox.ts
+++ b/src/server/router/mapbox.ts
@@ -5,7 +5,7 @@ import { Feature, FeatureCollection } from "geojson";
 import { serverEnv } from "../../utils/env/server";
 import { Role, Status } from "@prisma/client";
 import { DirectionsResponse } from "../../utils/types";
-import { roundCoord } from "../../utils/publicUser";
+import { convertToPublic, roundCoord } from "../../utils/publicUser";
 import _ from "lodash";
 import { calculateScore } from "../../utils/recommendation";
 
@@ -113,8 +113,10 @@ export const mapboxRouter = router({
       const finalUsers =
         calcUser.role === Role.VIEWER ? sortedUsers : sortedUsers.slice(0, 150);
 
+      const finalUsersasPublic = finalUsers.map(user => convertToPublic(user))
+
       // creates points for each user with coordinates at company location
-      const features: Feature[] = finalUsers.map((u) => {
+      const features: Feature[] = finalUsersasPublic.map((u) => {
         return {
           type: "Feature" as "Feature",
           geometry: {
diff --git a/src/utils/map/viewRoute.ts b/src/utils/map/viewRoute.ts
index 314199e..27f7610 100644
--- a/src/utils/map/viewRoute.ts
+++ b/src/utils/map/viewRoute.ts
@@ -79,8 +79,8 @@ export const viewRoute = (props: ViewRouteProps) => {
       element: otherRole === "Rider" ? orangeStart : redStart,
     })
       .setLngLat([
-        props.otherUser.startPOICoordLng,
-        props.otherUser.startPOICoordLat,
+        props.otherUser.startCoordLng,
+        props.otherUser.startCoordLat,
       ])
       .setPopup(otherUserStartPopup)
       .addTo(props.map);
@@ -97,19 +97,19 @@ export const viewRoute = (props: ViewRouteProps) => {
     previousMarkers.push(otherUserStartMarker);
     previousMarkers.push(otherUserEndPopup);
     minLng = Math.min(
-      props.otherUser.startPOICoordLng,
+      props.otherUser.startCoordLng,
       props.otherUser.companyCoordLng
     );
     minLat = Math.min(
-      props.otherUser.startPOICoordLat,
+      props.otherUser.startCoordLat,
       props.otherUser.companyCoordLat
     );
     maxLng = Math.max(
-      props.otherUser.startPOICoordLng,
+      props.otherUser.startCoordLng,
       props.otherUser.companyCoordLng
     );
     maxLat = Math.max(
-      props.otherUser.startPOICoordLat,
+      props.otherUser.startCoordLat,
       props.otherUser.companyCoordLat
     );
   }
diff --git a/src/utils/publicUser.ts b/src/utils/publicUser.ts
index 7c76f11..641b152 100644
--- a/src/utils/publicUser.ts
+++ b/src/utils/publicUser.ts
@@ -2,6 +2,7 @@ import { User } from "@prisma/client";
 import { TRPCError } from "@trpc/server";
 import { serverEnv } from "./env/server";
 import { PublicUser, PoiData } from "./types";
+import { start } from "repl";
 
 /**
  * Converts the given ``User`` to a ``PublicUser``, as to hide sensitive data.
@@ -10,6 +11,13 @@ import { PublicUser, PoiData } from "./types";
  * @returns non-sensitive information about a user.
  */
 export const convertToPublic = (user: User): PublicUser => {
+  const cleanAddress = (address: string) => {
+    const startAddressAsList = user.startAddress.split(', ');
+    const cleanedAddress = startAddressAsList.length == 4 ? startAddressAsList[1] : start.length === 3 ? startAddressAsList[0] : "Exact Location Unavailable";
+    return cleanedAddress;
+
+  }
+
   return {
     id: user.id,
     name: user.name,
@@ -27,9 +35,9 @@ export const convertToPublic = (user: User): PublicUser => {
     endTime: user.endTime,
     coopEndDate: user.coopEndDate,
     coopStartDate: user.coopStartDate,
-    startPOILocation: user.startPOILocation,
-    startPOICoordLng: user.startPOICoordLng,
-    startPOICoordLat: user.startPOICoordLat,
+    startAddress: cleanAddress(user.startAddress),
+    startCoordLng: user.startCoordLng,
+    startCoordLat: user.startCoordLat,
     companyAddress: user.companyAddress,
     companyCoordLng: user.companyCoordLng,
     companyCoordLat: user.companyCoordLat,
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 40ffef7..4fe49d3 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -117,9 +117,9 @@ export type PublicUser = {
   status: Status;
   seatAvail: number;
   companyName: string;
-  startPOILocation: string;
-  startPOICoordLng: number;
-  startPOICoordLat: number;
+  startAddress: string;
+  startCoordLng: number;
+  startCoordLat: number;
   companyAddress: string;
   companyCoordLng: number;
   companyCoordLat: number;