@truedat/ie 7.5.7 → 7.5.10

package/src/ingests/components/IngestLoader.js

@@ -1,66 +1,24 @@
-import React from "react";
-import { withRouter } from "react-router-dom";
-import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
 import { Loading } from "@truedat/core/components";
-import { Dimmer, Loader } from "semantic-ui-react";
 import { fetchIngest, clearIngest } from "../routines";
 
-export class IngestLoader extends React.Component {
-  static propTypes = {
-    clearIngest: PropTypes.func,
-    fetchIngest: PropTypes.func,
-    match: PropTypes.object,
-    ingestLoading: PropTypes.bool,
-  };
+export default function IngestLoader() {
+  const dispatch = useDispatch();
+  const ingestLoading = useSelector((state) => state.ingestLoading);
+  const { id } = useParams();
 
-  componentDidMount() {
-    const { fetchIngest, match } = this.props;
-    const { id } = match.params;
+  useEffect(() => {
     if (id) {
-      fetchIngest({ id });
-    }
-  }
-
-  componentWillUnmount() {
-    const { clearIngest } = this.props;
-    clearIngest();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { clearIngest, fetchIngest, match } = this.props;
-    const { id } = match.params;
-    if (prevProps.match.params.id !== id) {
-      if (id) {
-        fetchIngest({ id });
-      } else {
-        clearIngest();
-      }
-    }
-  }
-
-  render() {
-    const { ingestLoading } = this.props;
-
-    if (ingestLoading) {
-      return (
-        <>
-          <Dimmer active={ingestLoading} inverted>
-            <Loader size="massive" inverted />
-          </Dimmer>
-          <Loading />;
-        </>
-      );
+      dispatch(fetchIngest({ id }));
     } else {
-      return null;
+      dispatch(clearIngest());
     }
-  }
-}
 
-const mapStateToProps = ({ ingestLoading }) => ({ ingestLoading });
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { clearIngest, fetchIngest })
-)(IngestLoader);
+    return () => {
+      dispatch(clearIngest());
+    };
+  }, [id, dispatch]);
+  return ingestLoading ? <Loading /> : null;
+}

package/src/ingests/components/IngestRoutes.js

