@truedat/dd 6.6.0 → 6.6.2

package/src/components/StructuresGrantRequestView.js

@@ -6,18 +6,35 @@ import { useHistory } from "react-router-dom";
 import { Header, Icon, Divider } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { structureRowsSelector } from "../selectors";
-import StructureSelectedFilters from "./StructureSelectedFilters";
-import StructureDateFilter from "./StructureDateFilter";
-import StructuresSearch from "./StructuresSearch";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import translations from "../utils/structureCustomTranslations";
+import {
+  useDataStructureFilters,
+  useDataStructureSearch,
+} from "../hooks/useStructures";
+
 import StructuresSearchResults from "./StructuresSearchResults";
 import StructureGrantCart from "./StructureGrantCart";
 
-export const StructuresGrantRequestView = ({ loading, structures }) => {
+export function StructuresGrantRequestViewContent() {
   const history = useHistory();
   const segment = useRef(null);
   const [isOverflown, setIsOverflown] = useState(null);
 
+  const { searchData, loading } = useSearchContext();
+  const structures = searchData?.data;
+
+  const isOverflownFn = (element) =>
+    !element
+      ? false
+      : element.scrollHeight > element.clientHeight ||
+        element.scrollWidth > element.clientWidth;
+
   useEffect(() => {
     setIsOverflown(isOverflownFn(segment.current));
   }, [loading]);
@@ -67,9 +84,7 @@ export const StructuresGrantRequestView = ({ loading, structures }) => {
           </Header.Content>
         </Header>
         <Divider hidden />
-        <StructuresSearch />
-        <StructureSelectedFilters />
-        <StructureDateFilter />
+        <SearchWidget dateFilter />
         <StructuresSearchResults
           structures={structures}
           loading={loading}
@@ -79,28 +94,44 @@ export const StructuresGrantRequestView = ({ loading, structures }) => {
       </div>
     </div>
   );
-};
+}
 
-const isOverflownFn = (element) =>
-  !element
-    ? false
-    : element.scrollHeight > element.clientHeight ||
-      element.scrollWidth > element.clientWidth;
+export const StructuresGrantRequestView = (props) => {
+  const defaultFilters = _.propOr({}, "defaultFilters")(props);
+  const filtersGroup = _.propOr([], "filtersGroup")(props);
+  const enrichSearchPayload = {
+    my_grant_requests: true,
+    with_data_fields: false,
+  };
+
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useDataStructureSearch,
+    useFilters: useDataStructureFilters,
+    pageSize: 20,
+    userFiltersType: "user_search_filters",
+    userFilterScope: "data_structure",
+    translations,
+    filtersGroup,
+    defaultFilters,
+    enrichSearchPayload,
+  };
+
+  return (
+    <SearchContextProvider {...searchProps}>
+      <StructuresGrantRequestViewContent />
+    </SearchContextProvider>
+  );
+};
 
 StructuresGrantRequestView.propTypes = {
-  structures: PropTypes.array,
-  loading: PropTypes.bool,
+  filtersGroup: PropTypes.array,
+  defaultFilters: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
-  structures: structureRowsSelector(state, null, [
-    "my_grants",
-    "my_grant_request",
-    "external_id",
-    "data_fields",
-    "user_permissions",
-  ]),
-  loading: state.structuresLoading,
+  filtersGroup: state?.structureFiltersGroup,
 });
 
 export default connect(mapStateToProps)(StructuresGrantRequestView);

package/src/components/StructuresLabelResults.js

