CDC #157 - Updating DataList and DataTableColumnSelector components t…

…o append to session storage

packages/semantic-ui/src/components/DataList.js

@@ -6,6 +6,7 @@ import uuid from 'react-uuid';
 import _ from 'underscore';
 import { Icon, Input, Message } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ListSessionUtils from '../utils/ListSession';
 import Toaster from './Toaster';
 
 type Props = {
@@ -131,9 +132,6 @@ type State = {
   sortDirection: ?string
 };
 
-const SESSION_KEY = 'DataList';
-const SESSION_DEFAULT = '{}';
-
 const SORT_ASCENDING = 'ascending';
 const SORT_DESCENDING = 'descending';
 
@@ -285,19 +283,6 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
       return { filters };
     }
 
-    /**
-     * Returns the session storage key for the current list.
-     *
-     * @returns {string|null}
-     */
-    getSessionKey() {
-      if (!this.props.session) {
-        return null;
-      }
-
-      return `${SESSION_KEY}.${this.props.session.key}`;
-    }
-
     /**
      * Initializes the state based on the passed props.
      *
@@ -307,7 +292,8 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * saved: boolean, count: number, filters: (*|{}), page: number, error: null, loading: boolean, items: *[]}}
      */
     initializeState(props: Props) {
-      const session = this.restoreSession();
+      const { key, storage } = props.session || {};
+      const session = ListSessionUtils.restoreSession(key, storage) || {};
 
       const filters = session.filters || this.getDefaultFilters(props);
       const page = session.page || 1;
@@ -445,6 +431,14 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
       });
     }
 
+    /**
+     * When no columns are sortable, load data as is
+     *
+     */
+    onInit(page?: number = 1) {
+      this.setState({ sortColumn: '', sortDirection: '', page }, this.fetchData.bind(this));
+    }
+
     /**
      * Sets the new active page and reloads the data.
      *
@@ -516,14 +510,6 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
       this.setState({ sortColumn, sortDirection, page }, this.fetchData.bind(this));
     }
 
-    /**
-     * When no columns are sortable, load data as is
-     *
-     */
-    onInit(page?: number = 1) {
-      this.setState({ sortColumn: '', sortDirection: '', page }, this.fetchData.bind(this));
-    }
-
     /**
      * Renders the DataList component.
      *
@@ -565,7 +551,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
             sortColumn={this.state.sortColumn}
             sortDirection={this.state.sortDirection}
           />
-          {this.state.saved && (
+          { this.state.saved && (
             <Toaster
               onDismiss={() => this.setState({ saved: false })}
               type={Toaster.MessageTypes.positive}
@@ -578,7 +564,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
               />
             </Toaster>
           )}
-          {this.state.error && (
+          { this.state.error && (
             <Toaster
               onDismiss={() => this.setState({ error: false })}
               timeout={0}
@@ -633,25 +619,11 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
       );
     }
 
-    /**
-     * Restores the DataList session object.
-     */
-    restoreSession() {
-      const key = this.getSessionKey();
-
-      if (!key) {
-        return {};
-      }
-
-      const session = sessionStorage.getItem(key) || SESSION_DEFAULT;
-      return JSON.parse(session);
-    }
-
     /**
      * Sets the DataList session object.
      */
     setSession() {
-      const key = this.getSessionKey();
+      const { key, storage } = this.props.session || {};
 
       if (!key) {
         return;
@@ -666,14 +638,14 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
         sortDirection
       } = this.state;
 
-      sessionStorage.setItem(key, JSON.stringify({
+      ListSessionUtils.setSession(key, storage, {
         filters,
         page,
         perPage,
         search,
         sortColumn,
         sortDirection
-      }));
+      });
     }
   }
 );

packages/semantic-ui/src/components/DataTableColumnSelector.js

@@ -5,6 +5,7 @@ import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import Draggable from './Draggable';
+import ListSessionUtils from '../utils/ListSession';
 import type { Props as ListProps } from './List';
 import './DataTableColumnSelector.css';
 
