create room, navigate and store into db

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "myApp",
+  "name": "Turtle",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,

src/App.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import Home from './pages/Home';
+import Room from './pages/Room';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -28,6 +29,7 @@ const App: React.FC = () => (
     <IonReactRouter>
       <IonRouterOutlet>
         <Route exact path="/" component={Home} />
+        <Route exact path="/room/:roomId" component={Room} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

src/pages/Home.tsx

@@ -1,9 +1,30 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonGrid, IonRow } from '@ionic/react';
-import React from 'react';
+import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router';
+import { db, timestamp } from '../services/firebase';
 import './Home.css';
 
 const Home: React.FC = () => {
-  async function handleSubmit() {}
+  const [loading, setLoading] = useState(true);
+  const [userId, setUserId] = useState('');
+
+  let history = useHistory();
+
+  const handleClick = async () => {
+    const roomId = await db.collection('rooms').add({
+      createdAt: timestamp,
+      ownerId: userId,
+    });
+
+    const path = '/room/' + roomId.id;
+    return history.push(path);
+  };
+
+  useEffect(() => {
+    console.log('Hook fired');
+    setUserId('placeholder');
+    setLoading(false);
+  }, []);
 
   return (
     <IonPage>
@@ -15,7 +36,11 @@ const Home: React.FC = () => {
       <IonContent>
         <IonGrid>
           <IonRow>
-            <IonButton onSubmit={handleSubmit}>Create Room</IonButton>
+            {loading ? (
+              <IonContent className="ion-padding">Loading...</IonContent>
+            ) : (
+              <IonButton onClick={handleClick}>Create Room</IonButton>
+            )}
           </IonRow>
         </IonGrid>
       </IonContent>

src/pages/Room.tsx

@@ -0,0 +1,43 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps, useHistory } from 'react-router';
+import { db } from '../services/firebase';
+
+const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
+  const history = useHistory();
+  const roomId = match.params.roomId;
+
+  const [loading, setLoading] = useState(true);
+
+  // Verify that the roomId exists in db
+  useEffect(() => {
+    const fetchRoom = async () => {
+      const room = await db.collection('rooms').doc(roomId).get();
+      if (!room.exists) {
+        history.push('/');
+      } else {
+        setLoading(false);
+      }
+    };
+
+    console.log('Hook fired');
+    fetchRoom();
+  }, [history, roomId]);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Turtle</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      {!loading ? (
+        <IonContent className="ion-padding">Video and chat</IonContent>
+      ) : (
+        <IonContent className="ion-padding">Loading...</IonContent>
+      )}
+    </IonPage>
+  );
+};
+
+export default Room;