WIP useQuery implementation

platform/viewer/src/hooks/useQuery.js

@@ -1,5 +1,48 @@
-import { useLocation } from 'react-router-dom';
+import { useCallback } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+
+const isEmpty = str => str === undefined || str === null || str === '';
 
 export default function useQuery() {
-  return new URLSearchParams(useLocation().search);
+  const location = useLocation();
+  const history = useHistory();
+
+  const _getQueryStringValues = values => {
+    const qs = getQueryString();
+
+    Object.keys(values).forEach(name => {
+      const value = values[name];
+
+      if (name === 'studyDate') return null;
+
+      if (!isEmpty(value)) {
+        qs.set(name, value);
+      } else {
+        qs.delete(name);
+      }
+    });
+
+    return qs;
+  };
+
+  const getQueryString = () => {
+    return new URLSearchParams(location.search);
+  };
+
+  const setQueryString = values => {
+    const queryParams = _getQueryStringValues(values);
+    _updateUrl(queryParams.toString());
+  };
+
+  const _updateUrl = queryValues => {
+    const url = `${location.pathname}?${queryValues}`;
+    console.log('url', url);
+    /**
+     * TODO: when history.push is called, there's an infinite loop happening.
+     * Figure out why it's happening to fix. Maybe some callback? useCallback?
+     */
+    // history.push(url);
+  };
+
+  return { getQueryString, setQueryString };
 }

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
@@ -17,7 +17,12 @@ import {
   StudyListFilter,
 } from '@ohif/ui';
 
+// URL Query Hook
+import { useQuery } from '../../hooks';
+
 function StudyListContainer() {
+  const query = useQuery();
+
   const defaultFilterValues = {
     patientName: '',
     mrn: '',
@@ -254,6 +259,10 @@ function StudyListContainer() {
 
   const hasStudies = numOfStudies > 0;
 
+  useEffect(() => {
+    query.setQueryString(filterValues);
+  }, [filterValues, query]);
+
   return (
     <div
       className={classnames('bg-black h-full', {