ft: improve ui to handle #navigation + better success popup!

shivanshs9 · Nov 11, 2024 · 34935f2 · 34935f2
1 parent bce1729
commit 34935f2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import CreateNote from "./pages/CreateNote";
 import ListNotes from "./pages/ListNotes";
 
@@ -7,16 +7,28 @@ const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
 
 function App() {
     const [menuOpen, setMenuOpen] = useState(false);
-    const [currentPage, setCurrentPage] = useState("create");
+    const [hashPath, setHashPath] = useState(window.location.hash);
 
     const toggleMenu = () => {
         setMenuOpen(!menuOpen);
     };
 
-    const switchPage = (page: string) => {
-        setCurrentPage(page);
-        setMenuOpen(false);
+    const listenToUrlChange = () => {
+        const newHashPath = window.location.hash;
+        console.log("Navigated to " + newHashPath);
+        setHashPath(newHashPath);
     };
+    useEffect(() => {
+        window.addEventListener("hashchange", listenToUrlChange);
+        return () => {
+            window.removeEventListener("hashchange", listenToUrlChange);
+        };
+    }, []);
+
+    const switchPage = (newPage: string) => {
+        location.hash = newPage;
+        setMenuOpen(false);
+    }
 
     return IS_WEBGPU_AVAILABLE ? (
         <div className='flex flex-col justify-center items-center min-h-screen'>
@@ -27,13 +39,13 @@ function App() {
                     </button>
                 </div>
                 <div className={`menu ${menuOpen ? 'open' : ''}`}>
-                    <a href='#' onClick={() => switchPage("create")} className='menu-item'>Write a new entry...</a>
-                    <a href='#' onClick={() => switchPage("list")} className='menu-item'>Journal so far</a>
+                    <a onClick={() => {switchPage("new")}} className='menu-item'>Write a new entry...</a>
+                    <a onClick={() => {switchPage("list")}} className='menu-item'>Journal so far</a>
                 </div>
                 <h1 className='text-5xl font-extrabold tracking-tight text-slate-900 sm:text-7xl text-center'>
                     Whisper Notes
                 </h1>
-                {currentPage === "create" ? <CreateNote /> : <ListNotes />}
+                {hashPath === "#list" ? <ListNotes /> : <CreateNote />}
             </div>
 
             <div className='bottom-4 credits'>

diff --git a/frontend/src/components/Transcript.tsx b/frontend/src/components/Transcript.tsx
@@ -58,7 +58,7 @@ export default function Transcript({ transcribedData }: Props) {
                 }
                 const status = call.response.status;
                 const note = call.response.note!!;
-                setCreateStatus(`Status "${status}": Created Note with ID "${note.id}`)
+                setCreateStatus(`Status "${status}": Created Note with ID "${note.id}".`)
             } catch (e) {
                 console.log('caught error in grpc call')
                 console.error(e)
@@ -130,7 +130,9 @@ export default function Transcript({ transcribedData }: Props) {
                 </div>
             )}
             {createStatus && (
-                <p>{createStatus}</p>
+                <p className="p-4 bg-blue-50 dark:bg-blue-100 m-4">{createStatus} 
+                <span> <a className="underline text-red-400" href="#list">Wanna check out your past journals?</a></span>
+                </p>
             )}
         </div>
     );