Split short URL visits reducer into two individual reducers

src/reducers/index.js

@@ -4,8 +4,9 @@ import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
 import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListParams';
 import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreationResult';
-import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
 import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
+import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
+import shortUrlDetailReducer from '../visits/reducers/shortUrlDetail';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
@@ -16,8 +17,9 @@ export default combineReducers({
   shortUrlsList: shortUrlsListReducer,
   shortUrlsListParams: shortUrlsListParamsReducer,
   shortUrlCreationResult: shortUrlCreationResultReducer,
-  shortUrlVisits: shortUrlVisitsReducer,
   shortUrlTags: shortUrlTagsReducer,
+  shortUrlVisits: shortUrlVisitsReducer,
+  shortUrlDetail: shortUrlDetailReducer,
   tagsList: tagsListReducer,
   tagDelete: tagDeleteReducer,
   tagEdit: tagEditReducer,

src/visits/ShortUrlVisits.js

@@ -15,9 +15,10 @@ import {
   processOsStats,
   processReferrersStats,
 } from './services/VisitsParser';
-import './ShortUrlVisits.scss';
 import { VisitsHeader } from './VisitsHeader';
 import { GraphCard } from './GraphCard';
+import { getShortUrlDetail, shortUrlDetailType } from './reducers/shortUrlDetail';
+import './ShortUrlVisits.scss';
 
 export class ShortUrlsVisitsComponent extends React.Component {
   static propTypes = {
@@ -26,9 +27,11 @@ export class ShortUrlsVisitsComponent extends React.Component {
     processCountriesStats: PropTypes.func,
     processReferrersStats: PropTypes.func,
     match: PropTypes.object,
-    getShortUrlVisits: PropTypes.func,
     selectedServer: serverType,
+    getShortUrlVisits: PropTypes.func,
     shortUrlVisits: shortUrlVisitsType,
+    getShortUrlDetail: PropTypes.func,
+    shortUrlDetail: shortUrlDetailType,
   };
   static defaultProps = {
     processOsStats,
@@ -48,7 +51,10 @@ export class ShortUrlsVisitsComponent extends React.Component {
   };
 
   componentDidMount() {
+    const { match: { params }, getShortUrlDetail } = this.props;
+
     this.loadVisits();
+    getShortUrlDetail(params.shortCode);
   }
 
   render() {
@@ -60,12 +66,14 @@ export class ShortUrlsVisitsComponent extends React.Component {
       processCountriesStats,
       processReferrersStats,
       shortUrlVisits,
+      shortUrlDetail,
     } = this.props;
-    const { visits, loading, error } = shortUrlVisits;
     const serverUrl = selectedServer ? selectedServer.url : '';
     const shortLink = `${serverUrl}/${params.shortCode}`;
 
-    const renderContent = () => {
+    const renderVisitsContent = () => {
+      const { visits, loading, error } = shortUrlVisits;
+
       if (loading) {
         return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
       }
@@ -79,7 +87,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
       }
 
       if (isEmpty(visits)) {
-        return <MutedMessage>There have been no visits matching current filter  :(</MutedMessage>;
+        return <MutedMessage>There are no visits matching current filter  :(</MutedMessage>;
       }
 
       return (
@@ -102,7 +110,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
 
     return (
       <div className="shlink-container">
-        <VisitsHeader shortUrlVisits={shortUrlVisits} shortLink={shortLink} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortLink={shortLink} />
 
         <section className="mt-4">
           <div className="row">
@@ -127,7 +135,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
         </section>
 
         <section>
-          {renderContent()}
+          {renderVisitsContent()}
         </section>
       </div>
     );
@@ -135,8 +143,8 @@ export class ShortUrlsVisitsComponent extends React.Component {
 }
 
 const ShortUrlsVisits = connect(
-  pick([ 'selectedServer', 'shortUrlVisits' ]),
-  { getShortUrlVisits }
+  pick([ 'selectedServer', 'shortUrlVisits', 'shortUrlDetail' ]),
+  { getShortUrlVisits, getShortUrlDetail }
 )(ShortUrlsVisitsComponent);
 
 export default ShortUrlsVisits;

src/visits/VisitsHeader.js

@@ -3,16 +3,16 @@ import Moment from 'react-moment';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExternalLink from '../utils/ExternalLink';
-import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import './VisitsHeader.scss';
+import { shortUrlDetailType } from './reducers/shortUrlDetail';
 
 const propTypes = {
-  shortUrlVisits: shortUrlVisitsType,
+  shortUrlDetail: shortUrlDetailType,
   shortLink: PropTypes.string,
 };
 
-export function VisitsHeader({ shortUrlVisits, shortLink }) {
-  const { shortUrl, loading } = shortUrlVisits;
+export function VisitsHeader({ shortUrlDetail, shortLink }) {
+  const { shortUrl, loading } = shortUrlDetail;
   const renderDate = () => (
     <span>
       <b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>

src/visits/reducers/shortUrlDetail.js

@@ -0,0 +1,60 @@
+import { curry } from 'ramda';
+import PropTypes from 'prop-types';
+import shlinkApiClient from '../../api/ShlinkApiClient';
+import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
+
+/* eslint-disable padding-line-between-statements, newline-after-var */
+const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
+const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
+const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
+/* eslint-enable padding-line-between-statements, newline-after-var */
+
+export const shortUrlDetailType = PropTypes.shape({
+  shortUrl: shortUrlType,
+  loading: PropTypes.bool,
+  error: PropTypes.bool,
+});
+
+const initialState = {
+  shortUrl: {},
+  loading: false,
+  error: false,
+};
+
+export default function reducer(state = initialState, action) {
+  switch (action.type) {
+    case GET_SHORT_URL_DETAIL_START:
+      return {
+        ...state,
+        loading: true,
+      };
+    case GET_SHORT_URL_DETAIL_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: true,
+      };
+    case GET_SHORT_URL_DETAIL:
+      return {
+        shortUrl: action.shortUrl,
+        loading: false,
+        error: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export const _getShortUrlDetail = (shlinkApiClient, shortCode) => async (dispatch) => {
+  dispatch({ type: GET_SHORT_URL_DETAIL_START });
+
+  try {
+    const shortUrl = await shlinkApiClient.getShortUrl(shortCode);
+
+    dispatch({ shortUrl, type: GET_SHORT_URL_DETAIL });
+  } catch (e) {
+    dispatch({ type: GET_SHORT_URL_DETAIL_ERROR });
+  }
+};
+
+export const getShortUrlDetail = curry(_getShortUrlDetail)(shlinkApiClient);

src/visits/reducers/shortUrlVisits.js

@@ -1,7 +1,6 @@
 import { curry } from 'ramda';
 import PropTypes from 'prop-types';
 import shlinkApiClient from '../../api/ShlinkApiClient';
-import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
 
 /* eslint-disable padding-line-between-statements, newline-after-var */
 const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
@@ -10,7 +9,6 @@ const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
 /* eslint-enable padding-line-between-statements, newline-after-var */
 
 export const shortUrlVisitsType = PropTypes.shape({
-  shortUrl: shortUrlType,
   visits: PropTypes.array,
   loading: PropTypes.bool,
   error: PropTypes.bool,
@@ -23,7 +21,7 @@ const initialState = {
   error: false,
 };
 
-export default function dispatch(state = initialState, action) {
+export default function reducer(state = initialState, action) {
   switch (action.type) {
     case GET_SHORT_URL_VISITS_START:
       return {
@@ -38,7 +36,6 @@ export default function dispatch(state = initialState, action) {
       };
     case GET_SHORT_URL_VISITS:
       return {
-        shortUrl: action.shortUrl,
         visits: action.visits,
         loading: false,
         error: false,
@@ -48,15 +45,16 @@ export default function dispatch(state = initialState, action) {
   }
 }
 
-export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => (dispatch) => {
+export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => async (dispatch) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
-  Promise.all([
-    shlinkApiClient.getShortUrlVisits(shortCode, dates),
-    shlinkApiClient.getShortUrl(shortCode),
-  ])
-    .then(([ visits, shortUrl ]) => dispatch({ visits, shortUrl, type: GET_SHORT_URL_VISITS }))
-    .catch(() => dispatch({ type: GET_SHORT_URL_VISITS_ERROR }));
+  try {
+    const visits = await shlinkApiClient.getShortUrlVisits(shortCode, dates);
+
+    dispatch({ visits, type: GET_SHORT_URL_VISITS });
+  } catch (e) {
+    dispatch({ type: GET_SHORT_URL_VISITS_ERROR });
+  }
 };
 
 export const getShortUrlVisits = curry(_getShortUrlVisits)(shlinkApiClient);