@truedat/auth 8.14.1 → 8.14.3

package/src/users/components/AdminUserRoutes.js

@@ -15,8 +15,6 @@ import {
   USERS_NEW,
   USER_EDIT_PASSWORD,
 } from "@truedat/core/routes";
-import GroupsLoader from "../../groups/components/GroupsLoader";
-import GroupLoader from "../../groups/components/GroupLoader";
 import Group from "../../groups/components/Group";
 import GroupUsers from "../../groups/components/GroupUsers";
 import NewGroup from "../../groups/components/NewGroup";
@@ -30,13 +28,6 @@ import UsersAndGroups from "./UsersAndGroups";
 import UsersLoader from "./UsersLoader";
 import UserPassword from "./UserPassword";
 
-const UsersGroupsLoader = () => (
-  <>
-    <UsersLoader />
-    <GroupsLoader />
-  </>
-);
-
 const UserRoutes = () => (
   <Routes>
     <Route index element={<UsersAndGroups />} />
@@ -56,7 +47,6 @@ const GroupRoutes = () => (
       path={GROUP_EDIT}
       element={
         <>
-          <GroupLoader />
           <EditGroup />
         </>
       }
@@ -67,7 +57,6 @@ const GroupRoutes = () => (
         <>
           <GroupUserCrumbs action="show" />
           <Segment>
-            <GroupLoader />
             <Group />
             <Divider />
             <GroupUsers />
@@ -82,12 +71,10 @@ const GroupRoutes = () => (
 
 export const AdminUserRoutes = () => {
   const authorized = useAuthorized();
-  const groupsActive = useActiveRoute(GROUPS);
   const usersActive = useActiveRoute(USERS);
-  const active = groupsActive || usersActive;
   return (
     <>
-      {authorized && active && <UsersGroupsLoader />}
+      {authorized && usersActive && <UsersLoader />}
       <Routes>
         <Route
           path={USERS}

package/src/users/components/GroupUserCrumbs.js

@@ -1,12 +1,14 @@
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { Link } from "react-router";
+import { Link, useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { GROUPS, linkTo } from "@truedat/core/routes";
+import { useGroup } from "../../groups/hooks/useGroups";
 
-export const GroupUserCrumbs = ({ group, groupLoading, action }) => {
-  if (groupLoading) return null;
+export const GroupUserCrumbs = ({ action }) => {
+  const { id } = useParams();
+  const { group, loading } = useGroup(id);
+  if (loading || !group) return null;
   return group.name ? (
     <Breadcrumb>
       <Breadcrumb.Section as={Link} to={GROUPS} active={false}>
@@ -37,14 +39,7 @@ export const GroupUserCrumbs = ({ group, groupLoading, action }) => {
 };
 
 GroupUserCrumbs.propTypes = {
-  group: PropTypes.object,
-  groupLoading: PropTypes.bool,
   action: PropTypes.string,
 };
 
-const mapStateToProps = ({ group, groupLoading }) => ({
-  group,
-  groupLoading,
-});
-
-export default connect(mapStateToProps)(GroupUserCrumbs);
+export default GroupUserCrumbs;

package/src/users/components/UserRoutes.js

@@ -1,16 +1,9 @@
-import { Routes, Route } from "react-router";
+import { Routes, Route, Outlet } from "react-router";
 import { ProtectedRoute, Loader } from "@truedat/core/router";
-import { Divider, Segment } from "semantic-ui-react";
+import GroupRouteModal from "../../groups/components/GroupRouteModal";
 
-import GroupsLoader from "../../groups/components/GroupsLoader";
-import GroupLoader from "../../groups/components/GroupLoader";
-import Group from "../../groups/components/Group";
-import GroupUsers from "../../groups/components/GroupUsers";
-import NewGroup from "../../groups/components/NewGroup";
-import EditGroup from "../../groups/components/EditGroup";
 import Password from "./Password";
 import EditUser from "./EditUser";
-import GroupUserCrumbs from "./GroupUserCrumbs";
 import NewUser from "./NewUser";
 import User from "./User";
 import UserLoader from "./UserLoader";
@@ -18,20 +11,13 @@ import UsersAndGroups from "./UsersAndGroups";
 import UsersLoader from "./UsersLoader";
 import UserPassword from "./UserPassword";
 
-const UsersGroupsLoader = () => (
-  <>
-    <UsersLoader />
-    <GroupsLoader />
-  </>
-);
-
 export const UserRoutes = () => (
   <Routes>
     <Route
       path={"users"}
       element={
         <ProtectedRoute>
-          <Loader loaders={<UsersGroupsLoader />} />
+          <Loader loaders={<UsersLoader />} />
         </ProtectedRoute>
       }
     >
@@ -48,28 +34,19 @@ export const UserRoutes = () => (
       path={"groups"}
       element={
         <ProtectedRoute>
-          <Loader loaders={<UsersGroupsLoader />} />
+          <>
+            <UsersAndGroups />
+            <Outlet />
+          </>
         </ProtectedRoute>
       }
     >
-      <Route index element={<UsersAndGroups />} />
-      <Route path={"new"} element={<NewGroup />} />
+      <Route index element={null} />
+      <Route path={"new"} element={<GroupRouteModal mode="new" />} />
 
-      <Route path={":id"} element={<Loader loaders={<GroupLoader />} />}>
-        <Route
-          index
-          element={
-            <>
-              <GroupUserCrumbs action="show" />
-              <Segment>
-                <Group />
-                <Divider />
-                <GroupUsers />
-              </Segment>
-            </>
-          }
-        />
-        <Route path={"edit"} element={<EditGroup />} />
+      <Route path={":id"}>
+        <Route index element={<GroupRouteModal mode="info" />} />
+        <Route path={"edit"} element={<GroupRouteModal mode="edit" />} />
       </Route>
     </Route>
     <Route path={"password"} element={<Password />} />

package/src/users/components/UsersAndGroups.js

@@ -1,10 +1,9 @@
-import { connect } from "react-redux";
 import { Route, Routes } from "react-router";
 import { Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { usePath } from "@truedat/core/hooks";
 import { GROUPS, USERS } from "@truedat/core/routes";
-import GroupCards from "../../groups/components/GroupCards";
+import { GroupsList } from "../../groups/components/GroupCards";
 import UserCards from "./UserCards";
 import UserTabs from "./UserTabs";
 
@@ -32,12 +31,10 @@ export const UsersAndGroups = () => {
       <UserTabs />
       <Segment attached="bottom">
         {path === USERS && <UserCards />}
-        {path === GROUPS && <GroupCards />}
+        {(path === GROUPS || path.startsWith(`${GROUPS}/`)) && <GroupsList />}
       </Segment>
     </Segment>
   );
 };
 
-const mapStateToProps = ({ usersLoading }) => ({ usersLoading });
-
-export default connect(mapStateToProps)(UsersAndGroups);
+export default UsersAndGroups;

package/src/users/components/__tests__/GroupUserCrumbs.spec.js

@@ -1,6 +1,9 @@
 import { render } from "@truedat/test/render";
+import { useGroup } from "../../../groups/hooks/useGroups";
 import { GroupUserCrumbs } from "../GroupUserCrumbs";
 
+jest.mock("../../../groups/hooks/useGroups", () => ({ useGroup: jest.fn() }));
+
 describe("<GroupUserCrumbs />", () => {
   const group = {
     id: "1",
@@ -8,51 +11,46 @@ describe("<GroupUserCrumbs />", () => {
     alias: "Admins",
   };
 
+  beforeEach(() => {
+    useGroup.mockReturnValue({ group, loading: false });
+  });
+
   it("renders alias when action is show", () => {
-    const rendered = render(
-      <GroupUserCrumbs group={group} action="show" groupLoading={false} />,
-    );
+    const rendered = render(<GroupUserCrumbs action="show" />);
 
     expect(rendered.getByText("Admins")).toBeInTheDocument();
     expect(rendered.queryByText("administrators")).not.toBeInTheDocument();
   });
 
   it("renders alias link when action is add", () => {
-    const rendered = render(
-      <GroupUserCrumbs group={group} action="add" groupLoading={false} />,
-    );
+    const rendered = render(<GroupUserCrumbs action="add" />);
 
     expect(rendered.getByRole("link", { name: /Admins/i })).toBeInTheDocument();
   });
 
   it("renders nothing while group is loading", () => {
-    const rendered = render(
-      <GroupUserCrumbs group={group} action="show" groupLoading />,
-    );
+    useGroup.mockReturnValue({ group, loading: true });
+    const rendered = render(<GroupUserCrumbs action="show" />);
 
     expect(rendered.container).toBeEmptyDOMElement();
   });
 
   it("renders nothing when group has no name", () => {
-    const rendered = render(
-      <GroupUserCrumbs
-        group={{ id: "1", name: "", alias: "Admins" }}
-        action="show"
-        groupLoading={false}
-      />,
-    );
+    useGroup.mockReturnValue({
+      group: { id: "1", name: "", alias: "Admins" },
+      loading: false,
+    });
+    const rendered = render(<GroupUserCrumbs action="show" />);
 
     expect(rendered.container).toBeEmptyDOMElement();
   });
 
   it("renders group name when alias is missing", () => {
-    const rendered = render(
-      <GroupUserCrumbs
-        group={{ id: "1", name: "administrators" }}
-        action="add"
-        groupLoading={false}
-      />,
-    );
+    useGroup.mockReturnValue({
+      group: { id: "1", name: "administrators" },
+      loading: false,
+    });
+    const rendered = render(<GroupUserCrumbs action="add" />);
 
     expect(
       rendered.getByRole("link", { name: /administrators/i }),
@@ -60,13 +58,11 @@ describe("<GroupUserCrumbs />", () => {
   });
 
   it("renders group name on show when alias is missing", () => {
-    const rendered = render(
-      <GroupUserCrumbs
-        group={{ id: "1", name: "administrators" }}
-        action="show"
-        groupLoading={false}
-      />,
-    );
+    useGroup.mockReturnValue({
+      group: { id: "1", name: "administrators" },
+      loading: false,
+    });
+    const rendered = render(<GroupUserCrumbs action="show" />);
 
     expect(rendered.getByText(/administrators/i)).toBeInTheDocument();
   });

package/src/users/components/__tests__/UserRoutes.spec.js

@@ -14,14 +14,12 @@ jest.mock("@truedat/core/hooks/useAuthorized", () => ({
   useAuthorized: jest.fn(() => true),
 }));
 
+jest.mock("../../../groups/components/GroupRouteModal", () => ({ mode }) => (
+  <div>GroupRouteModal:{mode}</div>
+));
+
 // Mock all components used in UserRoutes
 jest.mock("../Password", () => () => <div>Password</div>);
-jest.mock("../../../groups/components/GroupsLoader", () => () => (
-  <div>GroupsLoader</div>
-));
-jest.mock("../../../groups/components/GroupLoader", () => () => (
-  <div>GroupLoader</div>
-));
 jest.mock("../../../groups/components/Group", () => () => <div>Group</div>);
 jest.mock("../../../groups/components/GroupUsers", () => () => (
   <div>GroupUsers</div>

package/src/users/components/__tests__/UsersAndGroups.spec.js

@@ -17,13 +17,11 @@ jest.mock(
       return <div>UserTabs</div>;
     },
 );
-jest.mock(
-  "../../../groups/components/GroupCards",
-  () =>
-    function GroupCards() {
-      return <div>GroupCards</div>;
-    },
-);
+jest.mock("../../../groups/components/GroupCards", () => ({
+  GroupsList() {
+    return <div>GroupCards</div>;
+  },
+}));
 
 describe("<UsersAndGroups />", () => {
   it("renders correctly with default route", async () => {

package/src/users/components/__tests__/__snapshots__/UserRoutes.spec.js.snap

@@ -12,12 +12,6 @@ exports[`<UserRoutes /> renders correctly with default route 1`] = `<div />`;
 
 exports[`<UserRoutes /> renders correctly with groups route 1`] = `
 <div>
-  <div>
-    UsersLoader
-  </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     UsersAndGroups
   </div>
@@ -27,29 +21,11 @@ exports[`<UserRoutes /> renders correctly with groups route 1`] = `
 exports[`<UserRoutes /> renders correctly with groups/:id route 1`] = `
 <div>
   <div>
-    UsersLoader
-  </div>
-  <div>
-    GroupsLoader
-  </div>
-  <div>
-    GroupLoader
+    UsersAndGroups
   </div>
   <div>
-    GroupUserCrumbs
-  </div>
-  <div
-    class="ui segment"
-  >
-    <div>
-      Group
-    </div>
-    <div
-      class="ui divider"
-    />
-    <div>
-      GroupUsers
-    </div>
+    GroupRouteModal:
+    info
   </div>
 </div>
 `;
@@ -57,16 +33,11 @@ exports[`<UserRoutes /> renders correctly with groups/:id route 1`] = `
 exports[`<UserRoutes /> renders correctly with groups/:id/edit route 1`] = `
 <div>
   <div>
-    UsersLoader
-  </div>
-  <div>
-    GroupsLoader
-  </div>
-  <div>
-    GroupLoader
+    UsersAndGroups
   </div>
   <div>
-    EditGroup
+    GroupRouteModal:
+    edit
   </div>
 </div>
 `;
@@ -74,13 +45,11 @@ exports[`<UserRoutes /> renders correctly with groups/:id/edit route 1`] = `
 exports[`<UserRoutes /> renders correctly with groups/new route 1`] = `
 <div>
   <div>
-    UsersLoader
-  </div>
-  <div>
-    GroupsLoader
+    UsersAndGroups
   </div>
   <div>
-    NewGroup
+    GroupRouteModal:
+    new
   </div>
 </div>
 `;
@@ -90,9 +59,6 @@ exports[`<UserRoutes /> renders correctly with users route 1`] = `
   <div>
     UsersLoader
   </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     UsersAndGroups
   </div>
@@ -104,9 +70,6 @@ exports[`<UserRoutes /> renders correctly with users/:id route 1`] = `
   <div>
     UsersLoader
   </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     UserLoader
   </div>
@@ -121,9 +84,6 @@ exports[`<UserRoutes /> renders correctly with users/:id/edit route 1`] = `
   <div>
     UsersLoader
   </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     UserLoader
   </div>
@@ -138,9 +98,6 @@ exports[`<UserRoutes /> renders correctly with users/:id/password route 1`] = `
   <div>
     UsersLoader
   </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     UserLoader
   </div>
@@ -155,9 +112,6 @@ exports[`<UserRoutes /> renders correctly with users/new route 1`] = `
   <div>
     UsersLoader
   </div>
-  <div>
-    GroupsLoader
-  </div>
   <div>
     NewUser
   </div>

package/src/groups/components/GroupLoader.js

@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-import { useParams } from "react-router";
-import { useDispatch, useSelector } from "react-redux";
-import Loading from "@truedat/core/components/Loading";
-import { clearGroup, fetchGroup } from "../routines";
-
-const GroupLoader = () => {
-  const dispatch = useDispatch();
-  const groupLoading = useSelector((state) => state.groupLoading);
-  const { id } = useParams();
-
-  useEffect(() => {
-    if (id) {
-      dispatch(fetchGroup({ id }));
-    } else {
-      dispatch(clearGroup());
-    }
-
-    return () => {
-      dispatch(clearGroup());
-    };
-  }, [dispatch, id]);
-
-  return groupLoading ? <Loading /> : null;
-};
-
-export default GroupLoader;

package/src/groups/components/GroupsLoader.js

@@ -1,30 +0,0 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import Loading from "@truedat/core/components/Loading";
-import { fetchGroups } from "../routines";
-
-class GroupsLoader extends Component {
-  static propTypes = {
-    fetchGroups: PropTypes.func,
-    groupsLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { fetchGroups } = this.props;
-    fetchGroups();
-  }
-
-  render() {
-    const { groupsLoading } = this.props;
-    if (groupsLoading) {
-      return <Loading />;
-    } else {
-      return null;
-    }
-  }
-}
-
-const mapStateToProps = ({ groupsLoading }) => ({ groupsLoading });
-
-export default connect(mapStateToProps, { fetchGroups })(GroupsLoader);

package/src/groups/components/__tests__/GroupLoader.spec.js

@@ -1,71 +0,0 @@
-import { render, waitForLoad } from "@truedat/test/render";
-import { useParams } from "react-router";
-import { clearGroup, fetchGroup } from "../../routines";
-import GroupLoader from "../GroupLoader";
-
-jest.mock("react-router", () => ({
-  ...jest.requireActual("react-router"),
-  useParams: jest.fn(),
-}));
-
-describe("GroupLoader", () => {
-  const renderOpts = {
-    dispatch: jest.fn(),
-    state: {
-      groupLoading: false,
-    },
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    useParams.mockReturnValue({});
-  });
-
-  it("renders nothing when not loading", async () => {
-    const rendered = render(<GroupLoader />, renderOpts);
-    await waitForLoad(rendered);
-
-    expect(rendered.container).toMatchSnapshot();
-    expect(rendered.queryByTestId("loading")).not.toBeInTheDocument();
-  });
-
-  it("renders loading component when loading", async () => {
-    const loadingRenderOpts = {
-      ...renderOpts,
-      state: {
-        groupLoading: true,
-      },
-    };
-
-    const rendered = render(<GroupLoader />, loadingRenderOpts);
-
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("dispatches fetchGroup when id is present", async () => {
-    useParams.mockReturnValue({ id: "123" });
-
-    const rendered = render(<GroupLoader />, renderOpts);
-    await waitForLoad(rendered);
-
-    expect(renderOpts.dispatch).toHaveBeenCalledWith(fetchGroup({ id: "123" }));
-  });
-
-  it("dispatches clearGroup when id is not present", async () => {
-    useParams.mockReturnValue({});
-
-    const rendered = render(<GroupLoader />, renderOpts);
-    await waitForLoad(rendered);
-
-    expect(renderOpts.dispatch).toHaveBeenCalledWith(clearGroup());
-  });
-
-  it("dispatches clearGroup on unmount", async () => {
-    const rendered = render(<GroupLoader />, renderOpts);
-    await waitForLoad(rendered);
-
-    rendered.unmount();
-
-    expect(renderOpts.dispatch).toHaveBeenCalledWith(clearGroup());
-  });
-});

package/src/groups/components/__tests__/__snapshots__/GroupLoader.spec.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GroupLoader renders loading component when loading 1`] = `
-<div>
-  <div
-    class="ui active loader"
-  />
-</div>
-`;
-
-exports[`GroupLoader renders nothing when not loading 1`] = `<div />`;

package/src/groups/reducers/__tests__/groupRedirect.spec.js

@@ -1,51 +0,0 @@
-import { clearRedirect } from "@truedat/core/routines";
-import {
-  createGroup,
-  deleteGroup,
-  deleteGroupUser,
-  updateGroup,
-} from "../../routines";
-import { groupRedirect } from "..";
-
-describe("reducers: groupRedirect", () => {
-  const payload = {};
-  const initialState = "";
-
-  it("should provide the initial state", () => {
-    expect(groupRedirect(undefined, {})).toEqual("");
-  });
-
-  it("should handle the clearRedirect.TRIGGER action", () => {
-    expect(groupRedirect("foo", { type: clearRedirect.TRIGGER })).toEqual(
-      initialState,
-    );
-  });
-
-  it("should handle the createGroup.SUCCESS action", () => {
-    expect(groupRedirect("foo", { type: createGroup.SUCCESS })).toEqual(
-      "/groups",
-    );
-  });
-
-  it("should handle the deleteGroup.SUCCESS action", () => {
-    expect(groupRedirect("foo", { type: deleteGroup.SUCCESS })).toEqual(
-      "/groups",
-    );
-  });
-
-  it("should handle the updateGroup.SUCCESS action", () => {
-    expect(groupRedirect("foo", { type: updateGroup.SUCCESS })).toEqual(
-      "/groups",
-    );
-  });
-
-  it("should ignore deleteGroupUser.SUCCESS action", () => {
-    expect(groupRedirect("foo", { type: deleteGroupUser.SUCCESS })).toEqual(
-      "foo",
-    );
-  });
-
-  it("should ignore unknown actions", () => {
-    expect(groupRedirect("foo", { type: "bar", payload })).toEqual("foo");
-  });
-});