feat: data management page

packages/locales/lib/human/en.json

@@ -737,5 +737,28 @@
   "filter_help": "Filter Help",
   "kilometers": "Kilometers",
   "miles": "Miles",
-  "distance_unit": "Distance Unit"
+  "distance_unit": "Distance Unit",
+  "data_management": "Data Management",
+  "reset_or_manage_text": "You can either hard reset your filters or you can view the data management page which will allow you to reset individual categories.",
+  "reset_audio": "Reset Audio",
+  "reset_all": "Reset All",
+  "reset_icons": "Reset Icons",
+  "reset_position": "Reset Position",
+  "reset_ui": "Reset UI",
+  "reset_options": "Reset Options",
+  "reset_menus": "Reset Menus",
+  "reset_settings": "Reset Settings",
+  "reset_pokemon": "Reset Pokémon",
+  "reset_pokestops": "Reset PokéStops",
+  "reset_gyms": "Reset Gyms",
+  "reset_nests": "Reset Nests",
+  "reset_portals": "Reset Portals",
+  "reset_routes": "Reset Routes",
+  "reset_scan_areas": "Reset Scan Areas",
+  "reset_scan_cells": "Reset Scan Cells",
+  "reset_devices": "Reset Devices",
+  "reset_weather": "Reset Weather",
+  "reset_s2cells": "Reset S2 Cells",
+  "reset_spawnpoints": "Reset Spawnpoints",
+  "reset_submission_cells": "Reset Submission Cells"
 }

src/assets/mui/theme.js