@@ -1,12 +1,11 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Route, Switch } from "react-router-dom";
+import { Routes, Route } from "react-router";
 import { Segment, Grid } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { Comments, CommentsLoader } from "@truedat/core/components";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import {
   INGEST,
   INGEST_ARCHIVE,
@@ -39,242 +38,284 @@ import IngestSummary from "./IngestSummary";
 import Ingests from "./Ingests";
 import IngestsLoader from "./IngestsLoader";
 
-const EventsLoader = React.lazy(() =>
-  import("@truedat/audit/components/EventsLoader")
+const EventsLoader = React.lazy(
+  () => import("@truedat/audit/components/EventsLoader")
 );
-const RelationTagsLoader = React.lazy(() =>
-  import("@truedat/lm/components/RelationTagsLoader")
+const RelationTagsLoader = React.lazy(
+  () => import("@truedat/lm/components/RelationTagsLoader")
 );
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
+const TemplatesLoader = React.lazy(
+  () => import("@truedat/core/components/TemplatesLoader")
 );
 
 const IngestRoutes = ({ ingestLoaded, ingest_id, templatesLoaded }) => {
-  const authorized = useAuthorized("ingests");
   return (
-    <Route
-      path={INGESTS}
-      render={() =>
-        authorized ? (
-          <>
-            <Route
-              exact
-              path={INGESTS}
-              component={() => (
-                <IngestsLoader defaultFilters={{ status: ["published"] }} />
-              )}
+    <Routes>
+      <Route
+        path={INGESTS}
+        element={
+          <ProtectedRoute authorization="ingests">
+            <Loader
+              loaders={
+                <>
+                  <IngestsLoader defaultFilters={{ status: ["published"] }} />
+                  <IngestFiltersLoader />
+                </>
+              }
             />
-            <Route path={INGESTS} component={IngestFiltersLoader} />
-            <Route exact path={INGESTS} component={Ingests} />
-            <Switch>
-              <Route
-                exact
-                path={INGESTS_PENDING}
-                render={() => (
-                  <>
-                    <IngestsLoader
-                      defaultFilters={{
-                        status: ["draft", "pending_approval", "rejected"],
-                      }}
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Ingests />} />
+
+        <Route
+          path={INGESTS_PENDING}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestsLoader
+                    defaultFilters={{
+                      status: ["draft", "pending_approval", "rejected"],
+                    }}
+                  />
+                  <IngestFiltersLoader />
+                </>
+              }
+            />
+          }
+        >
+          <Route index element={<Ingests />} />
+        </Route>
+
+        <Route
+          path={INGESTS_NEW}
+          element={
+            <Loader loaders={<IngestsLoader />}>
+              <IngestCrumbs ingestAction="ingests.actions.create" />
+              <IngestForm />
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                  {ingestLoaded && (
+                    <CommentsLoader
+                      resource_id={ingest_id}
+                      resource_type="ingest"
+                    />
+                  )}
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <IngestDetails />}
+                  </Segment>
+                  <Segment>{ingestLoaded && <Comments />}</Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && (
+                    <>
+                      <IngestSummary />
+                      <IngestCompleteness />
+                    </>
+                  )}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_EXECUTIONS}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                  <IngestExecutionsLoader />
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <IngestExecutions />}
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && <IngestSummary />}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_ARCHIVE}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                  <IngestArchiveLoader />
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <IngestArchive />}
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && <IngestSummary />}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_EVENTS}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                  <IngestArchiveLoader />
+                  {ingestLoaded && (
+                    <EventsLoader
+                      resource_id={ingest_id}
+                      resource_type="ingest"
                     />
-                    <IngestFiltersLoader />
-                    <Ingests />
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGESTS_NEW}
-                render={() => (
-                  <>
-                    <IngestCrumbs ingestAction="ingests.actions.create" />
-                    <IngestsLoader />
-                    <IngestForm />
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <IngestDetails />}
-                          {ingestLoaded && (
-                            <CommentsLoader
-                              resource_id={ingest_id}
-                              resource_type="ingest"
-                            />
-                          )}
-                        </Segment>
-                        <Segment>{ingestLoaded && <Comments />}</Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && (
-                          <>
-                            <IngestSummary />
-                            <IngestCompleteness />
-                          </>
-                        )}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST_EXECUTIONS}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          <IngestExecutionsLoader />
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <IngestExecutions />}
-                        </Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && <IngestSummary />}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST_ARCHIVE}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          <IngestArchiveLoader />
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <IngestArchive />}
-                        </Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && <IngestSummary />}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST_EVENTS}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          <IngestArchiveLoader />
-                          {ingestLoaded && (
-                            <EventsLoader
-                              resource_id={ingest_id}
-                              resource_type="ingest"
-                            />
-                          )}
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <Events />}
-                        </Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && <IngestSummary />}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                path={INGEST_RELATIONS_STRUCTURES}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <IngestRelationsRoutes />}
-                        </Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && <IngestSummary />}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                path={INGEST_RELATIONS_INGESTS}
-                render={() => (
-                  <>
-                    <IngestCrumbs />
-                    <Grid columns="equal" style={{ marginTop: 0 }}>
-                      <Grid.Column width={12}>
-                        <Segment>
-                          <IngestLoader />
-                          <RelationTagsLoader />
-                          {ingestLoaded && <Ingest />}
-                          {ingestLoaded && <IngestRelationsRoutes />}
-                        </Segment>
-                      </Grid.Column>
-                      <Grid.Column width={4}>
-                        {ingestLoaded && <IngestSummary />}
-                      </Grid.Column>
-                    </Grid>
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST_EDIT}
-                render={() => (
-                  <>
-                    <IngestCrumbs ingestAction="ingests.actions.edit" />
-                    <TemplatesLoader scope="ie" />
-                    <IngestLoader />
-                    {ingestLoaded && templatesLoaded && <IngestEdit />}
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={INGEST_DUPLICATE}
-                render={() => (
-                  <>
-                    <IngestCrumbs ingestAction="ingests.actions.duplicate" />
-                    <TemplatesLoader scope="ie" />
-                    <IngestLoader />
-                    {ingestLoaded && templatesLoaded && <IngestDuplicate />}
-                  </>
-                )}
-              />
-            </Switch>
-          </>
-        ) : (
-          <Unauthorized />
-        )
-      }
-    />
+                  )}
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <Events />}
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && <IngestSummary />}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_RELATIONS_STRUCTURES}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <IngestRelationsRoutes />}
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && <IngestSummary />}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_RELATIONS_INGESTS}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <IngestLoader />
+                  <RelationTagsLoader />
+                </>
+              }
+            >
+              <IngestCrumbs />
+              <Grid columns="equal" style={{ marginTop: 0 }}>
+                <Grid.Column width={12}>
+                  <Segment>
+                    {ingestLoaded && <Ingest />}
+                    {ingestLoaded && <IngestRelationsRoutes />}
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column width={4}>
+                  {ingestLoaded && <IngestSummary />}
+                </Grid.Column>
+              </Grid>
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_EDIT}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <TemplatesLoader scope="ie" />
+                  <IngestLoader />
+                </>
+              }
+            >
+              <IngestCrumbs ingestAction="ingests.actions.edit" />
+              {ingestLoaded && templatesLoaded && <IngestEdit />}
+            </Loader>
+          }
+        />
+
+        <Route
+          path={INGEST_DUPLICATE}
+          element={
+            <Loader
+              loaders={
+                <>
+                  <TemplatesLoader scope="ie" />
+                  <IngestLoader />
+                </>
+              }
+            >
+              <IngestCrumbs ingestAction="ingests.actions.duplicate" />
+              {ingestLoaded && templatesLoaded && <IngestDuplicate />}
+            </Loader>
+          }
+        />
+      </Route>
+    </Routes>
   );
 };
 