@@ -1,12 +1,12 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-export const StructuresLabelResults = ({ structureCount }) => {
+export const StructuresLabelResults = () => {
   const { formatNumber } = useIntl();
-  const count = formatNumber(structureCount);
+  const { count: originalCount } = useSearchContext();
+  const count = formatNumber(originalCount);
   return (
     <Label className="structures-label-results">
       <FormattedMessage id="structures.retrieved.results" values={{ count }} />
@@ -14,10 +14,4 @@ export const StructuresLabelResults = ({ structureCount }) => {
   );
 };
 
-StructuresLabelResults.propTypes = {
-  structureCount: PropTypes.number
-};
-
-const mapStateToProps = ({ structureCount }) => ({ structureCount });
-
-export default connect(mapStateToProps)(StructuresLabelResults);
+export default StructuresLabelResults;

package/src/components/StructuresPagination.js

@@ -1,18 +1,16 @@
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
+import React from "react";
 import { Pagination } from "@truedat/core/components";
-import { selectStructurePage } from "../routines";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({ selectPage: selectStructurePage }, dispatch);
+export default function StructuresPagination() {
+  const { count, size, page, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
 
-const mapStateToProps = ({
-  structureQuery,
-  structureCount,
-  structuresPageSize,
-}) => ({
-  activePage: structureQuery?.page,
-  totalPages: Math.ceil(structureCount / structuresPageSize),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Pagination);
+  return (
+    <Pagination
+      totalPages={totalPages}
+      activePage={page}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/components/StructuresRoutes.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import React from "react";
-
 import { useIntl } from "react-intl";
 import { Route, Switch, useRouteMatch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
@@ -18,7 +17,6 @@ import {
 import AddStructureMember from "./AddStructureMember";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureLoader from "./StructureLoader";
-import UserSearchFiltersLoader from "./UserSearchFiltersLoader";
 import StructureView from "./StructureView";
 import BucketView from "./BucketView";
 import StructuresBulkUpdate from "./StructuresBulkUpdate";
@@ -61,25 +59,11 @@ const AuthorizedRoutes = () => {
         <Route
           exact
           path={BUCKETS_VIEW}
-          render={() => (
-            <>
-              <UserSearchFiltersLoader scope="data_structure" />
-              <StructuresView customView />
-            </>
-          )}
+          render={() => <StructuresView customView />}
         />
         <Route exact path={[BUCKET_VIEW]} render={() => <BucketView />} />
 
-        <Route
-          exact
-          path={STRUCTURES}
-          render={() => (
-            <>
-              <UserSearchFiltersLoader scope="data_structure" />
-              <StructuresView />
-            </>
-          )}
-        />
+        <Route exact path={STRUCTURES} render={() => <StructuresView />} />
       </Switch>
       <Route path={STRUCTURE_EVENTS} component={StructureEventsLoader} />
       <Switch>

package/src/components/StructuresTable.js

@@ -1,11 +1,10 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
+import { useSelector } from "react-redux";
 import { Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { sortStructures } from "../routines";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { structureColumnsSelector } from "../selectors";
 import StructureRow from "./StructureRow";
 
@@ -18,130 +17,95 @@ const isPositive = (links, id) => {
   return link ? true : false;
 };
 
-export class StructuresTable extends React.Component {
-  state = {
-    sortedColumn: _.prop("column")(getSortInfo(this.props.structuresSort)),
-    direction: _.prop("direction")(getSortInfo(this.props.structuresSort)),
-  };
+export const StructuresTable = ({
+  columns: overwriteColumns,
+  grantable,
+  onStructureSelected,
+  selectedStructure,
+  size,
+  links = [],
+  placeToTop = true,
+}) => {
+  const {
+    searchData,
+    sortColumn,
+    sortDirection,
+    defaultFilters,
+    handleSortSelection,
+  } = useSearchContext();
 
-  setDirection = (direction) => {
-    this.setState({ direction: direction });
-  };
+  const columns = useSelector((state) =>
+    structureColumnsSelector(state, defaultFilters, overwriteColumns)
+  );
 
-  setColumn = (column) => {
-    this.setState({ sortedColumn: column });
-  };
+  const structures = searchData?.data;
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.structuresSort != this.props.structuresSort) {
-      const { column: sortedColumn, direction: direction } = getSortInfo(
-        this.props.structuresSort
-      );
-      this.setState({ sortedColumn, direction });
-    }
-  }
-
-  render() {
-    const {
-      columns,
-      grantable,
-      onStructureSelected,
-      selectedStructure,
-      size,
-      sortStructures,
-      structures,
-      links = [],
-      placeToTop = true,
-    } = this.props;
-    const { sortedColumn, direction } = this.state;
-
-    if (_.isEmpty(columns)) {
-      return null;
-    } else {
-      // selectedStructure will be placed at top unless it is present in structures
-      const tableData =
-        _.has("id")(selectedStructure) && placeToTop
-          ? _.any(_.propEq("id", selectedStructure.id))(structures) &&
-            placeToTop
-            ? structures
-            : [selectedStructure, ...structures]
-          : structures;
-      const headerRow = (
-        <Table.Row>
-          {columns.map((column, key) => (
-            <Table.HeaderCell
-              key={key}
-              content={
-                <FormattedMessage
-                  id={`structure.${column.header || column.name}`}
-                />
-              }
-              sorted={
-                _.path("sort.name")(column) === sortedColumn ? direction : null
-              }
-              className={_.path("sort.name")(column) ? "" : "disabled"}
-              onClick={() =>
-                sortColumn(
-                  column,
-                  sortStructures,
-                  this.setDirection,
-                  this.setColumn,
-                  direction,
-                  sortedColumn
-                )
-              }
-              width={_.propOr(1, "width")(column)}
-            />
-          ))}
-          {grantable && (
-            <Table.HeaderCell textAlign="center">
-              Request grant
-            </Table.HeaderCell>
-          )}
-        </Table.Row>
-      );
+  if (_.isEmpty(columns)) {
+    return null;
+  } else {
+    // selectedStructure will be placed at top unless it is present in structures
+    const tableData =
+      _.has("id")(selectedStructure) && placeToTop
+        ? _.any(_.propEq("id", selectedStructure.id))(structures) && placeToTop
+          ? structures
+          : [selectedStructure, ...structures]
+        : structures;
+    const headerRow = (
+      <Table.Row>
+        {columns.map((column, key) => (
+          <Table.HeaderCell
+            key={key}
+            content={
+              <FormattedMessage
+                id={`structure.${column.header || column.name}`}
+              />
+            }
+            sorted={
+              _.path("sort.name")(column) === sortColumn ? sortDirection : null
+            }
+            className={_.path("sort.name")(column) ? "" : "disabled"}
+            onClick={() => handleSortSelection(_.path("sort.name")(column))}
+            width={_.propOr(1, "width")(column)}
+          />
+        ))}
+        {grantable && (
+          <Table.HeaderCell textAlign="center">Request grant</Table.HeaderCell>
+        )}
+      </Table.Row>
+    );
 
-      const renderBodyRow = (s, i) => (
-        <StructureRow
-          key={i}
-          columns={columns}
-          structure={s}
-          active={selectedStructure && _.propEq("id", s.id)(selectedStructure)}
-          positive={isPositive(links, s.id)}
-          onClick={onStructureSelected}
-          grantable={grantable}
-        />
-      );
-      return (
-        <Table
-          selectable
-          sortable
-          size={size}
-          headerRow={headerRow}
-          renderBodyRow={renderBodyRow}
-          tableData={tableData}
-        />
-      );
-    }
+    const renderBodyRow = (s, i) => (
+      <StructureRow
+        key={i}
+        columns={columns}
+        structure={s}
+        active={selectedStructure && _.propEq("id", s.id)(selectedStructure)}
+        positive={isPositive(links, s.id)}
+        onClick={onStructureSelected}
+        grantable={grantable}
+      />
+    );
+    return (
+      <Table
+        selectable
+        sortable
+        size={size}
+        headerRow={headerRow}
+        renderBodyRow={renderBodyRow}
+        tableData={tableData}
+      />
+    );
   }
-}
+};
 
 StructuresTable.propTypes = {
   grantable: PropTypes.bool,
-  columns: PropTypes.array.isRequired,
+  columns: PropTypes.array,
   onStructureSelected: PropTypes.func,
   selectedStructure: PropTypes.object,
   size: PropTypes.string,
-  sortStructures: PropTypes.func,
-  structures: PropTypes.array,
-  structuresSort: PropTypes.array,
   links: PropTypes.array,
   placeToTop: PropTypes.bool,
 };
 
-const mapStateToProps = (state, props) => ({
-  columns: structureColumnsSelector(state, props),
-  structuresSort: _.path("structureQuery.sort")(state),
-});
-
-export default connect(mapStateToProps, { sortStructures })(StructuresTable);
+export default StructuresTable;

package/src/components/StructuresUpdateOption.js

@@ -1,22 +1,86 @@
-import React from "react";
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { connect, useDispatch } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { STRUCTURES_BULK_UPDATE } from "@truedat/core/routes";
-import { bulkUpdateDisabledSelector } from "../selectors";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { templateNamesSelector } from "../selectors";
+import { structureSearchQuery } from "../routines";
 
-export const StructuresUpdateOption = ({ disabled }) => {
+export const StructuresUpdateOption = ({
+  structureTypes,
+  structureTypesLoading,
+  templates,
+}) => {
   const { formatMessage } = useIntl();
   const authorized = useAuthorized();
+  const history = useHistory();
+  const [disabled, setDisabled] = useState(true);
+  const setStructureQuery = useDispatch();
+  const {
+    searchData,
+    loading: structuresLoading,
+    allActiveFilters,
+    allFilters,
+    count: structureCount,
+    filterParams: searchParams,
+  } = useSearchContext();
+
+  const structures = _.propOr([], "data")(searchData);
+  const actions = _.propOr({}, "_actions")(searchData);
+
+  const types = _.prop("type.raw")(allActiveFilters);
+
+  useEffect(() => {
+    if (
+      structuresLoading ||
+      structureTypesLoading ||
+      _.isEmpty(structures) ||
+      _.isEmpty(templates) ||
+      _.size(types) != 1 ||
+      structureCount <= 0
+    ) {
+      setDisabled(true);
+    } else {
+      const structure = _.head(structures);
+      setDisabled(
+        _.flow(
+          _.map("name"),
+          _.negate(_.includes(_.prop("type")(structure)))
+        )(structureTypes)
+      );
+    }
+  }, [
+    structures,
+    templates,
+    types,
+    structuresLoading,
+    structureTypes,
+    structureTypesLoading,
+    structureCount,
+  ]);
+
+  const navigate = () => {
+    setStructureQuery(
+      structureSearchQuery({
+        structureCount,
+        searchParams,
+        allFilters,
+        actions,
+      })
+    );
+    history.push(STRUCTURES_BULK_UPDATE);
+  };
+
   return (
     authorized && (
       <Dropdown.Item
         icon="refresh"
-        as={Link}
-        to={STRUCTURES_BULK_UPDATE}
+        onClick={navigate}
         disabled={disabled}
         content={
           <>
@@ -36,11 +100,15 @@ export const StructuresUpdateOption = ({ disabled }) => {
 };
 
 StructuresUpdateOption.propTypes = {
-  disabled: PropTypes.bool,
+  structureTypes: PropTypes.array,
+  structureTypesLoading: PropTypes.bool,
+  templates: PropTypes.array,
 };
 
 const mapStateToProps = (state) => ({
-  disabled: bulkUpdateDisabledSelector(state),
+  structureTypes: state.structureTypes,
+  structureTypesLoading: state.structureTypesLoading,
+  templates: templateNamesSelector(state),
 });
 
 export default connect(mapStateToProps)(StructuresUpdateOption);