Added more behavior to servers list

package.json

@@ -38,6 +38,7 @@
     "postcss-loader": "2.0.8",
     "promise": "8.0.1",
     "raf": "3.4.0",
+    "ramda": "^0.25.0",
     "react": "^16.3.2",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.3.2",

src/reducers/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 
-import serversReducer from './servers';
+import serversReducer from '../servers/reducers/server';
+import selectedServerReducer from '../servers/reducers/selectedServer';
 
 const rootReducer = combineReducers({
-  servers: serversReducer
+  servers: serversReducer,
+  selectedServer: selectedServerReducer,
 });
 
 export default rootReducer;

src/reducers/servers.js

@@ -1,15 +0,0 @@
-const FETCH_SERVERS = 'shlink/FETCH_SERVERS';
-const CREATE_SERVER = 'shlink/FETCH_SERVERS';
-
-export default function serversReducer(state = [{ name: 'bar' }], action) {
-  switch (action.type) {
-    case FETCH_SERVERS:
-      return action.servers;
-    case CREATE_SERVER:
-      return [ ...state, action.server ];
-  }
-
-  return state;
-}
-
-

src/servers/ServersDropdown.js

@@ -1,30 +1,41 @@
 import React from 'react';
-import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import { connect } from 'react-redux';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import { isEmpty } from 'ramda';
+
+import { listServers } from './reducers/server';
+import { loadServer } from './reducers/selectedServer';
 
 export class ServersDropdown extends React.Component {
   renderServers = () => {
-    return this.props.servers.map(server => (
-      <DropdownItem key={server.name} onClick={() => this.selectServer(server)}>
-        {server.name}
-      </DropdownItem>
+    const { servers } = this.props;
+
+    if (isEmpty(servers)) {
+      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>
+    }
+
+    return Object.values(servers).map(({ name, id }) => (
+      <span key={id}>
+        <DropdownItem onClick={() => this.selectServer(id)}>
+          {name}
+        </DropdownItem>
+      </span>
     ));
   };
 
-  selectServer = server => {
-    // TODO
+  selectServer = serverId => {
+    this.props.loadServer(serverId);
   };
 
+  componentDidMount() {
+    this.props.listServers();
+  }
+
   render() {
     return (
       <UncontrolledDropdown nav>
-        <DropdownToggle nav caret>
-          Servers
-        </DropdownToggle>
-
-        <DropdownMenu>
-          {this.renderServers()}
-        </DropdownMenu>
+        <DropdownToggle nav caret>Servers</DropdownToggle>
+        <DropdownMenu>{this.renderServers()}</DropdownMenu>
       </UncontrolledDropdown>
     );
   }
@@ -34,4 +45,4 @@ const mapStateToProps = state => ({
   servers: state.servers
 });
 
-export default connect(mapStateToProps)(ServersDropdown);
+export default connect(mapStateToProps, { listServers, loadServer })(ServersDropdown);

src/servers/reducers/selectedServer.js

@@ -0,0 +1,19 @@
+import ServersService from '../services';
+
+const LOAD_SERVER = 'shlink/LOAD_SERVER';
+
+export default function selectedServerReducer(state = null, action) {
+  switch (action.type) {
+    case LOAD_SERVER:
+      return action.selectedServer;
+  }
+
+  return state;
+}
+
+export const loadServer = serverId => {
+  return {
+    type: LOAD_SERVER,
+    selectedServer: ServersService.findServerById(serverId),
+  };
+};

src/servers/reducers/server.js

@@ -0,0 +1,22 @@
+import ServersService from '../services';
+
+const FETCH_SERVERS = 'shlink/FETCH_SERVERS';
+const CREATE_SERVER = 'shlink/CREATE_SERVER';
+
+export default function serversReducer(state = {}, action) {
+  switch (action.type) {
+    case FETCH_SERVERS:
+      return action.servers;
+    case CREATE_SERVER:
+      return [ ...state, action.server ];
+  }
+
+  return state;
+}
+
+export const listServers = () => {
+  return {
+    type: FETCH_SERVERS,
+    servers: ServersService.listServers(),
+  };
+};

src/servers/services/index.js

@@ -0,0 +1,19 @@
+const PREFIX = 'shlink';
+const buildPath = path => `${PREFIX}.${path}`;
+
+export class ServersService {
+  constructor(storage) {
+    this.storage = storage;
+  }
+
+  listServers = () => {
+    return JSON.parse(this.storage.getItem(buildPath('servers')) || '{}');
+  };
+
+  findServerById = serverId => {
+    const servers = this.listServers();
+    return servers[serverId];
+  }
+}
+
+export default new ServersService(localStorage);