Add GraphQL Support

client/package.json

@@ -20,6 +20,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@apollo/client": "^3.3.11",
     "@babel/core": "^7.13.8",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-transform-react-jsx": "^7.12.17",
@@ -44,6 +45,7 @@
     "react-hot-loader": "^4.13.0",
     "react-leaflet": "^3.1.0",
     "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-router-dom": "^5.2.0",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
     "style-loader": "^2.0.0",

client/src/components/App.js

@@ -1,11 +1,19 @@
 import React, { useState, useEffect } from 'react'
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
 import { hot } from "react-hot-loader/root.js"
 import "../assets/scss/main.scss"
 
 import { MapContainer } from 'react-leaflet'
 import MapTiles from './MapTiles.jsx'
 import Fetch from '../services/Fetch.js'
 
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
+
+const client = new ApolloClient({
+  uri: '/graphql',
+  cache: new InMemoryCache()
+})
+
 const App = props => {
   const [map, setMap] = useState(null)
   const [settings, setSettings] = useState(undefined)
@@ -20,11 +28,17 @@ const App = props => {
   }, [])
 
   return (
-    <>
-      {settings && <MapContainer center={[settings.startLat, settings.startLon]} zoom={settings.startZoom} whenCreated={setMap} >
-        {map ? <MapTiles map={map} settings={settings} /> : null}
-      </MapContainer>}
-    </>
+    <ApolloProvider client={client}>
+      <Router>
+        <Switch>
+          <Route exact path="/">
+            {settings && <MapContainer center={[settings.startLat, settings.startLon]} zoom={settings.startZoom} whenCreated={setMap} >
+              {map ? <MapTiles map={map} settings={settings} /> : null}
+            </MapContainer>}
+          </Route>
+        </Switch>
+      </Router>
+    </ApolloProvider>
   )
 }
 

client/src/components/MapTiles.jsx

@@ -3,10 +3,29 @@ import { TileLayer } from 'react-leaflet'
 import Gym from './gyms/Gym.jsx'
 import Pokestop from './pokestops/Pokestop.jsx'
 import Pokemon from './pokemon/Pokemon.jsx'
