From 9d29a1ed96c10b31b875d1d453fd4ad2e63614cd Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Thu, 11 Mar 2021 21:31:06 -0500
Subject: [PATCH 1/2] Add Initial Filtering Menus
- Floating buttons
- Drawer
- Split up query requests
- Initial filtering on/off
---
client/package.json | 3 +
client/src/assets/scss/main.scss | 8 ++
client/src/components/App.js | 42 ++++---
client/src/components/MapTiles.jsx | 53 ++++----
client/src/components/gyms/Gym.jsx | 51 +++++---
client/src/components/layout/Drawer.jsx | 116 ++++++++++++++++++
client/src/components/layout/FloatingBtn.jsx | 54 ++++++++
client/src/components/layout/Nav.jsx | 33 +++++
client/src/components/layout/theme.js | 21 ++++
client/src/components/pokemon/MarkerIcon.js | 2 +-
client/src/components/pokemon/Pokemon.jsx | 52 +++++---
client/src/components/pokestops/MarkerIcon.js | 2 +-
client/src/components/pokestops/Pokestop.jsx | 49 +++++---
client/src/main.js | 1 +
client/src/services/Query.js | 21 ++++
client/src/services/data/gym.js | 16 +++
client/src/services/data/pokemon.js | 14 +++
client/src/services/data/pokestop.js | 13 ++
client/src/services/queries.js | 27 ----
server/src/schema/schema.js | 2 +-
yarn.lock | 97 ++++++++++++++-
21 files changed, 546 insertions(+), 131 deletions(-)
create mode 100644 client/src/components/layout/Drawer.jsx
create mode 100644 client/src/components/layout/FloatingBtn.jsx
create mode 100644 client/src/components/layout/Nav.jsx
create mode 100644 client/src/components/layout/theme.js
create mode 100644 client/src/services/Query.js
create mode 100644 client/src/services/data/gym.js
create mode 100644 client/src/services/data/pokemon.js
create mode 100644 client/src/services/data/pokestop.js
delete mode 100644 client/src/services/queries.js
diff --git a/client/package.json b/client/package.json
index b1462e8be..ee2c381d6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,7 +33,10 @@
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@material-ui/pickers": "^3.2.10",
+ "@mui-treasury/layout": "^4.5.0",
+ "@mui-treasury/styles": "^1.13.1",
"babel-loader": "^8.2.2",
+ "clsx": "^1.1.1",
"css-loader": "^5.1.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.2.0",
diff --git a/client/src/assets/scss/main.scss b/client/src/assets/scss/main.scss
index a7152ffed..1dfa61558 100644
--- a/client/src/assets/scss/main.scss
+++ b/client/src/assets/scss/main.scss
@@ -10,4 +10,12 @@
bottom: 0;
left: 0;
right: 0;
+}
+
+.MuiDrawer-paper {
+ background-color: 'rgb(51,51,51)';
+}
+
+.MuiToggleButton-root {
+ background-color: white;
}
\ No newline at end of file
diff --git a/client/src/components/App.js b/client/src/components/App.js
index 0b3af2b22..89e535919 100644
--- a/client/src/components/App.js
+++ b/client/src/components/App.js
@@ -1,14 +1,14 @@
+import "../assets/scss/main.scss"
+
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 { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
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()
@@ -17,10 +17,12 @@ const client = new ApolloClient({
const App = props => {
const [map, setMap] = useState(null)
const [settings, setSettings] = useState(undefined)
+ const [zoom, setZoom] = useState(15)
const getSettings = async () => {
const body = (await Fetch.fetchSettings())
setSettings(body)
+ setZoom(body.startZoom)
}
useEffect(() => {
@@ -28,17 +30,27 @@ const App = props => {
}, [])
return (
-
-
-
-
- {settings &&
- {map ? : null}
- }
-
-
-
-
+
+
+
+
+ {settings &&
+
+ {map &&
+ }
+ }
+
+
+
+
)
}
diff --git a/client/src/components/MapTiles.jsx b/client/src/components/MapTiles.jsx
index 4ac9f0324..1c331086d 100644
--- a/client/src/components/MapTiles.jsx
+++ b/client/src/components/MapTiles.jsx
@@ -1,31 +1,31 @@
import React, { useState, useEffect, useCallback } from 'react'
-import { TileLayer } from 'react-leaflet'
+import { TileLayer, ZoomControl } 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'
+import Nav from './layout/Nav.jsx'
const MapTiles = ({ map, settings }) => {
const [bounds, setBounds] = useState({
- _southWest: {
- lat: 0,
- lng: 0
- },
- _northEast: {
- lat: 0,
- lng: 0
- }
+ _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 [selected, setSelected] = useState({
+ Gyms: true,
+ Raids: false,
+ Pokestops: false,
+ Quests: false,
+ Invasions: false,
+ Spawnpoints: false,
+ Pokemon: true,
+ IngressPortals: false,
+ ScanCells: false,
+ S2Cells: false,
+ Weather: false,
+ ScanAreas: false,
+ Devices: false
+ })
const onMove = useCallback(() => {
setPosition(map.getCenter())
@@ -48,13 +48,14 @@ const MapTiles = ({ map, settings }) => {
attribution={`© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors`}
url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
/>
- {data &&
- <>
-
-
-
- >
- }
+
+ {selected.Gyms && }
+ {selected.Pokestops && }
+ {selected.Pokemon && }
+
>
)
}
diff --git a/client/src/components/gyms/Gym.jsx b/client/src/components/gyms/Gym.jsx
index 50783ecfa..fee785da2 100644
--- a/client/src/components/gyms/Gym.jsx
+++ b/client/src/components/gyms/Gym.jsx
@@ -1,28 +1,41 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
import { Marker, Popup } from 'react-leaflet'
import MarkerIcon from './MarkerIcon.js'
import PopupContent from './Popup.jsx'
import MarkerClusterGroup from 'react-leaflet-markercluster'
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
-const Gym = ({ data }) => {
+const Gym = ({ bounds }) => {
+ const { loading, error, data } = useQuery(Query.getAllGyms(), {
+ variables: {
+ minLat: bounds._southWest.lat,
+ minLon: bounds._southWest.lng,
+ maxLat: bounds._northEast.lat,
+ maxLon: bounds._northEast.lng
+ }
+ })
+
return (
-
- {data.map(gym => {
- return (
-
-
-
-
-
- )
- })}
-
+ <>
+ {data &&
+ {data.gyms.map(gym => {
+ return (
+
+
+
+
+
+ )
+ })}
+ }
+ >
)
}
-export default Gym
\ No newline at end of file
+export default Gym
diff --git a/client/src/components/layout/Drawer.jsx b/client/src/components/layout/Drawer.jsx
new file mode 100644
index 000000000..d77ccb83c
--- /dev/null
+++ b/client/src/components/layout/Drawer.jsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import clsx from 'clsx'
+import { makeStyles } from '@material-ui/core/styles'
+import { Drawer, Button, List, Divider, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { Check, Clear, ArrowForwardIos } from '@material-ui/icons'
+import { ToggleButton } from '@material-ui/lab'
+
+const useStyles = makeStyles({
+ list: {
+ width: 'auto',
+ zIndex: 9998,
+ color: '#FFFFFF',
+ backgroundColor: 'rgb(51,51,51)'
+
+ },
+ drawer: {
+ }
+})
+
+const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
+ const classes = useStyles()
+
+ const filterItems = [
+ { name: 'Gyms', icon: },
+ { name: 'Raids', icon: },
+ { name: 'Pokestops', icon: },
+ { name: 'Quests', icon: },
+ { name: 'Invasions', icon: },
+ { name: 'Spawnpoints', icon: },
+ { name: 'Pokemon', icon: },
+ { name: 'Ingress Portals', icon: },
+ { name: 'Scan-Cells', icon: },
+ { name: 'S2-Cells', icon: },
+ { name: 'Weather', icon: },
+ { name: 'ScanAreas', icon: },
+ { name: 'Devices', icon: }
+ ]
+
+ const menuItems = [
+ { name: 'Areas', icon: },
+ { name: 'Stats', icon: },
+ { name: 'Search', icon: },
+ { name: 'Settings', icon: },
+ { name: 'ClearCache', icon: },
+ { name: 'Discord', icon: },
+ { name: 'Logout', icon: }
+ ]
+
+ const list = (anchor) => (
+
+
+ Map Filters
+ {filterItems.map(item => {
+ return (
+
+ {item.icon}
+
+ {
+ setSelected({ ...selected, [item.name]: !selected[item.name] });
+ }}
+ >
+ {selected[item.name] ? : }
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+ Options
+ {menuItems.map(item => {
+ return (
+
+ {item.icon}
+
+
+ )
+ })}
+
+
+ )
+
+ return (
+
+ {['left'].map((anchor) => (
+
+
+
+ {list(anchor)}
+
+
+ ))}
+
+ )
+}
+
+export default DrawerMenu
diff --git a/client/src/components/layout/FloatingBtn.jsx b/client/src/components/layout/FloatingBtn.jsx
new file mode 100644
index 000000000..df4af559d
--- /dev/null
+++ b/client/src/components/layout/FloatingBtn.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { Grid, ThemeProvider, Fab } from '@material-ui/core'
+import { Menu, LocationOn, ZoomIn, ZoomOut } from '@material-ui/icons'
+import theme from './theme'
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ position: 'sticky',
+ top: 0,
+ left: 5,
+ zIndex: 9998
+ },
+ }
+}))
+
+const ActionButtons = ({ zoom, setZoom, toggleDrawer }) => {
+ const classes = useStyles()
+
+ const onClickZoom = value => {
+ setZoom(zoom + value)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ onClickZoom(1)}/>
+
+
+
+
+ onClickZoom(-1)}/>
+
+
+
+
+ )
+}
+
+export default ActionButtons
\ No newline at end of file
diff --git a/client/src/components/layout/Nav.jsx b/client/src/components/layout/Nav.jsx
new file mode 100644
index 000000000..6e8b2a1b4
--- /dev/null
+++ b/client/src/components/layout/Nav.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import FloatingBtn from './FloatingBtn.jsx'
+import Drawer from './Drawer.jsx'
+
+const Nav = ({ selected, setSelected }) => {
+ const [drawer, setDrawer] = useState({
+ left: false
+ })
+
+ const toggleDrawer = (anchor, open) => (event) => {
+ if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+ return
+ }
+ setDrawer({ [anchor]: open })
+ }
+
+ return (
+ <>
+ {!drawer.left &&
+ }
+
+ >
+ )
+}
+
+export default Nav
\ No newline at end of file
diff --git a/client/src/components/layout/theme.js b/client/src/components/layout/theme.js
new file mode 100644
index 000000000..72118cde9
--- /dev/null
+++ b/client/src/components/layout/theme.js
@@ -0,0 +1,21 @@
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core'
+
+let theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#ED1A7A',
+ main: '#2196f3',
+ dark: '#ED1A7A',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#49AEB9',
+ main: '#ff9100',
+ dark: '#49AEB9',
+ contrastText: '#fff',
+ }
+ }
+})
+theme = responsiveFontSizes(theme)
+
+export default theme
\ No newline at end of file
diff --git a/client/src/components/pokemon/MarkerIcon.js b/client/src/components/pokemon/MarkerIcon.js
index 7039e8be6..32801f62e 100644
--- a/client/src/components/pokemon/MarkerIcon.js
+++ b/client/src/components/pokemon/MarkerIcon.js
@@ -24,7 +24,7 @@ export default function (pokemon) {
return new Icon({
iconUrl: `https://mygod.github.io/pokicons/v2/${getPokemonIcon(pokemon.pokemon_id, 0, 0, 0, pokemon.costume)}.png`,
- iconSize: [20, 20],
+ iconSize: [30, 30],
iconAnchor: [20, 33.96],
popupAnchor: [0, -41.96],
})
diff --git a/client/src/components/pokemon/Pokemon.jsx b/client/src/components/pokemon/Pokemon.jsx
index 33ce4edc9..00358f337 100644
--- a/client/src/components/pokemon/Pokemon.jsx
+++ b/client/src/components/pokemon/Pokemon.jsx
@@ -1,29 +1,41 @@
-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'
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+const Pokemon = ({ bounds }) => {
+ const { loading, error, data } = useQuery(Query.getAllPokemon(), {
+ variables: {
+ minLat: bounds._southWest.lat,
+ minLon: bounds._southWest.lng,
+ maxLat: bounds._northEast.lat,
+ maxLon: bounds._northEast.lng
+ }
+ })
-const Pokemon = ({ data }) => {
return (
-
- {data.map(pokemon => {
- return (
-
-
-
-
-
- )
- })}
-
+ <>
+ {data &&
+ {data.pokemon.map(pokemon => {
+ return (
+
+
+
+
+
+ )
+ })}
+ }
+ >
)
}
-export default Pokemon
\ No newline at end of file
+export default Pokemon
diff --git a/client/src/components/pokestops/MarkerIcon.js b/client/src/components/pokestops/MarkerIcon.js
index e9b00a750..6e2f6efac 100644
--- a/client/src/components/pokestops/MarkerIcon.js
+++ b/client/src/components/pokestops/MarkerIcon.js
@@ -3,7 +3,7 @@ import { Icon } from 'leaflet'
export default function (pokestop) {
return new Icon({
iconUrl: `/img/misc/pokestop.png`,
- iconSize: [20, 20],
+ iconSize: [30, 30],
iconAnchor: [20, 33.96],
popupAnchor: [0, -41.96],
})
diff --git a/client/src/components/pokestops/Pokestop.jsx b/client/src/components/pokestops/Pokestop.jsx
index 2dc7af34c..92d766e7d 100644
--- a/client/src/components/pokestops/Pokestop.jsx
+++ b/client/src/components/pokestops/Pokestop.jsx
@@ -3,26 +3,39 @@ import { Marker, Popup } from 'react-leaflet'
import MarkerIcon from './MarkerIcon.js'
import PopupContent from './Popup.jsx'
import MarkerClusterGroup from 'react-leaflet-markercluster'
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
-const Pokestop = ({ data }) => {
+const Pokestop = ({ bounds }) => {
+ const { loading, error, data } = useQuery(Query.getAllPokestops(), {
+ variables: {
+ minLat: bounds._southWest.lat,
+ minLon: bounds._southWest.lng,
+ maxLat: bounds._northEast.lat,
+ maxLon: bounds._northEast.lng
+ }
+ })
+
return (
-
- {data.map(pokestop => {
- return (
-
-
-
-
-
- )
- })}
-
+ <>
+ {data &&
+ {data.pokestops.map(pokestop => {
+ return (
+
+
+
+
+
+ )
+ })}
+ }
+ >
)
}
-export default Pokestop
\ No newline at end of file
+export default Pokestop
diff --git a/client/src/main.js b/client/src/main.js
index 1b71d38bb..a974016ea 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,5 +1,6 @@
import React from "react"
import { render } from "react-dom"
+
import App from "./components/App.js"
document.addEventListener("DOMContentLoaded", () => {
diff --git a/client/src/services/Query.js b/client/src/services/Query.js
new file mode 100644
index 000000000..b43661029
--- /dev/null
+++ b/client/src/services/Query.js
@@ -0,0 +1,21 @@
+import { getAllGyms } from './data/gym.js'
+import { getAllPokestops } from './data/pokestop.js'
+import { getAllPokemon } from './data/pokemon.js'
+
+class Query {
+
+ static getAllGyms() {
+ return getAllGyms
+ }
+
+ static getAllPokestops() {
+ return getAllPokestops
+ }
+
+ static getAllPokemon() {
+ return getAllPokemon
+ }
+
+}
+
+export default Query
\ No newline at end of file
diff --git a/client/src/services/data/gym.js b/client/src/services/data/gym.js
new file mode 100644
index 000000000..39c5e56a5
--- /dev/null
+++ b/client/src/services/data/gym.js
@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+const getAllGyms = 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
+ }
+ }
+`
+
+export { getAllGyms }
\ No newline at end of file
diff --git a/client/src/services/data/pokemon.js b/client/src/services/data/pokemon.js
new file mode 100644
index 000000000..352070d3e
--- /dev/null
+++ b/client/src/services/data/pokemon.js
@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const getAllPokemon = gql`
+ query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+ pokemon(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+ id
+ lat
+ lon
+ pokemon_id
+ }
+ }
+`
+
+export { getAllPokemon }
\ No newline at end of file
diff --git a/client/src/services/data/pokestop.js b/client/src/services/data/pokestop.js
new file mode 100644
index 000000000..97344b340
--- /dev/null
+++ b/client/src/services/data/pokestop.js
@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client'
+
+const getAllPokestops = gql`
+ query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+ pokestops(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+ id
+ lat
+ lon
+ }
+ }
+`
+
+export { getAllPokestops }
\ No newline at end of file
diff --git a/client/src/services/queries.js b/client/src/services/queries.js
deleted file mode 100644
index 730aeefbc..000000000
--- a/client/src/services/queries.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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 }
\ No newline at end of file
diff --git a/server/src/schema/schema.js b/server/src/schema/schema.js
index 668521be0..d2dabff3f 100644
--- a/server/src/schema/schema.js
+++ b/server/src/schema/schema.js
@@ -1,4 +1,4 @@
-import { GraphQLObjectType, GraphQLID, GraphQLString, GraphQLInt, GraphQLBoolean, GraphQLFloat, GraphQLList, GraphQLSchema } from 'graphql'
+import { GraphQLObjectType, GraphQLID, GraphQLFloat, GraphQLList, GraphQLSchema } from 'graphql'
import GymType from './gym.js'
import PokestopType from './pokestop.js'
diff --git a/yarn.lock b/yarn.lock
index ff2a06f83..c11cb0f14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1114,6 +1114,32 @@
prop-types "^15.7.2"
react-is "^16.8.0 || ^17.0.0"
+"@mui-treasury/layout@^4.5.0":
+ version "4.5.0"
+ resolved "https://registry.yarnpkg.com/@mui-treasury/layout/-/layout-4.5.0.tgz#17524dfe800018d928a96b1fbb5015aa08da6607"
+ integrity sha512-Jvqu13NaCcim0B0njWOKrwHPogU0xO1Qejgu9oMOkS83Rf+9szDPa8/l2OAlFueaV392dJuaRACFypjG2XRxUw==
+ dependencies:
+ "@types/lodash.mapvalues" "^4.6.6"
+ debounce "^1.2.0"
+ deepmerge "^4.2.2"
+ lodash.mapvalues "^4.6.0"
+
+"@mui-treasury/styles@^1.13.1":
+ version "1.13.1"
+ resolved "https://registry.yarnpkg.com/@mui-treasury/styles/-/styles-1.13.1.tgz#96c86f362056eaeb528740bf4cf128d3cd5c56b7"
+ integrity sha512-vfAx8RWFnEVBSTK2KbgU6n4EwYXzWSU3VRsUUbRkuPXgdc8PO6O9/HAht8s/qMOCCa+UZ/s+dfjvN9iXPmW5SA==
+ dependencies:
+ "@mui-treasury/utils" "^0.4.1"
+ color "^3.1.2"
+
+"@mui-treasury/utils@^0.4.1":
+ version "0.4.1"
+ resolved "https://registry.yarnpkg.com/@mui-treasury/utils/-/utils-0.4.1.tgz#075645cec98b2e976766e505d9ac8b52778438b3"
+ integrity sha512-XcJOUrQodx2VCouk6uvYw+MChVGXPy1abe7PxqpxIGEr6s1QwV8HhgA4q/+eq0//IQ6oDXGlym4PSDO3Yh/lHA==
+ dependencies:
+ lodash.get "^4.4.2"
+ lodash.isequal "^4.5.0"
+
"@react-leaflet/core@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.0.2.tgz#39c6a73f61c666d5dcf673741cea2672fa4bbae1"
@@ -1170,6 +1196,18 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
+"@types/lodash.mapvalues@^4.6.6":
+ version "4.6.6"
+ resolved "https://registry.yarnpkg.com/@types/lodash.mapvalues/-/lodash.mapvalues-4.6.6.tgz#899b6e1d3b9b4e313bc332ec18182f9fce7aec7c"
+ integrity sha512-Mt9eg3AqwAt5HShuOu8taiIYg0sLl4w3vDi0++E0VtiOtj9DqQHaxVr3wicVop0eDEqr5ENbht7vsLJlkMHL+w==
+ dependencies:
+ "@types/lodash" "*"
+
+"@types/lodash@*":
+ version "4.14.168"
+ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+ integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
"@types/minimatch@*":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -1946,7 +1984,7 @@ clone-response@^1.0.2:
dependencies:
mimic-response "^1.0.0"
-clsx@^1.0.2, clsx@^1.0.4:
+clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -1959,7 +1997,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1978,11 +2016,27 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+color-string@^1.5.4:
+ version "1.5.5"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
+ integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
+ dependencies:
+ color-name "^1.0.0"
+ simple-swizzle "^0.2.2"
+
+color@^3.1.2:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
+ integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
+ dependencies:
+ color-convert "^1.9.1"
+ color-string "^1.5.4"
+
colorette@1.2.1, colorette@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -2201,6 +2255,11 @@ db-errors@^0.2.3:
resolved "https://registry.yarnpkg.com/db-errors/-/db-errors-0.2.3.tgz#a6a38952e00b20e790f2695a6446b3c65497ffa2"
integrity sha512-OOgqgDuCavHXjYSJoV2yGhv6SeG8nk42aoCSoyXLZUH7VwFG27rxbavU1z+VrZbZjphw5UkDQwUlD21MwZpUng==
+debounce@^1.2.0:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+ integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2256,6 +2315,11 @@ deep-extend@^0.6.0:
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+deepmerge@^4.2.2:
+ version "4.2.2"
+ resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+ integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
default-gateway@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3391,6 +3455,11 @@ is-arguments@^1.0.4:
dependencies:
call-bind "^1.0.0"
+is-arrayish@^0.3.1:
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+ integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
is-binary-path@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -3882,6 +3951,21 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+lodash.get@^4.4.2:
+ version "4.4.2"
+ resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+ integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
+lodash.isequal@^4.5.0:
+ version "4.5.0"
+ resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+ integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
+lodash.mapvalues@^4.6.0:
+ version "4.6.0"
+ resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
+ integrity sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=
+
lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -5375,6 +5459,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+simple-swizzle@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+ integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+ dependencies:
+ is-arrayish "^0.3.1"
+
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
From 43f19ebbda4e1d7e199f15ecaadab26dbe390aea Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Thu, 11 Mar 2021 21:44:57 -0500
Subject: [PATCH 2/2] Cleanup Drawer
---
client/src/components/layout/Drawer.jsx | 109 +++++++++----------
client/src/components/layout/FloatingBtn.jsx | 2 +-
client/src/components/layout/Nav.jsx | 25 ++---
3 files changed, 61 insertions(+), 75 deletions(-)
diff --git a/client/src/components/layout/Drawer.jsx b/client/src/components/layout/Drawer.jsx
index d77ccb83c..4b7b4a605 100644
--- a/client/src/components/layout/Drawer.jsx
+++ b/client/src/components/layout/Drawer.jsx
@@ -46,70 +46,59 @@ const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
{ name: 'Logout', icon: }
]
- const list = (anchor) => (
-
-
- Map Filters
- {filterItems.map(item => {
- return (
-
- {item.icon}
-
- {
- setSelected({ ...selected, [item.name]: !selected[item.name] });
- }}
- >
- {selected[item.name] ? : }
+ return (
+
+
+
+ Map Filters
+ {filterItems.map(item => {
+ return (
+
+ {item.icon}
+
+ {
+ setSelected({ ...selected, [item.name]: !selected[item.name] });
+ }}
+ >
+ {selected[item.name] ? : }
-
-
- )
- })}
-
-
-
-
-
+ )
+ })}
+
+
+
+
+
-
-
-
-
- Options
- {menuItems.map(item => {
- return (
-
- {item.icon}
-
-
- )
- })}
-
-
- )
-
- return (
-
- {['left'].map((anchor) => (
-
-
-
- {list(anchor)}
-
-
- ))}
-
+
+
+
+
+ Options
+ {menuItems.map(item => {
+ return (
+
+ {item.icon}
+
+
+ )
+ })}
+
+
+
)
}
diff --git a/client/src/components/layout/FloatingBtn.jsx b/client/src/components/layout/FloatingBtn.jsx
index df4af559d..8818e7a03 100644
--- a/client/src/components/layout/FloatingBtn.jsx
+++ b/client/src/components/layout/FloatingBtn.jsx
@@ -28,7 +28,7 @@ const ActionButtons = ({ zoom, setZoom, toggleDrawer }) => {
-
+
diff --git a/client/src/components/layout/Nav.jsx b/client/src/components/layout/Nav.jsx
index 6e8b2a1b4..2526070f6 100644
--- a/client/src/components/layout/Nav.jsx
+++ b/client/src/components/layout/Nav.jsx
@@ -3,29 +3,26 @@ import FloatingBtn from './FloatingBtn.jsx'
import Drawer from './Drawer.jsx'
const Nav = ({ selected, setSelected }) => {
- const [drawer, setDrawer] = useState({
- left: false
- })
+ const [drawer, setDrawer] = useState(false)
- const toggleDrawer = (anchor, open) => (event) => {
+ const toggleDrawer = (open) => (event) => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return
}
- setDrawer({ [anchor]: open })
+ setDrawer(open)
}
return (
<>
- {!drawer.left &&
- }
-
+ /> :
+ }
>
)
}