Moved logic to mark selected server to parent component in order to affect all children compo0nents on the same route

This commit is contained in:
Alejandro Celaya 2018-07-24 19:17:01 +02:00
parent 3eaa66435a
commit 78ba7c75ff
6 changed files with 72 additions and 41 deletions

View file

@ -16,7 +16,7 @@ export default class App extends React.Component {
<Switch>
<Route exact path="/server/create" component={CreateServer} />
<Route exact path="/" component={Home} />
<Route component={MenuLayout} />
<Route path="/server/:serverId" component={MenuLayout} />
</Switch>
</div>
</div>

View file

@ -1,14 +1,21 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import { selectServer } from '../servers/reducers/selectedServer';
import CreateShortUrl from '../short-urls/CreateShortUrl';
import ShortUrls from '../short-urls/ShortUrls';
import AsideMenu from './AsideMenu';
export function MenuLayout(props) {
export class MenuLayout extends React.Component {
componentDidMount() {
const { serverId } = this.props.match.params;
this.props.selectServer(serverId);
}
render() {
return (
<div className="row">
<AsideMenu {...props} />
<AsideMenu {...this.props} />
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
<Switch>
<Route
@ -26,8 +33,9 @@ export function MenuLayout(props) {
</div>
);
}
}
export default connect(state => ({
selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams,
}))(MenuLayout);
}), { selectServer })(MenuLayout);

View file

@ -1,10 +1,12 @@
import { LIST_SHORT_URLS } from '../../short-urls/reducers/shortUrlsList';
import ShlinkApiClient from '../../api/ShlinkApiClient';
import ServersService from '../../servers/services';
const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
export default function reducer(state = null, action) {
switch (action.type) {
case LIST_SHORT_URLS:
case SELECT_SERVER:
return action.selectedServer;
case RESET_SELECTED_SERVER:
return null;
@ -14,3 +16,13 @@ export default function reducer(state = null, action) {
}
export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
export const selectServer = serverId => {
const selectedServer = ServersService.findServerById(serverId);
ShlinkApiClient.setConfig(selectedServer);
return {
type: SELECT_SERVER,
selectedServer
}
};

View file

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import Paginator from './Paginator';
import SearchBar from './SearchBar';
import ShortUrlsList from './ShortUrlsList';
import { assoc } from 'ramda';
export function ShortUrls(props) {
const { match: { params } } = props;
@ -18,7 +19,4 @@ export function ShortUrls(props) {
);
}
export default connect(state => ({
shortUrlsList: state.shortUrlsList.shortUrls,
loading: state.shortUrlsList.loading,
}))(ShortUrls);
export default connect(state => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList))(ShortUrls);

View file

@ -102,7 +102,11 @@ export class ShortUrlsList extends React.Component {
}
renderShortUrls() {
const { shortUrlsList, selectedServer, loading } = this.props;
const { shortUrlsList, selectedServer, loading, error } = this.props;
if (error) {
return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>;
}
if (loading) {
return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
}

View file

@ -1,9 +1,10 @@
import ServersService from '../../servers/services';
import ShlinkApiClient from '../../api/ShlinkApiClient';
import ServersService from '../../servers/services';
export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
export const UPDATE_SHORT_URLS_LIST = 'shlink/shortUrlsList/UPDATE_SHORT_URLS_LIST';
export const UPDATE_SHORT_URLS_LIST = LIST_SHORT_URLS;
const initialState = {
shortUrls: [],
@ -13,34 +14,42 @@ const initialState = {
export default function reducer(state = initialState, action) {
switch (action.type) {
case LIST_SHORT_URLS_START:
return { ...state, loading: true };
return { ...state, loading: true, error: false };
case LIST_SHORT_URLS:
case UPDATE_SHORT_URLS_LIST:
return {
loading: false,
error: false,
shortUrls: action.shortUrls
};
case LIST_SHORT_URLS_ERROR:
return {
loading: false,
error: true,
shortUrls: []
};
default:
return state;
}
}
export const listShortUrls = (serverId, params = {}) => {
return async dispatch => {
dispatch({ type: LIST_SHORT_URLS_START });
// FIXME There should be a way to not need this, however, the active server is set when any route is loaded, in an
// FIXME outer component's componentDidMount, which makes it be invoked after this action
const selectedServer = ServersService.findServerById(serverId);
ShlinkApiClient.setConfig(selectedServer);
const shortUrls = await ShlinkApiClient.listShortUrls(params);
dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer, params });
};
return updateShortUrlsList(params);
};
export const updateShortUrlsList = (params = {}) => {
return async dispatch => {
dispatch({ type: LIST_SHORT_URLS_START });
try {
const shortUrls = await ShlinkApiClient.listShortUrls(params);
dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params });
dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
} catch (e) {
dispatch({ type: LIST_SHORT_URLS_ERROR, params });
}
};
};