From 1519f89318bd47ea28e9ca0e7b8b168899204f22 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 28 Aug 2018 22:47:46 +0200
Subject: [PATCH] Created different functions which load tags always or only
 once

---
 src/tags/TagsList.js          | 10 +++++-----
 src/tags/reducers/tagsList.js | 12 ++++++++++--
 src/utils/TagsSelector.js     | 16 ++++++----------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index b1f0a213..b23accb3 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -4,7 +4,7 @@ import { pick, splitEvery } from 'ramda';
 import PropTypes from 'prop-types';
 import MuttedMessage from '../utils/MuttedMessage';
 import SearchField from '../utils/SearchField';
-import { filterTags, listTags } from './reducers/tagsList';
+import { filterTags, forceListTags } from './reducers/tagsList';
 import TagCard from './TagCard';
 
 const { ceil } = Math;
@@ -13,7 +13,7 @@ const TAGS_GROUP_SIZE = 4;
 export class TagsListComponent extends React.Component {
   static propTypes = {
     filterTags: PropTypes.func,
-    listTags: PropTypes.func,
+    forceListTags: PropTypes.func,
     tagsList: PropTypes.shape({
       loading: PropTypes.bool,
     }),
@@ -21,9 +21,9 @@ export class TagsListComponent extends React.Component {
   };
 
   componentDidMount() {
-    const { listTags } = this.props;
+    const { forceListTags } = this.props;
 
-    listTags();
+    forceListTags(true);
   }
 
   renderContent() {
@@ -86,6 +86,6 @@ export class TagsListComponent extends React.Component {
   }
 }
 
-const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
+const TagsList = connect(pick([ 'tagsList' ]), { forceListTags, filterTags })(TagsListComponent);
 
 export default TagsList;
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index c9309914..5cd229a0 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -1,4 +1,4 @@
-import { reject } from 'ramda';
+import { isEmpty, reject } from 'ramda';
 import shlinkApiClient from '../../api/ShlinkApiClient';
 import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';
@@ -68,7 +68,13 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _listTags = (shlinkApiClient) => async (dispatch) => {
+export const _listTags = (shlinkApiClient, force = false) => async (dispatch, getState) => {
+  const { tagsList } = getState();
+
+  if (!force && (tagsList.loading || !isEmpty(tagsList.tags))) {
+    return;
+  }
+
   dispatch({ type: LIST_TAGS_START });
 
   try {
@@ -82,6 +88,8 @@ export const _listTags = (shlinkApiClient) => async (dispatch) => {
 
 export const listTags = () => _listTags(shlinkApiClient);
 
+export const forceListTags = () => _listTags(shlinkApiClient, true);
+
 export const filterTags = (searchTerm) => ({
   type: FILTER_TAGS,
   searchTerm,
diff --git a/src/utils/TagsSelector.js b/src/utils/TagsSelector.js
index 35b82a37..0630912d 100644
--- a/src/utils/TagsSelector.js
+++ b/src/utils/TagsSelector.js
@@ -15,16 +15,12 @@ const propTypes = {
 };
 
 export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
-  const renderTag = (props) => {
-    const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
-
-    return (
-      <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
-        {getTagDisplayValue(tag)}
-        {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
-      </span>
-    );
-  };
+  const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
+    <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
+      {getTagDisplayValue(tag)}
+      {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
+    </span>
+  );
 
   return (
     <TagsInput