From e4ff1db94de29bdf0d27e1617c1277ab49268ebc Mon Sep 17 00:00:00 2001
From: Brendan Leu <brenleu8@gmail.com>
Date: Mon, 22 Apr 2024 20:32:42 -0400
Subject: [PATCH] add back navigation

---
 package.json                  | 69 ++++++++++++++++++-----------------
 src/App.tsx                   | 19 +++-------
 src/components/backnav.tsx    | 15 ++++++++
 src/components/button.tsx     |  2 +
 src/components/navigation.tsx | 24 ++++++++++++
 src/routes/ManageTasks.tsx    |  5 ++-
 src/styles/button.scss        | 26 +++++++++++++
 src/styles/index.scss         | 10 ++---
 src/styles/navbar.scss        |  1 +
 yarn.lock                     |  5 +++
 10 files changed, 122 insertions(+), 54 deletions(-)
 create mode 100644 src/components/backnav.tsx
 create mode 100644 src/components/navigation.tsx
 create mode 100644 src/styles/button.scss

diff --git a/package.json b/package.json
index 9c638f7..85e5c05 100644
--- a/package.json
+++ b/package.json
@@ -1,36 +1,37 @@
 {
-  "name": "haptic-prototype",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3"
-  },
-  "devDependencies": {
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "sass": "^1.75.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
-  }
+    "name": "haptic-prototype",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "nanoid": "^5.0.7",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3"
+    },
+    "devDependencies": {
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@typescript-eslint/eslint-plugin": "^7.2.0",
+        "@typescript-eslint/parser": "^7.2.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.6",
+        "sass": "^1.75.0",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 3b9d329..2897e53 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,21 +8,20 @@ import Settings from '@/routes/Settings';
 import Stats from '@/routes/Stats';
 import Edit from '@/routes/EditTask';
 
-import { Navbar, NavbarItem } from '@/components/navbar';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHouse, faGear, faPenToSquare, faMedal } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
 
 import { Habit, YesNoHabit } from '@/classes/Habit';
 import { HabitContext } from '@/HabitContext';
