ability to add data, added modals, alerts and types

Author: aaronksaunders

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "ionic-react-fire"
+  }
+}

capacitor.config.json

@@ -4,9 +4,5 @@
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "build",
-  "cordova": {},
-  "server": {
-    "url": "http://192.168.1.151:8100",
-    "cleartext": true
-  }
+  "cordova": {}
 }

firebase.json

@@ -0,0 +1,17 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "emulators": {
+    "firestore": {
+      "port": 8080
+    },
+    "ui": {
+      "enabled": true
+    }
+  }
+}

firestore-debug.log

@@ -0,0 +1,11 @@
+API endpoint: http://localhost:8080
+If you are using a library that supports the FIRESTORE_EMULATOR_HOST environment variable, run:
+
+   export FIRESTORE_EMULATOR_HOST=localhost:8080
+
+Dev App Server is now running.
+
+Jul 20, 2020 10:50:59 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
+INFO: Detected non-HTTP/2 connection.
+Jul 20, 2020 10:50:59 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
+INFO: Detected HTTP/2 connection.

firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

firestore.rules

@@ -0,0 +1,18 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+
+    // This rule allows anyone with your database reference to view, edit,
+    // and delete all data in your Firestore database. It is useful for getting
+    // started, but it is configured to expire after 30 days because it
+    // leaves your app open to attackers. At that time, all client
+    // requests to your Firestore database will be denied.
+    //
+    // Make sure to write security rules for your app before that time, or else
+    // all client requests to your Firestore database will be denied until you Update
+    // your rules
+    match /{document=**} {
+      allow read, write: if request.time < timestamp.date(2020, 8, 19);
+    }
+  }
+}

src/App.tsx

@@ -1,4 +1,4 @@
-import './env';
+import "./env";
 
 import React, { Suspense } from "react";
 import { FirebaseAppProvider, AuthCheck } from "reactfire";
@@ -27,20 +27,36 @@ import { FIREBASE_CONFIG } from "./env";
 import Login from "./pages/Login";
 import Home from "./pages/Home";
 
-import { Plugins } from '@capacitor/core';
+import { Plugins } from "@capacitor/core";
+import { Route, Redirect } from "react-router";
+import CreateAccount from "./pages/CreateAccount";
 const { SplashScreen } = Plugins;
 
 // Hide the splash (you should do this on app launch)
 SplashScreen.hide();
 
+const PublicRoutes: React.FunctionComponent = () => {
+  return (
+    <IonRouterOutlet>
+      <Route exact path="/login">
+        <Login />
+      </Route>
+      <Route exact path="/create-account">
+        <CreateAccount />
+      </Route>
+      <Redirect path="/" to="/login" />
+    </IonRouterOutlet>
+  );
+};
+
 const App: React.FunctionComponent = () => {
   return (
     <FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}>
       <IonApp>
         <IonReactRouter>
           <IonRouterOutlet>
             <Suspense fallback={<IonLoading isOpen={true} />}>
-              <AuthCheck fallback={<Login />}>
+              <AuthCheck fallback={<PublicRoutes />}>
                 <Home />
               </AuthCheck>
             </Suspense>

src/components/MyErrorDisplay.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ErrorMessage } from "@hookform/error-message";
+/**
+ * custom component to render the error messahe with the
+ * desired style, we are wrapping a react-form-hook utility
+ *
+ * @param errors
+ * @param elementName
+ */
+export const MyErrorDisplay: React.FunctionComponent<{
+  errors: any;
+  elementName: string;
+}> = ({ errors, elementName }) => {
+  return (
+    <ErrorMessage
+      errors={errors}
+      name={elementName}
+      as={<div
+        style={{
+          color: "red",
+          paddingTop: 6,
+          paddingLeft: 16,
+          fontStyle: "italic",
+        }} />} />
+  );
+};

src/components/MyIonTextItem.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  IonItem,
+  IonLabel,
+  IonInput
+} from "@ionic/react";
+import { Controller } 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 }) => {
+  return (
+    <>
+      <IonItem>
+        <IonLabel>{labelName}</IonLabel>
+        <Controller
+          render={({ onChange }) => (
+            <IonInput type="text" onIonChange={onChange} defaultValue="" />
+          )}
+          control={control}
+          name={name}
+          rules={{
+            required: labelName + " is a required field",
+          }} />
+      </IonItem>
+      <MyErrorDisplay errors={errors} elementName={name} />
+    </>
+  );
+};

src/pages/AddSomethingModal.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+} from "@ionic/react";
+
+import { useForm } from "react-hook-form";
+import { MyIonTextItem } from "../components/MyIonTextItem";
+
+const AddSomethingModal: React.FunctionComponent<{
+  onCloseModal: (data: IModalResponse) => Promise<void>;
+}> = ({ onCloseModal }) => {
+  // from react-hook-form
+  // SEE - https://react-hook-form.com/
+  const { handleSubmit, control, errors } = useForm();
+  /**
+   * get data from form and pass it back to the parent
+   * component
+   */
+  const addTheThing = async (data: IModalData) => {
+    console.log(data);
+    onCloseModal({ hasData: true, data });
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar color="light">
+          <IonButtons slot="start" />
+          <IonTitle>Enter Thing Information</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <form onSubmit={handleSubmit(addTheThing)}>
+          <MyIonTextItem
+            labelName="Podcast Name"
+            name="podcastName"
+            errors={errors}
+            control={control}
+          />
+
+          <MyIonTextItem
+            labelName="Host"
+            name="podcastHost"
+            errors={errors}
+            control={control}
+          />
+
+          <MyIonTextItem
+            labelName="URL"
+            name="podcastURL"
+            errors={errors}
+            control={control}
+          />
+
+          <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>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AddSomethingModal;
+
+type IModalData = {
+  podcastName: string;
+  podcastHost: string;
+  podcastURL: string;
+};
+
+export type IModalResponse = {
+  hasData: boolean;
+  data?: IModalData;
+};