Feature/migrate domain list 3 (#376)

* migrate data on getDefaultState and when loading from vuex local storage

* spreading state in reducer for keys that does not have a reducer.

* updating tests to cover more cases of data migration

client/containers/domain-autocomplete/helpers/migrate-recent-domains.js

@@ -19,13 +19,19 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-const migrateRecentDomains = recentDomains =>
-  (recentDomains &&
-    recentDomains.map(domainName => ({
-      domainInfo: {
-        name: domainName,
-      },
-    }))) ||
+const migrateRecentDomains = domainList =>
+  (domainList &&
+    domainList.map(domain => {
+      if (typeof domain === 'string') {
+        return {
+          domainInfo: {
+            name: domain,
+          },
+        };
+      }
+
+      return domain;
+    })) ||
   [];
 
 export default migrateRecentDomains;

client/containers/domain-autocomplete/helpers/migrate-recent-domains.spec.js

@@ -22,10 +22,10 @@
 import migrateRecentDomains from './migrate-recent-domains';
 
 describe('migrateRecentDomains', () => {
-  describe('when passed recentDomains array strings', () => {
+  describe('when passed domainList array of strings', () => {
     it('should format to array objects.', () => {
-      const recentDomains = ['domainA', 'domainB', 'domainC'];
-      const output = migrateRecentDomains(recentDomains);
+      const domainList = ['domainA', 'domainB', 'domainC'];
+      const output = migrateRecentDomains(domainList);
 
       expect(output).toEqual([
         {
@@ -46,4 +46,92 @@ describe('migrateRecentDomains', () => {
       ]);
     });
   });
+
+  describe('when passed domainList array of objects', () => {
+    it('should not change the array.', () => {
+      const domainList = [
+        {
+          domainInfo: {
+            name: 'domainA',
+            uuid: 1,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainB',
+            uuid: 2,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainC',
+            uuid: 2,
+          },
+        },
+      ];
+      const output = migrateRecentDomains(domainList);
+
+      expect(output).toEqual([
+        {
+          domainInfo: {
+            name: 'domainA',
+            uuid: 1,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainB',
+            uuid: 2,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainC',
+            uuid: 2,
+          },
+        },
+      ]);
+    });
+  });
+
+  describe('when passed domainList array of mixed strings and objects', () => {
+    it('should only change the strings to objects and leave the rest.', () => {
+      const domainList = [
+        {
+          domainInfo: {
+            name: 'domainA',
+            uuid: 1,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainB',
+            uuid: 2,
+          },
+        },
+        'domainC',
+      ];
+      const output = migrateRecentDomains(domainList);
+
+      expect(output).toEqual([
+        {
+          domainInfo: {
+            name: 'domainA',
+            uuid: 1,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainB',
+            uuid: 2,
+          },
+        },
+        {
+          domainInfo: {
+            name: 'domainC',
+          },
+        },
+      ]);
+    });
+  });
 });

client/containers/domain-autocomplete/index.js

@@ -25,7 +25,8 @@ import getDefaultState from './get-default-state';
 import getters from './getters';
 import connector from './connector';
 import mutations from './mutations';
+import reducer from './reducer';
 
 const container = connector(Component);
 
-export { actions, container, getDefaultState, getters, mutations };
+export { actions, container, getDefaultState, getters, mutations, reducer };

client/containers/domain-autocomplete/reducer.js

@@ -0,0 +1,31 @@
+// Copyright (c) 2021 Uber Technologies Inc.
+//
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { migrateRecentDomains } from './helpers';
+
+const reducer = state => ({
+  ...state.domainAutocomplete,
+  visitedDomainList: migrateRecentDomains(
+    state.domainAutocomplete.visitedDomainList
+  ),
+});
+
+export default reducer;

client/containers/index.js

@@ -31,6 +31,7 @@ export {
   getDefaultState as getDomainAutocompleteDefaultState,
   getters as domainAutocompleteGetters,
   mutations as domainAutocompleteMutations,
+  reducer as domainAutocompleteReducer,
 } from './domain-autocomplete';
 export {
   getDefaultState as getGraphDefaultState,

client/store/index.js

@@ -35,6 +35,7 @@ import {
   getDomainAutocompleteDefaultState,
   domainAutocompleteGetters,
   domainAutocompleteMutations,
+  domainAutocompleteReducer,
 
   // graph
   getGraphDefaultState,
@@ -84,6 +85,10 @@ const getStoreConfig = ({ router, state }) => {
   const initialState = getDefaultState(state);
 
   const vuexLocal = new VuexPersistence({
+    reducer: state => ({
+      ...state,
+      domainAutocomplete: domainAutocompleteReducer(state),
+    }),
     storage: window.localStorage,
   });