From 9adec4e99f9ecffd9ed464c5ecfddaf2fa82cb5d Mon Sep 17 00:00:00 2001
From: Marcin Cichocki <marcincichocki1993@gmail.com>
Date: Fri, 28 May 2021 21:11:50 +0200
Subject: [PATCH] fix(client-electron): resolve hook issue in history page

---
 .../renderer/components/Navigation.tsx        | 34 ++++++++-----------
 .../renderer/pages/History.tsx                |  3 +-
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/client-electron/renderer/components/Navigation.tsx b/src/client-electron/renderer/components/Navigation.tsx
index 61543cc0..38e81009 100644
--- a/src/client-electron/renderer/components/Navigation.tsx
+++ b/src/client-electron/renderer/components/Navigation.tsx
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
+import { memo } from 'react';
 import { NavLink as RouterNavLink } from 'react-router-dom';
-import { useContext } from 'react';
-import { StateContext } from '../state';
+import styled from 'styled-components';
 
 const Nav = styled.nav`
   display: flex;
@@ -32,20 +31,15 @@ export const NavLink = styled(RouterNavLink)`
   }
 `;
 
-export const Navigation = () => {
-  const state = useContext(StateContext);
-  const { uuid } = state.history[0];
-
-  return (
-    <Nav>
-      <List>
-        <ListItem>
-          <NavLink to="/history">History</NavLink>
-        </ListItem>
-        <ListItem>
-          <NavLink to="/settings">Settings</NavLink>
-        </ListItem>
-      </List>
-    </Nav>
-  );
-};
+export const Navigation = memo(() => (
+  <Nav>
+    <List>
+      <ListItem>
+        <NavLink to="/history">History</NavLink>
+      </ListItem>
+      <ListItem>
+        <NavLink to="/settings">Settings</NavLink>
+      </ListItem>
+    </List>
+  </Nav>
+));
diff --git a/src/client-electron/renderer/pages/History.tsx b/src/client-electron/renderer/pages/History.tsx
index 3b5b147d..61ff7f57 100644
--- a/src/client-electron/renderer/pages/History.tsx
+++ b/src/client-electron/renderer/pages/History.tsx
@@ -93,11 +93,10 @@ const H2 = styled.h2`
 
 export const History: FC = () => {
   const { history } = useContext(StateContext);
+  const { path } = useRouteMatch();
 
   if (!history.length) return <NoHistory />;
 
-  const { path } = useRouteMatch();
-
   return (
     <HistoryWrapper>
       <HistoryList>