Merge pull request #56 from TurtIeSocks/import-wizard

Import wizard

client/package.json

@@ -17,7 +17,7 @@
     "@codemirror/lint": "^6.1.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@geoman-io/leaflet-geoman-free": "github:TurtIeSocks/leaflet-geoman#66a5b28",
+    "@geoman-io/leaflet-geoman-free": "github:TurtIeSocks/leaflet-geoman#1dcf3a0",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.12",
@@ -42,6 +42,7 @@
     "react-leaflet-geoman-v2": "^0.2.2",
     "react-router": "^6.6.1",
     "react-router-dom": "^6.6.1",
+    "react-window": "^1.8.8",
     "shapefile": "^0.6.6",
     "use-deep-compare-effect": "^1.8.1",
     "zustand": "^4.1.5"
@@ -53,6 +54,7 @@
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@types/react-window": "^1.8.5",
     "@types/shapefile": "^0.6.1",
     "@typescript-eslint/eslint-plugin": "^5.45.1",
     "@typescript-eslint/parser": "^5.45.1",

client/src/assets/constants.ts

@@ -61,6 +61,28 @@ export const ICON_MAP: Record<string, typeof EditRoad> = {
   Geojson: Map,
 }
 
+export const RDM_FENCES = [
+  'AutoPokemon',
+  'AutoQuest',
+  'AutoTth',
+  'PokemonIV',
+] as const
+
+export const RDM_ROUTES = [
+  'CirclePokemon',
+  'CircleSmartPokemon',
+  'CircleRaid',
+  'CircleSmartRaid',
+] as const
+
+export const UNOWN_FENCES = ['AutoQuest'] as const
+
+export const UNOWN_ROUTES = [
+  'CirclePokemon',
+  'CircleRaid',
+  'ManualQuest',
+] as const
+
 export const COLORS = [
   '#F0F8FF',
   '#FAEBD7',

client/src/assets/types.ts

@@ -110,6 +110,7 @@ export interface PopupProps {
 export interface KojiGeofence {
   id: number
   name: string
+  mode: string
   area: Feature
 }
 

client/src/components/Code.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
-import ReactCodeMirror from '@uiw/react-codemirror'
+import ReactCodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror'
 import { json, jsonParseLinter } from '@codemirror/lang-json'
 import { linter } from '@codemirror/lint'
 
 import { usePersist } from '@hooks/usePersist'
 import { getData } from '@services/fetches'
+import Typography from '@mui/material/Typography'
+import { Box } from '@mui/material'
 
-interface EditProps {
-  code: string
+interface EditProps extends ReactCodeMirrorProps {
+  code?: string
   setCode: (code: string) => void
   textMode?: boolean
   children?: string
@@ -22,7 +24,7 @@ export function Code({
   setCode,
   textMode = false,
   children,
-  maxHeight,
+  ...rest
 }: EditProps | ReadProps) {
   const darkMode = usePersist((s) => s.darkMode)
 
@@ -32,25 +34,31 @@ export function Code({
   )
 
   return (
-    <ReactCodeMirror
-      key={darkMode.toString()}
-      extensions={extensions}
-      theme={darkMode ? 'dark' : 'light'}
-      value={children ?? code}
-      onUpdate={async (value) => {
-        if (value.docChanged) {
-          if (setCode) {
-            const newValue = value.state.doc.toString()
-            if (newValue.startsWith('http')) {
-              const remoteValue = await getData<object>(newValue)
-              setCode(JSON.stringify(remoteValue, null, 2))
-            } else {
-              setCode(newValue)
+    <Box py={3}>
+      <ReactCodeMirror
+        key={darkMode.toString()}
+        extensions={extensions}
+        theme={darkMode ? 'dark' : 'light'}
+        value={children ?? code ?? ''}
+        onUpdate={async (value) => {
+          if (value.docChanged) {
+            if (setCode) {
+              const newValue = value.state.doc.toString()
+              if (newValue.startsWith('http')) {
+                const remoteValue = await getData<object>(newValue)
+                setCode(JSON.stringify(remoteValue, null, 2))
+              } else {
+                setCode(newValue)
+              }
             }
           }
-        }
-      }}
-      maxHeight={maxHeight}
-    />
+        }}
+        {...rest}
+      />
+      <Typography variant="caption" color="grey">
+        You can also try entering a url for a remote JSON, Kōji will attempt to
+        fetch and parse it.
+      </Typography>
+    </Box>
   )
 }

client/src/components/ReactWindow.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { FixedSizeList, type ListChildComponentProps } from 'react-window'
+
+export default function ReactWindow<T, U>({
+  children,
+  rows,
+  data,
+  itemSize,
+  height = 500,
+  width = '100%',
+}: {
+  children: React.FC<ListChildComponentProps<U & { rows: T[] }>>
+  rows: T[]
+  data: U
+  itemSize?: number
+  height?: number
+  width?: number | string
+}) {
+  return (
+    <FixedSizeList
+      height={height}
+      width={width}
+      itemCount={rows.length}
+      itemSize={itemSize || 40}
+      itemData={{ rows, ...data }}
+    >
+      {children}
+    </FixedSizeList>
+  )
+}

client/src/components/dialogs/Base.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitleProps,
+  type DialogProps,
+  DialogContentProps,
+  DialogActionsProps,
+} from '@mui/material'
+import DialogHeader from './Header'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  title: string
+  children: React.ReactNode
+  Components?: {
+    Dialog?: Partial<DialogProps>
+    DialogTitle?: Partial<DialogTitleProps>
+    DialogContent?: Partial<DialogContentProps>
+    DialogActions?: Partial<DialogActionsProps>
+  }
+}
+export default function BaseDialog({
+  open,
+  onClose,
+  title,
+  children,
+  Components,
+}: Props) {
+  const { children: actions, ...actionProps } = Components?.DialogActions || {}
+
+  return (
+    <Dialog open={open} onClose={onClose} {...Components?.Dialog}>
+      <DialogHeader action={onClose} {...Components?.DialogTitle}>
+        {title}
+      </DialogHeader>
+      <DialogContent {...Components?.DialogContent}>{children}</DialogContent>
+      <DialogActions
+        sx={(theme) => ({
+          mt: 3,
+          bgcolor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.grey[700]
+              : theme.palette.grey[200],
+        })}
+        {...actionProps}
+      >
+        {actions}
+        <Button onClick={onClose} color="error">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

client/src/components/dialogs/Header.tsx

@@ -1,20 +1,28 @@
 import * as React from 'react'
-import { DialogTitle, IconButton } from '@mui/material'
+import { DialogTitle, DialogTitleProps, IconButton } from '@mui/material'
 import Clear from '@mui/icons-material/Clear'
 
-interface Props {
+interface Props extends DialogTitleProps {
   children?: React.ReactNode
   action?: () => void
 }
 
-export default function DialogHeader({ children, action }: Props) {
+export default function DialogHeader({ children, action, ...rest }: Props) {
   return (
-    <DialogTitle>
+    <DialogTitle
+      sx={(theme) => ({
+        bgcolor:
+          theme.palette.mode === 'dark'
+            ? theme.palette.grey[700]
+            : theme.palette.grey[200],
+      })}
+      {...rest}
+    >
       {children}
       {!!action && (
         <IconButton
           onClick={action}
-          style={{ position: 'absolute', right: 5, top: 5 }}
+          style={{ position: 'absolute', right: 12, top: 12 }}
         >
           <Clear />
         </IconButton>

client/src/components/dialogs/Polygon.tsx

@@ -79,17 +79,14 @@ export default function ExportPolygon({
       ;(async () => {
         try {
           const cleanCode = code.trim()
-          const remote = cleanCode.startsWith('http')
-            ? await fetch(cleanCode).then((res) => res.json())
-            : cleanCode
           const parsed: ToConvert =
-            remote.startsWith('{') || remote.startsWith('[')
+            cleanCode.startsWith('{') || cleanCode.startsWith('[')
               ? JSON.parse(
-                  remote.endsWith(',')
-                    ? remote.substring(0, remote.length - 1)
-                    : remote,
+                  cleanCode.endsWith(',')
+                    ? cleanCode.substring(0, cleanCode.length - 1)
+                    : cleanCode,
                 )
-              : remote
+              : cleanCode
           const geojson = await convert<FeatureCollection>(
             parsed,
             'featureCollection',