lukemt · lukemt · Nov 12, 2021 · Nov 12, 2021 · Nov 12, 2021 · Nov 12, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,18 +12,21 @@
     "@types/node": "^12.20.33",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.9",
+    "classnames": "^2.3.1",
+    "history": "^5.1.0",
     "lodash": "^4.17.21",
     "nanoid": "^3.1.30",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flip-toolkit": "^7.0.13",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.1",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "craco start",
+    "start": "TAILWIND_MODE=watch craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
@@ -47,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/styled-components": "^5.1.15",
     "autoprefixer": "^9.8.8",
     "postcss": "^7.0.39",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="note taking app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>notes app</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
-import { Flipper } from "react-flip-toolkit";
-import ContentEditable from "./components/ContentEditable";
-import NotesComponent from "./components/NotesComponent";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import NotesPage from "./components/NotesPage";
 import { NotesModel } from "./noteModel/NotesModel";
 import { SubscribableStore } from "./noteModel/SubscribableStore";
 import { loadNotes, saveNotes } from "./utils/autoSaveSingleton";
 
 export default function App() {
-  const [refresh, setRefresh] = useState(0);
+  const [, setRefresh] = useState(0);
   const [notesModel, setNotesModel] = useState(null as NotesModel | null);
 
   useEffect(() => {
@@ -44,52 +43,15 @@ export default function App() {
     return null;
   }
 
-  const rootNote = notesModel.getOne("ROOT")!;
-
   return (
-    <>
-      <header>
-        <ContentEditable
-          className="fixed top-0 inset-x-0 p-5 bg-gradient-to-br from-white to-blue-50 shadow-md dark:from-gray-900 dark:to-blue-900"
-          defaultValue={rootNote.text}
-          needsFocus={false}
-          onNewValue={(value) => notesModel.updateNoteText(rootNote._id, value)}
-          onEnter={() => {}}
-          onDelete={() => {}}
-          onFocusTriggered={() => {}}
-          onIndent={() => {}}
-          onOutdent={() => {}}
-          onSelectPrevious={() => {}}
-          onSelectNext={() => {}}
-          onExpand={() => {}}
-          onCollapse={() => {}}
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<NotesPage notesModel={notesModel} />} />
+        <Route
+          path="/note/:mainNoteId"
+          element={<NotesPage notesModel={notesModel} />}
         />
-      </header>
-      <main className="max-w-md mx-auto my-20">
-        <Flipper flipKey={refresh}>
-          <ul>
-            {rootNote.childrenIds.map((id) => (
-              <NotesComponent
-                key={id}
-                notesModel={notesModel}
-                id={id}
-                onUpdateNote={(id, text) => notesModel.updateNoteText(id, text)}
-                onAddNote={(sponsoringNoteId) =>
-                  notesModel.addNoteBelow(sponsoringNoteId)
-                }
-                onDeleteNote={(id) => notesModel.deleteNote(id)}
-                onFocusTriggered={(id) => notesModel.removeNeedsFocus(id)}
-                onIndentNote={(id) => notesModel.indentNote(id)}
-                onOutdentNote={(id) => notesModel.outdentNote(id)}
-                onSelectPreviousNote={(id) => notesModel.selectPrevious(id)}
-                onSelectNextNote={(id) => notesModel.selectNext(id)}
-                onExpandNote={(id) => notesModel.expandNote(id)}
-                onCollapseNote={(id) => notesModel.collapseNote(id)}
-              />
-            ))}
-          </ul>
-        </Flipper>
-      </main>
-    </>
+      </Routes>
+    </BrowserRouter>
   );
 }
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router-dom";
+import classNames from "classnames";
+
+export default function BackButton() {
+  const navigate = useNavigate();
+  return (
+    <button
+      className={classNames(
+        "p-2",
+        "transition",
+        "ease-out",
+        "hover:scale-125",
+        "text-blue-900",
+        "dark:text-blue-200"
+      )}
+      onClick={() => navigate(-1)}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </button>
+  );
+}
diff --git a/src/components/ExpandButton.tsx b/src/components/ExpandButton.tsx
@@ -20,6 +20,7 @@ export default function ExpandIcon({
           viewBox="0 0 24 24"
           stroke="currentColor"
         >
+          <title>Collapse</title>
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -42,6 +43,7 @@ export default function ExpandIcon({
           viewBox="0 0 24 24"
           stroke="currentColor"
         >
+          <title>Expand</title>
           <path
             strokeLinecap="round"
             strokeLinejoin="round"