Added behavior to mark active server in servers dropdown

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 () => {
+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);

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;
+}

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);

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);

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 });

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">