From d11a767383bf43e222d36b4e26997ac9f8171cc1 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 7 Oct 2022 22:14:59 -0400
Subject: [PATCH 1/5] scanNext fixes
- Move scan dialog into its own component
- Move constants out of ScanNextTarget fn
- Wrap a lot of state changes in useEffects to control renders
---
.../layout/dialogs/scanner/ScanDialog.jsx | 40 +++++++
.../layout/dialogs/scanner/ScanNext.jsx | 102 ++++++++----------
.../layout/dialogs/scanner/ScanNextTarget.jsx | 55 +++++-----
3 files changed, 113 insertions(+), 84 deletions(-)
create mode 100644 src/components/layout/dialogs/scanner/ScanDialog.jsx
diff --git a/src/components/layout/dialogs/scanner/ScanDialog.jsx b/src/components/layout/dialogs/scanner/ScanDialog.jsx
new file mode 100644
index 000000000..e99d9ed99
--- /dev/null
+++ b/src/components/layout/dialogs/scanner/ScanDialog.jsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Dialog, DialogContent, Grid, Typography } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+import Header from '@components/layout/general/Header'
+import Footer from '@components/layout/general/Footer'
+
+export default function ScanDialog({ scanNextMode, setScanNextMode }) {
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
diff --git a/src/components/layout/dialogs/scanner/ScanNext.jsx b/src/components/layout/dialogs/scanner/ScanNext.jsx
index 51d92cc0a..9d974f57d 100644
--- a/src/components/layout/dialogs/scanner/ScanNext.jsx
+++ b/src/components/layout/dialogs/scanner/ScanNext.jsx
@@ -1,19 +1,9 @@
import React, { useEffect, useState } from 'react'
import { useQuery, useLazyQuery } from '@apollo/client'
-import { useTranslation } from 'react-i18next'
-import {
- Dialog,
- DialogContent,
- DialogTitle,
- DialogActions,
- Button,
- Grid,
- Typography,
-} from '@material-ui/core'
-
import { useStatic, useStore } from '@hooks/useStore'
import Query from '@services/Query'
import ScanNextTarget from './ScanNextTarget'
+import ScanDialog from './ScanDialog'
export default function ScanNext({
map,
@@ -26,16 +16,16 @@ export default function ScanNext({
scanNextAreaRestriction,
},
}) {
- const { data: scanAreas } = scanNextAreaRestriction?.length
- ? useQuery(Query.scanAreas())
- : { data: null }
const { loggedIn } = useStatic((state) => state.auth)
- const { t } = useTranslation()
+
const location = useStore((s) => s.location)
+
const [queue, setQueue] = useState('init')
const [scanNextLocation, setScanNextLocation] = useState(location)
const [scanNextCoords, setScanNextCoords] = useState([location])
const [scanNextType, setScanNextType] = useState('S')
+
+ const { data: scanAreas } = useQuery(Query.scanAreas())
const [scanNext, { error: scannerError, data: scannerResponse }] =
useLazyQuery(Query.scanner(), {
variables: {
@@ -68,39 +58,48 @@ export default function ScanNext({
},
)
- if (scanNextMode === 'sendCoords') {
- scanNext()
- setScanNextMode('loading')
- }
- if (scannerError) {
- setScanNextMode('error')
- }
- if (scannerResponse) {
- if (scannerResponse.scanner?.status === 'ok') {
- setScanNextMode('confirmed')
- } else {
- setScanNextMode('error')
+ useEffect(() => {
+ if (scanNextMode === 'sendCoords') {
+ scanNext()
+ setScanNextMode('loading')
}
- }
+ }, [scanNextMode])
- if (scanNextShowScanQueue) {
- if (queue === 'init') {
- getQueue()
- setQueue('...')
+ useEffect(() => {
+ if (scannerError) {
+ setScanNextMode('error')
}
- useEffect(() => {
- const timer = setInterval(() => {
+ if (scannerResponse) {
+ if (scannerResponse?.scanner?.status === 'ok') {
+ setScanNextMode('confirmed')
+ } else {
+ setScanNextMode('error')
+ }
+ }
+ }, [scannerError, !!scannerResponse])
+
+ useEffect(() => {
+ let timer
+ if (scanNextShowScanQueue) {
+ if (queue === 'init') {
+ getQueue()
+ setQueue('...')
+ }
+ timer = setInterval(() => {
if (scanNextMode === 'setLocation') {
getQueue()
}
}, 2000)
- return () => clearInterval(timer)
- })
- }
- if (scannerQueueResponse && scannerQueueResponse.scanner?.status === 'ok') {
- setQueue(scannerQueueResponse.scanner.message)
- scannerQueueResponse.scanner = {}
- }
+ }
+ return () => timer ? clearInterval(timer) : null
+ })
+
+ useEffect(() => {
+ if (scannerQueueResponse?.scanner?.status === 'ok') {
+ setQueue(scannerQueueResponse.scanner.message)
+ scannerQueueResponse.scanner = {}
+ }
+ }, [!!scannerQueueResponse?.scanner])
return (
<>
@@ -122,23 +121,10 @@ export default function ScanNext({
scanAreas={scanAreas ? scanAreas.scanAreas[0]?.features : null}
/>
)}
-
+
>
)
}
diff --git a/src/components/layout/dialogs/scanner/ScanNextTarget.jsx b/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
index cbcf04a69..0dc4512c1 100644
--- a/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
+++ b/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
@@ -6,6 +6,31 @@ import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
import { Circle, Marker, Popup } from 'react-leaflet'
import { useTranslation } from 'react-i18next'
+const RADIUS_POKEMON = 70
+const RADIUS_GYM = 750
+const DISTANCE = {
+ M: RADIUS_POKEMON * 1.732,
+ XL: RADIUS_GYM * 1.732,
+}
+
+const calcScanNextCoords = (center, type) => {
+ const coords = [center]
+ if (type === 'S') return coords
+ const start = point([center[1], center[0]])
+ const options = { units: 'kilometers' }
+ return coords.concat(
+ [0, 60, 120, 180, 240, 300].map((bearing) => {
+ const [lon, lat] = destination(
+ start,
+ DISTANCE[type] / 1000,
+ bearing,
+ options,
+ ).geometry.coordinates
+ return [lat, lon]
+ }),
+ )
+}
+
export default function ScanNextTarget({
map,
scannerType,
@@ -23,29 +48,7 @@ export default function ScanNextTarget({
scanAreas,
}) {
const [position, setPosition] = useState(scanNextLocation)
- const radiusPokemon = 70
- const radiusGym = 750
- const calcScanNextCoords = (center, type) => {
- const coords = [center]
- if (type === 'S') return coords
- const start = point([center[1], center[0]])
- const distance = {
- M: radiusPokemon * 1.732,
- XL: radiusGym * 1.732,
- }
- const options = { units: 'kilometers' }
- return coords.concat(
- [0, 60, 120, 180, 240, 300].map((bearing) => {
- const [lon, lat] = destination(
- start,
- distance[type] / 1000,
- bearing,
- options,
- ).geometry.coordinates
- return [lat, lon]
- }),
- )
- }
+
const checkAreaValidity = (center) => {
if (!scanNextAreaRestriction?.length || !scanAreas?.length) return true
let isValid = false
@@ -188,7 +191,7 @@ export default function ScanNextTarget({
{scanNextCoords.map((coords) => (
(
Date: Fri, 7 Oct 2022 22:32:19 -0400
Subject: [PATCH 2/5] dry up a lot of code
- Consolidate repeat functions
- Consolidate repeat dialog
---
.../layout/dialogs/scanner/ScanDialog.jsx | 14 +-
.../layout/dialogs/scanner/ScanNext.jsx | 7 +-
.../layout/dialogs/scanner/ScanNextTarget.jsx | 34 +----
.../layout/dialogs/scanner/ScanZone.jsx | 38 +-----
.../layout/dialogs/scanner/ScanZoneTarget.jsx | 129 ++++++++----------
src/services/Utility.js | 5 +
src/services/functions/checkAreaValidity.js | 26 ++++
7 files changed, 113 insertions(+), 140 deletions(-)
create mode 100644 src/services/functions/checkAreaValidity.js
diff --git a/src/components/layout/dialogs/scanner/ScanDialog.jsx b/src/components/layout/dialogs/scanner/ScanDialog.jsx
index e99d9ed99..7b866f7ab 100644
--- a/src/components/layout/dialogs/scanner/ScanDialog.jsx
+++ b/src/components/layout/dialogs/scanner/ScanDialog.jsx
@@ -4,23 +4,23 @@ import { useTranslation } from 'react-i18next'
import Header from '@components/layout/general/Header'
import Footer from '@components/layout/general/Footer'
-export default function ScanDialog({ scanNextMode, setScanNextMode }) {
+export default function ScanDialog({ scanMode, setScanMode }) {
const { t } = useTranslation()
return (