+import { useQuery } from '@apollo/client'
+import { getDataQuery } from '../services/queries.js'
 
 const MapTiles = ({ map, settings }) => {
-  const [bounds, setBounds] = useState(null)
+  const [bounds, setBounds] = useState({
+    _southWest: {
+      lat: 0,
+      lng: 0
+    },
+    _northEast: {
+      lat: 0,
+      lng: 0
+    }
+  })
   const [position, setPosition] = useState({})
+  const { loading, error, data } = useQuery(getDataQuery, {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  });
 
   const onMove = useCallback(() => {
     setPosition(map.getCenter())
@@ -29,9 +48,13 @@ const MapTiles = ({ map, settings }) => {
         attribution={`&copy; <a href='https://stadiamaps.com/'>Stadia Maps</a>, &copy; <a href='https://openmaptiles.org/'>OpenMapTiles</a> &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors`}
         url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
       />
-      <Gym bounds={bounds} />
-      <Pokestop bounds={bounds} />
-      <Pokemon bounds={bounds} />
+      {data &&
+        <>
+          <Gym data={data.gyms} />
+          <Pokestop data={data.pokestops} />
+          <Pokemon data={data.pokemon} />
+        </>
+      }
     </>
   )
 }

client/src/components/gyms/Gym.jsx

@@ -1,37 +1,26 @@
 import React, { useState, useEffect } from 'react'
 import { Marker, Popup } from 'react-leaflet'
-import Fetch from '../../services/Fetch.js'
 import MarkerIcon from './MarkerIcon.js'
 import PopupContent from './Popup.jsx'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
-const Gym = ({ bounds }) => {
-  const [gyms, setGyms] = useState([])
-
-  const getGyms = async (bounds) => {
-    if (bounds) setGyms(await Fetch.fetchGyms(bounds))
-  }
-
-  useEffect(() => {
-    getGyms(bounds)
-  }, [bounds])
-
-  const allGyms = gyms.map(gym => {
-    return (
-      <Marker
-        key={gym.id}
-        position={[gym.lat, gym.lon]}
-        icon={MarkerIcon(gym)}>
-        <Popup position={[gym.lat, gym.lon]}>
-          <PopupContent gym={gym} />
-        </Popup>
-      </Marker>
-    )
-  })
-
+const Gym = ({ data }) => {
   return (
-    <MarkerClusterGroup>
-      {allGyms}
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data.map(gym => {
+        return (
+          <Marker
+            key={gym.id}
+            position={[gym.lat, gym.lon]}
+            icon={MarkerIcon(gym)}>
+            <Popup position={[gym.lat, gym.lon]}>
+              <PopupContent gym={gym} />
+            </Popup>
+          </Marker>
+        )
+      })}
     </MarkerClusterGroup>
   )
 }

client/src/components/pokemon/Pokemon.jsx

@@ -5,35 +5,23 @@ import MarkerIcon from './MarkerIcon.js'
 import PopupContent from './Popup.jsx'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
-const Pokemon = ({ bounds }) => {
-  const [pokemon, setPokemon] = useState([])
-
-  const getPokemon = async (bounds) => {
-    if (bounds) setPokemon(await Fetch.fetchPokemon(bounds))
-  }
-
-  useEffect(() => {
-    getPokemon(bounds)
-  }, [bounds])
-
-  const allPokemon = pokemon.map(pokemon => {
-    return (
-      <Marker
-        key={pokemon.id}
-        position={[pokemon.lat, pokemon.lon]}
-        icon={MarkerIcon(pokemon)}>
-        <Popup position={[pokemon.lat, pokemon.lon]}>
-          <PopupContent pokemon={pokemon} />
-        </Popup>
-      </Marker>
-    )
-  })
-
+const Pokemon = ({ data }) => {
   return (
     <MarkerClusterGroup
-    disableClusteringAtZoom={16}
+      disableClusteringAtZoom={16}
     >
-      {allPokemon}
+      {data.map(pokemon => {
+        return (
+          <Marker
+            key={pokemon.id}
+            position={[pokemon.lat, pokemon.lon]}
+            icon={MarkerIcon(pokemon)}>
+            <Popup position={[pokemon.lat, pokemon.lon]}>
+              <PopupContent gym={pokemon} />
+            </Popup>
+          </Marker>
+        )
+      })}
     </MarkerClusterGroup>
   )
 }

client/src/components/pokestops/Pokestop.jsx

@@ -1,39 +1,26 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { Marker, Popup } from 'react-leaflet'
-import Fetch from '../../services/Fetch.js'
 import MarkerIcon from './MarkerIcon.js'
 import PopupContent from './Popup.jsx'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
-const Pokestop = ({ bounds }) => {
-  const [pokestops, setPokestops] = useState([])
-
-  const getPokestops = async (bounds) => {
-    if (bounds) setPokestops(await Fetch.fetchPokestops(bounds))
-  }
-
-  useEffect(() => {
-    getPokestops(bounds)
-  }, [bounds])
-
-  const allPokestops = pokestops.map(pokestop => {
-    return (
-      <Marker
-        key={pokestop.id}
-        position={[pokestop.lat, pokestop.lon]}
-        icon={MarkerIcon(pokestop)}>
-        <Popup position={[pokestop.lat, pokestop.lon]}>
-          <PopupContent pokestop={pokestop} />
-        </Popup>
-      </Marker>
-    )
-  })
-
+const Pokestop = ({ data }) => {
   return (
     <MarkerClusterGroup
       disableClusteringAtZoom={16}
     >
-      {allPokestops}
+      {data.map(pokestop => {
+        return (
+          <Marker
+            key={pokestop.id}
+            position={[pokestop.lat, pokestop.lon]}
+            icon={MarkerIcon(pokestop)}>
+            <Popup position={[pokestop.lat, pokestop.lon]}>
+              <PopupContent gym={pokestop} />
+            </Popup>
+          </Marker>
+        )
+      })}
     </MarkerClusterGroup>
   )
 }

client/src/services/Fetch.js

@@ -1,26 +1,11 @@
-import fetchGyms from './data/gyms.js'
-import fetchPokestops from './data/pokestops.js'
-import fetchPokemon from './data/pokemon.js' 
 import fetchSettings from './data/settings.js' 
 
 class Fetch {
 
   static async fetchSettings() {
     return await fetchSettings()
   }
-
-  static async fetchGyms(bounds) {
-    return await fetchGyms(bounds)
-  }
-
-  static async fetchPokestops(bounds) {
-    return await fetchPokestops(bounds)
-  }
-
-  static async fetchPokemon(bounds) {
-    return await fetchPokemon(bounds)
-  }
-
+
 }
 
 export default Fetch

client/src/services/queries.js

@@ -0,0 +1,27 @@
+import { gql } from '@apollo/client'
+
+const getDataQuery = gql`
+  query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+    gyms(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      lat
+      lon
+      availble_slots
+      team_id
+      in_battle
+    },
+    pokestops(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      lat
+      lon
+    },
+    pokemon(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      lat
+      lon
+      pokemon_id
+    }
+  }
+`
+
+export { getDataQuery }

client/webpack.config.js

@@ -1,7 +1,6 @@
 import path, { dirname } from 'path'
 import { fileURLToPath } from 'url'
 import HtmlWebpackPlugin from "html-webpack-plugin"
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 import webpack from 'webpack'
 
@@ -60,6 +59,7 @@ export default {
     ]
   },
   resolve: {
+    mainFields: ['browser','main','module'],
     alias: {
       ...reactDomAlias,
       "@Components": path.resolve(__dirname, "src/components/"),