From 4cea1ad88e44282132890b4d78962bbab71bb7c1 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Mon, 28 Jan 2019 12:05:03 -0300
Subject: [PATCH] refactor(warnings): remove react warnings

---
 app/components/select.js  |  4 +---
 app/components/sidebar.js | 38 ++++++++++++-------------------
 app/router/router.js      | 25 ++++++++++----------
 app/views/console.js      |  4 ++++
 app/views/receive.js      | 48 +++++++++++++++------------------------
 app/views/transactions.js |  1 +
 6 files changed, 52 insertions(+), 68 deletions(-)

diff --git a/app/components/select.js b/app/components/select.js
index 1143444..e9e3d0e 100644
--- a/app/components/select.js
+++ b/app/components/select.js
@@ -38,9 +38,7 @@ const ValueWrapper = styled.div`
   text-overflow: ellipsis;
 `;
 
-const SelectMenuButtonWrapper = styled.button`
-  cursor: pointer;
-  outline: none;
+const SelectMenuButtonWrapper = styled.div`
   border: none;
   background-color: transparent;
   width: 50px;
diff --git a/app/components/sidebar.js b/app/components/sidebar.js
index a1fe851..5ca69e1 100644
--- a/app/components/sidebar.js
+++ b/app/components/sidebar.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Link, type Location } from 'react-router-dom';
+import type { Location, RouterHistory } from 'react-router-dom';
 import { MENU_OPTIONS } from '../constants/sidebar';
 
 const Wrapper = styled.div`
@@ -15,17 +15,13 @@ const Wrapper = styled.div`
   padding-top: 15px;
   position: relative;
 `;
-
-const StyledLink = styled(Link)`
-  color: ${props => (props.isActive
-    ? props.theme.colors.sidebarItemActive
-    : props.theme.colors.sidebarItem)};
+/* eslint-disable max-len */
+const StyledLink = styled.a`
+  color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
   font-size: ${props => `${props.theme.fontSize.regular}em`};
   text-decoration: none;
   font-weight: ${props => props.theme.fontWeight.bold};
-  background-color: ${props => (props.isActive
-    ? `${props.theme.colors.sidebarHoveredItem}`
-    : 'transparent')};
+  background-color: ${props => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
   letter-spacing: 0.25px;
   padding: 25px 20px;
   height: 35px;
@@ -33,17 +29,12 @@ const StyledLink = styled(Link)`
   display: flex;
   align-items: center;
   outline: none;
