Firestore

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["babel-plugin-styled-components"]
+}

package.json

@@ -3,15 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@material-ui/core": "^4.9.7",
+    "@material-ui/icons": "^4.9.1",
     "@reduxjs/toolkit": "^1.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "babel-plugin-styled-components": "^1.10.7",
+    "firebase": "^7.13.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-hook-form": "^5.2.0",
     "react-redux": "^7.1.3",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,14 +1,117 @@
 import React from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect,
+} from "react-router-dom";
+import clsx from 'clsx';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { makeStyles } from '@material-ui/core/styles';
+
 import { Quiz } from './features/quiz/Quiz';
+import Login from './features/auth/Login';
+import Account from './features/auth/Account';
+import NewQuiz from './features/quiz/NewQuiz.js';
+import QuizList from './features/quiz/QuizList.js';
+import useAuthUser from './hooks/useAuthUser';
+import { Navbar, SideMenu } from './components/Menu';
+
 import './App.css';
 
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: -drawerWidth,
+  },
+  contentShift: {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  },
+}));
+
 function App() {
+  const classes = useStyles();
+  const currrentUser = useAuthUser()
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  }
+
+  const PrivateRoute = ({ children, ...rest }) => {
+    return (
+      <Route
+        {...rest}
+        render={({ location }) =>
+          currrentUser ? (
+            children
+          ) : (
+            <Redirect
+              to={{
+                pathname: "/login",
+                state: { from: location }
+              }}
+            />
+          )
+        }
+      />
+    );
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <Quiz />
-      </header>
-    </div>
+    <Router>
+      <div className={classes.root}>
+        <CssBaseline />
+        <Navbar open={menuOpen} toggleMenu={toggleMenu} />
+        <SideMenu open={menuOpen} toggleMenu={toggleMenu} />
+        <main
+          className={clsx(classes.content, {
+            [classes.contentShift]: menuOpen,
+          })}
+        >
+          <div className={classes.drawerHeader} />
+          <Switch>
+            <Route path="/login">
+              <Login />
+            </Route>
+            <PrivateRoute path="/account">
+              <Account />
+            </PrivateRoute>
+            <Route path="/quiz/new">
+              <NewQuiz />
+            </Route>
+            <Route path="/quiz/all">
+              <QuizList />
+            </Route>
+            <Route path="/">
+              <Quiz />
+            </Route>
+          </Switch>
+        </main>
+      </div>
+    </Router>
   );
 }
 

src/app/store.js

@@ -1,10 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
 import quizReducer from '../features/quiz/quizSlice';
+import authReducer from '../features/auth/authSlice';
 
 export default configureStore({
   reducer: {
     counter: counterReducer,
-    quiz: quizReducer
+    quiz: quizReducer,
+    auth: authReducer
   },
 });

src/components/Menu.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import ExitIcon from '@material-ui/icons/ExitToApp';
+import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
+import AccountIcon from '@material-ui/icons/AccountBox';
+import MailIcon from '@material-ui/icons/Mail';
+
+import { useSelector } from 'react-redux';
+import { useHistory } from "react-router-dom";
+
+import { selectCurrentUser } from '../features/auth/authSlice';
+import { auth } from '../services/firebase';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  appBar: {
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: drawerWidth,
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  hide: {
+    display: 'none',
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+  },
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: -drawerWidth,
+  },
+  contentShift: {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  },
+}));
+
+
+export const Navbar = ({open, toggleMenu}) => {
+  const classes = useStyles();
+
+  return (
+    <AppBar
+      position="fixed"
+      className={clsx(classes.appBar, {
+        [classes.appBarShift]: open,
+      })}
+    >
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          onClick={toggleMenu}
+          edge="start"
+          className={clsx(classes.menuButton, open && classes.hide)}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          Quizer
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export const SideMenu = ({ open, toggleMenu}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const history = useHistory();
+
+  const currentUser = useSelector(selectCurrentUser);
+
+  const logout = async () => {
+    await auth().signOut();
+    toggleMenu()
+    history.push('/')
+  }
+
+  const navigate = path => {
+    history.push(path);
+    toggleMenu()
+  }
+
+  return (
+    <Drawer
+      className={classes.drawer}
+      variant="persistent"
+      anchor="left"
+      open={open}
+      classes={{
+        paper: classes.drawerPaper,
+      }}
+    >
+      <div className={classes.drawerHeader}>
+        <IconButton onClick={toggleMenu}>
+          {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+        </IconButton>
+      </div>
+      <Divider />
+      <List>
+        <ListItem button onClick={() => navigate('/quiz/new')}>
+          <ListItemIcon><InboxIcon /></ListItemIcon>
+          <ListItemText primary='Utwórz quiz' />
+        </ListItem>
+      </List>
+      <Divider />
+      <List>
+        {!currentUser && <ListItem button onClick={() => navigate('/login')}>
+            <ListItemIcon><VerifiedUserIcon /></ListItemIcon>
+            <ListItemText primary="Zaloguj się" />
+        </ListItem>}
+        {currentUser && <ListItem button onClick={() => navigate('/account')}>
+          <ListItemIcon><AccountIcon /></ListItemIcon>
+          <ListItemText primary="Twoje konto" />
+        </ListItem>}
+        {currentUser && <ListItem button onClick={logout}>
+          <ListItemIcon><ExitIcon /></ListItemIcon>
+          <ListItemText primary="Wyloguj się" />
+        </ListItem>}
+      </List>
+    </Drawer>
+  )
+}
+
+

src/features/auth/Account.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { auth } from '../../services/firebase';
+import { useSelector } from 'react-redux';
+import { selectCurrentUser } from '../../features/auth/authSlice';
+import { useHistory } from "react-router-dom";
+
+import Button from '@material-ui/core/Button';
+
+export default () => {
+  const currentUser = useSelector(selectCurrentUser);
+  const history = useHistory();
+
+  const logout = async () => {
+    await auth().signOut()
+    history.push("/");
+  }
+
+  return(
+    <div>
+      <p>Hello {currentUser?.email}!</p>
+      <Button onClick={logout}>Wyloguj się</Button>
+    </div>
+  )
+}