Implement HashRouter

src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Route, Routes } from "react-router-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
 import Projects from "./pages/Projects";
 import Editor from "./pages/Editor";
 import Save from "./pages/Save";
@@ -8,12 +8,14 @@ import About from "./pages/About";
 
 export default function App() {
   return (
-    <Routes>
-      <Route path="think-write/" element={<Home />} />
-      <Route path="think-write/projects" element={<Projects />} />
-      <Route path="think-write/edit/:id" element={<Editor />} />
-      <Route path="think-write/edit/:id/save" element={<Save />} />
-      <Route path="think-write/about" element={<About />} />
-    </Routes>
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/projects" element={<Projects />} />
+        <Route path="/edit/:id" element={<Editor />} />
+        <Route path="/edit/:id/save" element={<Save />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </HashRouter>
   );
 }

src/components/CreateButton.tsx

@@ -4,7 +4,7 @@ import { v4 as uuid } from "uuid";
 export default function CreateButton() {
   return (
     <a
-      href={`/think-write/edit/${uuid()}`}
+      href={`#/edit/${uuid()}`}
       aria-label="Start a new project"
       className="self-center bg-green-900 hover:bg-green-600 text-white font-thin tracking-wider text-sm md:text-lg py-1 px-2  md:py-2 md:px-4 border border-green-600 rounded"
     >

src/components/Navbar.tsx

@@ -8,23 +8,23 @@ const LinkList = () => {
     <ul className="flex flex-col font-medium mt-4 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
       <li>
         <a
-          href="/think-write/"
+          href="/"
           className="block py-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
         >
           Home
         </a>
       </li>
       <li>
         <a
-          href="/think-write/projects"
+          href="#/projects"
           className="block py-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
         >
           Projects
         </a>
       </li>
       <li>
         <a
-          href="/think-write/about"
+          href="#/about"
           className="block py-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
         >
           About
@@ -47,7 +47,7 @@ const Dropdown = () => {
           <div className="mt-5 mr-4 rounded-xl bg-sky-700/95">
             <DropdownMenu.Item>
               <a
-                href="/think-write/"
+                href="/"
                 className="block pt-2 pb-1 pl-3 pr-4 text-gray-900 font-thin tracking-wider md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
               >
                 Home
@@ -56,7 +56,7 @@ const Dropdown = () => {
             <DropdownMenu.Separator className="h-px bg-gray-900 my-1 mx-2 opacity-50" />
             <DropdownMenu.Item>
               <a
-                href="/think-write/projects"
+                href="#/projects"
                 className="block py-1 pl-3 pr-4 text-gray-900 font-thin tracking-wider hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
               >
                 Projects
@@ -65,7 +65,7 @@ const Dropdown = () => {
             <DropdownMenu.Separator className="h-px bg-gray-900 my-1 mx-2 opacity-50" />
             <DropdownMenu.Item>
               <a
-                href={"/think-write/about"}
+                href="#/about"
                 className="block pt-1 pb-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
               >
                 About

src/components/NavigateToEdit.tsx

@@ -5,7 +5,7 @@ import { Pencil } from "lucide-react";
 export default function NavigateToEdit({ id }) {
   return (
     <a
-      href={`/think-write/edit/${id}`}
+      href={`#/edit/${id}`}
       aria-label="Open a new session or edit past sessions"
     >
       <Pencil

src/components/Pomodoro.tsx

@@ -45,6 +45,7 @@ export default function Pomodoro() {
 
   useEffect(() => {
     if (!state.toggleIcon) {
+      state.seconds = 0;
       return;
     }
     if (state.reps === 0) {
@@ -54,10 +55,8 @@ export default function Pomodoro() {
     const timer = setTimeout(() => {
       if (state.seconds === 0 && state.minutes > 0) {
         dispatch({ type: ACTIONS.SUBTRACT_MINUTE });
-        return () => clearTimeout(timer);
       } else if (state.seconds > 0) {
         dispatch({ type: ACTIONS.SUBTRACT_SECOND });
-        return () => clearTimeout(timer);
       } else if (
         state.seconds === 0 &&
         state.minutes === 0 &&
@@ -88,6 +87,7 @@ export default function Pomodoro() {
           }
         }
       }
+      return () => clearTimeout(timer);
     }, 1000);
   }, [state.seconds, state.minutes]);
 

src/components/ProjectsNavButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 export default function ProjectsNavButton() {
   return (
     <a
-      href="/think-write/projects"
+      href="#/projects"
       aria-label="Navigate to projects"
       className="self-center bg-blue-500 hover:bg-blue-700 text-white font-thin tracking-wider py-2 px-4 border border-blue-700 rounded m-10"
     >

src/components/SaveButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 export default function SaveButton({ id }) {
   return (
     <a
-      href={`/think-write/edit/${id}/save`}
+      href={`#/edit/${id}/save`}
       className="self-center bg-blue-500 hover:bg-blue-700 text-white font-thin tracking-wider py-2 px-4 border border-blue-700 rounded"
     >
       Save

src/components/SessionList.tsx

@@ -41,6 +41,7 @@ const SessionListItem = ({ session, id, hot, sessions, title }) => {
         <p className="text-cyan-300 font-thin tracking-wider text-md md:text-xl mr-4">
           Session {sessionId}
         </p>
+
         <Collapsible.Trigger asChild>
           <button id={open ? "close" : "open"}>
             {open ? (

src/index.css

@@ -4,7 +4,7 @@
 
 body {
   background-color: rgb(24, 24, 27);
-  margin: 0px;
+  @apply m-0;
 }
 
 .ql-editor {

src/main.jsx

@@ -2,13 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, HashRouter } from "react-router-dom";
 import "react-calendar/dist/Calendar.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <App />
   </React.StrictMode>
 );

src/pages/Home.tsx

@@ -31,7 +31,7 @@ export default function Home() {
             Jordan was able to create something a little more personal this time
             around. To learn more about him, and the "why" behind this project{" "}
             <a
-              href="/think-write/about"
+              href="#/about"
               className="text-cyan-300 hover:text-cyan-600 font-thin"
             >
               click here.