@@ -75,20 +76,49 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
     constructor(props: Props) {
       super(props);
 
-      this.state = {
-        columns: props.columns
-      };
+      this.state = this.initializeState(props);
     }
 
     /**
      * Reset the columns on the state when the props change.
      *
      * @param prevProps
      */
-    componentDidUpdate(prevProps: Props): * {
+    componentDidUpdate(prevProps: Props, prevState: State): * {
       if (!ObjectUtils.isEqual(prevProps.columns, this.props.columns)) {
         this.setState({ columns: this.props.columns });
       }
+
+      if (!ObjectUtils.isEqual(prevState.columns, this.state.columns)) {
+        this.setSession();
+      }
+    }
+
+    /**
+     * Sets the initial state from the session, if provided.
+     *
+     * @param props
+     *
+     * @returns {{columns}|{columns: *}}
+     */
+    initializeState(props) {
+      const { key, storage } = props.session || {};
+      const session = ListSessionUtils.restoreSession(key, storage) || {};
+
+      if (_.isEmpty(session.columns)) {
+        return {
+          columns: props.columns
+        };
+      }
+
+      const columns = _.map(session.columns, (column) => ({
+        ...(_.findWhere(props.columns, { name: column.name }) || {}),
+        ...column
+      }));
+
+      return {
+        columns
+      };
     }
 
     /**
@@ -203,6 +233,20 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
         </>
       );
     }
+
+    /**
+     * Sets the list columns on the session.
+     */
+    setSession() {
+      const { key, storage } = this.props.session;
+
+      if (!key) {
+        return;
+      }
+
+      const columns = _.map(this.state.columns, (column) => _.pick(column, 'name', 'hidden'));
+      ListSessionUtils.setSession(key, storage, { columns });
+    }
   }
 );
 

packages/semantic-ui/src/components/ListTable.js

@@ -4,6 +4,7 @@ import { Hooks, ObjectJs as ObjectUtils } from '@performant-software/shared-comp
 import React, { useEffect } from 'react';
 import _ from 'underscore';
 import DataTable from './DataTable';
+import ListSessionUtils from '../utils/ListSession';
 import type { Props as DataTableProps } from './DataTable';
 import useDataList, { SORT_ASCENDING, SORT_DESCENDING, type Props as DataListProps } from './DataList';
 import './ListTable.css';
@@ -88,11 +89,12 @@ const ListTable = useDataList((props: Props) => {
    */
   useEffect(() => {
     if (!ObjectUtils.isEqual(props.columns, prevColumns)) {
-      const {
-        page,
-        defaultSort,
-        defaultSortDirection = SORT_ASCENDING
-      } = props;
+      const { key, storage } = props.session || {};
+      const session = ListSessionUtils.restoreSession(key, storage);
+
+      const defaultSort = session.sortColumn || props.defaultSort;
+      const defaultSortDirection = session.sortDirection || props.defaultSortDirection || SORT_ASCENDING;
+      const { page } = props;
 
       if (defaultSort) {
         props.onSort(defaultSort, defaultSortDirection, page);

packages/semantic-ui/src/utils/ListSession.js

@@ -0,0 +1,41 @@
+// @flow
+
+const SESSION_DEFAULT = '{}';
+
+/**
+ * Restores the list session from the passed storage object.
+ *
+ * @param key
+ * @param storage
+ *
+ * @returns {{}|any}
+ */
+const restoreSession = (key, storage) => {
+  if (!(key && storage)) {
+    return {};
+  }
+
+  const session = storage.getItem(key) || SESSION_DEFAULT;
+  return JSON.parse(session);
+};
+
+/**
+ * Sets the passed list session on the passed storage object.
+ *
+ * @param key
+ * @param storage
+ * @param session
+ */
+const setSession = (key, storage, session) => {
+  if (!(key && storage)) {
+    return;
+  }
+
+  const currentSession = restoreSession(key, storage);
+  storage.setItem(key, JSON.stringify({ ...currentSession, ...session }));
+};
+
+export default {
+  restoreSession,
+  setSession
+};