@truedat/dd 6.10.1 → 6.10.2

package/src/components/GrantRequestsTable.js

@@ -1,11 +1,10 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
-import { sortGrantRequests } from "../routines";
 import { getGrantRequestsSearchColumns } from "../selectors";
 import { GrantRequestRow } from "./GrantRequestRow";
 
@@ -14,29 +13,19 @@ export const GrantRequestsTable = ({
   checkedAll,
   checkRow,
   isRowChecked,
-  grantRequests,
-  grantRequestsSearchLoading,
   columns,
-  grantRequestsSort,
-  sortGrantRequests,
-  roleSelected,
-  canApprove,
+  approveView,
 }) => {
   const { formatMessage } = useIntl();
+  const {
+    searchData,
+    loading,
+    sortColumn,
+    sortDirection,
+    handleSortSelection,
+  } = useSearchContext();
 
-  const [sortedColumn, setColumn] = useState(
-    _.prop("column")(getSortInfo(grantRequestsSort))
-  );
-  const [direction, setDirection] = useState(
-    _.prop("direction")(getSortInfo(grantRequestsSort))
-  );
-
-  useEffect(() => {
-    const { column: sortedColumn, direction: direction } =
-      getSortInfo(grantRequestsSort);
-    setColumn(sortedColumn);
-    setDirection(direction);
-  }, [grantRequestsSort]);
+  const grantRequests = _.propOr([], "data")(searchData);
 
   return (
     <>
@@ -44,7 +33,7 @@ export const GrantRequestsTable = ({
         <Table sortable selectable>
           <Table.Header>
             <Table.Row>
-              {roleSelected && canApprove ? (
+              {approveView ? (
                 <Table.HeaderCell textAlign="center">
                   <Checkbox
                     id="selectGrantRequest"
@@ -62,21 +51,14 @@ export const GrantRequestsTable = ({
                     defaultMessage: column.name,
                   })}
                   sorted={
-                    _.path("sort.name")(column) === sortedColumn
-                      ? direction
+                    _.path("sort.name")(column) === sortColumn
+                      ? sortDirection
                       : null
                   }
                   className={_.path("sort.name")(column) ? "" : "disabled"}
-                  onClick={() => {
-                    sortColumn(
-                      column,
-                      sortGrantRequests,
-                      setDirection,
-                      setColumn,
-                      direction,
-                      sortedColumn
-                    );
-                  }}
+                  onClick={() =>
+                    handleSortSelection(_.path("sort.name")(column))
+                  }
                 />
               ))}
             </Table.Row>
@@ -84,19 +66,18 @@ export const GrantRequestsTable = ({
           <Table.Body>
             {grantRequests.map((gr, key) => (
               <GrantRequestRow
-                roleSelected={roleSelected}
                 key={key}
                 checked={isRowChecked && isRowChecked(gr)}
                 grantRequest={gr}
                 columns={columns}
-                canApprove={canApprove}
-                onChange={() => checkRow && checkRow(gr)}
+                approveView={approveView}
+                onCheckboxChange={() => checkRow && checkRow(gr)}
               />
             ))}
           </Table.Body>
         </Table>
       ) : null}
-      {_.isEmpty(grantRequests) && !grantRequestsSearchLoading ? (
+      {_.isEmpty(grantRequests) && !loading ? (
         <Header as="h4">
           <Icon name="search" />
           <Header.Content>
@@ -110,25 +91,15 @@ export const GrantRequestsTable = ({
 
 GrantRequestsTable.propTypes = {
   columns: PropTypes.array,
-  grantRequests: PropTypes.array,
-  grantRequestsSort: PropTypes.array,
-  roleSelected: PropTypes.string,
-  canApprove: PropTypes.bool,
+  approveView: PropTypes.bool,
   checkedAll: PropTypes.bool,
-  grantRequestsSearchLoading: PropTypes.bool,
   addAll: PropTypes.func,
   checkRow: PropTypes.func,
   isRowChecked: PropTypes.func,
-  sortGrantRequests: PropTypes.func,
 };
 
 const mapStateToProps = (state) => ({
   columns: getGrantRequestsSearchColumns(state),
-  grantRequests: state.grantRequestsSearch,
-  grantRequestsSearchLoading: state.grantRequestsSearchLoading,
-  grantRequestsSort: _.path("grantRequestSearchQuery.sort")(state),
 });
 
-export default connect(mapStateToProps, { sortGrantRequests })(
-  GrantRequestsTable
-);
+export default connect(mapStateToProps)(GrantRequestsTable);

package/src/components/GrantRoutes.js

@@ -19,6 +19,14 @@ import {
   MY_GRANTS,
   STRUCTURES_GRANT_REQUEST,
 } from "@truedat/core/routes";
+
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+
+import {
+  useGrantRequestsSearch,
+  useGrantRequestsFilters,
+} from "../hooks/useGrantRequest";
+
 import GrantView from "./Grant";
 import GrantApprovalRule from "./GrantApprovalRule";
 import GrantApprovalRuleEdit from "./GrantApprovalRuleEdit";
@@ -30,13 +38,11 @@ import GrantRequestLoader from "./GrantRequestLoader";
 import GrantRequestsLoader from "./GrantRequestsLoader";
 import GrantRequestsSearchResults from "./GrantRequestsSearchResults";
 import GrantRequestApprovalResults from "./GrantRequestApprovalResults";
-import GrantRequestsSearchLoader from "./GrantRequestsSearchLoader";
 import Grants from "./Grants";
 import GrantsLoader from "./GrantsLoader";
 import MyGrantRequests from "./MyGrantRequests";
 import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
 import StructuresGrantRequestView from "./StructuresGrantRequestView";
-import GrantRequestsFiltersLoader from "./GrantRequestsFiltersLoader";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
@@ -47,12 +53,17 @@ const GrantRequestGroup = () => {
   const defaultFilters = {
     group_id: [id],
   };
+  const searchProps = {
+    initialSortColumn: "inserted_at",
+    initialSortDirection: "ascending",
+    useSearch: useGrantRequestsSearch,
+    useFilters: useGrantRequestsFilters,
+    pageSize: 20,
+  };
   return (
-    <>
-      <GrantRequestsSearchLoader defaultFilters={defaultFilters} />
-      <GrantRequestsFiltersLoader defaultFilters={defaultFilters} />
-      <GrantRequestsSearchResults defaultFilters={defaultFilters} />
-    </>
+    <SearchContextProvider {...searchProps} defaultFilters={defaultFilters}>
+      <GrantRequestsSearchResults />
+    </SearchContextProvider>
   );
 };
 
@@ -151,20 +162,22 @@ export const GrantRoutes = ({ grantRequestLoaded }) => {
                 path={GRANT_REQUESTS}
                 render={() => {
                   const defaultFilters = {};
-                  return (
-                    <>
-                      <GrantRequestsSearchLoader
-                        defaultFilters={defaultFilters}
-                      />
 
-                      <GrantRequestsFiltersLoader
-                        defaultFilters={defaultFilters}
-                      />
+                  const searchProps = {
+                    initialSortColumn: "inserted_at",
+                    initialSortDirection: "ascending",
+                    useSearch: useGrantRequestsSearch,
+                    useFilters: useGrantRequestsFilters,
+                    pageSize: 20,
+                  };
 
-                      <GrantRequestsSearchResults
-                        defaultFilters={defaultFilters}
-                      />
-                    </>
+                  return (
+                    <SearchContextProvider
+                      {...searchProps}
+                      defaultFilters={defaultFilters}
+                    >
+                      <GrantRequestsSearchResults />
+                    </SearchContextProvider>
                   );
                 }}
               />

package/src/components/__tests__/GrantRequestBulkActions.spec.js

@@ -1,12 +1,63 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
 import GrantRequestBulkActions from "../GrantRequestBulkActions";
+// import { useGrantRequestBulkApproval } from "@truedat/dd/hooks/useGrantRequest";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+jest.mock("@truedat/dd/hooks/useGrantRequest", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/dd/hooks/useGrantRequest"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useGrantRequestBulkApproval: jest.fn(() => ({
+      trigger: jest.fn(() => ({
+        then: (callback) =>
+          callback({
+            data: { data: { id: 1 } },
+          }),
+      })),
+    })),
+  };
+});
 
 describe("<GrantRequestBulkActions />", () => {
   const cleanSelectedGrantRequests = jest.fn();
   const props = {
     cleanSelectedGrantRequests,
-    canApprove: true,
+    selectedGrantRequests: [],
+  };
+
+  const baseSearchContext = {
+    searchData: { data: [] },
+    loading: false,
+    toggleHiddenFilterValue: jest.fn(),
+    resetFilters: jest.fn(),
+    searchMust: { foo: "bar" },
+    cleanQuery: jest.fn(),
+  };
+
+  const searchContextWithData = {
+    searchData: {
+      data: [{ foo: "bar" }],
+      _permissions: ["role1", "role2"],
+    },
+    loading: false,
+    toggleHiddenFilterValue: jest.fn(),
+    resetFilters: jest.fn(),
+    searchMust: { foo: "bar" },
+    cleanQuery: jest.fn(),
   };
 
   const renderOpts = {
@@ -24,22 +75,64 @@ describe("<GrantRequestBulkActions />", () => {
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <GrantRequestBulkActions {...props} />,
+      <SearchContext.Provider value={searchContextWithData}>
+        <GrantRequestBulkActions {...props} />
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
   });
 
-  it("disable acctions when canApprove is false", () => {
-    const newProps = {
-      ...props,
-      canApprove: false,
-    };
+  it("enabled actions when there are results", () => {
+    const { getByRole } = render(
+      <SearchContext.Provider value={searchContextWithData}>
+        <GrantRequestBulkActions {...props} />,
+      </SearchContext.Provider>,
+      renderOpts
+    );
+    expect(getByRole("button", { name: /approve_request/i })).toBeEnabled();
+    expect(getByRole("button", { name: /reject/i })).toBeEnabled();
+  });
+
+  it("disable actions when no results", () => {
     const { getByRole } = render(
-      <GrantRequestBulkActions {...newProps} />,
+      <SearchContext.Provider value={baseSearchContext}>
+        <GrantRequestBulkActions {...props} />,
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(getByRole("button", { name: /approve_request/i })).toBeDisabled();
     expect(getByRole("button", { name: /reject/i })).toBeDisabled();
   });
+
+  it("changing selected role, clears selection", async () => {
+    const { findByText, getByRole, getByTestId } = render(
+      <SearchContext.Provider value={searchContextWithData}>
+        <GrantRequestBulkActions {...props} />,
+      </SearchContext.Provider>,
+      renderOpts
+    );
+
+    const { toggleHiddenFilterValue, resetFilters, cleanQuery } =
+      searchContextWithData;
+
+    cleanSelectedGrantRequests.mockReset();
+    resetFilters.mockReset();
+    cleanQuery.mockReset();
+    toggleHiddenFilterValue.mockReset();
+
+    userEvent.click(await findByText(/role2/i));
+    expect(resetFilters).toHaveBeenCalledTimes(1);
+    expect(cleanSelectedGrantRequests).toHaveBeenCalledTimes(1);
+    expect(cleanQuery).toHaveBeenCalledTimes(1);
+    expect(toggleHiddenFilterValue).toHaveBeenCalledWith({
+      filter: "must_not_approved_by",
+      value: ["role2"],
+    });
+
+    userEvent.click(await findByText(/approve_request/i));
+    userEvent.type(await getByRole("textbox"), "Approve comment");
+
+    await act(async () => userEvent.click(getByTestId("approve-button-id")));
+  });
 });

package/src/components/__tests__/GrantRequestRow.spec.js

@@ -33,7 +33,7 @@ const grantRequest = {
 };
 
 describe("<GrantRequestRow />", () => {
-  const onChange = jest.fn();
+  const onCheckboxChange = jest.fn();
   const onClick = jest.fn();
 
   const props = {
@@ -42,10 +42,9 @@ describe("<GrantRequestRow />", () => {
     columns,
     disabled: false,
     onClick,
-    onChange,
+    onCheckboxChange,
     grantRequest,
-    roleSelected: "foo",
-    canApprove: true,
+    approveView: true,
   };
 
   it("matches the latest snapshot", () => {

package/src/components/__tests__/GrantRequestsLabelResults.spec.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import SearchContext from "@truedat/core/search/SearchContext";
 import GrantRequestsLabelResults from "../GrantRequestsLabelResults";
 
 describe("<GrantRequestsLabelResults />", () => {
@@ -8,36 +9,47 @@ describe("<GrantRequestsLabelResults />", () => {
       en: {
         "grantRequests.retrieved.results": "results",
         "grantRequests.bulk.selected": "selected",
+        "grantRequests.searching": "searching",
       },
     },
   };
   const props = {
-    grantRequestCount: 4,
-    grantRequestsSearchLoading: false,
-    grantRequestToExecute: 1,
+    selectedCount: 1,
+    approveView: true,
+  };
+
+  const searchContext = {
+    count: 4,
+    loading: false,
   };
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <GrantRequestsLabelResults {...props} />,
+      <SearchContext.Provider value={searchContext}>
+        <GrantRequestsLabelResults {...props} />
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
   });
 
-  it("When role is not selected", () => {
-    const newProps = { ...props, roleSelected: "foo" };
+  it("When not in approve view", () => {
+    const newProps = { ...props, approveView: false };
     const { container } = render(
-      <GrantRequestsLabelResults {...newProps} />,
+      <SearchContext.Provider value={searchContext}>
+        <GrantRequestsLabelResults {...newProps} />
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
   });
 
   it("When is loading", () => {
-    const newProps = { ...props, grantRequestsSearchLoading: true };
+    const newSearchContext = { ...searchContext, loading: true };
     const { container } = render(
-      <GrantRequestsLabelResults {...newProps} />,
+      <SearchContext.Provider value={newSearchContext}>
+        <GrantRequestsLabelResults {...props} />,
+      </SearchContext.Provider>,
       renderOpts
     );
     expect(container).toMatchSnapshot();

package/src/components/__tests__/GrantRequestsSearchResults.spec.js

@@ -1,23 +1,14 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import SearchContext from "@truedat/core/search/SearchContext";
 import GrantRequestsSearchResults from "../GrantRequestsSearchResults";
 
 describe("<GrantRequestsSearchResults />", () => {
   const grantRequests = [{ id: 1 }, { id: 2 }];
-  const toggleGrantRequestsFilterValue = jest.fn();
   const rolesPermission = ["foo", "bar"];
-  const activeFilters = { current_status: ["pending"] };
 
-  const state = {
-    grantRequests,
-    grantRequestsSearch: grantRequests,
-    rolesPermission,
-    grantRequestPermissions: rolesPermission,
-    grantRequestsActiveFilters: activeFilters,
-  };
-
-  const renderOpts = (state) => ({
+  const renderOpts = {
     messages: {
       en: {
         "grantRequestApproval.form.role.select": "select",
@@ -30,30 +21,39 @@ describe("<GrantRequestsSearchResults />", () => {
         "grantRequests.retrieved.results": "results",
         "search.applied_filters": "Filters:",
         "search.clear_filters": "Clear filters",
+        "search.placeholder": "placeholder",
+        "grantRequests.empty": "empty",
       },
     },
-    state: state,
-  });
+  };
 
-  const props = {
+  const baseSearchContext = {
+    searchData: { data: grantRequests, _permissions: rolesPermission },
     loading: false,
-    rolesPermission,
-    toggleGrantRequestsFilterValue,
-    grantRequests,
+    setOnSearchChange: jest.fn(),
+    setHiddenFilters: jest.fn(),
+    toggleHiddenFilterValue: jest.fn(),
+    resetFilters: jest.fn(),
+    searchMust: {},
+    cleanQuery: jest.fn(),
   };
 
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <GrantRequestsSearchResults {...props} />,
-      renderOpts(state)
+      <SearchContext.Provider value={baseSearchContext}>
+        <GrantRequestsSearchResults />,
+      </SearchContext.Provider>,
+      renderOpts
     );
     expect(container).toMatchSnapshot();
   });
 
   it("select a role", async () => {
     const { getByRole } = render(
-      <GrantRequestsSearchResults {...props} />,
-      renderOpts(state)
+      <SearchContext.Provider value={baseSearchContext}>
+        <GrantRequestsSearchResults />,
+      </SearchContext.Provider>,
+      renderOpts
     );
     userEvent.click(getByRole("option", { name: /foo/i }));
   });

package/src/components/__tests__/GrantRequestsTable.spec.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import SearchContext from "@truedat/core/search/SearchContext";
 import { GrantRequestsTable } from "../GrantRequestsTable";
 import { defaultGrantRequestsSearchTableColumns } from "../../selectors/getGrantRequestsSearchColumns";
 
@@ -12,25 +13,41 @@ const grantsRequests = [
 ];
 
 describe("<GrantRequestsTable />", () => {
-  const grantRequestsSort = [{ inserted_at: "asc" }];
-  const sortGrantRequests = jest.fn();
+  const renderOpts = {
+    messages: {
+      en: {
+        "grantRequest.current_status.pending": "pending",
+      },
+    },
+  };
+
+  const searchContext = {
+    searchData: {
+      data: grantsRequests,
+    },
+    loading: false,
+
+    sortColumn: "inserted_at",
+    sortDirection: "ascending",
+    handleSortSelection: jest.fn(),
+  };
 
   const props = {
     addAll: jest.fn(),
     checkedAll: true,
     checkRow: jest.fn(),
     isRowChecked: jest.fn(),
-    grantsRequests,
-    grantRequestsSearchLoading: false,
     columns: defaultGrantRequestsSearchTableColumns,
-    grantRequestsSort,
-    sortGrantRequests,
-    roleSelected: "foo",
-    canApprove: true,
+    approveView: true,
   };
 
   it("matches the latest snapshot", () => {
-    const { container } = render(<GrantRequestsTable {...props} />);
+    const { container } = render(
+      <SearchContext.Provider value={searchContext}>
+        <GrantRequestsTable {...props} />
+      </SearchContext.Provider>,
+      renderOpts
+    );
     expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/__snapshots__/GrantRequestBulkActions.spec.js.snap

@@ -3,49 +3,63 @@
 exports[`<GrantRequestBulkActions /> matches the latest snapshot 1`] = `
 <div>
   <div
-    class="grant-requests-bulk-actions"
+    aria-expanded="false"
+    class="ui selection dropdown grant-requests-bulk-role-selector"
+    role="listbox"
+    tabindex="0"
   >
     <div
-      class="right aligned four wide column"
+      aria-atomic="true"
+      aria-live="polite"
+      class="divider text"
+      role="alert"
+    >
+      role1
+    </div>
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
+    <div
+      class="menu transition"
     >
       <div
-        aria-disabled="false"
-        aria-expanded="false"
-        class="ui selection dropdown grant-requests-bulk-role-selector"
-        role="listbox"
-        tabindex="0"
+        aria-checked="true"
+        aria-selected="true"
+        class="active selected item"
+        role="option"
+        style="pointer-events: all;"
       >
-        <div
-          aria-atomic="true"
-          aria-live="polite"
-          class="divider default text"
-          role="alert"
+        <span
+          class="text"
         >
-          select
-        </div>
-        <i
-          aria-hidden="true"
-          class="dropdown icon"
-        />
-        <div
-          class="menu transition"
-        />
+          role1
+        </span>
       </div>
-      <button
-        class="ui primary disabled button button icon group-actions"
-        disabled=""
-        tabindex="-1"
-      >
-        approve_request
-      </button>
-      <button
-        class="ui secondary disabled button button icon group-actions"
-        disabled=""
-        tabindex="-1"
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
       >
-        reject
-      </button>
+        <span
+          class="text"
+        >
+          role2
+        </span>
+      </div>
     </div>
   </div>
+  <button
+    class="ui primary button button icon group-actions"
+  >
+    approve_request
+  </button>
+  <button
+    class="ui secondary button button icon group-actions"
+  >
+    reject
+  </button>
 </div>
 `;