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 => { />

- {props.otherUser.startPOILocation} + {props.otherUser.startAddress}

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 => { Start icon

- {props.otherUser.startPOILocation} + {props.otherUser.startAddress}

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 = () => { - 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(null); - const [tempOtherUserMarkerActive, setTempOtherUserMarkerActive] = - useState(false); - const [defaultFilters] = useState(initialFilters); - const [filters, setFilters] = useState(initialFilters); - const [sort, setSort] = useState("any"); - const [debouncedFilters, setDebouncedFilters] = useState(filters); - const [otherUser, setOtherUser] = useState(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(); - const [sidebarType, setSidebarType] = useState("explore"); - const [popupUsers, setPopupUsers] = useState(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({ - place_name: "", - center: [0, 0], + + const [tempOtherUser, setTempOtherUser] = useState(null); + const [tempOtherUserMarkerActive, setTempOtherUserMarkerActive] = useState(false); + const [defaultFilters] = useState(initialFilters); + const [filters, setFilters] = useState(initialFilters); + const [sort, setSort] = useState("any"); + const [debouncedFilters, setDebouncedFilters] = useState(filters); + const [otherUser, setOtherUser] = useState(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({ - 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(); + const [sidebarType, setSidebarType] = useState("explore"); + const [popupUsers, setPopupUsers] = useState(null); + const mapContainerRef = useRef(null); + const [points, setPoints] = useState<[number, number][]>([]); + const [companyAddressSuggestions, setCompanyAddressSuggestions] = useState([]); + const [startAddressSuggestions, setStartAddressSuggestions] = useState([]); + + const [companyAddressSelected, setCompanyAddressSelected] = useState({ + place_name: "", + center: [0, 0], + }); + const [startAddressSelected, setStartAddressSelected] = useState({ + 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(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(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 ; } - }, [ - 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 ; - } - - const viewerBox = ( -
-

Search my route

-
- start - -
- -
- end - -
-
- -
-
- ); - return ( - <> - - - - CarpoolNU - -
-
-
-
- {mapState && ( - +

Search my route

+
+ start + +
+ +
+ end + +
+
+ - )} -
- - -
- {/* Message Panel */} - {selectedUser && ( -
- -
- )} - - {/* Map Container */} -
- {user.role === "VIEWER" && viewerBox} - - { - setPopupUsers(null); + style={{ + width: "100%", + marginTop: "20px", + backgroundColor: "white", + borderRadius: "8px", + borderColor: "black", }} - /> - {user.status === "INACTIVE" && user.role !== "VIEWER" && ( - - )} -
-
+ />
-
- - - - ); +
+ ); + return ( + <> + + + + CarpoolNU + +
+
+
+
+ {mapState && ( + + )} +
+ + +
+ {/* Message Panel */} + {selectedUser && ( +
+ +
+ )} + + {/* Map Container */} +
+ {user.role === "VIEWER" && viewerBox} + + { + setPopupUsers(null); + }} + /> + {user.status === "INACTIVE" && user.role !== "VIEWER" && } +
+
+
+
+
+
+ + ); }; 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;