Mxl/single player

.gitignore

@@ -22,3 +22,14 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
+*.json
+package-lock.json
+package-lock.json
+package.json
+package-lock.json
+package-lock.json
+package.json
+yarn.lock
+package-lock.json
+package.json

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -9,6 +9,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@opentok/client": "^2.21.2",
+    "@ramonak/react-progress-bar": "^5.0.2",
     "@reduxjs/toolkit": "^1.6.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
@@ -25,18 +26,20 @@
     "hark": "^1.2.3",
     "inline-worker": "^1.1.0",
     "material-ui-popup-state": "^1.9.3",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "opentok": "^2.12.1",
     "prettier": "^2.5.1",
     "prop-types": "^15.7.2",
+    "query-string": "^7.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-media-recorder": "^1.6.3",
     "react-player": "^2.9.0",
     "react-player-controls": "^1.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^4.0.3",
+    "react-select": "^5.4.0",
     "react-webcam": "^6.0.0",
     "redux": "^4.1.2",
     "rollup": "^2.61.0",
@@ -46,7 +49,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "sass": "^1.44.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.5.3",
+    "validator": "^13.7.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -61,16 +66,9 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
 }

src/App.js

@@ -1,19 +1,29 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route
-} from 'react-router-dom';
-import { Provider } from "react-redux";
+import { useState, useEffect } from 'react';
+
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
 
-import { ActiveStepProvider, PinsProvider, SessionProvider } from './context/index';
+import {
+  ActiveStepProvider,
+  PinsProvider,
+  PlayerModeProvider,
+  SessionProvider,
+  SinglePlayerPinsProvider,
+  SinglePlayerSessionProvider,
+} from './context/index';
+import Authentication from './components/layout/Authentication';
+import Review from './components/layout/Review';
 import Landing from './components/layout/Landing';
 import Home from './components/layout/Home';
 import Content from './components/layout/Content';
 import Completion from './components/layout/Completion';
 import CORsTestButtons from './components/layout/CORsTestButtons';
-import { store } from "./components/Store";
+import { store } from './components/Store';
 
-import { createTheme, ThemeProvider } from "@material-ui/core";
+import { createTheme, ThemeProvider } from '@material-ui/core';
+
+import { firebase } from './hooks/firebase';
+import UserContext from './context/userContext';
 
 // import 'default-passive-events';
 /* "default-passive-events": "^2.0.0", */
@@ -38,11 +48,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: [
-      'Lato',
-      'Lato',
-      'sans-serif'
-    ].join(','),
+    fontFamily: ['Lato', 'Lato', 'sans-serif'].join(','),
     h1: {
       fontFamily: 'Lato',
       fontSize: '35px',
@@ -94,35 +100,70 @@ const theme = createTheme({
       fontWeight: 400,
       lineHeight: '18.7px',
       letterSpacing: '-0.02em',
-    }
-  }
+    },
+  },
 });
 
-
 const App = () => {
+  const [user, setUser] = useState(undefined);
+  const [userSessionId, setUserSessionId] = useState(null);
+
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged((user) => {
+      if (user) {
+        console.log('Logged in as: ', user.email);
+        setUser(user);
+        firebase.firestore().collection('firebaseUsers').doc(user.uid).set(
+          {
+            uid: user.uid,
+            email: user.email,
+          },
+          { merge: true }
+        );
+      } else {
+        console.log('Not logged in');
+        setUser(null);
+      }
+    });
+  }, []);
+
   return (
-    <ThemeProvider theme={theme}>
-      <Router>
-        <main>
-          <Switch>
-            <Provider store={store}>
-            <Route exact path='/Home' component={Home} />
-              <Route exact path='/' component={Landing} />
-              <SessionProvider>
-                <ActiveStepProvider>
-                  <PinsProvider>
-                    <Route exact path='/test' component={CORsTestButtons} />
-                    <Route exact path="/content" component={Content} />
-                  </PinsProvider>
-                </ActiveStepProvider>
-              </SessionProvider>
-              <Route exact path="/completion" component={Completion} />
-            </Provider>
-          </Switch>
-        </main>
-      </Router>
-    </ThemeProvider>
-  )
-}
+    <UserContext.Provider value={{ user, userSessionId, setUserSessionId }}>
+      <ThemeProvider theme={theme}>
+        <Router>
+          <main>
+            <Switch>
+              <Provider store={store}>
+                <Route exact path='/auth' component={Authentication} />
+                <Route exact path='/Home' component={Home} />
+                <SessionProvider>
+                  <ActiveStepProvider>
+                    <PlayerModeProvider>
+                      <SinglePlayerPinsProvider>
+                        <SinglePlayerSessionProvider>
+                          <PinsProvider>
+                            <Route exact path='/' component={Landing} />
+                            <Route
+                              exact
+                              path='/test'
+                              component={CORsTestButtons}
+                            />
+                            <Route exact path='/content' component={Content} />
+                            <Route exact path='/review' component={Review} />
+                          </PinsProvider>
+                        </SinglePlayerSessionProvider>
+                      </SinglePlayerPinsProvider>
+                    </PlayerModeProvider>
+                  </ActiveStepProvider>
+                </SessionProvider>
+                <Route exact path='/completion' component={Completion} />
+              </Provider>
+            </Switch>
+          </main>
+        </Router>
+      </ThemeProvider>
+    </UserContext.Provider>
+  );
+};
 
-export default App;
+export default App;