v0.9

src/App.js

@@ -1,7 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Router from 'route-lite';
-import { Fab, createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { Fab, createMuiTheme, ThemeProvider, Snackbar } from '@material-ui/core';
 import Create from './Create';
+import Loading from './Loading';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import Inactive from './Inactive';
 
 const darkTheme = createMuiTheme({
   palette: {
@@ -14,12 +18,31 @@ const darkTheme = createMuiTheme({
 
 const Routes = (props) => (
   <Router>
-    <Create />
+    <Create {...props} />
   </Router>
 );
 
 const App = () => {
+  const closedNotification = { open: false, message: '' };
+
+  const [status, setStatus] = useState({ active: false, message: '' });
   const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [notification, setNotification] = useState(closedNotification);
+
+  useEffect(() => {
+    setLoading(true);
+    firebase
+      .firestore()
+      .collection('server')
+      .doc('status')
+      .onSnapshot((statusSnap) => {
+        setStatus(statusSnap.data());
+        setLoading(false);
+      });
+  }, []);
+
+  // HANDLE VISIBILITY STYLING
   const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
   if (visible) {
     document.body.classList.add('visible');
@@ -28,11 +51,29 @@ const App = () => {
     document.body.classList.remove('visible');
     PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
   }
+
   return (
     <ThemeProvider theme={darkTheme}>
+      <Snackbar
+        className="party-notification-container"
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        open={notification.open}
+        onClose={() => setNotification(closedNotification)}
+        message={notification.message}
+        resumeHideDuration={500}
+        autoHideDuration={2000}
+      />
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
-          <Routes />
+          {loading && <Loading />}
+          {status.active ? (
+            <Routes
+              updateLoading={setLoading}
+              notify={(message) => setNotification({ open: true, message })}
+            />
+          ) : (
+            <Inactive status={status} />
+          )}
         </div>
         <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
           <span />