pulling location, listings and sending to client

Author: JimLynchCodes

waf-frontend-gatsby/src/components/listing-item.tsx

@@ -12,7 +12,7 @@ const buttonStyle = {
 
 const profileImgStyle = { width: '50px', marginBottom: '1rem', borderRadius: '50%', overflow: 'hidden' };
 
-const ListingItem = ({ header, creator, messagesRoomsList }: any) => {
+const ListingItem = ({ header, creator, description, messagesRoomsList }: any) => {
 
     const [loggedIn, setLoggedIn] = useState(false)
 

waf-frontend-gatsby/src/components/post-listing-form.tsx

@@ -66,6 +66,7 @@ const fileSelectedHandler = (event: any) => {
 
 const PostListingForm = (props: any) => {
     return (
+        <>
         <div>
             {/* <h3>Current Location: {currentGeolocation}</h3> */}
             <h3></h3>
@@ -191,6 +192,8 @@ const PostListingForm = (props: any) => {
 
         </div>
 
+
+        </>
     );
 
 };

waf-frontend-gatsby/src/pages/browse-listings.tsx

@@ -1,5 +1,5 @@
-import React, { useState, Dispatch, SetStateAction } from 'react';
 import { Link } from 'gatsby';
+import React, { useState, Dispatch, SetStateAction } from 'react';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 import MessageThreadSection from '../components/conversation-section';
@@ -67,6 +67,8 @@ const BrowsePage = (props: any) => {
       const latitude = position.coords.latitude;
       const longitude = position.coords.longitude;
 
+      console.log('found location: lat: ', latitude, " long: ", longitude)
+
       dispatch(submitUpdatedLocation({
         type: 'Point',
         coordinates: [latitude, longitude]
@@ -96,7 +98,8 @@ const BrowsePage = (props: any) => {
       }
 
       {/* === Zipcode Not Yet Set === */}
-      {!props.currentGeolocation &&
+      {/* {!props.currentGeolocation && */}
+      {!props.location &&
         <>
           <p>
             [No Geo]
@@ -108,14 +111,20 @@ const BrowsePage = (props: any) => {
       }
 
       {/* === Zipcode Has Been Set === */}
-      {props.currentGeolocation &&
+      {/* {props.currentGeolocation && */}
+      {props.location && 
         <>
           <h3>
             Showing listings within 25 miles of {props.currentZipcode}.
           </h3>
 
           <h3> Listings from redux:</h3>
-          <ListingItem creator={"You"} messagesRoomsList={props.listings} />
+
+          {props.listings.forEach( (listing: any) => (
+
+            <ListingItem creator={listing.creator} descriptiong={listing.description} />
+            )
+          )}
 
         </>
       }
@@ -192,6 +201,7 @@ const mapStateToProps = (state: IState) => {
     userId: state.userReducer?.userId,
 
     listings: state.listingsReducer?.listings,
+    location: state.listingsReducer?.location,
     manuallyEditingLocation: state.globalAppPropertiesReducer?.manuallyEditingLocation,
 
     currentZipcode: state.userReducer?.zipcode ? state.userReducer?.zipcode :

waf-frontend-gatsby/src/state/actions/listings.ts

@@ -17,8 +17,10 @@ export const receivedNearbyListings = (location: any, listings: any) => {
     console.log('dispatching login success...')
     return {
         type: UPDATED_LISTINGS_RECEIVED,
-        location: location,
-        payload: listings,
+        payload: {
+            location,
+            listings
+        },
     }
 };
 

waf-frontend-gatsby/src/state/middlewares/socketManager.ts

@@ -44,8 +44,9 @@ const socketManager = () => {
 
                 socket.on('NEARBY_LISTINGS', (data: any) => {
                     const location = data.location;
-                    const nearbyListings = data.nearbyListings;
+                    const nearbyListings = data.listings;
 
+                    console.log('got some ish: ', data)
                     console.log('Got response from server!\nLocation is ', location, '\nListings: ', nearbyListings)
 
                     store.dispatch(receivedNearbyListings(location, nearbyListings));

waf-frontend-gatsby/src/state/reducers/listings.ts

@@ -3,23 +3,21 @@ import { LISTINGS_UPDATED, UPDATED_LISTINGS_RECEIVED } from '../types/listings';
 
 export interface IListingsState {
   listings: any[] | undefined,
+  location: any
 }
 
 export const initialState = {
   listings: [{
     createdBy: "Fake User",
     headline: "play guitar"
-  },
-  {
-    createdBy: "Fake User",
-    headline: "go to a dubstep show"
   }
   ],
+  location: undefined
 };
 
 interface IAction {
   type?: string;
-  payload?: unknown;
+  payload?: any;
 }
 
 const reducer = (state: IListingsState = initialState, action: IAction = {}): IListingsState => {
@@ -31,9 +29,12 @@ const reducer = (state: IListingsState = initialState, action: IAction = {}): IL
       return Object.assign({}, state, payload)
 
     case UPDATED_LISTINGS_RECEIVED:
-
-      return { ...state, }
-      break;
+      console.log('got some listings, listings! ', action)
+      return {
+        ...state,
+        listings: action.payload.listings,
+        location: action.payload.location
+      }
 
     default:
       return state;

waf-frontend-gatsby/src/state/reducers/user.ts

@@ -2,6 +2,7 @@
 import { USER_UPDATED } from '../types/user';
 import { GeoJSON } from './global-app-properties';
 import { AUTH0_LOGIN_SUCCESS, LOGOUT } from '../types/login';
+import { UPDATED_LISTINGS_RECEIVED } from '../types/listings';
 
 export interface IUserState {
   userId: string | undefined
@@ -41,6 +42,13 @@ const reducer = (state: IUserState = initialState, action: IAction = {}): IUserS
         user: undefined
       };
 
+    case UPDATED_LISTINGS_RECEIVED:
+
+
+      console.log('got some listings user ', action)
+      return { ...state}
+      break;
+
     default:
       return state;
   }

waf-socket-server/src/event-handlers/mongo-utils/listings/get-nearby-listings.ts

@@ -4,38 +4,30 @@ import Listing, { IListing } from './models';
 export const MAX_DISTANCE_FREE_ACCOUNT = 25;
 
 export const getNearbyListings = async (userGeoLocation: any) => {
-    
+
     console.log('looking for nearby listings 1... ', userGeoLocation)
-    
+
     await connectToMongo()
-    
+
     console.log('looking for nearby listings 2... ', userGeoLocation)
 
     try {
         const doc = await Listing.find(
             {
                 location: {
-                  $near: {
-                    $geometry: userGeoLocation,
-                    $maxDistance: MAX_DISTANCE_FREE_ACCOUNT, // distance in meters
-                    $minDistance: 0
-                  }
+                    $near: {
+                        $geometry: userGeoLocation,
+                        $maxDistance: MAX_DISTANCE_FREE_ACCOUNT, // distance in meters
+                        $minDistance: 0
+                    }
                 }
-             }
+            }
         );
-        return {
-            statusCode: 200,
-            body: JSON.stringify({
-                data: doc,
-            }, null, 2)
-        };
+
+        return doc
+
     } catch (err) {
-        return {
-            statusCode: 200,
-            body: JSON.stringify({
-                data: err,
-            }, null, 2)
-        };
+        return err
     }
 
 }

waf-socket-server/src/event-handlers/submit-zipcode.ts

@@ -10,12 +10,10 @@ export const handleSubmitUpdatedLocation = async (socket: any, data: any) => {
     const nearbyListings: any = await getNearbyListings(data);
 
     console.log('got some listings! ', nearbyListings)
-    
+
     socket.emit('NEARBY_LISTINGS', {
-        data: {
-            location: data,
-            listings: nearbyListings
-        }
+        location: data,
+        listings: nearbyListings
     });
 
 }