reset, default data, update object

Author: aaronksaunders

src/DataContext.tsx

@@ -6,6 +6,7 @@ import { IModalData } from "./components/AddSomethingModal";
 
 interface IState {
   dataCollection: null | undefined | any;
+  updateItem: (itemData: IModalData) => Promise<void>;
   addItem: (itemData: IModalData) => Promise<void>;
   removeItem: (itemData: IModalData) => Promise<void>;
 }
@@ -34,6 +35,14 @@ export const DataProvider: React.FC = ({ children }) => {
     return thingsRef.doc().set({ ...itemData });
   };
 
+  /**
+   *
+   * @param itemData
+   */
+const updateItem = (itemData: IModalData) => {
+  return thingsRef.doc(itemData.id).set({ ...itemData }, { merge: true });
+};
+
   /**
    *
    * @param itemData
@@ -42,15 +51,16 @@ export const DataProvider: React.FC = ({ children }) => {
     return thingsRef.doc(itemData.id).delete();
   };
 
-  // the store object
-  let state = {
-    dataCollection: data,
-    addItem,
-    removeItem,
-  };
+// the store object
+let state = {
+  dataCollection: data,
+  addItem,
+  updateItem,
+  removeItem,
+};
 
-  // wrap the application in the provider with the initialized context
-  return <DataContext.Provider value={state}>{children}</DataContext.Provider>;
+// wrap the application in the provider with the initialized context
+return <DataContext.Provider value={state}>{children}</DataContext.Provider>;
 };
 
 export default DataContext;

src/components/AddSomethingModal.tsx

@@ -7,82 +7,99 @@ import {
   IonTitle,
   IonContent,
   IonPage,
+  IonLabel,
+  IonItem,
+  IonText,
 } from "@ionic/react";
 
-import { useForm } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { MyIonTextItem } from "./MyIonTextItem";
 
 const AddSomethingModal: React.FunctionComponent<{
   onCloseModal: (data: IModalResponse) => Promise<void>;
-}> = ({ onCloseModal }) => {
+  initialData?: IModalData;
+}> = ({ onCloseModal, initialData }) => {
   // from react-hook-form
-  // SEE - https://react-hook-form.com/
-  const { handleSubmit, control, errors } = useForm();
+  const methods = useForm({
+    defaultValues: initialData,
+  });
   /**
    * get data from form and pass it back to the parent
    * component
    */
   const addTheThing = async (data: IModalData) => {
-    console.log(data);
-    onCloseModal({ hasData: true, data });
+    console.log({ ...initialData, ...data });
+    onCloseModal({ hasData: true, data: { ...initialData, ...data } });
   };
 
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar color="light">
           <IonButtons slot="start" />
-          <IonTitle>Enter Thing Information</IonTitle>
+          <IonTitle>{initialData ? "Update " : "Create New "} Thing</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent className="ion-padding">
-        <form onSubmit={handleSubmit(addTheThing)}>
-          <MyIonTextItem
-            labelName="Podcast Name"
-            name="podcastName"
-            errors={errors}
-            control={control}
-          />
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(addTheThing)}>
+            <MyIonTextItem labelName="Podcast Name" name="podcastName" />
 
-          <MyIonTextItem
-            labelName="Host"
-            name="podcastHost"
-            errors={errors}
-            control={control}
-          />
+            <MyIonTextItem labelName="Host" name="podcastHost" />
 
-          <MyIonTextItem
-            labelName="URL"
-            name="podcastURL"
-            errors={errors}
-            control={control}
-          />
+            <MyIonTextItem labelName="URL" name="podcastURL" />
+            {initialData && (
+              <IonItem>
+                <IonLabel>ID</IonLabel>
+                <IonText>{initialData.id}</IonText>
+              </IonItem>
+            )}
 
-          <div className="ion-padding">
-            <IonButton expand="block" type="submit">
-              Save Podcast Information
-            </IonButton>
-            <IonButton
-              expand="block"
-              type="button"
-              onClick={() => onCloseModal({ hasData: false })}
-            >
-              Cancel
-            </IonButton>
-          </div>
-        </form>
+            <div className="ion-padding">
+              <IonButton expand="block" type="submit">
+                {initialData ? "Update " : "Save "} Podcast Information
+              </IonButton>
+              {!initialData && (
+                <IonButton
+                  color="warning"
+                  expand="block"
+                  type="button"
+                  onClick={() =>
+                    methods.reset({
+                      podcastHost: "",
+                      podcastName: "",
+                      podcastURL: "",
+                    })
+                  }
+                >
+                  Clear Form
+                </IonButton>
+              )}
+              <IonButton
+                color="danger"
+                expand="block"
+                type="button"
+                onClick={() =>
+                  onCloseModal({ hasData: false, data: undefined })
+                }
+              >
+                Cancel
+              </IonButton>
+            </div>
+          </form>
+        </FormProvider>
       </IonContent>
     </IonPage>
   );
 };
 
