JIP-20 Filter posts by location

packages/client/src/pages/home/map.tsx

@@ -7,7 +7,8 @@ import {
 } from "@react-google-maps/api";
 import { CSSProperties } from "@material-ui/styles";
 import { Libraries } from "@react-google-maps/api/dist/utils/make-load-script-url";
-import { Location, setLocation } from "../../redux/slices/location-slice";
+import { Location } from "../../redux/slices/location-slice";
+import { setLocationFilter } from "../../redux/slices/post-slice";
 import REACT_APP_GOOGLE_API_KEY from "../../env";
 import styled from "styled-components";
 import { useAppDispatch, useAppSelector } from "../../redux/store";
@@ -58,15 +59,15 @@ const onAutoCompleteLoad = (autocomplete: any) => {
 
 const Map = () => {
   const dispatch = useAppDispatch();
-  const location = useAppSelector((state) => state.location);
+  const location = useAppSelector((state) => state.post.locationFilter);
   const updateStore = async (
     lat: number,
     lon: number,
     newName: string | undefined,
   ) => {
     try {
       const response = await dispatch(
-        setLocation({
+        setLocationFilter({
           name: newName !== undefined ? newName : name,
           lat: lat,
           lon: lon,
@@ -84,9 +85,12 @@ const Map = () => {
     lat: location.lat,
     lng: location.lon,
   });
+
   const [name, setName] = React.useState(location.name);
 
   if (initialLocation === undefined) {
+    // TODO: this block is causing getPostsByFilter to be called twice when the page is refreshed
+    // Another issue: user location is fetched here AND in post-slice
     navigator.geolocation.getCurrentPosition(function (position) {
       initialLocation = {
         lat: position.coords.latitude,

packages/client/src/pages/home/post-list/post-list.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect } from "react";
+import { connect } from "react-redux";
 import styled from "styled-components";
 import { useAppDispatch, useAppSelector } from "../../../redux/store";
 import PostListItem from "./post-list-item";
-import { getPosts, PostSortType } from "../../../redux/slices/post-slice";
+import {
+  getPostsByFilter,
+  PostSortType,
+} from "../../../redux/slices/post-slice";
 
 const StyledContainer = styled.div`
   display: flex;
@@ -30,13 +34,16 @@ const PostList: React.FC = () => {
       default:
         console.log("damn wtf");
     }
-
     return result;
   });
 
+  const postState = useAppSelector((state) => state.post);
+
+  const location = useAppSelector((state) => state.post.locationFilter);
+
   useEffect(() => {
-    dispatch(getPosts());
-  }, [dispatch]);
+    dispatch(getPostsByFilter(postState));
+  }, [location]);
 
   return (
     <StyledContainer>

packages/client/src/redux/slices/post-slice.ts

@@ -1,16 +1,25 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import postService from "../../services/posts";
-import { Location } from "./location-slice";
+import { Location, initialState as initialLocation } from "./location-slice";
 import { UserState } from "./user-slice";
 
 const prefix = "post";
 
+type Comment = {
+  _id: string;
+  date: string;
+  numUpVotes: number;
+  numDownvotes: number;
+  userId: string;
+  username: string;
+};
+
 export interface Post extends NewPost {
   _id: string;
   numUpvotes: number;
   numDownvotes: number;
   date: string;
-  comments: string[];
+  comments: Comment[];
   username: string;
 }
 
@@ -27,22 +36,28 @@ export enum PostSortType {
   NEW = "new",
 }
 
-type PostState = {
+export type PostState = {
   posts: Post[];
   sortType: PostSortType;
   locationFilter: Location;
   tagFilter?: string;
   currentPostID?: string;
 };
 
+let locationFilter: Location = initialLocation;
+
+navigator.geolocation.getCurrentPosition(function (position) {
+  locationFilter = {
+    lat: position.coords.latitude,
+    lon: position.coords.longitude,
+    name: undefined,
+  };
+});
+
 const initialState: PostState = {
   posts: [],
   sortType: PostSortType.POPULAR,
-  locationFilter: {
-    name: "Vancouver",
-    lat: 49.26,
-    lon: -123.22,
-  },
+  locationFilter: locationFilter,
 };
 
 export const createPost = createAsyncThunk<Post, NewPost>(
@@ -63,7 +78,18 @@ export const getPosts = createAsyncThunk<Post[]>(
   async (_, { rejectWithValue }) => {
     try {
       const response = await postService.getAll();
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error);
+    }
+  },
+);
 
+export const getPostsByFilter = createAsyncThunk<Post[], PostState>(
+  `${prefix}/getPostsByFilter`,
+  async (postState: PostState, { rejectWithValue }) => {
+    try {
+      const response = await postService.getPostsByFilter(postState);
       return response.data;
     } catch (error) {
       return rejectWithValue(error);
@@ -142,6 +168,12 @@ export const postSlice = createSlice({
     builder.addCase(getPosts.rejected, (state, action) => {
       return { ...initialState };
     });
+    builder.addCase(getPostsByFilter.fulfilled, (state, action) => {
+      state.posts = action.payload;
+    });
+    builder.addCase(getPostsByFilter.rejected, (state, action) => {
+      return { ...initialState };
+    });
     builder.addCase(createPost.fulfilled, (state, action) => {
       state.posts.push(action.payload);
     });

packages/client/src/services/posts.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { NewPost, Post } from "../redux/slices/post-slice";
+import { NewPost, Post, PostState } from "../redux/slices/post-slice";
 
 const baseUrl = "/api/posts";
 
@@ -21,6 +21,20 @@ const getAll = async () => {
   return response;
 };
 
+const getPostsByFilter = async (postState: PostState) => {
+  const { posts, sortType, locationFilter, tagFilter, currentPostID } =
+    postState;
+  const response = await axios.get(
+    `${baseUrl}?` +
+      `sort=${sortType}&` +
+      `lat=${locationFilter.lat}&` +
+      `lon=${locationFilter.lon}&` +
+      `tag=${tagFilter}&` +
+      `id=${currentPostID}`,
+  );
+  return response;
+};
+
 const getByID = async (id: string) => {
   const response = await axios.get(`${baseUrl}/${id}`);
   return response;
@@ -39,6 +53,7 @@ const deleteByID = async (id: string) => {
 const postService = {
   create,
   getAll,
+  getPostsByFilter,
   getByID,
   update,
   deleteByID,

packages/server/setup/datagen.js

@@ -201,7 +201,7 @@ class DataGenerator {
     const rawLocations = fs.readFileSync(this.locationPath);
     this.mockLocations = JSON.parse(rawLocations).map((location) => ({
       type: "Point",
-      coordinates: [location.lat, location.lng],
+      coordinates: [location.lng, location.lat],
     }));
     const rawComments = fs.readFileSync(this.commentsPath);
     this.mockComments = JSON.parse(rawComments);