diff --git a/package.json b/package.json
index 295fe066..85dd3c04 100644
--- a/package.json
+++ b/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",
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 4f60d893..07a1f366 100644
--- a/src/reducers/index.js
+++ b/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;
diff --git a/src/reducers/servers.js b/src/reducers/servers.js
deleted file mode 100644
index 4e31a869..00000000
--- a/src/reducers/servers.js
+++ /dev/null
@@ -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;
-}
-
-
diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js
index b42f6b5a..dbbdd47a 100644
--- a/src/servers/ServersDropdown.js
+++ b/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 => (
- this.selectServer(server)}>
- {server.name}
-
+ const { servers } = this.props;
+
+ if (isEmpty(servers)) {
+ return Add a server first...
+ }
+
+ return Object.values(servers).map(({ name, id }) => (
+
+ this.selectServer(id)}>
+ {name}
+
+
));
};
- selectServer = server => {
- // TODO
+ selectServer = serverId => {
+ this.props.loadServer(serverId);
};
+ componentDidMount() {
+ this.props.listServers();
+ }
+
render() {
return (
-
- Servers
-
-
-
- {this.renderServers()}
-
+ Servers
+ {this.renderServers()}
);
}
@@ -34,4 +45,4 @@ const mapStateToProps = state => ({
servers: state.servers
});
-export default connect(mapStateToProps)(ServersDropdown);
+export default connect(mapStateToProps, { listServers, loadServer })(ServersDropdown);
diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
new file mode 100644
index 00000000..08c8d53e
--- /dev/null
+++ b/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),
+ };
+};
diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js
new file mode 100644
index 00000000..56f3c573
--- /dev/null
+++ b/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(),
+ };
+};
diff --git a/src/servers/services/index.js b/src/servers/services/index.js
new file mode 100644
index 00000000..bfbae11e
--- /dev/null
+++ b/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);