Improved form implementation for contacts import list

mudita · Dec 9, 2024 · 5462388 · 5462388
1 parent 1619404
commit 5462388
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 42 deletions.
diff --git a/libs/generic-view/models/src/lib/form.ts b/libs/generic-view/models/src/lib/form.ts
@@ -22,7 +22,6 @@ const configValidator: z.ZodType<Config | undefined> = z
       reValidateMode: z.enum(["onChange", "onBlur", "onSubmit"]).optional(),
       defaultValues: z.record(z.string(), z.any()).optional(),
     }),
-    defaultValues: z.record(z.string(), z.any()).optional(),
   })
   .optional()
 

diff --git a/libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts b/libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts
@@ -36,11 +36,6 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
             activeContactId: null,
           },
         },
-        defaultValues: {
-          selectedContacts: [],
-          allContacts: [],
-          searchedContact: "",
-        },
       },
       childrenKeys: ["contactsLoader"],
     },

diff --git a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
@@ -77,6 +77,14 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
     [config, fieldRegistrar, getValues, inputName, multiSelect, setValue]
   )
 
+  const handleRef = useCallback(
+    (e: HTMLInputElement) => {
+      inputRef.current = e
+      fieldRegistrar.ref(e)
+    },
+    [fieldRegistrar]
+  )
+
   useEffect(() => {
     if (multiSelect) {
       if (multiSelect.selectedValues.length === multiSelect.allValues.length) {
@@ -108,10 +116,7 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
         disabled={config.disabled}
         {...fieldRegistrar}
         onChange={handleChange}
-        ref={(e) => {
-          inputRef.current = e
-          fieldRegistrar.ref(e)
-        }}
+        ref={handleRef}
       />
       <Label htmlFor={"checkbox-" + id}>
         <InputBox>

diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
@@ -3,12 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-} from "react"
+import React, { FunctionComponent, useMemo } from "react"
 import { defineMessages } from "react-intl"
 import { Modal } from "../../interactive/modal"
 import { IconType, useViewFormContext } from "generic-view/utils"
@@ -25,7 +20,6 @@ import { ButtonAction } from "generic-view/models"
 import { Paragraph5 } from "../../texts/paragraphs"
 
 export const SELECTED_CONTACTS_FIELD = "selected-contacts"
-export const ALL_CONTACTS_FIELD = "all-contacts"
 
 const messages = defineMessages({
   title: {
@@ -53,12 +47,10 @@ export const ImportContactsList: FunctionComponent<Props> = ({
   nextAction,
 }) => {
   const getFormContext = useViewFormContext()
-  const { watch, setValue } = getFormContext()
+  const { watch } = getFormContext()
   const contacts = useSelector(importContactsSelector)
   const searchPhrase = watch("search")
   const selectedContacts = watch(SELECTED_CONTACTS_FIELD) || []
-  const allContactsSelected =
-    selectedContacts.length === contacts?.length && contacts?.length > 0
 
   const filteredContacts = useMemo(() => {
     return contacts.filter(({ firstName, middleName, lastName }) => {
@@ -71,23 +63,6 @@ export const ImportContactsList: FunctionComponent<Props> = ({
     })
   }, [contacts, searchPhrase])
 
-  const toggleAll = useCallback(() => {
-    if (allContactsSelected) {
-      setValue(SELECTED_CONTACTS_FIELD, [])
-      setValue(ALL_CONTACTS_FIELD, "")
-    } else {
-      setValue(
-        SELECTED_CONTACTS_FIELD,
-        contacts.map(({ id }) => id)
-      )
-      setValue(ALL_CONTACTS_FIELD, "true")
-    }
-  }, [allContactsSelected, contacts, setValue])
-
-  useEffect(() => {
-    setValue(ALL_CONTACTS_FIELD, allContactsSelected ? "true" : "")
-  }, [allContactsSelected, setValue])
-
   return (
     <>
       <Modal.TitleIcon config={{ type: IconType.ContactsBook }} />
@@ -101,11 +76,9 @@ export const ImportContactsList: FunctionComponent<Props> = ({
       <AllContactsSelector>
         <AllCheckbox
           config={{
-            name: ALL_CONTACTS_FIELD,
-            value: "true",
+            name: SELECTED_CONTACTS_FIELD,
+            multipleValues: (contacts || []).map(({ id }) => id),
             label: intl.formatMessage(messages.selectAllButton),
-            onToggle: toggleAll,
-            checked: allContactsSelected,
           }}
         />
         <SelectedInfo>

diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx
@@ -182,7 +182,16 @@ export const ImportContacts: APIFC<undefined, ImportContactsConfig> = ({
   ...props
 }) => {
   return (
-    <Form {...props}>
+    <Form
+      {...props}
+      config={{
+        formOptions: {
+          defaultValues: {
+            [SELECTED_CONTACTS_FIELD]: [],
+          },
+        },
+      }}
+    >
       <ImportContactsForm {...config} />
     </Form>
   )