refactor(sort order): name sort options the same way as the field names

Author: VChet

api/styles.js

@@ -10,9 +10,9 @@ function getStyles(req, res) {
   if (owner) filter = { owner };
 
   let sortOrder = "-_id";
-  if (sort === "stars") {
+  if (sort === "stargazers") {
     sortOrder = "-stargazers";
-  } else if (sort === "update") {
+  } else if (sort === "lastUpdate") {
     sortOrder = "-lastUpdate";
   }
 

src/src/store/modules/styleGrid/actions.js

@@ -11,6 +11,7 @@ export default {
 
     const params = {};
     params.page = state.pagination.page;
+    params.sort = state.sortOrder;
 
     let url = '/api/styles/';
     if (state.searchQuery) {
@@ -22,15 +23,6 @@ export default {
       window.history.replaceState({}, `Styles by ${state.ownerFilter} | StyleBase`, `/${state.ownerFilter}`);
     }
 
-    switch (state.selectedSort) {
-      case 1:
-        params.sort = 'update';
-        break;
-      case 2:
-        params.sort = 'stars';
-        break;
-    }
-
     await axios
       .get(url, { params })
       .then((response) => {
@@ -64,8 +56,8 @@ export default {
     commit('SET_PAGE', page);
     dispatch('getStyles');
   },
-  setSorting({ commit, dispatch }, sortOption) {
-    commit('SET_SORTING', sortOption);
+  setSortOrder({ commit, dispatch }, sortOption) {
+    commit('SET_SORT_ORDER', sortOption);
     commit('SET_PAGE', 1);
     dispatch('getStyles');
   },
@@ -86,7 +78,7 @@ export default {
   resetFilters({ commit, dispatch }) {
     window.history.replaceState({}, document.title, '/');
     commit('SET_SEARCH_QUERY', '');
-    commit('SET_SORTING', 0);
+    commit('SET_SORT_ORDER', 0);
     commit('SET_OWNER_FILTER', '');
     commit('SET_PAGE', 1);
     dispatch('getStyles');

src/src/store/modules/styleGrid/mutations.js

@@ -20,8 +20,8 @@ export default {
   SET_OWNER_FILTER(state, filter) {
     state.ownerFilter = filter;
   },
-  SET_SORTING(state, sorting) {
-    state.selectedSort = sorting;
+  SET_SORT_ORDER(state, orderId) {
+    state.sortOrder = orderId;
   },
   SET_MODAL_VISIBILITY(state, value) {
     state.showStyleInfoModal = value;

src/src/store/modules/styleGrid/state.js

@@ -9,8 +9,21 @@ export default {
   searchQuery: '',
   ownerFilter: '',
 
-  sortOptions: ['Recently added', 'Recently updated', 'Most liked'],
-  selectedSort: 0,
+  sortOptions: [
+    {
+      id: '_id',
+      text: 'Recently added'
+    },
+    {
+      id: 'lastUpdate',
+      text: 'Recently updated'
+    },
+    {
+      id: 'stargazers',
+      text: 'Most liked'
+    }
+  ],
+  sortOrder: '_id',
 
   selectedStyle: {},
   showStyleInfoModal: false

src/src/views/Home.vue

@@ -35,11 +35,11 @@
               <button
                 class="link"
                 type="button"
-                :class="{ active: state.selectedSort === index }"
+                :class="{ active: state.sortOrder === option.id }"
                 :disabled="state.isLoading"
-                @click="setSorting(index)"
+                @click="setSortOrder(option.id)"
               >
-                {{ option }}
+                {{ option.text }}
               </button>
             </li>
           </ul>
@@ -118,7 +118,7 @@ export default {
       getStyle: 'styleGrid/getStyle',
       selectStyle: 'styleGrid/selectStyle',
       setPage: 'styleGrid/setPage',
-      setSorting: 'styleGrid/setSorting',
+      setSortOrder: 'styleGrid/setSortOrder',
       setQuery: 'styleGrid/setQuery',
       setOwnerFilter: 'styleGrid/setOwnerFilter',
       resetFilters: 'styleGrid/resetFilters'