From 78ba7c75ff6c606c091d6c5f4caaf201176c472b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 24 Jul 2018 19:17:01 +0200 Subject: [PATCH] Moved logic to mark selected server to parent component in order to affect all children compo0nents on the same route --- src/App.js | 2 +- src/common/MenuLayout.js | 48 ++++++++++++++---------- src/servers/reducers/selectedServer.js | 16 +++++++- src/short-urls/ShortUrls.js | 6 +-- src/short-urls/ShortUrlsList.js | 6 ++- src/short-urls/reducers/shortUrlsList.js | 35 ++++++++++------- 6 files changed, 72 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index 58c5d3b9..7741f913 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ export default class App extends React.Component { - + diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index b2960076..c9488ac9 100644 --- a/src/common/MenuLayout.js +++ b/src/common/MenuLayout.js @@ -1,33 +1,41 @@ 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) { - return ( -
- -
- - - - +export class MenuLayout extends React.Component { + componentDidMount() { + const { serverId } = this.props.match.params; + this.props.selectServer(serverId); + } + + render() { + return ( +
+ +
+ + + + +
-
- ); + ); + } } export default connect(state => ({ selectedServer: state.selectedServer, shortUrlsListParams: state.shortUrlsListParams, -}))(MenuLayout); +}), { selectServer })(MenuLayout); diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js index cecbb405..c30bb639 100644 --- a/src/servers/reducers/selectedServer.js +++ b/src/servers/reducers/selectedServer.js @@ -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 + } +}; diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js index be3e04ed..36f9537d 100644 --- a/src/short-urls/ShortUrls.js +++ b/src/short-urls/ShortUrls.js @@ -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); diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index 9ad93443..035808fc 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -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 Something went wrong while loading short URLs :(; + } + if (loading) { return Loading...; } diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js index c5f4b2fc..883d85e3 100644 --- a/src/short-urls/reducers/shortUrlsList.js +++ b/src/short-urls/reducers/shortUrlsList.js @@ -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 }); - const selectedServer = ServersService.findServerById(serverId); + // 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); - 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 }); - const shortUrls = await ShlinkApiClient.listShortUrls(params); - dispatch({ type: UPDATE_SHORT_URLS_LIST, shortUrls, params }); + try { + const shortUrls = await ShlinkApiClient.listShortUrls(params); + dispatch({ type: LIST_SHORT_URLS, shortUrls, params }); + } catch (e) { + dispatch({ type: LIST_SHORT_URLS_ERROR, params }); + } }; };