feat: New @ohif/viewer project structure + routes (#1674)

* fix pagination size

* clean up, start a very basic route configuration

* quick navigation between routes

* configure webpack to read .env variables

* Move container components to Routes directory

* Fix naming of recipe file

* Clean up source folder

* update yarn.lock

* ci: update netlify deploy preview to build viewer project

* update PWA entrypoint to pass configuration on window to App as props

* fix: for missing key

* Pass routerBasename to our React Router component

* Simplify config for meow

Co-authored-by: dannyrb <danny.ri.brown@gmail.com>

platform/viewer/src/routes/CallbackPage.js

@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { CallbackComponent } from 'redux-oidc';
-
-class CallbackPage extends Component {
-  static propTypes = {
-    userManager: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-  };
-
-  render() {
-    return (
-      <CallbackComponent
-        userManager={this.props.userManager}
-        successCallback={() => {
-          const pathname = sessionStorage.getItem('ohif-redirect-to');
-
-          this.props.history.push(pathname);
-        }}
-        errorCallback={error => {
-          //this.props.history.push("/");
-          throw new Error(error);
-        }}
-      >
-        <div>Redirecting...</div>
-      </CallbackComponent>
-    );
-  }
-}
-
-export default withRouter(CallbackPage);

platform/viewer/src/routes/NotFound.css

@@ -1,9 +0,0 @@
-.not-found {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  color: white;
-}

platform/viewer/src/routes/NotFound.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import './NotFound.css';
-import { Link } from 'react-router-dom';
-
-export default function NotFound({ message = 'Sorry, this page does not exist.', showGoBackButton = true }) {
-  return (
-    <div className={'not-found'}>
-      <div>
-        <h4>{message}</h4>
-        {showGoBackButton && (
-          <h5>
-            <Link to={'/'}>Go back to the Study List</Link>
-          </h5>
-        )}
-      </div>
-    </div>
-  );
-}

platform/viewer/src/routes/NotFound/NotFound.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const NotFound = ({
+  message = 'Sorry, this page does not exist.',
+  showGoBackButton = true,
+}) => {
+  return (
+    <div className="w-full h-full flex justify-center items-center text-white">
+      <div>
+        <h4>{message}</h4>
+        {showGoBackButton && (
+          <h5>
+            <Link to={'/'}>Go back to the Study List</Link>
+          </h5>
+        )}
+      </div>
+    </div>
+  );
+};
+
+NotFound.propTypes = {
+  message: PropTypes.string,
+  showGoBackButton: PropTypes.bool,
+};
+
+export default NotFound;

platform/viewer/src/routes/NotFound/index.js

@@ -0,0 +1 @@
+export { default } from './NotFound';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const StudyListContainer = () => {
+  return (
+    <div>
+      <div>StudyListContainer</div>
+      <Link to="/viewer/123">Go to Viewer Route</Link>
+    </div>
+  );
+};
+
+export default StudyListContainer;

platform/viewer/src/routes/StudyListContainer/index.js

@@ -0,0 +1 @@
+export { default } from './StudyListContainer';

platform/viewer/src/routes/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import StudyListContainer from './StudyListContainer';
+import NotFound from './NotFound';
+
+const appRoutes = [
+  { path: '/', exact: true, component: StudyListContainer },
+  { path: '/viewer/:studyInstanceUids', component: NotFound },
+  { component: NotFound },
+];
+
+const routes = () => {
+  return (
+    <Switch>
+      {appRoutes.map((route, i) => {
+        return (
+          <Route
+            key={i}
+            path={route.path}
+            exact={route.exact}
+            strict={route.strict}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            render={props => <route.component {...props} route={route} />}
+          />
+        );
+      })}
+    </Switch>
+  );
+};
+
+export default routes;