Fix for Document type filter restricting itself (#19458)

* Added redux store for testing the frozen items in redux * Bug fixed. Refactor badly needed. * Refactored and removed frozenDocs. * added analytics and removed console.log * Changed default state of docTypes to '' * Removed unused component. --------- Co-authored-by: HunJerBAH <99915461+HunJerBAH@users.noreply.github.com>
department-of-veterans-affairs · Sep 14, 2023 · 97b0705 · 97b0705
1 parent 82b4105
commit 97b0705
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 130 deletions.
diff --git a/client/app/components/ReaderTableDropdownFilter.jsx b/client/app/components/ReaderTableDropdownFilter.jsx
diff --git a/client/app/reader/DocumentList/DocumentListActions.js b/client/app/reader/DocumentList/DocumentListActions.js
@@ -130,6 +130,21 @@ export const clearDocFilters = () => (dispatch) => {
   dispatch(updateFilteredIdsAndDocs());
 };
 
+export const setDocTypes = (docToAdd) => (dispatch) => {
+  dispatch({
+    type: Constants.SET_DOC_TYPES,
+    payload: {
+      docToAdd
+    },
+    meta: {
+      analytics: {
+        category: CATEGORIES.CLAIMS_FOLDER_PAGE,
+        action: 'set-doc-types'
+      }
+    }
+  });
+};
+
 export const clearTagFilters = () => (dispatch) => {
   dispatch({
     type: Constants.CLEAR_TAG_FILTER,
@@ -153,13 +168,13 @@ export const setRecieptDateFilter = (recieptFilterType, recieptDatesHash) => (di
     meta: {
       analytics: {
         category: CATEGORIES.CLAIMS_FOLDER_PAGE,
-        action: 'set RecieptFilterType-' + recieptFilterType,
+        action: `set RecieptFilterType-${ recieptFilterType}`,
         label: 'setRecieptFilter'
       }
     }
   });
   dispatch(updateFilteredIdsAndDocs());
-}
+};
 // Scrolling
 
 export const setDocListScrollPosition = (scrollTop) => ({

diff --git a/client/app/reader/DocumentList/DocumentListReducer.js b/client/app/reader/DocumentList/DocumentListReducer.js
@@ -45,6 +45,7 @@ const initialState = {
     category: {},
     tag: {},
     document: {},
+    docTypeList: '',
     searchQuery: '',
     recieptFilterType: '',
     recieptFilterDates: {
@@ -191,6 +192,16 @@ const documentListReducer = (state = initialState, action = {}) => {
       }
     });
 
+    // holds the unique different document types for reader.
+  case Constants.SET_DOC_TYPES:
+    return update(state, {
+      docFilterCriteria: {
+        docTypeList: {
+          $set: action.payload.docToAdd
+        }
+      }
+    });
+
   // Document header
   case Constants.SET_SEARCH:
     return update(state, {

diff --git a/client/app/reader/DocumentList/actionTypes.js b/client/app/reader/DocumentList/actionTypes.js
@@ -22,7 +22,7 @@ export const SET_RECIEPT_DATE_FILTER = 'SET_RECIEPT_DATE_FILTER';
 // Document filter
 export const SET_DOC_FILTER = 'SET_DOC_FILTER';
 export const CLEAR_DOC_FILTER = 'CLEAR_DOC_FILTER';
-
+export const SET_DOC_TYPES = 'SET_DOC_TYPES';
 // Constants
 export const DOCUMENTS_OR_COMMENTS_ENUM = {
   DOCUMENTS: 'documents',

diff --git a/client/app/reader/DocumentsTable.jsx b/client/app/reader/DocumentsTable.jsx
@@ -26,6 +26,7 @@ import {
   toggleDropdownFilterVisibility,
   setDocFilter,
   clearDocFilters,
+  setDocTypes,
   setRecieptDateFilter
 } from '../reader/DocumentList/DocumentListActions';
 import { getAnnotationsPerDocument } from './selectors';
@@ -38,7 +39,6 @@ import FilterIcon from '../components/icons/FilterIcon';
 import LastReadIndicator from './LastReadIndicator';
 import DocTypeColumn from './DocTypeColumn';
 import DocTagPicker from './DocTagPicker';
-import ReaderTableDropdownFilter from '../components/ReaderTableDropdownFilter';
 
 const NUMBER_OF_COLUMNS = 6;
 
@@ -156,25 +156,25 @@ class DocumentsTable extends React.Component {
  constructor() {
    super();
    this.state = {
-     frozenDocs: '',
      recieptFilter: '',
      fromDate: '',
      toDate: '',
      onDate: '',
      fromDateErrors: [],
      toDateErrors: [],
      onDateErrors: [],
-     recipetFilterEnabled: true
+     recipetFilterEnabled: true,
+     fallbackState: ''
    };
  }
 
  executeRecieptFilter = () => {
-  this.props.setRecieptDateFilter(this.state.recieptFilter,
-    { fromDate: this.state.fromDate,
-      toDate: this.state.toDate,
-      onDate: this.state.onDate});
+   this.props.setRecieptDateFilter(this.state.recieptFilter,
+     { fromDate: this.state.fromDate,
+       toDate: this.state.toDate,
+       onDate: this.state.onDate });
 
-      this.toggleRecieptDataDropdownFilterVisibility();
+   this.toggleRecieptDataDropdownFilterVisibility();
  }
 
  isRecieptFilterButtonEnabled = () => {
@@ -202,14 +202,26 @@ class DocumentsTable extends React.Component {
    return false;
  }
  componentDidMount() {
-   if (this.state.frozenDocs === '') {
-     const frozenDocs = this.props.documents;
 
-     Object.freeze(frozenDocs);
-     this.setState({
-       frozenDocs
-     });
+   // this if statement is what freezes the values, once it's set, it's set unless manipulated
+   // back to a empty state via redux
+   if (this.props.docFilterCriteria.docTypeList === '') {
+
+     let docsArray = [];
+
+     this.props.documents.map((x) => docsArray.includes(x.type) ? true : docsArray.push(x.type));
+     // convert each item to a hash for use in the document filter
+     let filterItems = [];
+
+     docsArray.forEach((x) => filterItems.push({
+       value: docsArray.indexOf(x),
+       text: x
+     }));
+
+     // store the tags in redux
+     this.props.setDocTypes(filterItems);
    }
+
    if (this.props.pdfList.scrollTop) {
      this.tbodyElem.scrollTop = this.props.pdfList.scrollTop;
 
@@ -333,23 +345,6 @@ class DocumentsTable extends React.Component {
       ];
     }
 
-    const populateDocumentFilter = () => {
-      let docsArray = [];
-
-      // looks through all document types, and only adds them into docsArray if they are unique
-      this.state.frozenDocs.map((x) => docsArray.includes(x.type) ? true : docsArray.push(x.type));
-
-      // convert each item to a hash for use in the document filter
-      let filterItems = [];
-
-      docsArray.forEach((x) => filterItems.push({
-        value: docsArray.indexOf(x),
-        text: x
-      }));
-
-      return filterItems;
-    };
-
     const isCategoryDropdownFilterOpen = _.get(this.props.pdfList, [
       'dropdowns',
       'category',
@@ -549,7 +544,7 @@ class DocumentsTable extends React.Component {
                   addClearFiltersRow
                 >
                   <DocTagPicker
-                    tags={populateDocumentFilter()}
+                    tags={this.props.docFilterCriteria.docTypeList}
                     tagToggleStates={this.props.docFilterCriteria.document}
                     handleTagToggle={this.props.setDocFilter}
                   />
@@ -662,6 +657,7 @@ DocumentsTable.propTypes = {
   toggleDropdownFilterVisibility: PropTypes.func.isRequired,
   tagOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
   setDocFilter: PropTypes.func,
+  setDocTypes: PropTypes.func,
   clearDocFilters: PropTypes.func,
   secretDebug: PropTypes.func
 };
@@ -678,6 +674,7 @@ const mapDispatchToProps = (dispatch) =>
       setCategoryFilter,
       setDocFilter,
       clearDocFilters,
+      setDocTypes,
       setRecieptDateFilter
     },
     dispatch