+import Navigation from '@/components/navigation';
 
 function App() {
     const [habits, setHabits] = useState(new Map<string, Habit>([['test-habit', new YesNoHabit('Do thing?')]]));
     const value = { habits, setHabits };
 
     return (
-        <BrowserRouter>
-            <HabitContext.Provider value={value}>
+        <HabitContext.Provider value={value}>
+            <BrowserRouter>
+                <Navigation />
                 <div className="page">
                     <Routes>
                         <Route path="/" element={<Home />} />
@@ -33,14 +32,8 @@ function App() {
                         <Route path="/edit/:id" element={<Edit />} />
                     </Routes>
                 </div>
-            </HabitContext.Provider>
-            <Navbar>
-                <NavbarItem link="/" icon={<FontAwesomeIcon icon={faHouse} />} text="Home" />
-                <NavbarItem link="/manage" icon={<FontAwesomeIcon icon={faGear} />} text="Manage" />
-                <NavbarItem link="/leaderboard" icon={<FontAwesomeIcon icon={faPenToSquare} />} text="Leaderboard" />
-                <NavbarItem link="/settings" icon={<FontAwesomeIcon icon={faMedal} />} text="Settings" />
-            </Navbar>
-        </BrowserRouter>
+            </BrowserRouter>
+        </HabitContext.Provider>
     );
 }
 
diff --git a/src/components/backnav.tsx b/src/components/backnav.tsx
new file mode 100644
index 0000000..e3e9dba
--- /dev/null
+++ b/src/components/backnav.tsx
@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+
+import '@/styles/navbar.scss';
+
+// Navbar
+// type NavBackProps = { children: React.ReactNode };
+
+function NavBack() {
+    const navigate = useNavigate();
+    // const { children } = props;
+
+    return <button onClick={() => navigate(-1)}>Back</button>;
+}
+
+export default NavBack;
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 94a24be..22fa053 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -1,5 +1,7 @@
 import { Link } from 'react-router-dom';
 
+import '@/styles/button.scss';
+
 type ButtonProps = {
     children?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
new file mode 100644
index 0000000..38b2e5c
--- /dev/null
+++ b/src/components/navigation.tsx
@@ -0,0 +1,24 @@
+import { useLocation } from 'react-router-dom';
+import { Navbar, NavbarItem } from '@/components/navbar';
+import BackNav from '@/components/backnav';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHouse, faGear, faPenToSquare, faMedal } from '@fortawesome/free-solid-svg-icons';
+
+function Navigation() {
+    const { pathname } = useLocation();
+
+    if (['/', '/manage', '/leaderboard', '/settings'].includes(pathname)) {
+        return (
+            <Navbar>
+                <NavbarItem link="/" icon={<FontAwesomeIcon icon={faHouse} />} text="Home" />
+                <NavbarItem link="/manage" icon={<FontAwesomeIcon icon={faGear} />} text="Manage" />
+                <NavbarItem link="/leaderboard" icon={<FontAwesomeIcon icon={faPenToSquare} />} text="Leaderboard" />
+                <NavbarItem link="/settings" icon={<FontAwesomeIcon icon={faMedal} />} text="Settings" />
+            </Navbar>
+        );
+    } else {
+        return <BackNav />;
+    }
+}
+
+export default Navigation;
diff --git a/src/routes/ManageTasks.tsx b/src/routes/ManageTasks.tsx
index fc02807..d096e3b 100644
--- a/src/routes/ManageTasks.tsx
+++ b/src/routes/ManageTasks.tsx
@@ -1,6 +1,7 @@
 import { HabitContext } from '@/HabitContext';
 import Button from '@/components/button';
 import Title from '@/components/title';
+import { nanoid } from 'nanoid';
 import { useContext } from 'react';
 
 function ManageTasks() {
@@ -9,9 +10,9 @@ function ManageTasks() {
     return (
         <>
             <Title>Manage</Title>
-            <Button onClick={() => {}}>Button</Button>
+            <Button to={'/edit/' + nanoid(5)}>Button</Button>
             {Array.from(habits.keys()).map((key) => {
-                return <p>{key}</p>;
+                return <p key={key}>{key}</p>;
             })}
         </>
     );
diff --git a/src/styles/button.scss b/src/styles/button.scss
new file mode 100644
index 0000000..a0c4793
--- /dev/null
+++ b/src/styles/button.scss
@@ -0,0 +1,26 @@
+.button {
+    padding-bottom: 10px;
+    padding-top: 16px;
+    padding: 16px 15px 10px 15px;
+    margin: 5px 0;
+
+    background-color: var(--primary-color);
+    color: var(--primary-text-color);
+
+    border: none;
+    border-radius: 10px;
+
+    font-family: inherit;
+    text-transform: uppercase;
+    font-size: var(--font-size-regular);
+    text-decoration: none;
+
+    transition: 0.25s;
+
+    display: inline-block;
+    cursor: pointer;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2357c12..52bbe94 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -19,10 +19,10 @@
     --secondary-color: var(--yellow-light-color);
     --secondary-text-color: var(--black-color);
 
-    --font-size-navbar: 0.5em;
-    --font-size-navbar-icon: 0.75em;
+    --font-size-navbar: 1.5rem;
+    --font-size-navbar-icon: 1.5rem;
 
-    --font-size-regular: 2.5em;
-    --font-size-large: 2.5em;
-    --font-size-xl: 2em;
+    --font-size-regular: 2rem;
+    --font-size-large: 2.5rem;
+    --font-size-xl: 4rem;
 }
diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss
index 9f66bde..c61bc73 100644
--- a/src/styles/navbar.scss
+++ b/src/styles/navbar.scss
@@ -18,6 +18,7 @@
         flex-direction: column;
         align-items: center;
         gap: 5px;
+        cursor: pointer;
 
         padding: 10px;
 
diff --git a/yarn.lock b/yarn.lock
index 6c59422..346fc82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1623,6 +1623,11 @@ nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+nanoid@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.0.7.tgz#6452e8c5a816861fd9d2b898399f7e5fd6944cc6"
+  integrity sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
-- 
knotmirror 0.0.1