package/src/ingests/components/IngestRow.js

@@ -1,15 +1,14 @@
-import React from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 
 export const IngestRow = ({ ingest, columns }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { id } = ingest;
   return (
-    <Table.Row key={id} onClick={() => history.push(linkTo.INGEST({ id }))}>
+    <Table.Row key={id} onClick={() => navigate(linkTo.INGEST({ id }))}>
       {columns &&
         columns.map((column, key) => {
           return (
@@ -22,7 +21,7 @@ export const IngestRow = ({ ingest, columns }) => {
 
 IngestRow.propTypes = {
   ingest: PropTypes.object,
-  columns: PropTypes.array
+  columns: PropTypes.array,
 };
 
 export default IngestRow;

package/src/ingests/components/IngestSelectedFilters.js

@@ -1,20 +1,20 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import { INGESTS, INGESTS_PENDING } from "@truedat/core/routes";
+import { Loader } from "@truedat/core/router";
 import IngestSelectedFiltersDefault from "./IngestSelectedFiltersDefault";
 import IngestSelectedFiltersPending from "./IngestSelectedFiltersPending";
 import IngestSelectedFiltersPublished from "./IngestSelectedFiltersPublished";
 
 export const IngestSelectedFilters = () => (
-  <Switch>
-    <Route exact path={INGESTS} component={IngestSelectedFiltersPublished} />
+  <Routes>
     <Route
-      exact
-      path={INGESTS_PENDING}
-      component={IngestSelectedFiltersPending}
-    />
-    <Route component={IngestSelectedFiltersDefault} />
-  </Switch>
+      path={INGESTS}
+      element={<Loader loaders={<IngestSelectedFiltersDefault />} />}
+    >
+      <Route index element={<IngestSelectedFiltersPublished />} />
+      <Route path="pending" element={<IngestSelectedFiltersPending />} />
+    </Route>
+  </Routes>
 );
 
 export default IngestSelectedFilters;