feat(content-explorer): local storage for view mode preference (#1476)

* feat: added persistence to view preference

* fix: removed duplicate state

Author: rickstefanik

src/elements/content-explorer/ContentExplorer.js

@@ -29,6 +29,7 @@ import DeleteConfirmationDialog from './DeleteConfirmationDialog';
 import Content from './Content';
 import { isFocusableElement, isInputElement, focus } from '../../utils/dom';
 import { FOLDER_FIELDS_TO_FETCH } from '../../utils/fields';
+import LocalStore from '../../utils/LocalStore';
 import {
     isFeatureEnabled,
     withFeatureConsumer,
@@ -134,9 +135,10 @@ type State = {
     sortBy: SortBy,
     sortDirection: SortDirection,
     view: View,
-    viewMode: ViewMode,
 };
 
+const localStoreViewMode = 'bce.defaultViewMode';
+
 class ContentExplorer extends Component<Props, State> {
     id: string;
 
@@ -156,6 +158,8 @@ class ContentExplorer extends Component<Props, State> {
 
     firstLoad: boolean = true; // Keeps track of very 1st load
 
+    store: LocalStore = new LocalStore();
+
     static defaultProps = {
         rootFolderId: DEFAULT_ROOT,
         sortBy: FIELD_NAME,
@@ -248,7 +252,6 @@ class ContentExplorer extends Component<Props, State> {
             sortBy,
             sortDirection,
             view: VIEW_FOLDER,
-            viewMode: VIEW_MODE_LIST,
         };
     }
 
@@ -281,7 +284,7 @@ class ContentExplorer extends Component<Props, State> {
      * @return {void}
      */
     componentDidMount() {
-        const { defaultView, currentFolderId }: Props = this.props;
+        const { currentFolderId, defaultView }: Props = this.props;
         this.rootElement = ((document.getElementById(this.id): any): HTMLElement);
         this.appElement = ((this.rootElement.firstElementChild: any): HTMLElement);
 
@@ -1249,14 +1252,26 @@ class ContentExplorer extends Component<Props, State> {
         this.setState({ currentOffset: newOffset }, this.refreshCollection);
     };
 
+    getViewMode = (): ViewMode => {
+        const { features }: Props = this.props;
+        const viewModePreference = this.store.getItem(localStoreViewMode);
+        const isGridViewEnabled = isFeatureEnabled(features, 'contentExplorer.gridView.enabled');
+        return isGridViewEnabled && viewModePreference ? viewModePreference : VIEW_MODE_LIST;
+    };
+
     /**
      * Change the current view mode
      *
      * @param {ViewMode} viewMode - the new view mode
      * @return {void}
      */
     changeViewMode = (viewMode: ViewMode): void => {
-        this.setState({ viewMode });
+        const { features }: Props = this.props;
+
+        if (isFeatureEnabled(features, 'contentExplorer.gridView.enabled')) {
+            this.store.setItem(localStoreViewMode, viewMode);
+            this.forceUpdate();
+        }
     };
 
     /**
@@ -1302,7 +1317,6 @@ class ContentExplorer extends Component<Props, State> {
 
         const {
             view,
-            viewMode,
             rootName,
             currentCollection,
             currentPageSize,
@@ -1325,6 +1339,8 @@ class ContentExplorer extends Component<Props, State> {
         const allowUpload: boolean = canUpload && !!can_upload;
         const allowCreate: boolean = canCreateNewFolder && !!can_upload;
 
+        const viewMode = this.getViewMode();
+
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (

src/elements/content-explorer/__tests__/ContentExplorer-test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { ContentExplorerComponent as ContentExplorer } from '../ContentExplorer';
 import { FOLDER_FIELDS_TO_FETCH } from '../../../utils/fields';
-import { FIELD_REPRESENTATIONS, VIEW_MODE_LIST, VIEW_MODE_GRID } from '../../../constants';
+import { FIELD_REPRESENTATIONS, VIEW_MODE_GRID } from '../../../constants';
 
 jest.mock('../../common/header/Header', () => 'mock-header');
 jest.mock('../../common/sub-header/SubHeader', () => 'mock-subheader');
@@ -43,19 +43,14 @@ describe('elements/content-explorer/ContentExplorer', () => {
     });
 
     describe('changeViewMode()', () => {
-        let wrapper;
-        beforeEach(() => {
-            wrapper = getWrapper();
-        });
-
-        test('should initially be list view', () => {
-            expect(wrapper.state('viewMode')).toBe(VIEW_MODE_LIST);
-        });
+        const localStoreViewMode = 'bce.defaultViewMode';
 
         test('should change to grid view', () => {
+            const wrapper = getWrapper({ features: { contentExplorer: { gridView: { enabled: true } } } });
             const instance = wrapper.instance();
+            instance.store.setItem = jest.fn();
             instance.changeViewMode(VIEW_MODE_GRID);
-            expect(wrapper.state('viewMode')).toBe(VIEW_MODE_GRID);
+            expect(instance.store.setItem).toHaveBeenCalledWith(localStoreViewMode, VIEW_MODE_GRID);
         });
     });