-  border-right: ${props => (props.isActive
-    ? `3px solid ${props.theme.colors.sidebarItemActive}`
-    : 'none')};
+  border-right: ${props => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
   cursor: pointer;
   transition: all 0.03s ${props => props.theme.colors.transitionEase};
 
   &:hover {
-    color: ${
-  /* eslint-disable-next-line max-len */
-  props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')
-}
+    color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
     background-color: ${props => props.theme.colors.sidebarHoveredItem};
   }
 `;
@@ -65,22 +56,23 @@ type MenuItem = {
 };
 
 type Props = {
+  history: RouterHistory,
   options?: MenuItem[],
   location: Location,
 };
 
-export const SidebarComponent = ({ options, location }: Props) => (
+export const SidebarComponent = ({ options, location, history }: Props) => (
   <Wrapper id='sidebar'>
     {(options || []).map((item) => {
       const isActive = location.pathname === item.route;
 
       return (
-        <StyledLink isActive={isActive} key={item.route} to={item.route}>
-          <Icon
-            isActive={isActive}
-            src={item.icon(isActive)}
-            alt={`${item.route}`}
-          />
+        <StyledLink
+          isActive={isActive}
+          key={item.route}
+          onClick={() => (isActive ? {} : history.push(item.route))}
+        >
+          <Icon isActive={isActive} src={item.icon(isActive)} alt={`${item.route}`} />
           {item.label}
         </StyledLink>
       );
diff --git a/app/router/router.js b/app/router/router.js
index ea67cd5..dfa5be6 100644
--- a/app/router/router.js
+++ b/app/router/router.js
@@ -1,7 +1,9 @@
 // @flow
 
 import React from 'react';
-import { Route, Switch, type Location } from 'react-router-dom';
+import {
+  Route, Switch, type Location, type RouterHistory,
+} from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ScrollTopComponent } from './scroll-top';
@@ -43,28 +45,27 @@ const getTitle = (path: string) => {
   return path.replace('/', '');
 };
 
-export const RouterComponent = ({ location }: { location: Location }) => (
+export const RouterComponent = ({
+  location,
+  history,
+}: {
+  location: Location,
+  history: RouterHistory,
+}) => (
   <FullWrapper>
     <HeaderComponent title={getTitle(location.pathname)} />
     <ContentWrapper>
-      <SidebarContainer location={location} />
+      <SidebarContainer location={location} history={history} />
       {/* $FlowFixMe */}
       <LayoutComponent>
         <ScrollTopComponent>
           <Switch>
-            <Route
-              exact
-              path={DASHBOARD_ROUTE}
-              component={DashboardContainer}
-            />
+            <Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
             <Route path={SEND_ROUTE} component={SendContainer} />
             <Route path={RECEIVE_ROUTE} component={ReceiveContainer} />
             <Route path={SETTINGS_ROUTE} component={SettingsContainer} />
             <Route path={CONSOLE_ROUTE} component={ConsoleView} />
-            <Route
-              path={TRANSACTIONS_ROUTE}
-              component={TransactionsContainer}
-            />
+            <Route path={TRANSACTIONS_ROUTE} component={TransactionsContainer} />
             <Route component={NotFoundView} />
           </Switch>
         </ScrollTopComponent>
diff --git a/app/views/console.js b/app/views/console.js
index ae94fab..bfd2d0b 100644
--- a/app/views/console.js
+++ b/app/views/console.js
@@ -70,6 +70,10 @@ export class ConsoleView extends Component<Props, State> {
     });
   }
 
+  componentWillUnmount() {
+    ipcRenderer.removeAllListeners('zcashd-log');
+  }
+
   render() {
     const { log } = this.state;
 
diff --git a/app/views/receive.js b/app/views/receive.js
index 666f2a8..866c91b 100644
--- a/app/views/receive.js
+++ b/app/views/receive.js
@@ -69,7 +69,7 @@ type Props = {
 
 type State = {
   showAdditionalOptions: boolean,
-}
+};
 
 export class ReceiveView extends PureComponent<Props, State> {
   state = {
@@ -91,36 +91,26 @@ export class ReceiveView extends PureComponent<Props, State> {
     const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
 
     return (
-      <Fragment>
+      <Fragment key={address}>
         <Label value='Shielded Address' />
-        <Row
-          alignItems='center'
-          justifyContent='space-between'
-        >
+        <Row alignItems='center' justifyContent='space-between'>
           <WalletAddress address={address} />
         </Row>
         <Row>
-          <ShowMoreButton
-            onClick={this.toggleAdditionalOptions}
-            isActive={showAdditionalOptions}
-          >
-            <ShowMoreIcon
-              isActive={showAdditionalOptions}
-              src={MenuIcon}
-              alt='More Options'
-            />
+          <ShowMoreButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
+            <ShowMoreIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
             <TextComponent value={buttonText} />
           </ShowMoreButton>
         </Row>
       </Fragment>
     );
-  }
+  };
 
   renderTransparentAddresses = (address: string) => {
     const { showAdditionalOptions } = this.state;
 
     return (
-      <RevealsMain>
+      <RevealsMain key={address}>
         <Transition
           native
           items={showAdditionalOptions}
@@ -133,22 +123,20 @@ export class ReceiveView extends PureComponent<Props, State> {
             opacity: 0,
           }}
         >
-          {show => show && (props => (
-            <animated.div style={props}>
-              <Label value='Transparent Address (not private)' />
-              <Row
-                key={address}
-                alignItems='center'
-                justifyContent='space-between'
-              >
-                <WalletAddress address={address} />
-              </Row>
-            </animated.div>
-          ))}
+          {show => show
+            && (props => (
+              <animated.div style={props}>
+                <Label value='Transparent Address (not private)' />
+                <Row key={address} alignItems='center' justifyContent='space-between'>
+                  <WalletAddress address={address} />
+                </Row>
+              </animated.div>
+            ))
+          }
         </Transition>
       </RevealsMain>
     );
-  }
+  };
 
   render() {
     const { addresses } = this.props;
diff --git a/app/views/transactions.js b/app/views/transactions.js
index 5aefe74..7706318 100644
--- a/app/views/transactions.js
+++ b/app/views/transactions.js
@@ -37,6 +37,7 @@ export class TransactionsView extends PureComponent<Props> {
               transactionsDate={day}
               transactions={list}
               zecPrice={zecPrice}
+              key={day}
             />
           ))
         )}