v1.2.0-beta/fix file structure

app/src/App.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import Router from 'route-lite';
+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';
+import { getUserUid } from './Api';
+
+const darkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#a6d4fa',
+    },
+  },
+});
+
+const Routes = (props) => (
+  <Router>
+    <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);
+    getUserUid();
+    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');
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
+  } else {
+    document.body.classList.remove('visible');
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
+  }
+
+  // HANDLE FULLSCREEN EVENT
+  document.onfullscreenchange = () => {
+    if (document.fullscreenElement) setVisible(false);
+  };
+
+  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">
+          {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 />
+        </Fab>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default App;