round trip query string parameters for startDate and endDate; drop JSON stringify

platform/ui/src/components/DateRange/DateRange.jsx

@@ -122,14 +122,23 @@ const DateRange = props => {
     );
   };
 
+  // Moment
+  const parsedStartDate = startDate ? moment(startDate, 'YYYYMMDD') : null;
+  const parsedEndDate = endDate ? moment(endDate, 'YYYYMMDD') : null;
+
   return (
     <DateRangePicker
       /** REQUIRED */
-      startDate={startDate}
+      startDate={parsedStartDate}
       startDateId={'startDateId'}
-      endDate={endDate}
+      endDate={parsedEndDate}
       endDateId={'endDateId'}
-      onDatesChange={onChange}
+      onDatesChange={({ startDate: newStartDate, endDate: newEndDate }) => {
+        onChange({
+          startDate: newStartDate ? newStartDate.format('YYYYMMDD') : undefined,
+          endDate: newEndDate ? newEndDate.format('YYYYMMDD') : undefined,
+        })
+      }}
       focusedInput={focusedInput}
       onFocusChange={updatedVal => setFocusedInput(updatedVal)}
       /** OPTIONAL */
@@ -156,11 +165,11 @@ DateRange.defaultProps = {
 };
 
 DateRange.propTypes = {
-  /** Start date moment object */
+  /** YYYYMMDD (19921022) */
-  startDate: PropTypes.object, // moment date is an object
+  startDate: PropTypes.string,
-  /** End date moment object */
+  /** YYYYMMDD (19921022) */
-  endDate: PropTypes.object, // moment date is an object
+  endDate: PropTypes.object,
-  /** Callback that returns on object with selected dates */
+  /** Callback that received { startDate: string(YYYYMMDD), endDate: string(YYYYMMDD)} */
   onChange: PropTypes.func.isRequired,
 };
 

platform/ui/src/components/InputDateRange/InputDateRange.jsx

@@ -41,10 +41,10 @@ InputDateRange.propTypes = {
     .isRequired,
   onLabelClick: PropTypes.func.isRequired,
   value: PropTypes.shape({
-    /** Start date moment object */
+    /** YYYYMMDD (19921022) */
-    startDate: PropTypes.object, // moment date is an object
+    startDate: PropTypes.string,
-    /** End date moment object */
+    /** YYYYMMDD (19921022) */
-    endDate: PropTypes.object, // moment date is an object
+    endDate: PropTypes.string,
   }),
   onChange: PropTypes.func.isRequired,
 };

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -58,6 +58,16 @@ const InputGroup = ({
       });
     };
 
