chore(frontend): import from React Router instead of Reach Router

Author: trivikr

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) => {
+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 {

packages/frontend/src/content/DeleteNoteButton.tsx

@@ -1,7 +1,7 @@
 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";
 
@@ -23,7 +23,7 @@ const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
       await fetch(deleteNoteURL, {
         method: "DELETE",
       });
-      navigate("/");
+      useNavigate()("/");
     } catch (error) {
       setErrorMsg(`${error.toString()} - ${deleteNoteURL} - ${noteId}`);
     } finally {

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) => {
+const ListNotes = (props: any) => {
   const [isLoading, setIsLoading] = useState(true);
   const [errorMsg, setErrorMsg] = useState("");
   const [notes, setNotes] = useState([]);

packages/frontend/src/content/NotFound.tsx

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

packages/frontend/src/content/SaveNoteButton.tsx

@@ -1,7 +1,7 @@
 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 }) => {
@@ -20,7 +20,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}`);

packages/frontend/src/content/ShowNote.tsx

@@ -1,12 +1,12 @@
 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 }>) => {
+const ShowNote = (props: any) => {
   const { noteId } = props;
   const [isLoading, setIsLoading] = useState(true);
   const [noteContent, setNoteContent] = useState("");
@@ -28,7 +28,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);
       }