Added more behavior to servers list

This commit is contained in:
Alejandro Celaya 2018-06-14 20:11:41 +02:00
parent 9ac0811200
commit e4356720d7
7 changed files with 91 additions and 32 deletions

View file

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

View file

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

View file

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

View file

@ -1,30 +1,41 @@
import React from 'react'; import React from 'react';
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
import { connect } from 'react-redux'; 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 { export class ServersDropdown extends React.Component {
renderServers = () => { renderServers = () => {
return this.props.servers.map(server => ( const { servers } = this.props;
<DropdownItem key={server.name} onClick={() => this.selectServer(server)}>
{server.name} if (isEmpty(servers)) {
</DropdownItem> 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 => { selectServer = serverId => {
// TODO this.props.loadServer(serverId);
}; };
componentDidMount() {
this.props.listServers();
}
render() { render() {
return ( return (
<UncontrolledDropdown nav> <UncontrolledDropdown nav>
<DropdownToggle nav caret> <DropdownToggle nav caret>Servers</DropdownToggle>
Servers <DropdownMenu>{this.renderServers()}</DropdownMenu>
</DropdownToggle>
<DropdownMenu>
{this.renderServers()}
</DropdownMenu>
</UncontrolledDropdown> </UncontrolledDropdown>
); );
} }
@ -34,4 +45,4 @@ const mapStateToProps = state => ({
servers: state.servers servers: state.servers
}); });
export default connect(mapStateToProps)(ServersDropdown); export default connect(mapStateToProps, { listServers, loadServer })(ServersDropdown);

View file

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

View file

@ -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(),
};
};

View file

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