From e00e040d23ba52a2bfe3528f1dc05358c69dd210 Mon Sep 17 00:00:00 2001
From: Dennis Tang <dtang@gitlab.com>
Date: Thu, 21 Jun 2018 14:24:09 +0000
Subject: simplify view states

---
 .../javascripts/frequent_items/components/app.vue  | 43 ++++----------
 .../components/frequent_items_list.vue             | 39 +++++++++----
 .../components/frequent_items_search_list.vue      | 67 ----------------------
 .../javascripts/frequent_items/store/actions.js    |  6 +-
 .../javascripts/frequent_items/store/getters.js    |  4 ++
 .../javascripts/frequent_items/store/index.js      |  2 +
 .../frequent_items/store/mutation_types.js         |  1 -
 .../javascripts/frequent_items/store/mutations.js  | 45 +++++----------
 .../javascripts/frequent_items/store/state.js      |  8 +--
 9 files changed, 62 insertions(+), 153 deletions(-)
 delete mode 100644 app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue
 create mode 100644 app/assets/javascripts/frequent_items/store/getters.js

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 22ddcdec418..7e620059544 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import eventHub from '../event_hub';
 import store from '../store/';
@@ -7,7 +7,6 @@ import { STORAGE_KEY } from '../constants';
 import { isMobile } from '../utils';
 import FrequentItemsSearchInput from './frequent_items_search_input.vue';
 import FrequentItemsList from './frequent_items_list.vue';
