fix: saving and closing webhooks while editing

WatWowMap · Jan 28, 2024 · ce9eb43 · ce9eb43
1 parent 0a212dd
commit ce9eb43
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git a/src/components/layout/dialogs/webhooks/Manage.jsx b/src/components/layout/dialogs/webhooks/Manage.jsx
@@ -38,6 +38,7 @@ export default function Manage() {
   const feedbackLink = useMemory((s) => s.config.links.feedbackLink)
 
   const filters = useGenFullFilters()
+  const liveFilters = useWebhookStore((s) => s.tempFilters)
 
   /** @type {ReturnType<typeof React.useRef<HTMLElement | null>>} */
   const dialogRef = React.useRef(null)
@@ -124,7 +125,7 @@ export default function Manage() {
 
   return category !== 'human' && addNew.open ? (
     <Menu
-      tempFilters={filters[category]}
+      tempFilters={liveFilters}
       category={Poracle.getMapCategory(category)}
       categories={Poracle.getFilterCategories(category)}
       webhookCategory={category}

diff --git a/src/components/layout/dialogs/webhooks/WebhookAdv.jsx b/src/components/layout/dialogs/webhooks/WebhookAdv.jsx
@@ -766,19 +766,18 @@ export default function WebhookAdvanced() {
   }
 
   const handleClose = (save, filterId, filterToSave) => {
-    if (save) {
+    const realSave = typeof save === 'boolean' && save
+    if (realSave) {
       useWebhookStore.setState((prev) => {
         if (filterId === 'global' && filterToSave) {
           const newFilters = {}
           const wc = wildCards[category] || ['0-0']
           if (filterToSave.everything_individually !== false) {
             selectedIds.forEach((item) => {
-              if (!wc.includes(item)) {
-                newFilters[item] = {
-                  ...prev.tempFilters[item],
-                  ...filterToSave,
-                  enabled: true,
-                }
+              newFilters[item] = {
+                ...prev.tempFilters[item],
+                ...filterToSave,
+                enabled: true,
               }
             })
           } else {
@@ -810,13 +809,14 @@ export default function WebhookAdvanced() {
             },
           }
         }
+        return prev
       })
     } else {
       useWebhookStore.setState((prev) => ({
         tempFilters: { ...prev.tempFilters, [filterId]: { ...info?.defaults } },
       }))
     }
-    if (onClose) onClose(poracleValues)
+    if (onClose) onClose(poracleValues, realSave)
     useWebhookStore.setState((prev) => ({
       advanced: { ...prev.advanced, open: false, selectedIds: [] },
     }))

diff --git a/src/components/layout/dialogs/webhooks/store.js b/src/components/layout/dialogs/webhooks/store.js
@@ -34,7 +34,7 @@ import { create } from 'zustand'
  *    category: string
  *    selectedIds: string[]
  *    open: boolean
- *    onClose?: (newFilters: object) => void
+ *    onClose?: (newFilters: object, save?: boolean) => void
  *  }
  * }} WebhookStore
  * @type {import("zustand").UseBoundStore<import("zustand").StoreApi<WebhookStore>>}

diff --git a/src/components/layout/dialogs/webhooks/tiles/TrackedTile.jsx b/src/components/layout/dialogs/webhooks/tiles/TrackedTile.jsx
@@ -1,7 +1,11 @@
 import * as React from 'react'
 import DeleteForever from '@mui/icons-material/DeleteForever'
 import Edit from '@mui/icons-material/Edit'
-import { Grid, Typography, IconButton, Checkbox, Box } from '@mui/material'
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
+import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+import Checkbox from '@mui/material/Checkbox'
+import Box from '@mui/material/Box'
 
 import Utility from '@services/Utility'
 import Poracle from '@services/Poracle'
@@ -14,7 +18,7 @@ import { useWebhookStore, setSelected } from '../store'
 export default function TrackedTile({ index }) {
   const category = useWebhookStore((s) => s.category)
   const item = useWebhookStore((s) => s[category][index])
-  const id = Poracle.getId(item, category)
+  const id = Poracle.getId(item)
   const advOpen = useWebhookStore((s) => s.advanced)
   const selected = useWebhookStore((s) => (item ? s.selected[item.uid] : false))
   const defaults = useWebhookStore((s) => s.context.ui[category].defaults)
@@ -31,44 +35,45 @@ export default function TrackedTile({ index }) {
   }, [advOpen, id, item])
 
   const onClose = React.useCallback(
-    (newFilter) => {
-      apolloClient.mutate({
-        mutation: webhookNodes[category],
-        variables: {
-          data: Poracle.processor(category, [newFilter], defaults),
-          status: 'POST',
-          category,
-        },
-      })
+    (newFilter, save) => {
+      if (save) {
+        apolloClient.mutate({
+          mutation: webhookNodes[category],
+          variables: {
+            data: Poracle.processor(category, [newFilter], defaults),
+            status: 'POST',
+            category,
+          },
+        })
+      }
     },
     [category, defaults],
   )
 
   if (!item) return <Box>&nbsp;</Box>
 
   return (
-    <Grid
+    <Grid2
       container
-      item
       xs={12}
       bgcolor={Utility.getTileBackground(1, index)}
       justifyContent="center"
       alignItems="center"
       py={1}
     >
-      <Grid item xs={2} sm={1}>
+      <Grid2 xs={2} sm={1}>
         <img
           src={useMemory.getState().Icons.getIconById(id)}
           alt={id}
           style={{ maxWidth: 40, maxHeight: 40 }}
         />
-      </Grid>
-      <Grid item xs={6} sm={8} md={9}>
+      </Grid2>
+      <Grid2 xs={6} sm={8} md={9}>
         <Typography variant="caption">
           {item.description || Poracle.generateDescription(item, category)}
         </Typography>
-      </Grid>
-      <Grid item xs={4} sm={3} md={2} style={{ textAlign: 'right' }}>
+      </Grid2>
+      <Grid2 xs={4} sm={3} md={2} textAlign="right">
         <IconButton
           size="small"
           disabled={!item.uid}
@@ -120,7 +125,7 @@ export default function TrackedTile({ index }) {
           onChange={setSelected(item.uid)}
           color="secondary"
         />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   )
 }