JIP-20 Filter posts by location (#17)

* getPostsByLocation
* first request is always by initialLocation and needs to be investigated

packages/client/src/pages/example/example.tsx

@@ -1,12 +1,12 @@
 import { unwrapResult } from "@reduxjs/toolkit";
 import React, { useEffect, useState } from "react";
 import {
+  Location,
   createPost,
   getPosts,
   setLocationFilter,
 } from "../../redux/slices/post-slice";
 import { login, signup } from "../../redux/slices/user-slice";
-import { Location } from "../../redux/slices/location-slice";
 import { useAppDispatch, useAppSelector } from "../../redux/store";
 
 const ExamplePage = () => {

packages/client/src/pages/home/action-group/post-dialog.tsx

@@ -59,7 +59,7 @@ const StyledContainer = styled.div`
 
 const PostDialog = ({ open, onClose }: PostDialogProps) => {
   const classes = useStyles();
-  const location = useAppSelector((state) => state.location);
+  const location = useAppSelector((state) => state.post.locationFilter);
   const dispatch = useAppDispatch();
   const [fields, setFields]: [PostDialogFields, any] = useState(DEFAULT_FIELDS);
   const { title, bodyText, tag, isAnonymous, userId } = fields;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   GoogleMap,
   LoadScript,
@@ -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/post-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,10 @@ const Map = () => {
     lat: location.lat,
     lng: location.lon,
   });
+
   const [name, setName] = React.useState(location.name);
 
-  if (initialLocation === undefined) {
+  useEffect(() => {
     navigator.geolocation.getCurrentPosition(function (position) {
       initialLocation = {
         lat: position.coords.latitude,
@@ -99,7 +101,7 @@ const Map = () => {
       });
       updateStore(initialLocation.lat, initialLocation.lon, location.name);
     });
-  }
+  }, [dispatch]);
 
   const updateOnDrag = (e: any) => {
     setCtr({ lat: e.latLng.lat(), lng: e.latLng.lng() });

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

@@ -2,7 +2,10 @@ import React, { useEffect } from "react";
 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 +33,16 @@ const PostList: React.FC = () => {
       default:
         console.log("damn wtf");
     }
-
     return result;
   });
 
+  const postState = useAppSelector((state) => state.post);
+
+  let 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,36 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import postService from "../../services/posts";
-import { Location } from "./location-slice";
 import { UserState } from "./user-slice";
 
 const prefix = "post";
 
+export type Location = {
+  name?: string;
+  lat: number;
+  lon: number;
+};
+
+export const initialLocation: Location = {
+  name: undefined,
+  lat: 49.26,
+  lon: -123.22,
+};
+
+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 +47,20 @@ export enum PostSortType {
   NEW = "new",
 }
 
-type PostState = {
+export type PostState = {
   posts: Post[];
   sortType: PostSortType;
   locationFilter: Location;
   tagFilter?: string;
   currentPostID?: string;
 };
 
+let locationFilter: Location = initialLocation;
+
 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 +81,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 +171,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/redux/store.ts

@@ -2,15 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import postReducer from "./slices/post-slice";
 import userReducer from "./slices/user-slice";
-import locationReducer from "./slices/location-slice";
 
 // TODO write instructions for setting up db.json
 
 const store = configureStore({
   reducer: {
     user: userReducer,
     post: postReducer,
-    location: locationReducer
   },
 });
 

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,19 @@ const getAll = async () => {
   return response;
 };
 
+const getPostsByFilter = async (postState: PostState) => {
+  const response = await axios.get(`${baseUrl}`, {
+    params: {
+      posts: [],
+      sortType: postState.sortType,
+      locationFilter: postState.locationFilter,
+      tagFilter: postState.tagFilter,
+      currentPostID: postState.currentPostID,
+    },
+  });
+  return response;
+};
+
 const getByID = async (id: string) => {
   const response = await axios.get(`${baseUrl}/${id}`);
   return response;
@@ -39,6 +52,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);