-import FrequentItemsSearchList from './frequent_items_search_list.vue';
 import frequentItemsMixin from './frequent_items_mixin';
 
 export default {
@@ -16,7 +15,6 @@ export default {
     LoadingIcon,
     FrequentItemsSearchInput,
     FrequentItemsList,
-    FrequentItemsSearchList,
   },
   mixins: [frequentItemsMixin],
   props: {
@@ -30,16 +28,8 @@ export default {
     },
   },
   computed: {
-    ...mapState([
-      'searchQuery',
-      'isLoadingItems',
-      'isItemsListVisible',
-      'isSearchListVisible',
-      'isLocalStorageFailed',
-      'isSearchFailed',
-      'frequentItems',
-      'searchedItems',
-    ]),
+    ...mapState(['searchQuery', 'isLoadingItems', 'isFetchFailed', 'items']),
+    ...mapGetters(['isSearch']),
     translations() {
       return this.getTranslations(['loadingMessage', 'header']);
     },
@@ -60,17 +50,9 @@ export default {
     eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler);
   },
   methods: {
-    ...mapActions([
-      'logItemAccess',
-      'setNamespace',
-      'setStorageKey',
-      'fetchFrequentItems',
-      'toggleVisibility',
-    ]),
+    ...mapActions(['logItemAccess', 'setNamespace', 'setStorageKey', 'fetchFrequentItems']),
     dropdownOpenHandler() {
-      if (this.searchQuery && !isMobile()) {
-        this.toggleVisibility('isSearchListVisible');
-      } else {
+      if (this.searchQuery === '' || isMobile()) {
         this.fetchFrequentItems();
       }
     },
@@ -91,22 +73,17 @@ export default {
     />
     <div
       class="section-header"
-      v-if="isItemsListVisible"
+      v-if="!isLoadingItems && !isSearch"
     >
       {{ translations.header }}
     </div>
     <frequent-items-list
-      v-if="isItemsListVisible"
-      :local-storage-failed="isLocalStorageFailed"
-      :items="frequentItems"
+      v-if="!isLoadingItems"
+      :items="items"
       :namespace="namespace"
-    />
-    <frequent-items-search-list
-      v-if="isSearchListVisible"
-      :search-failed="isSearchFailed"
+      :is-search="isSearch"
+      :is-fetch-failed="isFetchFailed"
       :matcher="searchQuery"
-      :items="searchedItems"
-      :namespace="namespace"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
index 9f764c76342..3b85e6b95db 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
@@ -12,37 +12,53 @@ export default {
       type: Array,
       required: true,
     },
-    localStorageFailed: {
+    isSearch: {
       type: Boolean,
       required: true,
     },
+    isFetchFailed: {
+      type: Boolean,
+      required: true,
+    },
+    matcher: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     translations() {
-      return this.getTranslations(['itemListErrorMessage', 'itemListEmptyMessage']);
+      return this.getTranslations([
+        'itemListEmptyMessage',
+        'itemListErrorMessage',
+        'searchListEmptyMessage',
+        'searchListErrorMessage',
+      ]);
     },
     isListEmpty() {
       return this.items.length === 0;
     },
     listEmptyMessage() {
-      return this.localStorageFailed
-        ? this.translations.itemListErrorMessage
-        : this.translations.itemListEmptyMessage;
+      if (this.isSearch) {
+        return this.isFetchFailed
+          ? this.translations.searchListErrorMessage
+          : this.translations.searchListEmptyMessage;
+      } else {
+        return this.isFetchFailed
+          ? this.translations.itemListErrorMessage
+          : this.translations.itemListEmptyMessage;
+      }
     },
   },
 };
 </script>
 
 <template>
-  <div
-    class="frequent-items-list-container"
-  >
-    <ul
-      class="list-unstyled"
-    >
+  <div class="frequent-items-list-container">
+    <ul class="list-unstyled">
       <li
         class="section-empty"
         v-if="isListEmpty"
+        :class="{ 'section-failure': isFetchFailed }"
       >
         {{ listEmptyMessage }}
       </li>
@@ -55,6 +71,7 @@ export default {
         :namespace="item.namespace"
         :web-url="item.webUrl"
         :avatar-url="item.avatarUrl"
+        :matcher="matcher"
       />
     </ul>
   </div>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue
deleted file mode 100644
index 51b381e212b..00000000000
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-import FrequentItemsListItem from './frequent_items_list_item.vue';
-import frequentItemsMixin from './frequent_items_mixin';
-
-export default {
-  components: {
-    FrequentItemsListItem,
-  },
-  mixins: [frequentItemsMixin],
-  props: {
-    matcher: {
-      type: String,
-      required: true,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    searchFailed: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    translations() {
-      return this.getTranslations(['searchListErrorMessage', 'searchListEmptyMessage']);
-    },
-    isListEmpty() {
-      return this.items.length === 0;
-    },
-    listEmptyMessage() {
-      return this.searchFailed
-        ? this.translations.searchListErrorMessage
-        : this.translations.searchListEmptyMessage;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="frequent-items-search-container"
-  >
-    <ul
-      class="list-unstyled"
-    >
-      <li
-        v-if="isListEmpty"
-        :class="{ 'section-failure': searchFailed }"
-        class="section-empty"
-      >
-        {{ listEmptyMessage }}
-      </li>
-      <frequent-items-list-item
-        v-else
-        v-for="(item, index) in items"
-        :key="index"
-        :item-id="item.id"
-        :item-name="item.name"
-        :namespace="item.namespace"
-        :web-url="item.webUrl"
-        :avatar-url="item.avatarUrl"
-        :matcher="matcher"
-      />
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js
index ea7e71939ee..b483f181a02 100644
--- a/app/assets/javascripts/frequent_items/store/actions.js
+++ b/app/assets/javascripts/frequent_items/store/actions.js
@@ -11,10 +11,6 @@ export const setStorageKey = ({ commit }, key) => {
   commit(types.SET_STORAGE_KEY, key);
 };
 
-export const toggleVisibility = ({ commit }, viewToDisplay) => {
-  commit(types.TOGGLE_VISIBILITY, viewToDisplay);
-};
-
 export const requestFrequentItems = ({ commit }) => {
   commit(types.REQUEST_FREQUENT_ITEMS);
 };
@@ -76,6 +72,8 @@ export const setSearchQuery = ({ commit, dispatch }, query) => {
 
   if (query) {
     dispatch('fetchSearchedItems', query);
+  } else {
+    dispatch('fetchFrequentItems', query);
   }
 };
 
diff --git a/app/assets/javascripts/frequent_items/store/getters.js b/app/assets/javascripts/frequent_items/store/getters.js
new file mode 100644
index 00000000000..b3f35c08138
--- /dev/null
+++ b/app/assets/javascripts/frequent_items/store/getters.js
@@ -0,0 +1,4 @@
+export const isSearch = state => state.searchQuery !== '';
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/frequent_items/store/index.js b/app/assets/javascripts/frequent_items/store/index.js
index 3b66386dacf..2bebffc19ab 100644
--- a/app/assets/javascripts/frequent_items/store/index.js
+++ b/app/assets/javascripts/frequent_items/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 import createState from './state';
 
@@ -9,6 +10,7 @@ Vue.use(Vuex);
 export default () =>
   new Vuex.Store({
     actions,
+    getters,
     mutations,
     state: createState(),
   });
diff --git a/app/assets/javascripts/frequent_items/store/mutation_types.js b/app/assets/javascripts/frequent_items/store/mutation_types.js
index e89a111562a..cbe2c9401ad 100644
--- a/app/assets/javascripts/frequent_items/store/mutation_types.js
+++ b/app/assets/javascripts/frequent_items/store/mutation_types.js
@@ -1,7 +1,6 @@
 export const SET_NAMESPACE = 'SET_NAMESPACE';
 export const SET_STORAGE_KEY = 'SET_STORAGE_KEY';
 export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
-export const TOGGLE_VISIBILITY = 'TOGGLE_VISIBILITY';
 export const REQUEST_FREQUENT_ITEMS = 'REQUEST_FREQUENT_ITEMS';
 export const RECEIVE_FREQUENT_ITEMS_SUCCESS = 'RECEIVE_FREQUENT_ITEMS_SUCCESS';
 export const RECEIVE_FREQUENT_ITEMS_ERROR = 'RECEIVE_FREQUENT_ITEMS_ERROR';
diff --git a/app/assets/javascripts/frequent_items/store/mutations.js b/app/assets/javascripts/frequent_items/store/mutations.js
index 4bce4bcaa62..feadd26d9fb 100644
--- a/app/assets/javascripts/frequent_items/store/mutations.js
+++ b/app/assets/javascripts/frequent_items/store/mutations.js
@@ -11,61 +11,45 @@ export default {
       storageKey,
     });
   },
-  [types.TOGGLE_VISIBILITY](state, viewToDisplay) {
-    const newViewStates = {};
-    const views = ['isLoadingItems', 'isItemsListVisible', 'isSearchListVisible'];
-
-    views.forEach(view => {
-      newViewStates[view] = view === viewToDisplay;
-    });
-
-    Object.assign(state, {
-      ...newViewStates,
-    });
-  },
   [types.SET_SEARCH_QUERY](state, searchQuery) {
     const hasSearchQuery = searchQuery !== '';
 
     Object.assign(state, {
       searchQuery,
-      isLoadingItems: hasSearchQuery,
-      isItemsListVisible: !hasSearchQuery,
-      isSearchListVisible: false,
+      isLoadingItems: true,
+      isSearch: hasSearchQuery,
     });
   },
   [types.REQUEST_FREQUENT_ITEMS](state) {
     Object.assign(state, {
       isLoadingItems: true,
-      isItemsListVisible: false,
-      isSearchListVisible: false,
+      isSearch: false,
     });
   },
   [types.RECEIVE_FREQUENT_ITEMS_SUCCESS](state, rawItems) {
     Object.assign(state, {
-      frequentItems: rawItems,
+      items: rawItems,
       isLoadingItems: false,
-      isItemsListVisible: true,
-      isSearchListVisible: false,
+      isSearch: false,
+      isFetchFailed: false,
     });
   },
   [types.RECEIVE_FREQUENT_ITEMS_ERROR](state) {
     Object.assign(state, {
-      isLocalStorageFailed: true,
       isLoadingItems: false,
-      isItemsListVisible: true,
-      isSearchListVisible: false,
+      isSearch: false,
+      isFetchFailed: true,
     });
   },
   [types.REQUEST_SEARCHED_ITEMS](state) {
     Object.assign(state, {
       isLoadingItems: true,
-      isItemsListVisible: false,
-      isSearchListVisible: false,
+      isSearch: true,
     });
   },
   [types.RECEIVE_SEARCHED_ITEMS_SUCCESS](state, rawItems) {
     Object.assign(state, {
-      searchedItems: rawItems.map(rawItem => ({
+      items: rawItems.map(rawItem => ({
         id: rawItem.id,
         name: rawItem.name,
         namespace: rawItem.name_with_namespace || rawItem.full_name,
@@ -73,16 +57,15 @@ export default {
         avatarUrl: rawItem.avatar_url,
       })),
       isLoadingItems: false,
-      isItemsListVisible: false,
-      isSearchListVisible: true,
+      isSearch: true,
+      isFetchFailed: false,
     });
   },
   [types.RECEIVE_SEARCHED_ITEMS_ERROR](state) {
     Object.assign(state, {
-      isSearchFailed: true,
       isLoadingItems: false,
-      isItemsListVisible: false,
-      isSearchListVisible: true,
+      isSearch: true,
+      isFetchFailed: true,
     });
   },
 };
diff --git a/app/assets/javascripts/frequent_items/store/state.js b/app/assets/javascripts/frequent_items/store/state.js
index c78a6008e2a..75b04febee4 100644
--- a/app/assets/javascripts/frequent_items/store/state.js
+++ b/app/assets/javascripts/frequent_items/store/state.js
@@ -2,11 +2,7 @@ export default () => ({
   namespace: '',
   storageKey: '',
   searchQuery: '',
-  isLocalStorageFailed: false,
-  isSearchFailed: false,
   isLoadingItems: false,
-  isItemsListVisible: true,
-  isSearchListVisible: false,
-  frequentItems: [],
-  searchedItems: [],
+  isFetchFailed: false,
+  items: [],
 });
-- 
cgit v1.2.1