[WIP] feat(frontend): replace Reach Router v1 to React Router v6

packages/frontend/package.json

@@ -13,13 +13,14 @@
     "@aws-sdk/s3-request-presigner": "3.128.0",
     "@aws-sdk/util-create-request": "3.127.0",
     "@aws-sdk/util-format-url": "3.127.0",
-    "@reach/router": "1.3.4",
     "buffer": "6.0.3",
     "microphone-stream": "6.0.1",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-bootstrap": "1.4.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0"
   },
   "scripts": {
     "prepare:frontend": "cd .. && yarn prepare:frontend",
@@ -58,7 +59,6 @@
   },
   "devDependencies": {
     "@types/node": "16.11.43",
-    "@types/reach__router": "1.3.6",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react-refresh": "1.3.6",

packages/frontend/src/Routes.tsx

@@ -1,21 +1,17 @@
 import React, { lazy, Suspense } from "react";
-import { Router } from "@reach/router";
-
-const ListNotes = lazy(() => import("./content/ListNotes"));
-const CreateNote = lazy(() => import("./content/CreateNote"));
-const ShowNote = lazy(() => import("./content/ShowNote"));
-const NotFound = lazy(() => import("./content/NotFound"));
+import { Routes as ReactRouterRoutes, Route } from "react-router-dom";
+import { CreateNote, ListNotes, ShowNote, NotFound } from "./content";
 
 const Routes = () => (
   <div className="mt-md-4 d-flex flex-column justify-content-center">
-    <Suspense fallback={<div>Loading...</div>}>
-      <Router>
-        <ListNotes path="/" />
-        <CreateNote path="/note/new" />
-        <ShowNote path="/notes/:noteId" />
-        <NotFound default />
-      </Router>
-    </Suspense>
+    <ReactRouterRoutes>
+      <Route path="/" element={<ListNotes />} />
+      <Route path="notes">
+        <Route path="new" element={<CreateNote />} />
+        <Route path=":noteId" element={<ShowNote />} />
+      </Route>
+      <Route path="*" element={<NotFound />} />
+    </ReactRouterRoutes>
   </div>
 );
 

packages/frontend/src/content/CreateNote.tsx

@@ -1,13 +1,13 @@
 import React, { useState, FormEvent } from "react";
 import { Form, Button, Alert } from "react-bootstrap";
-import { navigate, RouteComponentProps } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { GATEWAY_URL, MAX_FILE_SIZE } from "../config.json";
 import { putObject } from "../libs";
 import { HomeButton, ButtonSpinner, PageContainer } from "../components";
 import { RecordAudioButton } from "./RecordAudioButton";
 import { PlayAudioButton } from "./PlayAudioButton";
 
-const CreateNote = (props: RouteComponentProps) => {
+export const CreateNote = (props: any) => {
   const [isLoading, setIsLoading] = useState(false);
   const [errorMsg, setErrorMsg] = useState("");
   const [noteContent, setNoteContent] = useState("");
@@ -36,7 +36,7 @@ const CreateNote = (props: RouteComponentProps) => {
         method: "POST",
         body: JSON.stringify({ attachment, content: noteContent }),
       });
-      navigate("/");
+      useNavigate()("/");
     } catch (error) {
       setErrorMsg(`${error.toString()} - ${createNoteURL} - ${noteContent}`);
     } finally {
@@ -97,5 +97,3 @@ const CreateNote = (props: RouteComponentProps) => {
     </PageContainer>
   );
 };
-
-export default CreateNote;

packages/frontend/src/content/DeleteNoteButton.tsx

@@ -1,11 +1,14 @@
 import React, { useState } from "react";
 import { Button, Alert } from "react-bootstrap";
 import { GATEWAY_URL } from "../config.json";
-import { navigate } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { deleteObject } from "../libs";
 import { ButtonSpinner } from "../components";
 
-const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
+export const DeleteNoteButton = (props: {
+  noteId: string;
+  attachment?: string;
+}) => {
   const { noteId, attachment } = props;
   const [isDeleting, setIsDeleting] = useState(false);
   const [errorMsg, setErrorMsg] = useState("");
@@ -23,7 +26,7 @@ const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
       await fetch(deleteNoteURL, {
         method: "DELETE",
       });
-      navigate("/");
+      useNavigate()("/");
     } catch (error) {
       setErrorMsg(`${error.toString()} - ${deleteNoteURL} - ${noteId}`);
     } finally {
@@ -46,5 +49,3 @@ const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
     </>
   );
 };
-
-export { DeleteNoteButton };

packages/frontend/src/content/ListNotes.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link, RouteComponentProps } from "@reach/router";
+import { Link } from "react-router-dom";
 import { GATEWAY_URL } from "../config.json";
 import { Card, Alert, CardColumns, Button } from "react-bootstrap";
 import { Loading, PageContainer } from "../components";
@@ -10,7 +10,7 @@ interface Note {
   attachment: boolean;
 }
 
