From e1049a74a2c970a85ffee76c486a30dd09fcfc63 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 18 Jul 2018 20:26:45 +0200
Subject: [PATCH] Added behavior to mark active server in servers dropdown

---
 src/common/Home.js                     | 26 ++++++++++++++++++--------
 src/index.scss                         |  6 ++++++
 src/servers/CreateServer.js            | 10 +++++++++-
 src/servers/ServersDropdown.js         | 11 ++++++++---
 src/servers/reducers/selectedServer.js |  6 ++++++
 src/short-urls/ShortUrlsList.js        |  5 +++--
 6 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/common/Home.js b/src/common/Home.js
index 9a16a084..38e32b21 100644
--- a/src/common/Home.js
+++ b/src/common/Home.js
@@ -1,11 +1,21 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import './Home.scss';
+import { resetSelectedServer } from '../servers/reducers/selectedServer';
 
-export default () => {
-  return (
-    <div className="home-container">
-      <h1 className="home-container__title">Welcome to Shlink</h1>
-      <h5 className="home-container__intro">Please, select a server.</h5>
-    </div>
-  );
-};
+export class Home extends React.Component {
+  componentDidMount() {
+    this.props.resetSelectedServer();
+  }
+
+  render() {
+    return (
+      <div className="home-container">
+        <h1 className="home-container__title">Welcome to Shlink</h1>
+        <h5 className="home-container__intro">Please, select a server.</h5>
+      </div>
+    );
+  }
+}
+
+export default connect(null, { resetSelectedServer })(Home);
diff --git a/src/index.scss b/src/index.scss
index ae72fb45..12d17aa0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,5 @@
+@import "./utils/base";
+
 * {
   outline: none !important;
 }
@@ -5,3 +7,7 @@
 .nowrap {
   white-space: nowrap;
 }
+
+.dropdown-item.active {
+  background-color: $mainColor !important;
+}
diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 5ec67bf7..f9e9296a 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -2,6 +2,7 @@ import { assoc } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
 import { createServer } from './reducers/server';
+import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
 
 import './CreateServer.scss';
@@ -13,6 +14,10 @@ export class CreateServer extends React.Component {
     apiKey: '',
   };
 
+  componentDidMount() {
+    this.props.resetSelectedServer();
+  }
+
   render() {
     const submit = e => {
       e.preventDefault();
@@ -52,4 +57,7 @@ export class CreateServer extends React.Component {
   }
 }
 
-export default connect(state => ({ selectedServer: state.selectedServer }), { createServer })(CreateServer);
+export default connect(state => ({ selectedServer: state.selectedServer }), {
+  createServer,
+  resetSelectedServer
+})(CreateServer);
diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js
index 108e7e0a..823e2ea0 100644
--- a/src/servers/ServersDropdown.js
+++ b/src/servers/ServersDropdown.js
@@ -8,7 +8,7 @@ import { listServers } from './reducers/server';
 
 export class ServersDropdown extends React.Component {
   renderServers = () => {
-    const { servers } = this.props;
+    const { servers, currentServer } = this.props;
 
     if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>
@@ -16,7 +16,11 @@ export class ServersDropdown extends React.Component {
 
     return Object.values(servers).map(({ name, id }) => (
       <span key={id}>
-        <DropdownItem tag={Link} to={`/server/${id}/list-short-urls/1`}>
+        <DropdownItem
+          tag={Link}
+          to={`/server/${id}/list-short-urls/1`}
+          active={currentServer && currentServer.id === id}
+        >
           {name}
         </DropdownItem>
       </span>
@@ -38,7 +42,8 @@ export class ServersDropdown extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  servers: state.servers
+  servers: state.servers,
+  currentServer: state.selectedServer,
 });
 
 export default connect(mapStateToProps, { listServers })(ServersDropdown);
diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index d5f53ae0..cecbb405 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/src/servers/reducers/selectedServer.js
@@ -1,10 +1,16 @@
 import { LIST_SHORT_URLS } from '../../short-urls/reducers/shortUrlsList';
 
+const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
+
 export default function reducer(state = null, action) {
   switch (action.type) {
     case LIST_SHORT_URLS:
       return action.selectedServer;
+    case RESET_SELECTED_SERVER:
+      return null;
     default:
       return state;
   }
 }
+
+export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 128df843..9c25f711 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -71,6 +71,7 @@ class Row extends React.Component {
 
   render() {
     const { shortUrl, selectedServer } = this.props;
+    const selectedServerUrl = selectedServer ? selectedServer.url : '';
 
     return (
       <tr
@@ -81,8 +82,8 @@ class Row extends React.Component {
           <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
         </td>
         <td className="short-urls-list__cell">
-          <a href={`${selectedServer.url}/${shortUrl.shortCode}`} target="_blank">
-            {`${selectedServer.url}/${shortUrl.shortCode}`}
+          <a href={`${selectedServerUrl}/${shortUrl.shortCode}`} target="_blank">
+            {`${selectedServerUrl}/${shortUrl.shortCode}`}
           </a>
         </td>
         <td className="short-urls-list__cell">