Added drop off estimation times via the mapbox API

[Duckierstone42]

No description provided.

[netlify]

✅ Deploy Preview for able-alliance ready!

Name	Link
🔨 Latest commit	b47eea2
🔍 Latest deploy log	https://app.netlify.com/projects/able-alliance/deploys/69d45b9ff968e300079a3843
😎 Deploy Preview	https://deploy-preview-68--able-alliance.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR adds estimated dropoff times to ride cards by calling the Mapbox Directions API server-side at route creation time, persisting the result in MongoDB, and displaying it in RideCard and the ride detail page. The backend integration (src/server/mapbox.ts, RouteAction.ts, RouteModel.ts) is clean and degrades gracefully when MAPBOX_TOKEN is absent.

• P1: The map in src/app/rides/[id]/page.tsx always places markers at hardcoded Georgia Tech campus coordinates because locations state stores only id→name strings — the correct lat/lng from the fetched locations is never used, so the map is misleading for any actual route.
• P1: A duplicate fetchLocations useEffect (lines 333–352) is a verbatim copy of the one at lines 180–199, causing /api/locations to be called twice on every route state update.

Confidence Score: 3/5

Not safe to merge — two P1 defects introduced in the new ride detail page: the map always renders wrong hardcoded coordinates, and locations are fetched twice on every route update.

Score of 3 reflects two concrete functional bugs on the primary changed path. The backend Mapbox integration is solid, but the frontend rendering of both the map and the duplicate effect need to be fixed before this is ready to ship.

src/app/rides/[id]/page.tsx needs the most attention — remove the duplicate fetchLocations effect and update the map to read actual lat/lng from the fetched location objects rather than hardcoded defaults.

Important Files Changed

Filename	Overview
src/server/mapbox.ts	New Mapbox Directions API helper; clean implementation with graceful null returns and proper error handling
src/server/db/actions/RouteAction.ts	Calls getMapboxTravelDuration at route creation to compute and store estimatedDropoffTime; integration is correct
src/server/db/models/RouteModel.ts	Adds optional estimatedDropoffTime Date field to schema and document interface; change is correct and backward-compatible
src/utils/types/index.ts	Adds estimatedDropoffTime as optional coerced date to routeSchema; createRouteSchema correctly omits it (computed server-side)
src/app/rides/[id]/page.tsx	Two P1 bugs: duplicate fetchLocations effect causes double API calls; map markers always use hardcoded GT campus coordinates instead of actual route locations
src/app/rides/RideCard.tsx	Displays estimatedDropoffTime as dropoff time; hardcoded hex colors in getStudentStatusChipStyle violate project color-variable convention
src/app/rides/page.tsx	Route type updated to include optional estimatedDropoffTime; no issues introduced
src/app/rides/styles.module.css	Hardcoded #183777 and #0f2452 on .requestRideButton violate project CSS variable convention
src/app/rides/[id]/styles.module.css	Generally uses CSS variables throughout; one hardcoded #000 in .pageTitle should use var(--color-grey-text-strong)
scripts/seed.ts	Seed script now calls getMapboxTravelDuration to compute and store estimatedDropoffTime for seeded routes
.env.example	Adds NEXT_PUBLIC_MAPBOX_TOKEN and MAPBOX_TOKEN to env template with clear comments distinguishing public vs. secret tokens
src/app/globals.css	No significant changes; minor formatting cleanup
netlify.toml	No relevant changes to the Mapbox or ride estimation feature

Sequence Diagram

sequenceDiagram
    participant C as Client (Browser)
    participant S as Next.js Server
    participant MB as Mapbox Directions API
    participant DB as MongoDB

    C->>S: POST /api/routes (pickup, dropoff, scheduledPickupTime)
    S->>DB: findById(pickupLocation)
    DB-->>S: pickupLoc {lat, lng}
    S->>DB: findById(dropoffLocation)
    DB-->>S: dropoffLoc {lat, lng}
    S->>MB: GET /directions/v5 (coords + depart_at)
    MB-->>S: { routes[0].duration } or error
    S->>DB: RouteModel.create({ ..., estimatedDropoffTime })
    DB-->>S: saved route
    S-->>C: route JSON (with estimatedDropoffTime)

    C->>S: GET /api/routes/:id
    S->>DB: RouteModel.findById(id)
    DB-->>S: route (with estimatedDropoffTime)
    S-->>C: route JSON
    C->>C: Display estimatedDropoffTime in RideCard

Loading

Comments Outside Diff (5)

1. src/app/rides/[id]/page.tsx, line 333-352 (link)

   Duplicate fetchLocations effect causes double API calls

   Lines 333–352 are an exact copy of the fetchLocations effect at lines 180–199, and both are triggered by the same [route] dependency. Every time route is set, /api/locations is fetched twice in quick succession. The comment // Fetch locations (original - keep for backward compatibility) strongly suggests this block was accidentally left in during development. The second block should be removed entirely.

2. src/app/rides/[id]/page.tsx, line 217-231 (link)

   Map markers always display hardcoded GT campus coordinates

   The locations state is Record<string, string> (id → name only), so there are no coordinates available from it. pickup and dropoff objects are always assigned the hardcoded defaultPickup/defaultDropoff fallback values (33.7756, -84.4027 and 33.7767, -84.3891) regardless of the actual route locations. Every ride will show the same two fixed pins on the map. To fix this, fetch full location objects (including latitude/longitude) and use them to position the markers.

3. src/app/rides/styles.module.css, line 80-87 (link)

   Hardcoded hex colors should use CSS variables

   #183777 and #0f2452 are hardcoded in .requestRideButton and .requestRideButton:hover. Use the appropriate CSS color variables from the global stylesheet instead of raw hex values to stay consistent with the rest of the project.

   Rule Used: Use color variables from the global stylesheet (`s... (source)

   Learnt From
   GTBitsOfGood/design-system#61

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

4. src/app/rides/[id]/styles.module.css, line 37 (link)

   Hardcoded #000 should use a CSS variable

   .pageTitle uses color: #000 directly. The rest of this file consistently uses CSS variables — replace this with var(--color-grey-text-strong) (already used for the same purpose elsewhere in the file).

   Rule Used: Use color variables from the global stylesheet (`s... (source)

   Learnt From
   GTBitsOfGood/design-system#61

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

5. src/app/rides/[id]/page.tsx, line 356-362 (link)

   socket read inside effect but omitted from dependency array

   The guard if (socket) { return; } reads the socket state variable, but socket is not in the [showChatModal, route, routeId, session] dependency array. react-hooks/exhaustive-deps will flag this lint error. Consider checking socketRef.current instead, which is a ref (not state) and doesn't need to be a dependency:

_{Reviews (1): Last reviewed commit: "Added drop off estimation times via the ..." | Re-trigger Greptile}