@@ -152,8 +152,7 @@ const components = {
  * @returns {import('@mui/material').Theme}
  */
 export default function useCustomTheme() {
-  const primary = useMemory((s) => s.theme.primary)
-  const secondary = useMemory((s) => s.theme.secondary)
+  const { primary, secondary } = useMemory((s) => s.theme)
   const darkMode = useStorage((s) => s.darkMode)
 
   if (darkMode) {
@@ -177,6 +176,10 @@ export default function useCustomTheme() {
               main: secondary,
               contrastText: '#fff',
             },
+            info: {
+              main: '#2AB5F6',
+              contrastText: '#fff',
+            },
             discord: {
               main: '#5865F2',
               green: '#57F287',

src/components/App.jsx

@@ -19,9 +19,7 @@ import '@services/events'
 import ErrorBoundary from './ErrorBoundary'
 import ReactRouter from './ReactRouter'
 import HolidayEffects from './HolidayEffects'
-/**
- * @type {Record<string, string>}
- */
+
 const LOADING_LOCALES = {
   de: 'Übersetzungen werden geladen',
   en: 'Loading Translations',

src/components/ReactRouter.jsx

@@ -6,8 +6,9 @@ import Auth from './layout/auth/Auth'
 import Login from './layout/auth/Login'
 import Blocked from './layout/auth/Blocked'
 import Errors from './Errors'
-import ClearStorage from './ClearStorage'
+import DataManagement from '../features/data'
 import Config from './Config'
+import ResetAll from './Reset'
 
 const Playground = React.lazy(() => import('../features/playground'))
 
@@ -21,28 +22,32 @@ const loginRoute = (
     <Login />
   </Config>
 )
-const resetRoute = <ClearStorage />
+const dataRoute = (
+  <Config>
+    <DataManagement />
+  </Config>
+)
 const blockedRoute = (
   <Config>
     <Blocked />
   </Config>
 )
+const playgroundRoute = (
+  <Config>
+    <Playground />
+  </Config>
+)
 const errorRoute = <Errors />
+const resetRoute = <ResetAll />
 
 export default function ReactRouter() {
   return (
     <Routes>
       <Route path="/" element={authRoute} />
       <Route path="reset" element={resetRoute} />
       <Route path="login" element={loginRoute} />
-      <Route
-        path="playground"
-        element={
-          <Config>
-            <Playground />
-          </Config>
-        }
-      />
+      <Route path="data-management" element={dataRoute} />
+      <Route path="playground" element={playgroundRoute} />
       <Route path="blocked/:info" element={blockedRoute} />
       <Route path="@/:lat/:lon" element={authRoute} />
       <Route path="@/:lat/:lon/:zoom" element={authRoute} />

src/components/Reset.jsx

@@ -0,0 +1,10 @@
+// @ts-check
+import * as React from 'react'
+import { Navigate } from 'react-router-dom'
+
+import { hardReset } from '@services/functions/resetState'
+
+export default function ResetAll() {
+  hardReset()
+  return <Navigate to="/" />
+}

src/components/layout/dialogs/ResetFilters.jsx

@@ -1,8 +1,10 @@
+// @ts-check
 import * as React from 'react'
 import DialogContent from '@mui/material/DialogContent'
 import Typography from '@mui/material/Typography'
+import Grid2 from '@mui/material/Unstable_Grid2'
 import Button from '@mui/material/Button'
-import { Navigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import { useLayoutStore } from '@hooks/useLayoutStore'
@@ -11,54 +13,64 @@ import Header from '../general/Header'
 import Footer from '../general/Footer'
 import { DialogWrapper } from './DialogWrapper'
 
-export default function ResetFilters() {
-  const { t } = useTranslation()
-  const [redirect, setRedirect] = React.useState(false)
+const handleClose = () => useLayoutStore.setState({ resetFilters: false })
 
-  const handleClose = React.useCallback(
-    () => useLayoutStore.setState({ resetFilters: false }),
-    [],
-  )
+const FOOTER_OPTIONS =
+  /** @type {import('../general/Footer').FooterButton[]} */ ([
+    {
+      name: 'close',
+      action: handleClose,
+      color: 'primary',
+      align: 'right',
+    },
+  ])
 
-  if (redirect) {
-    return <Navigate push to="/reset" />
-  }
+export default function ResetFilters() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
 
   return (
     <DialogWrapper dialog="resetFilters" variant="small">
-      <Header titles={[t('filters_reset_title')]} />
-      <DialogContent>
-        <Typography variant="subtitle1" align="center">
-          {t('filters_reset_text')}
-        </Typography>
-        <br />
-        <Typography align="center">
+      <Header titles={t('filters_reset_title')} />
+      <Grid2
+        component={DialogContent}
+        className="flex-center"
+        container
+        rowGap={2}
+      >
+        <Grid2 xs={12} mt={2}>
+          <Typography variant="subtitle1" align="center">
+            {t('reset_or_manage_text')}
+          </Typography>
+        </Grid2>
+        <Grid2 xs={12} sm={6} className="flex-center">
+          <Button
+            variant="contained"
+            color="info"
+            size="small"
+            onClick={() => {
+              handleClose()
+              navigate('/data-management')
+            }}
+          >
+            {t('data_management')}
+          </Button>
+        </Grid2>
+        <Grid2 xs={12} sm={6} className="flex-center">
           <Button
-            style={{ minWidth: 100 }}
             variant="contained"
-            color="primary"
+            color="error"
             size="small"
             onClick={() => {
-              setRedirect(true)
               handleClose()
+              navigate('/reset')
             }}
           >
             {t('confirm_filters_reset')}
           </Button>
-        </Typography>
-        <br />
-      </DialogContent>
-      <Footer
-        options={[
-          {
-            name: 'close',
-            action: handleClose,
-            color: 'primary',
-            align: 'right',
-          },
-        ]}
-        role="webhook_footer"
-      />
+        </Grid2>
+      </Grid2>
+      <Footer options={FOOTER_OPTIONS} />
     </DialogWrapper>
   )
 }

src/components/layout/general/BasicListButton.jsx

@@ -9,13 +9,15 @@ import { useTranslation } from 'react-i18next'
 /**
  * @param {{ label?: string } & import('@mui/material').ListItemButtonProps} props
  */
-export function BasicListButton({ children, label, ...props }) {
+export function BasicListButton({ children, label, color, ...props }) {
   const { t } = useTranslation()
   return (
     <ListItem disablePadding>
       <ListItemButton {...props}>
         {children && <ListItemIcon>{children}</ListItemIcon>}
-        {label && <ListItemText primary={t(label)} />}
+        {label && (
+          <ListItemText primary={t(label)} primaryTypographyProps={{ color }} />
+        )}
       </ListItemButton>
     </ListItem>
   )

src/features/data/components/Notification.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import { useDataManagementStore } from '../hooks/store'
+
+const handleClose = (_, reason) => {
+  if (reason === 'clickaway') {
+    return
+  }
+  useDataManagementStore.setState({ notification: false })
+}
+
+export function DataManagementNotification() {
+  const open = useDataManagementStore((s) => s.notification)
+  const message = useDataManagementStore((s) => s.message)
+  const severity = useDataManagementStore((s) => s.severity)
+
+  return (
+    <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+      <Alert onClose={handleClose} severity={severity} variant="filled">
+        {message}
+      </Alert>
+    </Snackbar>
+  )
+}

src/features/data/components/ResetFilters.jsx

@@ -0,0 +1,54 @@
+// @ts-check
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useMemory } from '@hooks/useMemory'
+import { resetFilter, resetFilters } from '@services/functions/resetState'
+import Utility from '@services/Utility'
+
+import {
+  ButtonWithNotification,
+  ChildContainer,
+  StyledDivider,
+  StyledSubHeader,
+} from './Shared'
+import { useDataManagementStore } from '../hooks/store'
+
+export function ResetFilters() {
+  const { t } = useTranslation()
+  const perms = useMemory((s) => s.auth.perms)
+  const filters = useMemory((s) => s.filters)
+  const isHovering = useDataManagementStore((s) => s.resetFiltersHover)
+
+  return (
+    <ChildContainer>
+      <StyledSubHeader>Filters</StyledSubHeader>
+      {Object.keys(filters)
+        .filter((perm) => perms[perm])
+        .map((/** @type {import('@rm/types').Categories} */ key) => (
+          <ButtonWithNotification
+            key={key}
+            onClick={() => resetFilter(key)}
+            color="warning.main"
+            label={t(`reset_${Utility.camelToSnake(key)}`)}
+            category="filter"
+            isHovering={isHovering}
+          />
+        ))}
+      <StyledDivider />
+      <ButtonWithNotification
+        onClick={resetFilters}
+        label="Reset All"
+        color="error.main"
+        category="filter"
+        all
+        onMouseEnter={() =>
+          useDataManagementStore.setState({ resetFiltersHover: true })
+        }
+        onMouseLeave={() =>
+          useDataManagementStore.setState({ resetFiltersHover: false })
+        }
+      />
+    </ChildContainer>
+  )
+}