update ionic version and some router changes

Author: aaronksaunders

package-lock.json

@@ -3,17 +3,17 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@capacitor/android": "^2.0.1",
-    "@capacitor/core": "^2.3.0",
-    "@capacitor/ios": "^2.0.1",
+    "@capacitor/android": "2.4.0",
+    "@capacitor/core": "2.4.0",
+    "@capacitor/ios": "2.4.0",
     "@firebase/app": "^0.6.8",
     "@hookform/error-message": "0.0.3",
-    "@ionic/react": "5.2.3",
-    "@ionic/react-router": "5.2.3",
+    "@ionic/react": "5.3.1",
+    "@ionic/react-router": "5.3.1",
     "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react-router": "5.1.8",
+    "@types/react-router-dom": "5.1.5",
     "firebase": "7.16.1",
     "ionicons": "5.1.2",
     "react": "16.13.1",

package.json

@@ -3,7 +3,8 @@ 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";
 
 /* Core CSS required for Ionic components to work properly */
@@ -28,7 +29,6 @@ import Login from "./pages/Login";
 import Home from "./pages/Home";
 
 import { Plugins } from "@capacitor/core";
-import { Route, Redirect } from "react-router";
 import CreateAccount from "./pages/CreateAccount";
 const { SplashScreen } = Plugins;
 
@@ -38,13 +38,20 @@ SplashScreen.hide();
 const PublicRoutes: React.FunctionComponent = () => {
   return (
     <IonRouterOutlet>
-      <Route exact path="/login">
-        <Login />
-      </Route>
-      <Route exact path="/create-account">
-        <CreateAccount />
+      <Route exact path="/login" component={Login} />
+      <Route exact path="/create-account" component={CreateAccount} />
+      <Redirect exact path="/" to="/login" />
+    </IonRouterOutlet>
+  );
+};
+
+const PrivateRoutes: React.FunctionComponent = () => {
+  return (
+    <IonRouterOutlet>
+      <Route exact path="/home">
+        <Home />
       </Route>
-      <Redirect path="/" to="/login" />
+      <Redirect exact path="/" to="/home" />
     </IonRouterOutlet>
   );
 };
@@ -54,13 +61,11 @@ const App: React.FunctionComponent = () => {
     <FirebaseAppProvider firebaseConfig={FIREBASE_CONFIG}>
       <IonApp>
         <IonReactRouter>
-          <IonRouterOutlet>
             <Suspense fallback={<IonLoading isOpen={true} />}>
               <AuthCheck fallback={<PublicRoutes />}>
-                <Home />
+                <PrivateRoutes />
               </AuthCheck>
             </Suspense>
-          </IonRouterOutlet>
         </IonReactRouter>
       </IonApp>
     </FirebaseAppProvider>

src/App.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React from "react";
 
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-import ReactDOM from 'react-dom';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-
-ReactDOM.render(
-      <App />,
-    document.getElementById("root")
-  );
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/index.tsx

@@ -74,8 +74,7 @@ const CreateAccount: React.FunctionComponent = () => {
     );
   };
 
-  console.log(errors);
-
+  console.log(history);
   return (
     <IonPage>
       <IonHeader>

src/pages/CreateAccount.tsx

@@ -24,6 +24,7 @@ import {
 import "firebase/firestore";
 import { FIREBASE_COLLECTION_NAME } from "../env";
 import AddSomethingModal, { IModalResponse } from "./AddSomethingModal";
+import { useHistory } from "react-router";
 
 type IShowAlert = null | {
   header: string;
@@ -34,6 +35,7 @@ type IShowAlert = null | {
 const Home: React.FunctionComponent = () => {
   // reactfire hook to get auth information
   const auth = useAuth();
+  const history = useHistory();
 
   // another reactfire hook to get the firebase app
   const thingsRef = useFirebaseApp()
@@ -92,7 +94,14 @@ const Home: React.FunctionComponent = () => {
       <IonHeader>
         <IonToolbar color="light">
           <IonButtons slot="end">
-            <IonButton onClick={() => auth.signOut()}>Logout</IonButton>
+            <IonButton
+              onClick={() => {
+                auth.signOut();
+                history.replace("/login");
+              }}
+            >
+              Logout
+            </IonButton>
           </IonButtons>
           <IonTitle>Home</IonTitle>
         </IonToolbar>

src/pages/Home.tsx

@@ -14,10 +14,10 @@ import {
 } from "@ionic/react";
 
 import { useForm, Controller } from "react-hook-form";
-import { ErrorMessage } from "@hookform/error-message";
 
 import { useAuth } from "reactfire";
 import { useHistory } from "react-router";
+import { MyErrorDisplay } from "../components/MyErrorDisplay";
 
 export interface CheckboxChangeEventDetail {
   value: any;
@@ -48,36 +48,16 @@ const Login: React.FunctionComponent = () => {
     console.log(data);
     try {
       let r = await auth.signInWithEmailAndPassword(data.email, data.password);
-      history.replace("/")
+      history.replace("/home");
       console.log(r);
     } catch (e) {
       setShowErrorAlert(e.message);
     }
   };
 
-  const myErrorDisplay = (elementName: string) => {
-    return (
-      <ErrorMessage
-        errors={errors}
-        name={elementName}
-        as={
-          <div
-            style={{
-              color: "red",
-              paddingTop: 6,
-              paddingLeft: 16,
-              fontStyle: "italic",
-            }}
-          />
-        }
-      />
-    );
-  };
-
-  console.log(errors);
-
+  console.log(history);
   return (
-    <IonPage>
+     <IonPage>
       <IonHeader>
         <IonToolbar color="light">
           <IonButtons slot="start" />
@@ -95,12 +75,12 @@ const Login: React.FunctionComponent = () => {
           buttons={["OK"]}
         />
 
-        <form  onSubmit={handleSubmit(signIn)}>
+        <form onSubmit={handleSubmit(signIn)}>
           <IonItem>
             <IonLabel>Email</IonLabel>
             <Controller
               render={({ onChange }) => (
-                <IonInput type="email" onIonChange={onChange} defaultValue="" />
+                <IonInput type="email" onIonChange={onChange} />
               )}
               control={control}
               defaultValue=""
@@ -115,7 +95,7 @@ const Login: React.FunctionComponent = () => {
               }}
             />
           </IonItem>
-          {myErrorDisplay("email")}
+          <MyErrorDisplay errors={errors} elementName="email" />
           <IonItem>
             <IonLabel>Password</IonLabel>
             <Controller
@@ -134,15 +114,15 @@ const Login: React.FunctionComponent = () => {
               }}
             />
           </IonItem>
-          {myErrorDisplay("password")}
+          <MyErrorDisplay errors={errors} elementName="password" />
           <div className="ion-padding">
             <IonButton expand="block" type="submit">
               Log In
             </IonButton>
             <IonButton
               expand="block"
               type="button"
-              onClick={() => history.push("create-account")}
+              onClick={() => history.push("/create-account")}
             >
               Create Account
             </IonButton>