-const ListNotes = (props: RouteComponentProps) => {
+export const ListNotes = (props: any) => {
   const [isLoading, setIsLoading] = useState(true);
   const [errorMsg, setErrorMsg] = useState("");
   const [notes, setNotes] = useState([]);
@@ -55,7 +55,7 @@ const ListNotes = (props: RouteComponentProps) => {
     ));
 
   const createNewNote = () => (
-    <Link key="new" to="note/new">
+    <Link key="new" to="notes/new">
       <Button variant="primary" block>
         Create a new note
       </Button>
@@ -76,5 +76,3 @@ const ListNotes = (props: RouteComponentProps) => {
     </PageContainer>
   );
 };
-
-export default ListNotes;

packages/frontend/src/content/NotFound.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-import { RouteComponentProps } from "@reach/router";
 import { HomeButton, PageContainer } from "../components";
 
-const NotFound = (props: RouteComponentProps) => (
+export const NotFound = (props: any) => (
   <PageContainer header={<HomeButton />}>404 Page Not Found</PageContainer>
 );
-
-export default NotFound;

packages/frontend/src/content/PlayAudioButton.tsx

@@ -3,7 +3,7 @@ import { Button, Alert } from "react-bootstrap";
 import { PlayCircle, StopFill } from "react-bootstrap-icons";
 import { getSynthesizedSpeechUrl } from "../libs/getSynthesizedSpeechUrl";
 
-const PlayAudioButton = (props: {
+export const PlayAudioButton = (props: {
   disabled: boolean;
   isPlaying: boolean;
   setIsPlaying: Function;
@@ -55,5 +55,3 @@ const PlayAudioButton = (props: {
     </>
   );
 };
-
-export { PlayAudioButton };

packages/frontend/src/content/RecordAudioButton.tsx

@@ -7,7 +7,7 @@ import MicrophoneStream from "microphone-stream";
 import { pcmEncode } from "../libs/audioUtils";
 import { getStreamTranscriptionResponse } from "../libs/getStreamTranscriptionResponse";
 
-const RecordAudioButton = (props: {
+export const RecordAudioButton = (props: {
   disabled: boolean;
   isRecording: boolean;
   setIsRecording: Function;
@@ -118,5 +118,3 @@ const RecordAudioButton = (props: {
     </>
   );
 };
-
-export { RecordAudioButton };

packages/frontend/src/content/SaveNoteButton.tsx

@@ -1,10 +1,13 @@
 import React, { useState } from "react";
 import { Button, Alert } from "react-bootstrap";
 import { GATEWAY_URL } from "../config.json";
-import { navigate } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { ButtonSpinner } from "../components";
 
-const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
+export const SaveNoteButton = (props: {
+  noteId: string;
+  noteContent: string;
+}) => {
   const [isSaving, setIsSaving] = useState(false);
   const [errorMsg, setErrorMsg] = useState("");
 
@@ -20,7 +23,7 @@ const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
         method: "PUT",
         body: JSON.stringify({ content: noteContent }),
       });
-      navigate("/");
+      useNavigate()("/");
     } catch (error) {
       console.log(error);
       setErrorMsg(`${error.toString()} - ${updateNoteURL} - ${noteContent}`);
@@ -39,5 +42,3 @@ const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
     </>
   );
 };
-
-export { SaveNoteButton };

packages/frontend/src/content/ShowNote.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
-import { RouteComponentProps, navigate } from "@reach/router";
+import { useNavigate } from "react-router-dom";
 import { Form, Card } from "react-bootstrap";
 import { GATEWAY_URL } from "../config.json";
 import { DeleteNoteButton, SaveNoteButton } from "./";
 import { getObjectUrl } from "../libs";
 import { HomeButton, Loading, PageContainer } from "../components";
 
-const ShowNote = (props: RouteComponentProps<{ noteId: string }>) => {
+export const ShowNote = (props: any) => {
+  console.log({ props });
   const { noteId } = props;
   const [isLoading, setIsLoading] = useState(true);
   const [noteContent, setNoteContent] = useState("");
@@ -28,7 +29,7 @@ const ShowNote = (props: RouteComponentProps<{ noteId: string }>) => {
         }
       } catch (error) {
         // Navigate to 404 page, as noteId probably not present
-        navigate("/404");
+        useNavigate()("/404");
       } finally {
         setIsLoading(false);
       }
@@ -75,5 +76,3 @@ const ShowNote = (props: RouteComponentProps<{ noteId: string }>) => {
     </PageContainer>
   );
 };
-
-export default ShowNote;

packages/frontend/src/index.tsx

@@ -1,3 +1,4 @@
+import { BrowserRouter } from "react-router-dom";
 import { Buffer } from "buffer";
 import process from "process";
 import React from "react";
@@ -18,7 +19,9 @@ if (typeof (window as any).process === "undefined") {
 const container = document.getElementById("root");
 const root = createRoot(container);
 root.render(
-  <div className="container" style={{ height: "100vh" }}>
-    <Routes />
-  </div>
+  <BrowserRouter>
+    <div className="container" style={{ height: "100vh" }}>
+      <Routes />
+    </div>
+  </BrowserRouter>
 );