Start Learn Component

public/service-worker.js

@@ -1,7 +1,7 @@
-self.addEventListener('install', function (event) {
-  self.skipWaiting();
-});
+// self.addEventListener('install', function (event) {
+//   self.skipWaiting();
+// });
 
-self.addEventListener('fetch', function (event) {
-  event.respondWith(fetch(event.request));
-});
+// self.addEventListener('fetch', function (event) {
+//   event.respondWith(fetch(event.request));
+// });

src/components/App/Router.js

@@ -5,8 +5,8 @@ import SignIn from "../Auth/SignIn";
 import SignUp from "../Auth/SignUp";
 import ResetPassword from "../Auth/ResetPassword";
 import Dashboard from "../Dashboard/Dashboard";
-
 import DeckView from "../Decks/View/View";
+import Learn from "../Learn/Learn"
 
 const Router = () => {
     return (
@@ -31,9 +31,16 @@ const Router = () => {
                 <Route path="/decks/:id">
                     <DeckView />
                 </Route>
-                {/* <Route path="/learn/:id">
-                    <DeckLearn />
-                </Route> */}
+
+                {/* Learn */}
+                <Route path="/learn/:id">
+                    <Learn />
+                </Route>
+
+                {/* 404 */}
+                <Route path="*">
+                    <h1>Page Not Found</h1> {/* FIX THIS */}
+                </Route>
 
             </Switch>
         </BrowserRouter>

src/components/Decks/Manage/Manage.js

@@ -1,4 +1,4 @@
-import { useRef, useContext, useState, useEffect } from "react";
+import { useRef, useContext, useState } from "react";
 import { useSnackbar } from 'notistack';
 import { validateForm } from "../../../utils/general"
 import { createDeck, saveDeck } from "../../../utils/decks";

src/components/Decks/View/View.js

@@ -1,35 +1,32 @@
 import { useState, useContext, useEffect } from "react";
-import { useHistory } from "react-router-dom";
-import { LoaderContext } from "../../../context/LoaderContext";
 import { useParams } from 'react-router-dom';
 import { getDeck } from "../../../utils/decks";
-import { v4 as uuid } from "uuid";
 
+// Context
+import { LoaderContext } from "../../../context/LoaderContext";
 
 // Components
-// import FAB from "../../UI/Library/FAB/FAB";
+import FAB from "../../UI/Library/FAB/FAB";
 import DeckManage from "../Manage/Manage";
 import FlashcardManage from "../../Flashcards/Manage/Manage";
 import SlideUp from "../../UI/Library/Animations/SlideUp";
-import BackButton from "../../UI/Library/BackButton/BackButton";
 import Stat from "../../UI/Library/Stat/Stat";
 import FlashcardList from "../../Flashcards/List/List"
 
 // MUI
-import FAB from "@material-ui/core/Fab"
 import Container from "@material-ui/core/Container"
 import Grid from "@material-ui/core/Grid"
 
 // Icons
 import AddIcon from "@material-ui/icons/Add"
 import EditIcon from "@material-ui/icons/Edit"
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 
 // Styles
 import styles from "./view.module.scss";
 
 const View = () => {
     // Config
-    const history = useHistory();
     const { id } = useParams();
     const [tabOption, setTabOption] = useState("Cards");
     const { showLoader, hideLoader } = useContext(LoaderContext);
@@ -40,7 +37,7 @@ const View = () => {
     const [showFlashcardCreate, setShowFlashcardCreate] = useState(false);
     const [showDeckUpdate, setShowDeckUpdate] = useState(false);
 
-    // Data
+    // Hooks
     useEffect(() => {
         if (!deck) {
             showLoader("Fetching Deck");
@@ -111,10 +108,9 @@ const View = () => {
 
     if (deck) {
         return (
-            <div className={styles.edit}>
+            <main className={styles.view}>
 
                 <div className={styles.intro}>
-                    <BackButton onClick={() => history.goBack()} />
                     <p>{deck.category}</p>
                     <h1>{deck.name}</h1>
                     <Menu />
@@ -124,6 +120,14 @@ const View = () => {
                     cards ?
                         <>
                             <FlashcardList cards={cards} />
+                            <FAB
+                                className="fab"
+                                tooltip="Learn"
+                                left={true}
+                                link={`/learn/${deck.id}`}
+                            >
+                                <PlayArrowIcon />
+                            </FAB>
                             <FAB
                                 className="fab"
                                 tooltip="Create New Flashcard"
@@ -157,7 +161,7 @@ const View = () => {
                     <DeckManage deck={deck} toggle={handleUpdateDeckToggle} />
                 </SlideUp>
 
-            </div>
+            </main>
         )
     }
 

src/components/Decks/View/view.module.scss

@@ -1,80 +1,82 @@
 @import "../../../styles/variables.scss";
 
-.intro {
-    padding: 2rem 1rem 1rem 1rem;
-    background: $blue-gradient;
+.view {
+    .intro {
+        padding: 2rem 1rem 1rem 1rem;
+        background: $blue-gradient;
 
-    p {
-        color: $light-grey;
-    }
-
-    h1 {
-        color: $white;
-        font-weight: 500;
-        font-size: 1.75rem;
-    }
-
-    .menu {
-        display: flex;
-        justify-content: space-around;
-        margin-top: 2rem;
+        p {
+            color: $light-grey;
+        }
 
-        button {
-            margin: 0;
-            font-weight: 400;
+        h1 {
             color: $white;
-            background-color: transparent;
-            border: none;
-            outline: none;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: width 0.3s ease-out, background-color 0.3s ease;
-            -webkit-transition: width 0.3s ease-out, background-color 0.3s ease;
-            -moz-transition: width 0.3s ease-out, background-color 0.3s ease;
-            -ms-transition: width 0.3s ease-out, background-color 0.3s ease;
-            -o-transition: width 0.3s ease-out, background-color 0.3s ease;
+            font-weight: 500;
+            font-size: 1.75rem;
+        }
 
-            &:after {
-                content: "";
-                display: block;
-                margin: auto;
-                height: 2px;
-                width: 0px;
-                background: transparent;
+        .menu {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 2rem;
+
+            button {
+                margin: 0;
+                font-weight: 400;
+                color: $white;
+                background-color: transparent;
+                border: none;
+                outline: none;
+                font-size: 1rem;
+                cursor: pointer;
                 transition: width 0.3s ease-out, background-color 0.3s ease;
                 -webkit-transition: width 0.3s ease-out, background-color 0.3s ease;
                 -moz-transition: width 0.3s ease-out, background-color 0.3s ease;
                 -ms-transition: width 0.3s ease-out, background-color 0.3s ease;
                 -o-transition: width 0.3s ease-out, background-color 0.3s ease;
-            }
-
-            &.active {
-                font-weight: 500;
 
                 &:after {
+                    content: "";
+                    display: block;
+                    margin: auto;
+                    height: 2px;
+                    width: 0px;
+                    background: transparent;
                     transition: width 0.3s ease-out, background-color 0.3s ease;
                     -webkit-transition: width 0.3s ease-out, background-color 0.3s ease;
                     -moz-transition: width 0.3s ease-out, background-color 0.3s ease;
                     -ms-transition: width 0.3s ease-out, background-color 0.3s ease;
                     -o-transition: width 0.3s ease-out, background-color 0.3s ease;
-                    width: 1.5rem;
-                    background: $white;
+                }
+
+                &.active {
+                    font-weight: 500;
+
+                    &:after {
+                        transition: width 0.3s ease-out, background-color 0.3s ease;
+                        -webkit-transition: width 0.3s ease-out, background-color 0.3s ease;
+                        -moz-transition: width 0.3s ease-out, background-color 0.3s ease;
+                        -ms-transition: width 0.3s ease-out, background-color 0.3s ease;
+                        -o-transition: width 0.3s ease-out, background-color 0.3s ease;
+                        width: 1.5rem;
+                        background: $white;
+                    }
                 }
             }
         }
     }
-}
 
-.about {
-    padding: 1.5rem 0;
+    .about {
+        padding: 1.5rem 0;
 
-    h5 {
-        font-size: 1.2rem;
-        font-weight: 600;
-        margin: 0.5rem 0 0.5rem 0;
-    }
+        h5 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin: 0.5rem 0 0.5rem 0;
+        }
 
-    .stats {
-        margin-top: 2rem;
+        .stats {
+            margin-top: 2rem;
+        }
     }
 }

src/components/FlashCards/Display/Card.js

@@ -13,7 +13,8 @@ const Flashcard = ({ card }) => {
                 <div className={styles.options}>
                     <MoreVertIcon />
                 </div>
-                <div className={styles.card}>
+                <div className={styles.data}>
+                    <h3>Front</h3>
                     <p>{card.front}</p>
                 </div>
             </Paper>

src/components/FlashCards/Display/card.module.scss

@@ -9,4 +9,18 @@
         right: 0.5rem;
         color: $medium-grey;
     }
+
+    .data {
+        padding: 0.5rem 0;
+
+        h3 {
+            margin: 0 0 0.25rem 0;
+            font-size: 1.1rem;
+        }
+
+        p {
+            margin: 0;
+            font-size: 0.9rem;
+        }
+    }
 }

src/components/Flashcards/Display/Card.js

@@ -13,7 +13,8 @@ const Flashcard = ({ card }) => {
                 <div className={styles.options}>
                     <MoreVertIcon />
                 </div>
-                <div className={styles.card}>
+                <div className={styles.data}>
+                    <h3>Front</h3>
                     <p>{card.front}</p>
                 </div>
             </Paper>

src/components/Flashcards/Display/card.module.scss

@@ -9,4 +9,18 @@
         right: 0.5rem;
         color: $medium-grey;
     }
+
+    .data {
+        padding: 0.5rem 0;
+
+        h3 {
+            margin: 0 0 0.25rem 0;
+            font-size: 1.1rem;
+        }
+
+        p {
+            margin: 0;
+            font-size: 0.9rem;
+        }
+    }
 }

src/components/Flashcards/List/List.js

@@ -1,8 +1,6 @@
-import { useContext, useState, useEffect } from "react";
 import { v4 as uuid } from "uuid";
 
 // Context
-import { LoaderContext } from "../../../context/LoaderContext";
 
 // Components
 import Flashcard from "../Display/Card";
@@ -15,7 +13,6 @@ import styles from "./list.module.scss";
 
 const List = ({ cards }) => {
     // Config
-    const { showLoader, hideLoader } = useContext(LoaderContext);
 
     return (
         <div className={styles.list}>