modals refactor

andrew-bierman · Jan 12, 2025 · 77450f9 · 77450f9
1 parent 0db3c86
commit 77450f9
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 68 deletions.
diff --git a/packages/app/modules/item/components/AddItem.tsx b/packages/app/modules/item/components/AddItem.tsx
@@ -102,6 +102,7 @@ export const AddItem = ({
       <ItemForm
         validationSchema={isEdit ? editItemSchema : addItemSchema}
         handleSubmit={handleSubmit}
+        closeModalHandler={closeModalHandler}
         defaultValues={defaultValues}
         isLoading={isLoading}
         isEdit={isEdit}

diff --git a/packages/app/modules/item/components/AddItemModal.tsx b/packages/app/modules/item/components/AddItemModal.tsx
@@ -35,13 +35,6 @@ export const AddItemModal = ({
         />
       }
       showTrigger={showTrigger}
-      footerButtons={[
-        {
-          label: 'Cancel',
-          color: '#B22222',
-          onClick: (_, closeModal) => closeModal(),
-        },
-      ]}
       footerComponent={undefined}
       isOpen={isAddItemModalOpen}
       onOpen={() => setIsAddItemModalOpen(true)}

diff --git a/packages/app/modules/item/components/ImportForm.tsx b/packages/app/modules/item/components/ImportForm.tsx
@@ -6,6 +6,7 @@ import * as DocumentPicker from 'expo-document-picker';
 import { useImportItem, useImportFromBucket } from '../hooks';
 import { useImportPackItem } from '../../pack/hooks';
 import useResponsive from 'app/hooks/useResponsive';
+import RPrimaryButton from 'app/components/RPrimaryButton';
 
 interface ImportFormProps {
   showSubmitButton?: boolean;
@@ -183,9 +184,11 @@ export const ImportForm: FC<ImportFormProps> = ({
           style={{ width: '100%' }}
         />
       </View>
-      <RButton onClick={handleItemImport} disabled={isImporting}>
-        <RText style={{ color: currentTheme.colors.text }}>{buttonText}</RText>
-      </RButton>
+      <RPrimaryButton
+        onPress={handleItemImport}
+        disabled={isImporting}
+        label={buttonText}
+      />
     </View>
   );
 };
diff --git a/packages/app/modules/item/components/ItemForm.tsx b/packages/app/modules/item/components/ItemForm.tsx
@@ -8,6 +8,8 @@ import {
   FormSelect,
   FormRadioGroup,
   DropdownComponent,
+  RButton,
+  XStack,
 } from '@packrat/ui';
 import { Platform, View } from 'react-native';
 
@@ -28,6 +30,7 @@ interface ItemFormProps {
   isEdit?: boolean;
   defaultValues: Partial<Item>;
   validationSchema: any;
+  closeModalHandler?: () => void;
   currentPack?: {
     items: Array<{
       category: {
@@ -39,6 +42,7 @@ interface ItemFormProps {
 
 export const ItemForm = ({
   handleSubmit,
+  closeModalHandler,
   showSubmitButton = true,
   isLoading,
   isEdit,
@@ -123,14 +127,24 @@ export const ItemForm = ({
             style={{ width: '100%' }}
           />
           <FormRadioGroup name={'type' as any} options={radioOptions} />
-
-          {showSubmitButton && (
-            <SubmitButton onSubmit={handleSubmit}>
-              <RText style={{ color: currentTheme.colors.white }}>
-                {isLoading ? 'Loading..' : isEdit ? 'Edit item' : 'Add Item'}
-              </RText>
-            </SubmitButton>
-          )}
+          <XStack style={{ justifyContent: 'flex-end', gap: 8 }}>
+            {showSubmitButton && (
+              <SubmitButton onSubmit={handleSubmit}>
+                <RText style={{ color: currentTheme.colors.white }}>
+                  {isLoading ? 'Loading..' : isEdit ? 'Edit item' : 'Add Item'}
+                </RText>
+              </SubmitButton>
+            )}
+            {closeModalHandler && (
+              <RButton
+                backgroundColor="#B22222"
+                onPress={closeModalHandler}
+                label="Cancel"
+              >
+                <RText style={{ color: '#fff' }}>Cancel</RText>
+              </RButton>
+            )}
+          </XStack>
         </RStack>
       </Form>
     </View>

diff --git a/packages/app/modules/pack/components/EditPackModal.tsx b/packages/app/modules/pack/components/EditPackModal.tsx
@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { BaseModal } from '../../../../ui/src/modal/BaseModal';
-import RButton from '@packrat/ui/src/RButton';
-import RInput from '@packrat/ui/src/RInput';
 import { useEditPack } from '../hooks/useEditPack';
 import RStack from '@packrat/ui/src/RStack';
 import RText from '@packrat/ui/src/RText';
-import { Switch } from 'tamagui';
-import RSwitch from '@packrat/ui/src/RSwitch';
+import { Form, FormInput, FormSwitch, useFormSubmitTrigger } from '@packrat/ui';
+import { editPack as editPackSchema } from '@packrat/validations';
 
 interface EditPackModalProps {
   isOpen?: boolean;
@@ -23,14 +21,16 @@ export const EditPackModal: React.FC<EditPackModalProps> = ({
 }) => {
   const [packName, setPackName] = useState(currentPack?.name ?? '');
   const [isPublic, setIsPublic] = useState(currentPack?.is_public ?? true);
+  const [formRef, triggerSubmit] = useFormSubmitTrigger();
   const { editPack, isLoading, isError } = useEditPack();
 
-  const handleEditPack = async () => {
+  const handleEditPack = async (closeModal, { name: packName, is_public }) => {
     try {
       editPack(
-        { id: currentPack.id, name: packName, is_public: isPublic },
+        { id: currentPack.id, name: packName, is_public },
         {
           onSuccess: () => {
+            closeModal();
             onClose?.();
             refetch?.();
           },
@@ -53,6 +53,15 @@ export const EditPackModal: React.FC<EditPackModalProps> = ({
       showTrigger={false}
       title="Edit Pack"
       footerButtons={[
+        {
+          label: 'Save',
+          color: '#232323',
+          onClick: (_, closeModal) => {
+            if (typeof triggerSubmit === 'function') {
+              triggerSubmit(closeModal);
+            }
+          },
+        },
         {
           label: 'Cancel',
           color: '#B22222',
@@ -65,31 +74,21 @@ export const EditPackModal: React.FC<EditPackModalProps> = ({
       isOpen={isOpen}
       onClose={onClose}
     >
-      <RInput
-        placeholder="Pack Name"
-        value={packName}
-        onChangeText={(t) => setPackName(t)}
-        style={{ width: 200 }}
-      />
-      <RStack
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <RText>Public </RText>
-        <RSwitch
-          checked={isPublic}
-          onCheckedChange={() => setIsPublic((prev) => !prev)}
-          size="$1.5"
+      <RStack style={{ width: 320, gap: 8 }}>
+        <Form
+          ref={formRef}
+          onSubmit={handleEditPack}
+          validationSchema={editPackSchema}
+          defaultValues={{
+            id: currentPack?.id,
+            name: currentPack?.name,
+            is_public: currentPack?.is_public,
+          }}
         >
-          <Switch.Thumb />
-        </RSwitch>
+          <FormInput label="Name" name="name" />
+          <FormSwitch name="is_public" labelLeft="Is public" size="$2.5" />
+        </Form>
       </RStack>
-      <RButton onPress={handleEditPack} disabled={isLoading}>
-        {isLoading ? 'Saving...' : 'Save'}
-      </RButton>
       {isError && (
         <RStack>
           <RText style={{ color: 'red' }}>Failed to save changes</RText>

diff --git a/packages/ui/src/form/components/Form.tsx b/packages/ui/src/form/components/Form.tsx
@@ -12,7 +12,7 @@ export { useFormContext as useAppFormContext } from 'react-hook-form';
 interface Props extends Omit<UseFormProps, 'resolver'> {
   validationSchema?: any;
   formRef?: any;
-  onSubmit?: FormSubmitHandler<FieldValues>;
+  onSubmit?: any;
   children: ReactNode;
 }
 
@@ -23,17 +23,13 @@ export const Form = forwardRef<any, Props>(
       resolver: validationSchema ? zodResolver(validationSchema) : undefined,
     });
 
-    useImperativeHandle(
-      ref,
-      () => {
-        return {
-          submit: (...params) =>
-            typeof onSubmit === 'function' &&
-            form.handleSubmit(onSubmit.bind(null, ...params))(),
-        };
-      },
-      [form, onSubmit],
-    );
+    useImperativeHandle(ref, () => {
+      return {
+        submit: (...params) =>
+          typeof onSubmit === 'function' &&
+          form.handleSubmit(onSubmit.bind(null, ...params))(),
+      };
+    }, [form, onSubmit]);
 
     return (
       <FormProvider {...form}>

diff --git a/packages/ui/src/form/components/FormSwitch.tsx b/packages/ui/src/form/components/FormSwitch.tsx
@@ -3,8 +3,12 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export { LmSwitch as Switch } from '../lib';
 
 interface Props
-  extends LmSwitchRhfProps<{ label: string | number; value: any }> {
+  extends Omit<
+    LmSwitchRhfProps<{ label: string | number; value: any }>,
+    'name'
+  > {
   style?: StyleProp<ViewStyle>;
+  name: string;
 }
 
 // TODO change the name to "Input" after handling tamagui all components export,

diff --git a/packages/ui/src/form/components/SubmitButton.tsx b/packages/ui/src/form/components/SubmitButton.tsx
@@ -12,11 +12,10 @@ export const SubmitButton = <T extends {}>({
   return (
     <LmSubmitButtonRhf
       $theme-dark={{
-        ...({ color: 'text', backgroundColor: '$colors.background' } as any),
+        ...({ backgroundColor: '$colors.background' } as any),
       }}
       $theme-light={{
         ...({
-          color: 'text',
           backgroundColor: '#232323',
           fontWeight: 700,
         } as any),
@@ -27,6 +26,7 @@ export const SubmitButton = <T extends {}>({
       }}
       disabledStyle={{ opacity: 0.6 }}
       style={{
+        color: '#fff',
         ...safeStyle,
       }}
       {...props}

diff --git a/packages/ui/src/modal/BaseModal.tsx b/packages/ui/src/modal/BaseModal.tsx
@@ -139,12 +139,14 @@ export const BaseModal = ({
             {children}
           </ModalProvider>
 
-          <RStack
-            style={{ alignSelf: 'flex-end', flexDirection: 'row' }}
-            gap="$4"
-          >
-            {memoFooterButtons}
-          </RStack>
+          {!!memoFooterButtons?.length && (
+            <RStack
+              style={{ alignSelf: 'flex-end', flexDirection: 'row' }}
+              gap="$2"
+            >
+              {memoFooterButtons}
+            </RStack>
+          )}
           {footerElement}
           <Dialog.Close asChild>
             <Button