Fix likes feature in Search Page

NEWS.md

@@ -14,6 +14,7 @@ Development
 - Fix dataset search with dependent visualizations ([CartoDB/product#267](https://github.com/CartoDB/product/issues/267)))
 - Fix Lockout page ([product#261](https://github.com/CartoDB/product/issues/261))
 - Use .toLocaleDateString() to format date in notification page ([#14707](https://github.com/CartoDB/cartodb/pull/14707))
+- Fix likes feature in Search Page ([#14709](https://github.com/CartoDB/cartodb/pull/14709))
 
 4.25.2 (2019-02-25)
 -------------------

lib/assets/javascripts/new-dashboard/components/Dataset/DatasetCard.vue

@@ -93,7 +93,6 @@
 import DatasetQuickActions from 'new-dashboard/components/QuickActions/DatasetQuickActions';
 import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
 import * as Visualization from 'new-dashboard/core/models/visualization';
-import { mapActions } from 'vuex';
 import FeaturesDropdown from '../Dropdowns/FeaturesDropdown';
 import countCharsArray from 'new-dashboard/utils/count-chars-array';
 
@@ -116,6 +115,10 @@ export default {
     selectMode: {
       type: Boolean,
       default: false
+    },
+    storeActionType: {
+      type: String,
+      default: 'datasets'
     }
   },
   data: function () {
@@ -216,10 +219,6 @@ export default {
     closeQuickActions () {
       this.areQuickActionsOpen = false;
     },
-    ...mapActions({
-      likeDataset: 'datasets/like',
-      deleteLikeDataset: 'datasets/deleteLike'
-    }),
     onClick (event) {
       if (this.$props.selectMode) {
         event.preventDefault();
@@ -228,6 +227,12 @@ export default {
     },
     onContentChanged (type) {
       this.$emit('contentChanged', type);
+    },
+    likeDataset (dataset) {
+      this.$store.dispatch(`${this.storeActionType}/like`, dataset);
+    },
+    deleteLikeDataset (dataset) {
+      this.$store.dispatch(`${this.storeActionType}/deleteLike`, dataset);
     }
   }
 };

lib/assets/javascripts/new-dashboard/components/MapCard/MapCard.vue

@@ -5,6 +5,7 @@
     :isSelected="isSelected"
     :canHover="canHover"
     :selectMode="selectMode"
+    :storeActionType="storeActionType"
     @toggleSelection="toggleSelection"
     @contentChanged="onContentChanged" />
 </template>

lib/assets/javascripts/new-dashboard/core/trackers.js

@@ -9,7 +9,7 @@ if (isTrackJSEnabled) {
     token: store.state.config.trackjs_customer,
     application: store.state.config.trackjs_app_key,
     userId: store.state.user.username,
-    version: __ASSETS_VERSION__ // eslint-disable-line
+    version: __ASSETS_VERSION__ + '-nd' // eslint-disable-line
   });
 }
 

lib/assets/javascripts/new-dashboard/pages/Search.vue

@@ -24,7 +24,7 @@
 
           <ul class="grid grid-cell" v-if="!isFetchingMaps">
             <li v-for="map in maps" :key="map.id" class="grid-cell grid-cell--col12 search-item">
-              <MapCard :visualization=map :canHover=false :condensed="true"></MapCard>
+              <MapCard :visualization=map :canHover=false :condensed="true" storeActionType="search"></MapCard>
             </li>
 
             <div class="grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile is-caption text maps--empty" v-if="!hasMaps">
@@ -44,7 +44,7 @@
 
           <ul class="grid-cell grid-cell--col12" v-if="!isFetchingDatasets">
             <li v-for="dataset in datasets" :key="dataset.id" class="search-item">
-              <DatasetCard :dataset=dataset :canHover=false></DatasetCard>
+              <DatasetCard :dataset=dataset :canHover=false storeActionType="search"></DatasetCard>
             </li>
 
             <div class="is-caption text" v-if="!hasDatasets">

lib/assets/javascripts/new-dashboard/store/modules/search/index.js

@@ -1,4 +1,5 @@
 import toObject from 'new-dashboard/utils/to-object';
+import * as VisualizationActions from '../../actions/visualizations';
 
 const search = {
   namespaced: true,
@@ -9,7 +10,7 @@ const search = {
     maps: {
       isFetching: false,
       isErrored: false,
-      results: [],
+      results: {},
       error: {},
       page: 1,
       numPages: 1,
@@ -18,7 +19,7 @@ const search = {
     datasets: {
       isFetching: false,
       isErrored: false,
-      results: [],
+      results: {},
       error: {},
       page: 1,
       numPages: 1,
@@ -72,6 +73,16 @@ const search = {
 
       state.datasets.isFetching = false;
     },
+    updateLike (state, { visualizationId, liked }) {
+      const visualization = state.maps.results[visualizationId] || state.datasets.results[visualizationId];
+
+      if (visualization) {
+        visualization.liked = liked;
+      }
+    },
+    updateNumberLikes () {
+      // NOOP. This method avoids action not finding mutation.
+    },
     resetState (state) {
       state.searchTerm = '';
       state.tag = '';
@@ -98,6 +109,8 @@ const search = {
     }
   },
   actions: {
+    deleteLike: VisualizationActions.deleteLike,
+    like: VisualizationActions.like,
     doSearch (context, searchParameters) {
       context.commit('updateSearchTerm', searchParameters);
       context.commit('setFetchingState', 'maps');

lib/assets/javascripts/new-dashboard/store/mutations/visualizations.js

@@ -46,7 +46,11 @@ export function setVisualizations (state, visualizationsData) {
 }
 
 export function updateLike (state, {visualizationId, liked}) {
-  state.list[visualizationId].liked = liked;
+  const visualization = state.list[visualizationId];
+
+  if (visualization) {
+    visualization.liked = liked;
+  }
 }
 
 export function updateNumberLikes (state, {visualizationId, liked}) {

lib/assets/test/spec/new-dashboard/unit/specs/components/Dataset/DatasetCard.spec.js

@@ -28,7 +28,9 @@ describe('DatasetCard.vue', () => {
 
     actions = {
       'datasets/deleteLike': jest.fn(),
-      'datasets/like': jest.fn()
+      'datasets/like': jest.fn(),
+      'search/deleteLike': jest.fn(),
+      'search/like': jest.fn()
     };
 
     store = new Vuex.Store({

lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/DatasetList.spec.js.snap

@@ -45,10 +45,10 @@ exports[`DatasetsList.vue should render properly 1`] = `
   </div>
   <ul class="grid-cell grid-cell--col12">
     <li class="dataset-item">
-      <datasetcard-stub dataset="[object Object]" canhover="true"></datasetcard-stub>
+      <datasetcard-stub dataset="[object Object]" canhover="true" storeactiontype="datasets"></datasetcard-stub>
     </li>
     <li class="dataset-item">
-      <datasetcard-stub dataset="[object Object]" canhover="true"></datasetcard-stub>
+      <datasetcard-stub dataset="[object Object]" canhover="true" storeactiontype="datasets"></datasetcard-stub>
     </li>
   </ul>
   <div class="grid-cell grid-cell--col12">

lib/assets/test/spec/new-dashboard/unit/specs/pages/Search/__snapshots__/Search.spec.js.snap

@@ -102,10 +102,10 @@ exports[`Search.vue Rendering should render search results correctly 1`] = `
         <!---->
         <ul class="grid grid-cell">
           <li class="grid-cell grid-cell--col12 search-item">
-            <mapcard-stub visualization="[object Object]" storeactiontype="maps" condensed="true"></mapcard-stub>
+            <mapcard-stub visualization="[object Object]" storeactiontype="search" condensed="true"></mapcard-stub>
           </li>
           <li class="grid-cell grid-cell--col12 search-item">
-            <mapcard-stub visualization="[object Object]" storeactiontype="maps" condensed="true"></mapcard-stub>
+            <mapcard-stub visualization="[object Object]" storeactiontype="search" condensed="true"></mapcard-stub>
           </li>
           <!---->
         </ul>
@@ -115,10 +115,10 @@ exports[`Search.vue Rendering should render search results correctly 1`] = `
         <div class="section-title grid-cell title is-medium">SearchPage.sections.data</div>
         <ul class="grid-cell grid-cell--col12">
           <li class="search-item">
-            <datasetcard-stub dataset="[object Object]"></datasetcard-stub>
+            <datasetcard-stub dataset="[object Object]" storeactiontype="search"></datasetcard-stub>
           </li>
           <li class="search-item">
-            <datasetcard-stub dataset="[object Object]"></datasetcard-stub>
+            <datasetcard-stub dataset="[object Object]" storeactiontype="search"></datasetcard-stub>
           </li>
           <!---->
         </ul>

lib/assets/test/spec/new-dashboard/unit/specs/store/maps/maps.spec.js

@@ -67,22 +67,38 @@ describe('MapsStore', () => {
       });
     });
 
-    it('updateLike', () => {
-      let state = {
-        list: {
-          'xxxx-yyyy-zzzzz': {
-            liked: false
+    describe('updateLike', () => {
+      it('set update liked property of a given visualization', () => {
+        let state = {
+          list: {
+            'xxxx-yyyy-zzzzz': {
+              liked: false
+            }
           }
-        }
-      };
+        };
 
-      mutations.updateLike(state, { visualizationId: 'xxxx-yyyy-zzzzz', liked: true });
-      expect(state).toEqual({
-        list: {
-          'xxxx-yyyy-zzzzz': {
-            liked: true
+        mutations.updateLike(state, { visualizationId: 'xxxx-yyyy-zzzzz', liked: true });
+        expect(state).toEqual({
+          list: {
+            'xxxx-yyyy-zzzzz': {
+              liked: true
+            }
           }
-        }
+        });
+      });
+
+      it('should not throw when passing an missing visualization id', () => {
+        let state = {
+          list: {
+            'xxxx-yyyy-zzzzz': {
+              liked: false
+            }
+          }
+        };
+
+        expect(() => {
+          mutations.updateLike(state, { visualizationId: 'unknown_id', liked: true });
+        }).not.toThrow();
       });
     });
 

lib/assets/test/spec/new-dashboard/unit/specs/store/search/search.spec.js

@@ -117,6 +117,29 @@ describe('SearchStore', () => {
       });
     });
 
+    describe('updateLike', () => {
+      it('should set update liked property of a given visualization', () => {
+        const dataset = { ...datasetVisualizationsData.visualizations[0] };
+        const state = {
+          resultsPerPage: 6,
+          maps: { results: {} },
+          datasets: {
+            results: {
+              [dataset.id]: dataset
+            }
+          }
+        };
+
+        const likeData = {
+          visualizationId: '8b2fa51d-618c-48ea-8c4c-4aa5e9a93a90',
+          liked: true
+        };
+
+        searchStore.mutations.updateLike(state, likeData);
+        expect(dataset.liked).toEqual(true);
+      });
+    });
+
     describe('resetState', () => {
       it('should set results, calculate pages and revert isFetching state', () => {
         const state = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.65",
+  "version": "1.0.0-assets.65-likesinsearch-1",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",