commit code for part three v1.3

Author: aaronksaunders

src/App.tsx

@@ -3,7 +3,7 @@ import "./env";
 import React, { Suspense } from "react";
 import { FirebaseAppProvider, AuthCheck } from "reactfire";
 
-import { IonApp, IonRouterOutlet, IonLoading  } from "@ionic/react";
+import { IonApp, IonRouterOutlet, IonLoading } from "@ionic/react";
 import { Route, Redirect } from "react-router-dom";
 import { IonReactRouter } from "@ionic/react-router";
 
@@ -30,6 +30,7 @@ import Home from "./pages/Home";
 
 import { Plugins } from "@capacitor/core";
 import CreateAccount from "./pages/CreateAccount";
+import { DataProvider } from "./DataContext";
 const { SplashScreen } = Plugins;
 
 // Hide the splash (you should do this on app launch)
@@ -49,7 +50,9 @@ const PrivateRoutes: React.FunctionComponent = () => {
   return (
     <IonRouterOutlet>
       <Route exact path="/home">
-        <Home />
+        <DataProvider>
+          <Home />
+        </DataProvider>
       </Route>
       <Redirect exact path="/" to="/home" />
     </IonRouterOutlet>
@@ -61,11 +64,11 @@ const App: React.FunctionComponent = () => {
     <FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}>
       <IonApp>
         <IonReactRouter>
-            <Suspense fallback={<IonLoading isOpen={true} />}>
-              <AuthCheck fallback={<PublicRoutes />}>
-                <PrivateRoutes />
-              </AuthCheck>
-            </Suspense>
+          <Suspense fallback={<IonLoading isOpen={true} />}>
+            <AuthCheck fallback={<PublicRoutes />}>
+              <PrivateRoutes />
+            </AuthCheck>
+          </Suspense>
         </IonReactRouter>
       </IonApp>
     </FirebaseAppProvider>

src/DataContext.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { useFirebaseApp, useFirestoreCollectionData } from "reactfire";
+import { FIREBASE_COLLECTION_NAME } from "./env";
+
+import { IModalData } from "./components/AddSomethingModal";
+
+interface IState {
+  dataCollection: null | undefined | any;
+  addItem: (itemData: IModalData) => Promise<void>;
+  removeItem: (itemData: IModalData) => Promise<void>;
+}
+
+// create the context
+export const DataContext = React.createContext<IState | undefined>(undefined);
+
+// create the context provider, we are using use state to ensure that
+// we get reactive values from the context...
+
+export const DataProvider: React.FC = ({ children }) => {
+  // another reactfire hook to get the firebase app
+  const thingsRef = useFirebaseApp()
+    .firestore()
+    .collection(FIREBASE_COLLECTION_NAME);
+
+  // another hook to query firebase collection using
+  // the reference you created above
+  const data = useFirestoreCollectionData(thingsRef, { idField: "id" });
+
+  /**
+   *
+   * @param itemData
+   */
+  const addItem = (itemData: IModalData) => {
+    return thingsRef.doc().set({ ...itemData });
+  };
+
+  /**
+   *
+   * @param itemData
+   */
+  const removeItem = (itemData: IModalData) => {
+    return thingsRef.doc(itemData.id).delete();
+  };
+
+  // the store object
+  let state = {
+    dataCollection: data,
+    addItem,
+    removeItem,
+  };
+
+  // wrap the application in the provider with the initialized context
+  return <DataContext.Provider value={state}>{children}</DataContext.Provider>;
+};
+
+export default DataContext;
+export const useDataProvider = () =>
+  React.useContext<IState | undefined>(DataContext)!;

src/pages/AddSomethingModal.tsx renamed to src/components/AddSomethingModal.tsx

@@ -10,7 +10,7 @@ import {
 } from "@ionic/react";
 
 import { useForm } from "react-hook-form";
-import { MyIonTextItem } from "../components/MyIonTextItem";
+import { MyIonTextItem } from "./MyIonTextItem";
 
 const AddSomethingModal: React.FunctionComponent<{
   onCloseModal: (data: IModalResponse) => Promise<void>;
@@ -78,10 +78,11 @@ const AddSomethingModal: React.FunctionComponent<{
 
 export default AddSomethingModal;
 
-type IModalData = {
+export type IModalData = {
   podcastName: string;
   podcastHost: string;
   podcastURL: string;
+  id? : string;
 };
 
 export type IModalResponse = {

src/pages/Home.tsx

@@ -15,16 +15,14 @@ import {
   IonAlert,
 } from "@ionic/react";
 
-import {
-  useFirestoreCollectionData,
-  useFirebaseApp,
-  useAuth,
-  AuthCheck,
-} from "reactfire";
+import { useAuth, AuthCheck } from "reactfire";
 import "firebase/firestore";
-import { FIREBASE_COLLECTION_NAME } from "../env";
-import AddSomethingModal, { IModalResponse } from "./AddSomethingModal";
+import AddSomethingModal, {
+  IModalResponse,
+  IModalData,
+} from "../components/AddSomethingModal";
 import { useHistory } from "react-router";
+import { useDataProvider } from "../DataContext";
 
 type IShowAlert = null | {
   header: string;
@@ -36,15 +34,9 @@ const Home: React.FunctionComponent = () => {
   // reactfire hook to get auth information
   const auth = useAuth();
   const history = useHistory();
+  const { addItem, removeItem, dataCollection } = useDataProvider();
 
-  // another reactfire hook to get the firebase app
-  const thingsRef = useFirebaseApp()
-    .firestore()
-    .collection(FIREBASE_COLLECTION_NAME);
-
-  // another hook to query firebase collection using
-  // the reference you created above
-  const data = useFirestoreCollectionData(thingsRef, { idField: "id" });
+  console.log(dataCollection);
 
   // manages the state to determine if we need to open
   // the modal or not
@@ -71,17 +63,27 @@ const Home: React.FunctionComponent = () => {
 
   /**
    *
-   * @param response
+   * @param item IModalData
+   */
+  const removeSomething = (item: IModalData) => {
+    removeItem(item)
+      .then(() => showAlert("Success"))
+      .catch((error: any) => {
+        showAlert(error.message, true);
+      });
+  };
+
+  /**
+   *
+   * @param response IModalResponse
    */
   const addSomething = async (response: IModalResponse) => {
     setShowModal(false);
     if (response.hasData) {
       alert(JSON.stringify(response.data));
-      thingsRef
-        .doc()
-        .set({ ...response.data })
+      addItem(response.data!)
         .then(() => showAlert("Success"))
-        .catch((error) => {
+        .catch((error: any) => {
           showAlert(error.message, true);
         });
     } else {
@@ -138,9 +140,9 @@ const Home: React.FunctionComponent = () => {
         <AuthCheck fallback={<IonLoading isOpen={true} />}>
           {/* list of items from reactfire */}
           <IonList>
-            {data.map((e: any) => {
+            {dataCollection.map((e: any) => {
               return (
-                <IonItem key={e.id}>
+                <IonItem key={e.id} onClick={() => removeSomething(e)}>
                   <IonLabel className="ion-text-wrap">
                     <pre>{JSON.stringify(e, null, 2)}</pre>
                   </IonLabel>