fix: OpenID Connect and Local route rendering

platform/viewer/src/routes/Local/Local.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
+import { useNavigate } from 'react-router-dom';
 import { MODULE_TYPES } from '@ohif/core'
 
-import PropTypes from 'prop-types'
 import Dropzone from 'react-dropzone'
 import filesToStudies from './filesToStudies'
 
@@ -39,8 +39,8 @@ const getLoadButton = (onDrop, text, isDir) => {
     </Dropzone>)
 }
 
-function Local(props) {
-  const { history } = props
+function Local() {
+  const navigate = useNavigate();
   const dropzoneRef = useRef()
 
   // Initializing the dicom local dataSource
@@ -61,7 +61,7 @@ function Local(props) {
   const onDrop = async (acceptedFiles) => {
     const studies = await filesToStudies(acceptedFiles, dataSource)
     // Todo: navigate to work list and let user select a mode
-    history.push(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
+    navigate(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
   }
 
   // Set body style
@@ -74,7 +74,7 @@ function Local(props) {
 
   return (
     <Dropzone ref={dropzoneRef} onDrop={onDrop} noClick>
-      {({ getRootProps, getInputProps }) => (
+      {({ getRootProps }) => (
         <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
           <div className="h-screen w-screen flex justify-center items-center ">
             <div className="py-8 px-8 mx-auto bg-secondary-dark shadow-md space-y-2 rounded-lg">
@@ -107,10 +107,4 @@ function Local(props) {
   )
 }
 
-Local.propTypes = {
-  history: PropTypes.shape({
-    push: PropTypes.func,
-  }).isRequired,
-};
-
 export default Local

platform/viewer/src/routes/Mode/Mode.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useLocation } from 'react-router';
 import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore } from '@ohif/core';
@@ -54,7 +54,6 @@ async function defaultRouteInit({
 }
 
 export default function ModeRoute({
-  location,
   mode,
   dataSourceName,
   extensionManager,
@@ -62,6 +61,7 @@ export default function ModeRoute({
   hotkeysManager,
 }) {
   // Parse route params/querystring
+  const location = useLocation();
   const query = useQuery();
   const params = useParams();
 
@@ -287,14 +287,6 @@ export default function ModeRoute({
 }
 
 ModeRoute.propTypes = {
-  // Ref: https://reacttraining.com/react-router/web/api/location
-  location: PropTypes.shape({
-    key: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-    search: PropTypes.string.isRequired,
-    hash: PropTypes.string.isRequired,
-    //state: PropTypes.object.isRequired,
-  }),
   mode: PropTypes.object.isRequired,
   dataSourceName: PropTypes.string,
   extensionManager: PropTypes.object,

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -175,12 +175,14 @@ function WorkList({
       }
     });
 
+    const search = qs.stringify(queryString, {
+      skipNull: true,
+      skipEmptyString: true,
+    });
+
     navigate({
       pathname: '/',
-      search: `?${qs.stringify(queryString, {
-        skipNull: true,
-        skipEmptyString: true,
-      })}`,
+      search: search ? `?${search}` : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedFilterValues]);

platform/viewer/src/routes/buildModeRoutes.js

@@ -50,9 +50,8 @@ export default function buildModeRoutes({
       const path = `/${mode.id}/${dataSourceName}`;
 
       // TODO move up.
-      const component = ({ location }) => (
+      const children = () => (
         <ModeRoute
-          location={location}
           mode={mode}
           dataSourceName={dataSourceName}
           extensionManager={extensionManager}
@@ -63,7 +62,7 @@ export default function buildModeRoutes({
 
       routes.push({
         path,
-        component,
+        children,
       });
     });
 
@@ -73,9 +72,8 @@ export default function buildModeRoutes({
     const path = `/${mode.id}`;
 
     // TODO move up.
-    const children = ({ location }) => (
+    const children = () => (
       <ModeRoute
-        location={location}
         mode={mode}
         dataSourceName={defaultDataSourceName}
         extensionManager={extensionManager}