From 21448cf91daa9be9b676a514782386f29eff0178 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Fri, 16 Jul 2021 03:03:24 +0500
Subject: [PATCH] Switched from own router to wouter

---
 package.json                          |  3 ++-
 src/App/index.tsx                     | 17 +++++++--------
 src/pages/BookView/index.tsx          |  8 +++++++
 src/pages/Bookshelf/AddBook/index.tsx |  6 ++++--
 src/pages/UploadForm/index.tsx        |  6 +++---
 src/router/404.tsx                    |  8 -------
 src/router/goTo.ts                    |  4 ----
 src/router/index.tsx                  | 30 ---------------------------
 src/types/router.ts                   |  4 ----
 9 files changed, 24 insertions(+), 62 deletions(-)
 create mode 100644 src/pages/BookView/index.tsx
 delete mode 100644 src/router/404.tsx
 delete mode 100644 src/router/goTo.ts
 delete mode 100644 src/router/index.tsx
 delete mode 100644 src/types/router.ts

diff --git a/package.json b/package.json
index ee7acca..01c72bd 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "serve": "^12.0.0"
+    "serve": "^12.0.0",
+    "wouter": "^2.7.4"
   }
 }
diff --git a/src/App/index.tsx b/src/App/index.tsx
index 1c5b2c0..1218a8e 100644
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@@ -1,22 +1,19 @@
-import { Route } from "~/types/router";
 import React from "react";
+import { Route, Switch } from "wouter";
 
 import { Bookshelf } from "~/pages/Bookshelf";
+import { BookView } from "~/pages/BookView";
 import { UploadForm } from "~/pages/UploadForm";
 
-import { Router } from "~/router";
-import { Err404 } from "~/router/404";
-
 import styles from "./App.module.css";
 
-const routes: Route[] = [
-  { Component: Bookshelf, path: "/list" },
-  { Component: UploadForm, path: "/upload" },
-];
-
 export const App = () => (
   <div className={styles.container}>
-    <Router routes={routes} startPath="/list" DefaultComponent={Err404} />
+    <Switch>
+      <Route path="/upload" component={UploadForm} />
+      <Route path="/" component={Bookshelf} />
+      <Route path="/:hash" component={BookView} />
+    </Switch>
   </div>
 );
 
diff --git a/src/pages/BookView/index.tsx b/src/pages/BookView/index.tsx
new file mode 100644
index 0000000..4c1aa08
--- /dev/null
+++ b/src/pages/BookView/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { useRoute } from "wouter";
+
+export const BookView = () => {
+  const [match, params] = useRoute("/:hash");
+
+  return <div></div>;
+};
diff --git a/src/pages/Bookshelf/AddBook/index.tsx b/src/pages/Bookshelf/AddBook/index.tsx
index 96f1ef2..dd4551f 100644
--- a/src/pages/Bookshelf/AddBook/index.tsx
+++ b/src/pages/Bookshelf/AddBook/index.tsx
@@ -1,15 +1,17 @@
 import React from "react";
+import { useLocation } from "wouter";
 
 import plusIcon from "~/assets/plus.svg";
 import styles from "./AddBook.module.css";
 import { BASE_URL } from "~/constants";
-import { goTo } from "~/router/goTo";
 
 export const AddBook = () => {
+  const [_, setLocation] = useLocation();
+
   return (
     <button
       onClick={() => {
-        goTo(BASE_URL + "/upload");
+        setLocation("/upload");
       }}
       className={styles.container}
     >
diff --git a/src/pages/UploadForm/index.tsx b/src/pages/UploadForm/index.tsx
index 9ede168..38df2f6 100644
--- a/src/pages/UploadForm/index.tsx
+++ b/src/pages/UploadForm/index.tsx
@@ -1,15 +1,15 @@
 import React, { useState } from "react";
+import { useLocation } from "wouter";
 
 import plusIcon from "~/assets/plus.svg";
 import styles from "./UploadForm.module.css";
 import { submitFile, validateResponse, validState } from "~/api";
 import { saveBook } from "~/utils/localStorage";
-import { BASE_URL } from "~/constants";
-import { goTo } from "~/router/goTo";
 
 export const UploadForm = () => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [_, setLocation] = useLocation();
 
   const processFile = async (file: File | undefined) => {
     try {
@@ -24,7 +24,7 @@ export const UploadForm = () => {
 
         if (validateResponse(res)) {
           saveBook(res, res.hash || Date.now().toString());
-          goTo(BASE_URL + "/list");
+          setLocation("/");
         }
       }
     } catch (err) {
diff --git a/src/router/404.tsx b/src/router/404.tsx
deleted file mode 100644
index 94d3e07..0000000
--- a/src/router/404.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-
-export const Err404 = () => (
-  <>
-    <h1>Error 404</h1>
-    <h4>Path not found {window.location.pathname}</h4>
-  </>
-);
diff --git a/src/router/goTo.ts b/src/router/goTo.ts
deleted file mode 100644
index b85a71c..0000000
--- a/src/router/goTo.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const goTo = (
-  href: string = window.location.href,
-  nextTitle: string = document.title
-) => window.history.pushState({}, nextTitle, href);
diff --git a/src/router/index.tsx b/src/router/index.tsx
deleted file mode 100644
index 158facb..0000000
--- a/src/router/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-import { BASE_URL } from "~/constants";
-import { Route } from "~/types/router";
-import { Err404 } from "./404";
-import { goTo } from "./goTo";
-
-interface IRouterProps {
-  routes: Route[];
-  startPath?: string;
-  DefaultComponent?: React.FC;
-}
-
-export const Router = ({
-  routes,
-  startPath,
-  DefaultComponent,
-}: IRouterProps) => {
-  const currPath = window.location.pathname;
-  if (startPath && currPath === "/") goTo(BASE_URL + startPath);
-
-  for (const route of routes) {
-    if (currPath === route.path || currPath === route.path + "/")
-      return <route.Component />;
-  }
-
-  if (DefaultComponent) return <DefaultComponent />;
-
-  return <Err404 />;
-};
diff --git a/src/types/router.ts b/src/types/router.ts
deleted file mode 100644
index 99a492f..0000000
--- a/src/types/router.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Route {
-  path: string;
-  Component: React.FC;
-}