Redone UI, add leave and delete logic

src/App.js

@@ -1,65 +1,45 @@
-import React, { Component } from 'react';
-import firebase from 'firebase/app';
-import Chat from './Chat';
+import React, { useState } from 'react';
+import Router from 'route-lite';
+import { Fab, createMuiTheme, ThemeProvider } from '@material-ui/core';
 import Create from './Create';
-import Loading from './Loading';
 
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false,
-      loggedIn: false,
-      page: 'create',
-    };
-    this.updateLoading = this.updateLoading.bind(this);
-    this.changePage = this.changePage.bind(this);
+const darkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#a6d4fa',
+    },
+  },
+});
+
+const Routes = (props) => (
+  <Router>
+    <Create />
+  </Router>
+);
+
+const App = () => {
+  const [visible, setVisible] = useState(false);
+  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');
   }
-  componentDidMount() {
-    firebase.auth().onAuthStateChanged(user => {
-      const roomId = window.localStorage.getItem('roomId');
-      if (user) {
-        this.setState({
-          loggedIn: true,
-        });
-        if (roomId)
-          this.setState({
-            page: 'chat',
-          });
-      } else {
-        if (roomId) {
-          window.localStorage.removeItem('roomId');
-          window.localStorage.removeItem('watchPartyUserName');
-          window.localStorage.removeItem('watchPartyUser');
-        }
-      }
-    });
-  }
-  changePage(page) {
-    this.setState({
-      page,
-    });
-  }
-  updateLoading(loading) {
-    this.setState({
-      loading,
-    });
-  }
-  render() {
-    const { loading, loggedIn, page } = this.state;
-    return (
+  return (
+    <ThemeProvider theme={darkTheme}>
       <div className="party-content-wrapper">
-        {loading && <Loading />}
-        {page === 'chat' ? (
-          <Chat changePage={this.changePage} updateLoading={this.updateLoading} />
-        ) : page === 'create' ? (
-          <Create
-            changePage={this.changePage}
-            loggedIn={loggedIn}
-            updateLoading={this.updateLoading}
-          />
-        ) : null}
+        <div id="party-routes-wrapper">
+          <Routes />
+        </div>
+        <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
+          <span />
+        </Fab>
       </div>
-    );
-  }
-}
+    </ThemeProvider>
+  );
+};
+
+export default App;