From 86dd039d574c813635cafb7d850fb3adb61ba5d3 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Thu, 15 Jul 2021 20:22:04 +0500
Subject: [PATCH] Going to another page no longer triggers page reaload

---
 src/App/index.tsx               | 12 +++++-------
 src/Bookshelf/AddBook/index.tsx |  9 ++++++++-
 src/UploadForm/index.tsx        |  4 +++-
 src/router/goTo.ts              |  4 ++++
 src/router/index.tsx            |  4 ++--
 5 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 src/router/goTo.ts

diff --git a/src/App/index.tsx b/src/App/index.tsx
index 533f1ea..af21d26 100644
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@@ -13,12 +13,10 @@ const routes: Route[] = [
   { Component: UploadForm, path: "/upload" },
 ];
 
-export const App = () => {
-  return (
-    <div className={styles.container}>
-      <Router routes={routes} startPath="/list" DefaultComponent={Err404} />
-    </div>
-  );
-};
+export const App = () => (
+  <div className={styles.container}>
+    <Router routes={routes} startPath="/list" DefaultComponent={Err404} />
+  </div>
+);
 
 export default App;
diff --git a/src/Bookshelf/AddBook/index.tsx b/src/Bookshelf/AddBook/index.tsx
index 3984d97..7ffb8bd 100644
--- a/src/Bookshelf/AddBook/index.tsx
+++ b/src/Bookshelf/AddBook/index.tsx
@@ -2,10 +2,17 @@ import React from "react";
 
 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 = () => {
   return (
-    <button className={styles.container}>
+    <button
+      onClick={() => {
+        goTo(BASE_URL + "/upload");
+      }}
+      className={styles.container}
+    >
       <img src={plusIcon} className={styles.plus} />
       <h1 className={styles.caption}>Add book</h1>
     </button>
diff --git a/src/UploadForm/index.tsx b/src/UploadForm/index.tsx
index 83c5034..bd27911 100644
--- a/src/UploadForm/index.tsx
+++ b/src/UploadForm/index.tsx
@@ -4,6 +4,8 @@ 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("");
@@ -22,7 +24,7 @@ export const UploadForm = () => {
 
         if (validateResponse(res)) {
           saveBook(res, res.hash || Date.now().toString());
-          // TODO: redirect to main menu
+          goTo(BASE_URL + "/list");
         }
       }
     } catch (err) {
diff --git a/src/router/goTo.ts b/src/router/goTo.ts
new file mode 100644
index 0000000..b85a71c
--- /dev/null
+++ b/src/router/goTo.ts
@@ -0,0 +1,4 @@
+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
index 0c0f914..6d6027b 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { BASE_URL } from "../constants";
 import { Route } from "@type/router";
 import { Err404 } from "./404";
+import { goTo } from "./goTo";
 
 interface IRouterProps {
   routes: Route[];
@@ -16,8 +17,7 @@ export const Router = ({
   DefaultComponent,
 }: IRouterProps) => {
   const currPath = window.location.pathname;
-  if (startPath && currPath === "/")
-    window.location.href = BASE_URL + startPath;
+  if (startPath && currPath === "/") goTo(BASE_URL + startPath);
 
   for (const route of routes) {
     if (currPath === route.path || currPath === route.path + "/")