-export default AddSomethingModal;
+export default React.memo(AddSomethingModal);
 
 export type IModalData = {
   podcastName: string;
   podcastHost: string;
   podcastURL: string;
-  id? : string;
+  id?: string;
 };
 
 export type IModalResponse = {

src/components/MyIonTextItem.tsx

@@ -1,35 +1,36 @@
 import React from "react";
-import {
-  IonItem,
-  IonLabel,
-  IonInput
-} from "@ionic/react";
-import { Controller } from "react-hook-form";
+import { IonItem, IonLabel, IonInput } from "@ionic/react";
+import { Controller, useFormContext } from "react-hook-form";
 import { MyErrorDisplay } from "./MyErrorDisplay";
 /**
  * custom component to render the text fields
  * @param param0
  */
 export const MyIonTextItem: React.FunctionComponent<{
   name: string;
-  errors: any;
-  render?: any;
-  control: any;
   labelName: string;
-}> = ({ name, errors, render, control, labelName }) => {
+}> = ({ name, labelName }) => {
+  const { control, errors, register } = useFormContext();
+
   return (
     <>
       <IonItem>
         <IonLabel>{labelName}</IonLabel>
         <Controller
           render={({ onChange }) => (
-            <IonInput type="text" onIonChange={onChange} defaultValue="" />
+            <IonInput
+              type="text"
+              name={name}
+              ref={register}
+              onIonChange={onChange}
+            />
           )}
           control={control}
           name={name}
           rules={{
             required: labelName + " is a required field",
-          }} />
+          }}
+        />
       </IonItem>
       <MyErrorDisplay errors={errors} elementName={name} />
     </>

src/pages/Home.tsx

@@ -7,10 +7,8 @@ import {
   IonToolbar,
   IonTitle,
   IonContent,
-  IonLabel,
   IonLoading,
   IonList,
-  IonItem,
   IonModal,
   IonAlert,
 } from "@ionic/react";
@@ -23,6 +21,7 @@ import AddSomethingModal, {
 } from "../components/AddSomethingModal";
 import { useHistory } from "react-router";
 import { useDataProvider } from "../DataContext";
+import Line from "./Line";
 
 type IShowAlert = null | {
   header: string;
@@ -34,13 +33,14 @@ const Home: React.FunctionComponent = () => {
   // reactfire hook to get auth information
   const auth = useAuth();
   const history = useHistory();
-  const { addItem, removeItem, dataCollection } = useDataProvider();
+  const { addItem, removeItem, dataCollection, updateItem } = useDataProvider();
 
-  console.log(dataCollection);
-
-  // manages the state to determine if we need to open
-  // the modal or not
-  const [showModal, setShowModal] = useState(false);
+// manages the state to determine if we need to open
+// the modal or not
+const [showModal, setShowModal] = useState<{
+  show: boolean;
+  initialData?: IModalData;
+}>({ show: false });
 
   // manages the state to determine if we need to open
   // the modal or not
@@ -61,6 +61,13 @@ const Home: React.FunctionComponent = () => {
     });
   };
 
+/**
+ * @param item 
+ */
+const editSomething = (item: IModalData) => {
+  setShowModal({ show: true, initialData: item });
+};
+
   /**
    *
    * @param item IModalData
@@ -78,16 +85,21 @@ const Home: React.FunctionComponent = () => {
    * @param response IModalResponse
    */
   const addSomething = async (response: IModalResponse) => {
-    setShowModal(false);
-    if (response.hasData) {
-      alert(JSON.stringify(response.data));
-      addItem(response.data!)
-        .then(() => showAlert("Success"))
-        .catch((error: any) => {
-          showAlert(error.message, true);
-        });
-    } else {
+    setShowModal({ show: false });
+    if (!response.hasData) {
       showAlert("User Cancelled", true);
+      return;
+    } else {
+      try {
+        if (response.data?.id) {
+          await updateItem(response.data!);
+        } else {
+          await addItem(response.data!);
+        }
+        showAlert("Success");
+      } catch (error) {
+        showAlert(error.message, true);
+      }
     }
   };
 
@@ -112,7 +124,7 @@ const Home: React.FunctionComponent = () => {
         <IonButton
           title="Add Something"
           fill="outline"
-          onClick={() => setShowModal(true)}
+          onClick={() => setShowModal({ show: true })}
         >
           Add Something
         </IonButton>
@@ -129,24 +141,31 @@ const Home: React.FunctionComponent = () => {
         />
 
         {/* ionic modal component */}
-        <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
-          {/* our custom modal content */}
-          <AddSomethingModal
-            onCloseModal={(data: IModalResponse) => addSomething(data)}
-          />
-        </IonModal>
+        {showModal.show && (
+          <IonModal
+            isOpen={showModal.show}
+            onDidDismiss={() => setShowModal({ show: false })}
+          >
+            {/* our custom modal content */}
+            <AddSomethingModal
+              initialData={showModal.initialData}
+              onCloseModal={(data: IModalResponse) => addSomething(data)}
+            />
+          </IonModal>
+        )}
 
         {/* auth check and loader while in progress */}
         <AuthCheck fallback={<IonLoading isOpen={true} />}>
           {/* list of items from reactfire */}
           <IonList>
             {dataCollection.map((e: any) => {
               return (
-                <IonItem key={e.id} onClick={() => removeSomething(e)}>
-                  <IonLabel className="ion-text-wrap">
-                    <pre>{JSON.stringify(e, null, 2)}</pre>
-                  </IonLabel>
-                </IonItem>
+                <Line
+                  item={e}
+                  key={e.id}
+                  edit={editSomething}
+                  remove={removeSomething}
+                />
               );
             })}
           </IonList>
@@ -155,4 +174,4 @@ const Home: React.FunctionComponent = () => {
     </IonPage>
   );
 };
-export default Home;
+export default React.memo(Home);