Change: Simplify DefaultFilterDialog

Get the capabilities via the useCapabilities hook instead of using the
withCapabilities HOC. Higher order components (HOCs) are more difficult
to understand then react hooks.

src/web/components/powerfilter/dialog.js

@@ -18,13 +18,10 @@
 
 import React from 'react';
 
-import withCapabilities from 'web/utils/withCapabilities';
-
 import Layout from 'web/components/layout/layout';
 
 import withFilterDialog from 'web/components/powerfilter/withFilterDialog';
-
-import compose from 'web/utils/compose';
+import useCapabilities from 'web/utils/useCapabilities';
 
 import CreateNamedFilterGroup from './createnamedfiltergroup';
 import FilterStringGroup from './filterstringgroup';
@@ -35,7 +32,6 @@ import SortByGroup from './sortbygroup';
 import DefaultFilterDialogPropTypes from './dialogproptypes';
 
 export const DefaultFilterDialog = ({
-  capabilities,
   createFilterType,
   filter,
   filterName,
@@ -49,39 +45,41 @@ export const DefaultFilterDialog = ({
   onSortByChange,
   onSortOrderChange,
   onValueChange,
-}) => (
-  <Layout flex="column">
-    <FilterStringGroup filter={filterstring} onChange={onFilterStringChange} />
-    <FirstResultGroup filter={filter} onChange={onFilterValueChange} />
-    <ResultsPerPageGroup filter={filter} onChange={onFilterValueChange} />
-    <SortByGroup
-      fields={sortFields}
-      filter={filter}
-      onSortByChange={onSortByChange}
-      onSortOrderChange={onSortOrderChange}
-    />
-    {capabilities.mayCreate('filter') && (
-      <CreateNamedFilterGroup
+}) => {
+  const capabilities = useCapabilities();
+  return (
+    <Layout flex="column">
+      <FilterStringGroup
+        filter={filterstring}
+        onChange={onFilterStringChange}
+      />
+      <FirstResultGroup filter={filter} onChange={onFilterValueChange} />
+      <ResultsPerPageGroup filter={filter} onChange={onFilterValueChange} />
+      <SortByGroup
+        fields={sortFields}
         filter={filter}
-        filterName={filterName}
-        saveNamedFilter={saveNamedFilter}
-        onValueChange={onValueChange}
+        onSortByChange={onSortByChange}
+        onSortOrderChange={onSortOrderChange}
       />
-    )}
-  </Layout>
-);
+      {capabilities.mayCreate('filter') && (
+        <CreateNamedFilterGroup
+          filter={filter}
+          filterName={filterName}
+          saveNamedFilter={saveNamedFilter}
+          onValueChange={onValueChange}
+        />
+      )}
+    </Layout>
+  );
+};
 
 DefaultFilterDialog.propTypes = DefaultFilterDialogPropTypes;
 
-export const createFilterDialog = options => {
-  return compose(
-    withCapabilities,
-    withFilterDialog(options),
-  )(DefaultFilterDialog);
-};
+export const createFilterDialog = options =>
+  withFilterDialog(options)(DefaultFilterDialog);
 
 export {DefaultFilterDialogPropTypes};
 
-export default withCapabilities(DefaultFilterDialog);
+export default DefaultFilterDialog;
 
 // vim: set ts=2 sw=2 tw=80: