JIP-20 Filter posts by location

[srhsrhsrhsrh]

• Added getPostsByFilter to the post-slice which can be built on for tag filter, fetching one post by ID, or possibly sorting in the backend (?)
• Post list updates whenever the map marker is dragged somewhere or the autocomplete value changes
• Datagen had the lat/lon coordinates switched around (found out after adding a bunch of coordinates and then getting longitude/latitude is out of bounds and I guess that makes sense since mongo docs say longitude comes first)
• Also added a bunch of locations by dragging lul

---

• KNOWN ISSUES that aren't noticeable on the frontend but are bad if you think about them:

  • Right now, only getting initial (current) location in one of map.tsx or post-slice.ts runs into a race condition where neither is able to fetch current location at a single place and still ensure that both map and post-list components load correctly... So it looks right, but we're getting the same data in two places
  • getPostsByFilter is called twice when the app reloads because of the way map.tsx gets initial location

• Probably going to log bugs for the issues to look at later but also open to suggestions

[jpfranci]

Ideally we just pass in lat/lon not req.query and it is all converted

[jpfranci]

Wack literally everywhere else its lat first.

[jpfranci]

Should we just keep lat/lon in the store rather than both?

[srhsrhsrhsrh]

I wanted to but I had an issue with needing the map to update the post-list when I tried keeping it in the store 🐵

[dryu99]

Assuming this code block only needs to run once, to address these two issues maybe we could:

• Get rid of the location slice so the current location is only maintained in one place (i.e. in the post-slice).
• Implement an action in the post-slice called initLocation that does sth like

navigator.geolocation.getCurrentPosition(function (position) {
  state.locationFilter = {
    lat: position.coords.latitude,
    lon: position.coords.longitude,
    name: undefined,
  };
});

• Dispatch initLocation in a useEffect hook in HomePage or Map (to avoid redundant calls/renders)
• Or we could just call the above code block in a useEffect hook and set it in the store (no additional action necessary)

We could also keep the location-slice and just have all location-related store logic stay in there (which implies we remove location logic from post-slice)

[srhsrhsrhsrh]

I did it the second way and it fixes most of the problem

Just noticed that we also called getPostsByFilter for the initialLocation, but at least the duplicate requests for the detected location are gone 🐵 🐵

[jpfranci]

axios does query params for you, just pass all of that inside an object with a params field. https://github.com/axios/axios#example

You don't even have to worry about url encoding each component

[jpfranci]

nit: Not sure how I feel about objects in query params. We should prob just separate lat and lon.