+    const handleDateRangeFieldChange = ({ startDate, endDate }) => {
+      onValuesChange({
+        ...values,
+        [name]: {
+          startDate: startDate,
+          endDate: endDate,
+        },
+      });
+    };
+
     switch (inputType) {
       case 'Text':
         return (
@@ -93,7 +103,7 @@ const InputGroup = ({
             sortDirection={_sortDirection}
             onLabelClick={onLabelClick}
             value={values[name]}
-            onChange={handleFieldChange}
+            onChange={handleDateRangeFieldChange}
           />
         );
       case 'None':

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { MODULE_TYPES } from '@ohif/core';
 //
 import { appConfig, extensionManager } from '../App.js';
-import { useQuery } from './../hooks';
 
 /**
  * Uses route properties to determine the data source that should be passed
@@ -15,9 +14,8 @@ import { useQuery } from './../hooks';
  * @param {function} props.children - Layout Template React Component
  */
 function DataSourceWrapper(props) {
-  const { children: LayoutTemplate, ...rest } = props;
+  const { children: LayoutTemplate, history, ...rest } = props;
-  const query = useQuery();
+  const queryFilterValues = _getQueryFilterValues(history.location.search);
-  const queryFilterValues = _getQueryFilterValues(query);
 
   // TODO: Fetch by type, name, etc?
   const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
@@ -53,10 +51,10 @@ function DataSourceWrapper(props) {
 
     // 204: no content
     async function getData() {
-      const searchResult = await dataSource.query.studies.search({
+      const searchResults = await dataSource.query.studies.search(
-        patientName: queryFilterValues.patientName,
+        queryFilterValues
-      });
+      );
-      setData(searchResult);
+      setData(searchResults);
     }
 
     try {
@@ -66,14 +64,13 @@ function DataSourceWrapper(props) {
 
     }
     console.log('DataSourceWrapper: useEffect');
-  }, [rest.history.location.search]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history.location.search]);
   // queryFilterValues
 
-  console.log(rest);
-
   return (
     <React.Fragment>
-      {data && <LayoutTemplate {...rest} data={data} />}
+      {data && <LayoutTemplate {...rest} history={history} data={data} />}
     </React.Fragment>
   );
 }
@@ -91,12 +88,17 @@ export default DataSourceWrapper;
  * @param {*} query
  */
 function _getQueryFilterValues(query) {
+  query = new URLSearchParams(query);
+
   const queryFilterValues = {
     patientName: query.get('patientName'),
     // mrn: query.get('mrn'), patientId?
-    studyDate: _tryParseDates(query.get('studyDate'), undefined),
+    studyDate: {
+      startDate: query.get('startDate'),
+      endDate: query.get('endDate'),
+    },
     studyDescription: query.get('description'),
-    modalitiesInStudy: _tryParseJson(query.get('modality'), undefined),
+    //modalitiesInStudy: _tryParseJson(query.get('modality'), undefined),
     accessionNumber: query.get('accession'),
     sortBy: query.get('soryBy'),
     sortDirection: query.get('sortDirection'),
@@ -104,6 +106,10 @@ function _getQueryFilterValues(query) {
     resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined),
   };
 
+  // patientName: good
+  // studyDescription: good
+  // accessionNumber: good
+
   // Delete null/undefined keys
   Object.keys(queryFilterValues).forEach(
     key => queryFilterValues[key] == null && delete queryFilterValues[key]
@@ -122,24 +128,4 @@ function _getQueryFilterValues(query) {
     }
     return retValue;
   }
-
-  function _tryParseJson(str, defaultValue) {
-    return str ? JSON.parse(str) : defaultValue;
-  }
-
-  function _tryParseDates(str, defaultValue) {
-    const studyDateObject = _tryParseJson(str, defaultValue);
-
-    if (studyDateObject) {
-      studyDateObject.startDate = studyDateObject.startDate
-        ? moment(new Date(studyDateObject.startDate))
-        : undefined;
-
-      studyDateObject.endDate = studyDateObject.endDate
-        ? moment(new Date(studyDateObject.endDate))
-        : undefined;
-    }
-
-    return studyDateObject;
-  }
 }

platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx

@@ -53,16 +53,21 @@ function StudyListContainer({ history, data: studies }) {
       const defaultValue = defaultFilterValues[key];
       const currValue = debouncedFilterValues[key];
 
-      if (
+      // TODO: nesting/recursion?
-        typeof currValue === 'object' &&
+      // TODO: modalities array
-        currValue !== null &&
+      if (key === 'studyDate') {
-        JSON.stringify(currValue) !== JSON.stringify(defaultValue)
+        console.log(currValue)
-      ) {
+        if (defaultValue.startDate !== currValue.startDate) {
-        queryString[key] = JSON.stringify(currValue);
+          queryString.startDate = currValue.startDate;
+        }
+        if (defaultValue.endDate !== currValue.endDate) {
+          queryString.endDate = currValue.endDate;
+        }
       } else if (currValue !== defaultValue) {
         queryString[key] = currValue;
       }
     });
+
     history.push({
       pathname: '/',
       search: `?${qs.stringify(queryString, {
@@ -372,8 +377,8 @@ const defaultFilterValues = {
   patientName: '',
   mrn: '',
   studyDate: {
-    startDate: null,
+    startDate: undefined,
-    endDate: null,
+    endDate: undefined,
   },
   description: '',
   modality: [],
@@ -388,9 +393,12 @@ function _getQueryFilterValues(query) {
   const queryFilterValues = {
     patientName: query.get('patientName'),
     mrn: query.get('mrn'),
-    studyDate: _tryParseDates(query.get('studyDate'), undefined),
+    studyDate: {
+      startDate: query.get('startDate'),
+      endDate: query.get('endDate'),
+    },
     description: query.get('description'),
-    modality: _tryParseJson(query.get('modality'), undefined),
+    // modality: _tryParseJson(query.get('modality'), undefined),
     accession: query.get('accession'),
     sortBy: query.get('soryBy'),
     sortDirection: query.get('sortDirection'),
@@ -416,26 +424,6 @@ function _getQueryFilterValues(query) {
     }
     return retValue;
   }
-
-  function _tryParseJson(str, defaultValue) {
-    return str ? JSON.parse(str) : defaultValue;
-  }
-
-  function _tryParseDates(str, defaultValue) {
-    const studyDateObject = _tryParseJson(str, defaultValue);
-
-    if (studyDateObject) {
-      studyDateObject.startDate = studyDateObject.startDate
-        ? moment(new Date(studyDateObject.startDate))
-        : undefined;
-
-      studyDateObject.endDate = studyDateObject.endDate
-        ? moment(new Date(studyDateObject.endDate))
-        : undefined;
-    }
-
-    return studyDateObject;
-  }
 }
 
 export default StudyListContainer;