From ce8bc0f231e3d21c15ccc630e7d8a3b275dfa75c Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 24 Aug 2021 16:34:28 +0300
Subject: [PATCH] Adding history icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/common/history-store.ts                      |  8 +++++---
 src/renderer/components/icon/flat_arrow.svg      |  6 ++++++
 src/renderer/components/layout/topbar.module.css | 12 +++++++-----
 src/renderer/components/layout/topbar.tsx        | 15 ++++++++++++++-
 4 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/components/icon/flat_arrow.svg

diff --git a/src/common/history-store.ts b/src/common/history-store.ts
index 57dae6ee25..20109f93ab 100644
--- a/src/common/history-store.ts
+++ b/src/common/history-store.ts
@@ -42,22 +42,24 @@ export class HistoryStore extends BaseStore<HistoryModel> {
         `The current URL is ${navigation.location.pathname}${navigation.location.search}${navigation.location.hash}`
       );
       console.log(`The last navigation action was ${navigation.action}`);
+      console.log(`Current activeStep ${this.activeStep}`);
+      console.log(`Nav length ${navigation.length}`);
 
       if (!this.backOrForwardChange()) {
-        this.activeStep++;
+        ++this.activeStep;
       }
     });
   }
 
   @action
   goBack() {
-    this.activeStep--;
+    --this.activeStep;
     navigation.goBack();
   }
 
   @action
   goForward() {
-    this.activeStep++;
+    ++this.activeStep;
     navigation.goForward();
   }
 
diff --git a/src/renderer/components/icon/flat_arrow.svg b/src/renderer/components/icon/flat_arrow.svg
new file mode 100644
index 0000000000..5cef06309b
--- /dev/null
+++ b/src/renderer/components/icon/flat_arrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M21.6,12l-5.9-5.9v4.8H2.4v2.2h13.2v4.8L21.6,12z"/>
+</svg>
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css
index da4bdcda99..5ffcf9cef4 100644
--- a/src/renderer/components/layout/topbar.module.css
+++ b/src/renderer/components/layout/topbar.module.css
@@ -30,11 +30,13 @@
   grid-area: topbar;
 }
 
-.title {
-  @apply font-bold px-6;
-  color: var(--textColorAccent);
-  align-items: center;
-  display: flex;
+.history {
+  @apply flex items-center;
+}
+
+.prevArrow {
+  @apply ml-5;
+  transform: rotate(180deg);
 }
 
 .controls {
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 135407f7e1..21edf40495 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -23,6 +23,8 @@ import styles from "./topbar.module.css";
 import React from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
+import { Icon } from "../icon";
+import { HistoryStore } from "../../../common/history-store";
 
 interface Props extends React.HTMLAttributes<any> {
   label: React.ReactNode;
@@ -53,9 +55,20 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
     );
   };
 
+  const goBack = () => {
+    HistoryStore.getInstance().goBack();
+  };
+
+  const goForward = () => {
+    HistoryStore.getInstance().goForward();
+  };
+
   return (
     <div className={styles.topBar} {...rest}>
-      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.history}>
+        <Icon svg="flat_arrow" className={styles.prevArrow} onClick={goBack} disabled={!HistoryStore.getInstance().isPreviousExist()}/>
+        <Icon svg="flat_arrow" className="ml-5" onClick={goForward} disabled={!HistoryStore.getInstance().isForwardExist()}/>
+      </div>
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}