134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/client/src/components/Map.jsx:
--------------------------------------------------------------------------------
1 | import '../stylesheets/App.css';
2 | import React, { useState, useEffect, useContext} from 'react';
3 | import { GoogleMap, useJsApiLoader, MarkerF } from '@react-google-maps/api';
4 |
5 | import axios from 'axios';
6 | import MarkerCreator from './MarkerCreator';
7 | import MarkerUpdator from './MarkerUpdator';
8 | import { UserContext } from './UserContext';
9 |
10 | function Map() {
11 | // state for map center positioning
12 | const [mapPos, setMapPos] = useState({ lat: 0.37766641e2, lng: -0.123098308e3 });
13 |
14 | // state for the data for marker from the database
15 | const [markerData, setMarkerData] = useState([]);
16 |
17 | // state to display the event data to the page after clicking a marker
18 | const [eventData, setEventData] = useState(null);
19 |
20 | // get the userID from the context
21 | // userID is used to determine if the user is the creator of the event
22 | const { user } = useContext(UserContext);
23 | const [updating, setUpdating] = useState(false);
24 | // in-the-works refactor to clarify userID vs eventID from .id
25 | const userID = user === null ? null : user.id;
26 |
27 | // Load the script for google maps API
28 | const { isLoaded } = useJsApiLoader({
29 | googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
30 | // we don't think this is actually used, but removing it breaks EVERYTHING?!
31 | libraries: ['places'],
32 | });
33 |
34 | // get all marker data from database on mount
35 | useEffect(() => {
36 | try {
37 | const getEvents = async () => {
38 | const response = await axios.get('/api/events');
39 | const { data } = response;
40 | setMarkerData(data);
41 | };
42 | getEvents();
43 | // get current user location and set the center of the map to that location
44 | if (navigator.geolocation) { // native browser geolocation functionality
45 | navigator.geolocation.getCurrentPosition(
46 | (position) => {
47 | const pos = {
48 | lat: position.coords.latitude,
49 | lng: position.coords.longitude,
50 | };
51 | // change map center positioning state
52 | setMapPos(pos);
53 | },
54 | );
55 | }
56 | } catch (e) {
57 | console.log('error in getEvents: ', e.message);
58 | }
59 | }, []);
60 |
61 | // change google map position to current user location on button click
62 | const currPosition = () => {
63 | if (navigator.geolocation) {
64 | navigator.geolocation.getCurrentPosition(
65 | (position) => {
66 | const pos = {
67 | lat: position.coords.latitude,
68 | lng: position.coords.longitude,
69 | };
70 | // change map center positioning state
71 | setMapPos(pos);
72 | },
73 | );
74 | }
75 | };
76 |
77 | // handle click on update button
78 | const handleUpdate = () => {
79 | setUpdating(true);
80 | };
81 |
82 | // handle click on delete button
83 | const handleDelete = async (eID, uID) => {
84 | // create the object for the db query on backend
85 | const deleteReq = {
86 | eventID: eID,
87 | userID: uID,
88 | };
89 | // send object to the server to delete the event
90 | const response = await axios.delete('/api/events/', { // yeah, not restful, oh well sowee >.<
91 | data: { deleteReq } });
92 | // filter the removed event from the marker data array
93 | setMarkerData(prevMarkerData => {
94 | return prevMarkerData.filter(event => {
95 | return event.id !== eID;
96 | });
97 | });
98 | setEventData(null);
99 | };
100 |
101 | // ensures that a div exists for the map even when the map API key is not loaded successfully. DO NOT DELETE
102 | if (!isLoaded) return
Loading... 🥺
;
103 | // component imported from @react-google-maps/api used to render google maps
104 | // https://react-google-maps-api-docs.netlify.app/#googlemap
105 |
106 |
107 | // yes ... we know that this could be refactored into multiple components but .... time
108 | return (
109 |
110 |
115 |
116 | {/* If markerData is changed, places corresponding Markers in the map */}
117 | {/* component imported from @react-google-maps/api renders markers on the map */}
118 | {markerData.length > 0 && markerData.map((event) => (
119 | setEventData(event)}
124 | />
125 | ))}
126 |
127 | {/* If a Marker is being added, call MarkerCreator and if updated, call MarkerUpdator */}
128 |
129 | {!updating && }
130 | {updating
131 | && (
132 |
138 | )}
139 | {/* If eventData and user are not null, display the event data */}
140 | {
141 | eventData && user &&
142 | (
143 |