Connected creation form with redux, and created reducer for short URL creation

src/short-urls/CreateShortUrl.js

@@ -2,15 +2,18 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { assoc, replace } from 'ramda';
+import { assoc, replace, pick } from 'ramda';
 import React from 'react';
 import DatePicker from 'react-datepicker';
 import ReactTags from 'react-tag-autocomplete';
 import { Collapse } from 'reactstrap';
 import '../../node_modules/react-datepicker/dist/react-datepicker.css';
 import './CreateShortUrl.scss';
+import CreateShortUrlResult from './helpers/CreateShortUrlResult';
+import { createShortUrl } from './reducers/shortUrlCreationResult';
+import { connect } from 'react-redux';
 
-export default class CreateShortUrl extends React.Component {
+export class CreateShortUrl extends React.Component {
   state = {
     longUrl: '',
     tags: [],
@@ -49,10 +52,13 @@ export default class CreateShortUrl extends React.Component {
         readOnly
         {...props}
       />;
+    const save = e => {
+      e.preventDefault();
+    };
 
     return (
       <div className="short-urls-container">
-        <form onSubmit={e => e.preventDefault()}>
+        <form onSubmit={save}>
           <div className="form-group">
             <input
               className="form-control form-control-lg"
@@ -109,8 +115,12 @@ export default class CreateShortUrl extends React.Component {
             </button>
             <button className="btn btn-outline-primary create-short-url__btn float-right">Create</button>
           </div>
+
+          <CreateShortUrlResult creationResult={this.props.shortUrlCreationResult} />
         </form>
       </div>
     );
   }
 }
+
+export default connect(pick(['shortUrlCreationResult']), { createShortUrl })(CreateShortUrl);

src/short-urls/Paginator.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import { connect } from 'react-redux';
 
-export class Paginator extends React.Component {
+export default class Paginator extends React.Component {
   render() {
     const { paginator = {}, serverId } = this.props;
     const { currentPage, pagesCount = 0 } = paginator;
@@ -51,5 +50,3 @@ export class Paginator extends React.Component {
     );
   }
 }
-
-export default connect()(Paginator);

src/short-urls/SearchBar.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { updateShortUrlsList } from './reducers/shortUrlsList';
 import './SearchBar.scss';
+import { pick } from 'ramda';
 
 export class SearchBar extends React.Component {
   state = {
@@ -52,6 +53,4 @@ export class SearchBar extends React.Component {
   }
 }
 
-export default connect(state => (
-  { shortUrlsListParams: state.shortUrlsListParams }
-), { updateShortUrlsList })(SearchBar);
+export default connect(pick(['shortUrlsListParams']), { updateShortUrlsList })(SearchBar);

src/short-urls/ShortUrlsList.js

@@ -8,6 +8,7 @@ import Tag from '../utils/Tag';
 import { ShortUrlsRow } from './helpers/ShortUrlsRow';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
+import { pick } from 'ramda';
 
 export class ShortUrlsList extends React.Component {
   refreshList = extraParams => {
@@ -122,7 +123,4 @@ export class ShortUrlsList extends React.Component {
   }
 }
 
-export default connect(state => ({
-  selectedServer: state.selectedServer,
-  shortUrlsListParams: state.shortUrlsListParams,
-}), { listShortUrls })(ShortUrlsList);
+export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);

src/short-urls/helpers/CreateShortUrlResult.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { isNil } from 'ramda';
+
+export default function CreateShortUrlResult ({ creationResult }) {
+  if (creationResult.loading) {
+    return <div className="text-center">Loading...</div>
+  }
+
+  if (creationResult.error) {
+    return <div className="text-center color-danger">An error occurred while creating the URL :(</div>
+  }
+
+  if (isNil(creationResult.result)) {
+    return null;
+  }
+
+  return <div className="text-center">Great!</div>;
+};

src/short-urls/reducers/shortUrlCreationResult.js

@@ -0,0 +1,46 @@
+import ShlinkApiClient from '../../api/ShlinkApiClient';
+
+const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
+const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
+const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
+
+const defaultState = {
+  result: null,
+  saving: false,
+  error: false,
+};
+
+export default function reducer(state = defaultState, action) {
+  switch (action.type) {
+    case CREATE_SHORT_URL_START:
+      return {
+        ...state,
+        saving: true,
+      };
+    case CREATE_SHORT_URL_ERROR:
+      return {
+        ...state,
+        saving: false,
+        error: true,
+      };
+    case CREATE_SHORT_URL:
+      return {
+        result: action.result,
+        saving: false,
+        error: true,
+      };
+    default:
+      return state;
+  }
+}
+
+export const createShortUrl = data => async dispatch => {
+  dispatch({ type: CREATE_SHORT_URL_START });
+
+  try {
+    const result = await ShlinkApiClient.createShortUrl(data);
+    dispatch({ type: CREATE_SHORT_URL, result });
+  } catch (e) {
+    dispatch({ type: CREATE_SHORT_URL_ERROR });
+  }
+};

src/short-urls/reducers/shortUrlsList.js

@@ -41,15 +41,13 @@ export const listShortUrls = (serverId, params = {}) => {
   return updateShortUrlsList(params);
 };
 
-export const updateShortUrlsList = (params = {}) => {
-  return async dispatch => {
-    dispatch({ type: LIST_SHORT_URLS_START });
+export const updateShortUrlsList = (params = {}) => async dispatch => {
+  dispatch({ type: LIST_SHORT_URLS_START });
 
-    try {
-      const shortUrls = await ShlinkApiClient.listShortUrls(params);
-      dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
-    } catch (e) {
-      dispatch({ type: LIST_SHORT_URLS_ERROR, params });
-    }
-  };
+  try {
+    const shortUrls = await ShlinkApiClient.listShortUrls(params);
+    dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
+  } catch (e) {
+    dispatch({ type: LIST_SHORT_URLS_ERROR, params });
+  }
 };