From 73afba37ac85ddde4cfd372d6229eeb54dd7956b Mon Sep 17 00:00:00 2001
From: valentinkolb <valentin.kolb@uni-ulm.de>
Date: Mon, 17 Jun 2024 20:22:49 +0200
Subject: [PATCH] fix(announcements): improved sending flow

---
 src/components/ConfirmModal.tsx               | 14 ++-----
 src/components/formUtil/FormFilter/index.tsx  | 19 ++++++++-
 src/pages/chat/components/Announcements.tsx   |  2 +-
 .../EventLists/Search/MessageEntriesModal.tsx |  1 +
 .../e/:eventId/EventLists/Search/index.tsx    | 41 +++++++++++--------
 5 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index 535027c..2b18db6 100644
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -1,7 +1,6 @@
 import {Button, Group, Modal, ModalProps, Text} from "@mantine/core";
 import {useDisclosure} from "@mantine/hooks";
 import {IconAlertTriangle} from "@tabler/icons-react";
-import {useState} from "react";
 
 
 /**
@@ -13,19 +12,17 @@ import {useState} from "react";
  * @param onCancel - the function to call when the user cancels (optional)
  * @param props - additional props for the modal
  */
-export const useConfirmModal = <T, >(
+export const useConfirmModal = (
     {title, description, onConfirm, onCancel, ...props}: {
         title?: string,
         description: string,
-        onConfirm: (t?: T) => void,
+        onConfirm: () => void,
         onCancel?: () => void
     } & Omit<ModalProps, "opened" | "onClose">
 ) => {
 
     const [showConfirmModal, handler] = useDisclosure(false)
 
-    const [data, setData] = useState<T | undefined>(undefined)
-
     const ConfirmModal = () => {
         return <>
             <Modal
@@ -48,15 +45,13 @@ export const useConfirmModal = <T, >(
                             onClick={() => {
                                 handler.close()
                                 onCancel?.()
-                                setData(undefined)
                             }}>
                             Abbrechen
                         </Button>
                         <Button
                             onClick={() => {
                                 handler.close()
-                                onConfirm(data)
-                                setData(undefined)
+                                onConfirm()
                             }}
                             size={"xs"}
                             leftSection={<IconAlertTriangle/>}
@@ -72,9 +67,8 @@ export const useConfirmModal = <T, >(
 
     return {
         showConfirmModal,
-        toggleConfirmModal: (t?: T) => {
+        toggleConfirmModal: () => {
             handler.toggle()
-            setData(t)
         },
         ConfirmModal
     }
diff --git a/src/components/formUtil/FormFilter/index.tsx b/src/components/formUtil/FormFilter/index.tsx
index 6c77185..375056d 100644
--- a/src/components/formUtil/FormFilter/index.tsx
+++ b/src/components/formUtil/FormFilter/index.tsx
@@ -4,6 +4,7 @@ import {FieldEntriesFilter, FieldEntryFilter} from "@/components/formUtil/FromIn
 import {Button, Group, Popover, Switch, Text} from "@mantine/core";
 import {IconFilter, IconFilterOff, IconFilterPlus} from "@tabler/icons-react";
 import {FilterField} from "@/components/formUtil/FormFilter/FilterField.tsx";
+import {useEffect} from "react";
 
 /**
  * todo
@@ -60,7 +61,7 @@ const createDefaultFilter = (field: FormSchemaField): FieldEntryFilter => {
  * @see assembleFilter
  * @see FormBuilder
  *
- * @param schema The schema to render
+ * @param schema The schema to render. Make sure that the schema is memoized!
  * @param label The label for the filter button
  * @param defaultValue The default value for the filter
  * @param onChange The function to call when the filter changes
@@ -72,7 +73,6 @@ export default function FormFilter({schema, label, defaultValue, onChange}: {
     onChange?: (filter: FieldEntriesFilter) => void,
 }) {
 
-
     const formValues = useForm({
         initialValues: defaultValue ?? {} as FieldEntriesFilter,
         onValuesChange: (values) => {
@@ -88,6 +88,21 @@ export default function FormFilter({schema, label, defaultValue, onChange}: {
         }
     }
 
+    useEffect(() => {
+        // this removes all filter values not present in schema, this is necessary because the schema might change
+        // and the filter values might not be valid anymore
+        const values = formValues.values
+        const newValues: FieldEntriesFilter = {}
+        Object.keys(values).forEach(key => {
+            if (schema.fields.find(f => f.id === key)) {
+                newValues[key] = values[key]
+            }
+        })
+        formValues.setValues(newValues)
+        console.log("Schema changed", values, newValues)
+        // eslint-disable-next-line
+    }, [schema])
+
     return <>
         <Popover width={300} position="bottom" withArrow shadow="md">
             <Popover.Target>
diff --git a/src/pages/chat/components/Announcements.tsx b/src/pages/chat/components/Announcements.tsx
index 27017c1..937c5d7 100644
--- a/src/pages/chat/components/Announcements.tsx
+++ b/src/pages/chat/components/Announcements.tsx
@@ -58,7 +58,7 @@ export default function Announcements() {
                 </Center>
             ) : announcements.length === 0 ? <div className={classes.text}>
                 <Text ta={"center"} size={"xs"} c={"dimmed"}>
-                    "Noch keine Ankündigungen"
+                    Noch keine Ankündigungen
                 </Text>
             </div> : null
             }
diff --git a/src/pages/events/e/:eventId/EventLists/Search/MessageEntriesModal.tsx b/src/pages/events/e/:eventId/EventLists/Search/MessageEntriesModal.tsx
index a9e3fed..f984bfb 100644
--- a/src/pages/events/e/:eventId/EventLists/Search/MessageEntriesModal.tsx
+++ b/src/pages/events/e/:eventId/EventLists/Search/MessageEntriesModal.tsx
@@ -62,6 +62,7 @@ export default function MessageEntriesModal({opened, event, onClose, query}: {
         },
         onSuccess: () => {
             showSuccessNotification("Nachrichten wurden versendet")
+            formValues.reset()
             onClose()
         }
     })
diff --git a/src/pages/events/e/:eventId/EventLists/Search/index.tsx b/src/pages/events/e/:eventId/EventLists/Search/index.tsx
index 902cfcb..2c61d6f 100644
--- a/src/pages/events/e/:eventId/EventLists/Search/index.tsx
+++ b/src/pages/events/e/:eventId/EventLists/Search/index.tsx
@@ -35,6 +35,7 @@ import EventEntries from "@/pages/events/e/:eventId/EventLists/Search/EventEntri
 import {useEventRights} from "@/pages/events/util.ts";
 import DownloadDataModal from "@/pages/events/e/:eventId/EventLists/Search/DownloadDataModal.tsx";
 import MessageEntriesModal from "@/pages/events/e/:eventId/EventLists/Search/MessageEntriesModal.tsx";
+import {useMemo} from "react";
 
 export default function ListSearch({event}: { event: EventModel }) {
 
@@ -118,12 +119,32 @@ export default function ListSearch({event}: { event: EventModel }) {
         initialPageParam: 1,
     })
 
-// this string informs the user about the current list selection
+    // this string informs the user about the current list selection
     const listInfoString = `${formValues.values.selectedLists.length > 0 ? ` in den Listen ${formValues.values.selectedLists.map(l => `'${l.name}'`).join(", ")}` : ""}`
 
     const entries = query.data?.pages.flatMap(p => p.items) ?? []
     const entriesCount = query.data?.pages?.[0]?.totalItems ?? 0
 
+    const questionSchema = useMemo(() => ({
+        fields: [
+            ...event.defaultEntryQuestionSchema?.fields ?? [],
+            ...formValues.values.selectedLists.map(l => ([
+                ...l.entryQuestionSchema?.fields ?? [],
+            ])).flat()
+        ]
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), [event.id, JSON.stringify(formValues.values.selectedLists)])
+
+    const statusSchema = useMemo(() => ({
+        fields: [
+            ...event.defaultEntryStatusSchema?.fields ?? [],
+            ...formValues.values.selectedLists.map(l => ([
+                ...l.entryStatusSchema?.fields ?? [],
+            ])).flat()
+        ]
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), [event.id, JSON.stringify(formValues.values.selectedLists)])
+
     return <div className={"stack"}>
         <Title order={4} c={"blue"}>Listen Anmeldungen</Title>
 
@@ -163,28 +184,14 @@ export default function ListSearch({event}: { event: EventModel }) {
                 <Group>
                     <FormFilter
                         label={"Fragen"}
-                        schema={{
-                            fields: [
-                                ...event.defaultEntryQuestionSchema?.fields ?? [],
-                                ...formValues.values.selectedLists.map(l => ([
-                                    ...l.entryQuestionSchema?.fields ?? [],
-                                ])).flat()
-                            ]
-                        }}
+                        schema={questionSchema}
                         defaultValue={formValues.values.questionFilter}
                         onChange={(qf) => formValues.setFieldValue("questionFilter", qf)}
                     />
 
                     <FormFilter
                         label={"Status"}
-                        schema={{
-                            fields: [
-                                ...event.defaultEntryStatusSchema?.fields ?? [],
-                                ...formValues.values.selectedLists.map(l => ([
-                                    ...l.entryStatusSchema?.fields ?? [],
-                                ])).flat()
-                            ]
-                        }}
+                        schema={statusSchema}
                         defaultValue={formValues.values.statusFilter}
                         onChange={(sf) => formValues.setFieldValue("statusFilter", sf)}
                     />