[Sprint 6a]: Location Selector for Unmatched Schools on Upload 📌⚠️ - Jack & Justin

[danglorioso]

💻 Summary

In Sprint 4c, we geocoded schools in MA by matching their name to their corresponding coordinates. To achieve this, we referenced a CSV of MA schools, as well as the database to see if a school already had coordinates. Unfortunately, not all schools in MA could be resolved to their coordinates due to matching issues. In this sprint, you will handle such schools by creating a map popup and forcing users to drop a pin on a map representing each school’s location.

Goals of this sprint:

• By the end of this sprint, the invariant that all schools in the database have a corresponding location (represented w/ coordinates) MUST BE ENFORCED. This is the most important part of this sprint and the heatmap functionality in general.
• In order to commit the upload of data to the database, users must assign every unmatched school a location. If they do not, they cannot push the data to the database.

⚙️ Setup

Before starting:

1. PLEASE: **Pull the latest changes from main: git pull
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Study the existing geocoding implementation & Figma

• In Sprint 4c, Zander, Hansini, and Steven implemented the geocoding logic mentioned above. Study how they formatted their code. It should become clear that this code is executed once the user goes through the entire upload flow. This will need to be changed once you study the Figma.
• The Figma shows that the school matching logic should occur right after the user uploads the spreadsheet (but after the spreadsheet is parsed for errors). Thus, you will have to move the school matching logic to the frontend. This is okay for our intents and purposes because the amount of data that we will be dealing with is relatively small.
• A notable part of this implementation is their error logging for when schools cannot be matched to coordinates. You will replace this with the logic for manually selecting a school’s location on a map.

Step 2: Move the school matching logic from the backend to the frontend

• As previously mentioned, school matching is currently done on the backend. You will have to move it such that it is performed right after the spreadsheet is uploaded and checked for errors.
• You should test this on a separate Neon branch. So, you will want to create a new branch in Neon and use its corresponding DATABASE_URL in your .env file.
• By the end of this step, all the schools that were able to be matched in Sprint 4c should be able to be mapped still.

Step 3: Add unmatched schools to a growing list as the spreadsheet is parsed

• Now, rather than logging an error when a school cannot be matched, you should add the school object to a growing list of unmatched schools. Once the entire spreadsheet is parsed, this is the list that will have to be matched.

Step 4: Implement the map based on the Figma

• You should now design a page with a map according to the Figma designs that takes the list of unmatched schools and allows users to drop pins on the map to assign them locations.
• Take note of the spreadsheet flow in Figma. The school matching logic is now performed before data is pushed to the database. The invariant that should be enforced with this ticket is that no data should be able to be pushed unless all schools are matched with their coordinates.
• Each unmatched school should have its own tab on the page.
• Once a pin is dropped on one of the map tabs, the coordinates in the school object should be updated. If the pin is updated, so too should the coordinates in the object.
• Users cannot advance past this step to confirm the spreadsheet upload until every unmatched school is assigned a location. Doing so is an error that should be reported with toast (search the repo for “toast” to see how this is done).

🙌 Acceptance Criteria

• If a school is in the database, it MUST have associated coordinates
• Each unmatched school has a tab on the matching page
• School matching logic is moved from its current location in the repo
• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma - Tailwind CSS
• shadcn/ui
• npm package manager