feat: Implement multi select functionality in "withDataList" HOC (#244)

webiny · Oct 21, 2018 · 4bd429a · 4bd429a
1 parent aa013da
commit 4bd429a
Show file tree

Hide file tree

Showing 76 changed files with 461 additions and 3,797 deletions.
diff --git a/packages/webiny-app-admin/src/components/withCrud.js b/packages/webiny-app-admin/src/components/withCrud.js
@@ -2,7 +2,6 @@
 import * as React from "react";
 import { setDisplayName, compose, withProps, mapProps, withHandlers, withState } from "recompose";
 import { graphql } from "react-apollo";
-import { omit } from "lodash";
 import { withDataList, withRouter, type WithRouterProps } from "webiny-app/components";
 import {
     withSnackbar,
@@ -15,8 +14,6 @@ export type WithCrudBaseProps = WithRouterProps & WithSnackbarProps & WithDialog
 
 export type WithCrudListProps = WithCrudBaseProps & {
     dataList: Object,
-    data: Array<any>,
-    meta: ?Object,
     deleteRecord: (item: Object) => Promise<void>
 };
 
@@ -139,7 +136,8 @@ export const withCrud = ({ list, form }: Object): Function => {
             withDataList({
                 name: "dataList",
                 query: list.get.query,
-                variables: list.get.variables
+                variables: list.get.variables,
+                response: list.get.response
             }),
             // Delete mutation
             list.delete && withDeleteHandler(list.delete),
@@ -172,10 +170,10 @@ export const withCrud = ({ list, form }: Object): Function => {
                         showSnackbar,
                         showDialog,
                         listProps: {
-                            dataList: omit(dataList, ["data"]),
+                            dataList,
                             router,
                             showSnackbar,
-                            ...list.get.response(dataList.data),
+                            showDialog,
                             deleteRecord
                         },
                         formProps: {
@@ -184,6 +182,7 @@ export const withCrud = ({ list, form }: Object): Function => {
                             onSubmit: saveRecord,
                             router,
                             showSnackbar,
+                            showDialog,
                             error: formError
                         }
                     };

diff --git a/packages/webiny-app-admin/src/views/ApiTokens/ApiTokensDataList.js b/packages/webiny-app-admin/src/views/ApiTokens/ApiTokensDataList.js
@@ -15,12 +15,10 @@ import { DeleteIcon } from "webiny-ui/List/DataList/icons";
 
 const t = i18n.namespace("Security.ApiTokensDataList");
 
-const ApiTokensDataList = ({ deleteRecord, dataList, data, meta, router }: WithCrudListProps) => {
+const ApiTokensDataList = ({ deleteRecord, dataList, router }: WithCrudListProps) => {
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`API Tokens`}
             sorters={[
                 {

diff --git a/packages/webiny-app-admin/src/views/Components/GroupsAutoComplete.js b/packages/webiny-app-admin/src/views/Components/GroupsAutoComplete.js
@@ -1,30 +1,24 @@
 // @flow
 import * as React from "react";
-import { withDataList } from "webiny-app/components";
 import { AutoComplete } from "webiny-ui/AutoComplete";
 import { groupsAutoComplete } from "./graphql";
-import { compose } from "recompose";
-import { get, debounce } from "lodash";
+import { get } from "lodash";
+import { Query } from "react-apollo";
 
-const GroupsAutoComplete = props => {
-    const { groupsList, ...rest } = props;
+const GroupsAutoComplete = (props: Object) => (
+    <AutoComplete multiple unique {...props}>
+        {({ query, renderOptions }) => (
+            <Query
+                query={groupsAutoComplete}
+                variables={{
+                    sort: { savedOn: -1 },
+                    search: { query, fields: ["name", "description"] }
+                }}
+            >
+                {({ data }) => renderOptions(get(data, "security.groups.data", []))}
+            </Query>
+        )}
+    </AutoComplete>
+);
 
-    return (
-        <AutoComplete
-            {...rest}
-            multiple
-            options={get(groupsList, "data.security.groups.data", [])}
-            onInput={debounce(query => {
-                query && groupsList.setSearch({ query, fields: ["name", "description"] });
-            }, 250)}
-        />
-    );
-};
-
-export default compose(
-    withDataList({
-        name: "groupsList",
-        query: groupsAutoComplete,
-        variables: { sort: { savedOn: -1 } }
-    })
-)(GroupsAutoComplete);
+export default GroupsAutoComplete;
diff --git a/packages/webiny-app-admin/src/views/Components/RolesAutoComplete.js b/packages/webiny-app-admin/src/views/Components/RolesAutoComplete.js
@@ -1,30 +1,24 @@
 // @flow
 import * as React from "react";
-import { withDataList } from "webiny-app/components";
 import { AutoComplete } from "webiny-ui/AutoComplete";
 import { rolesAutoComplete } from "./graphql";
-import { compose } from "recompose";
-import { get, debounce } from "lodash";
+import { get } from "lodash";
+import { Query } from "react-apollo";
 
-const RolesAutoComplete = props => {
-    const { rolesList, ...rest } = props;
+const RolesAutoComplete = (props: Object) => (
+    <AutoComplete multiple unique {...props}>
+        {({ query, renderOptions }) => (
+            <Query
+                query={rolesAutoComplete}
+                variables={{
+                    sort: { savedOn: -1 },
+                    search: { query, fields: ["name", "description"] }
+                }}
+            >
+                {({ data }) => renderOptions(get(data, "security.roles.data", []))}
+            </Query>
+        )}
+    </AutoComplete>
+);
 
-    return (
-        <AutoComplete
-            {...rest}
-            multiple
-            options={get(rolesList, "data.security.roles.data", [])}
-            onInput={debounce(query => {
-                query && rolesList.setSearch({ query, fields: ["name", "description"] });
-            }, 250)}
-        />
-    );
-};
-
-export default compose(
-    withDataList({
-        name: "rolesList",
-        query: rolesAutoComplete,
-        variables: { sort: { savedOn: -1 } }
-    })
-)(RolesAutoComplete);
+export default RolesAutoComplete;
diff --git a/packages/webiny-app-admin/src/views/Groups/GroupsDataList.js b/packages/webiny-app-admin/src/views/Groups/GroupsDataList.js
@@ -19,12 +19,10 @@ import { Checkbox } from "webiny-ui/Checkbox";
 
 const t = i18n.namespace("Security.GroupsDataList");
 
-const GroupsDataList = ({ dataList, router, data, meta, deleteRecord }: WithCrudListProps) => {
+const GroupsDataList = ({ dataList, router, deleteRecord }: WithCrudListProps) => {
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`Security Groups`}
             sorters={[
                 {

diff --git a/packages/webiny-app-admin/src/views/Roles/RolesDataList.js b/packages/webiny-app-admin/src/views/Roles/RolesDataList.js
@@ -19,12 +19,10 @@ import { Checkbox } from "webiny-ui/Checkbox";
 
 const t = i18n.namespace("Security.RolesDataList");
 
-const RolesDataList = ({ dataList, router, data, meta, deleteRecord }: WithCrudListProps) => {
+const RolesDataList = ({ dataList, router, deleteRecord }: WithCrudListProps) => {
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`Security Roles`}
             sorters={[
                 {

diff --git a/packages/webiny-app-admin/src/views/Users/UsersDataList.js b/packages/webiny-app-admin/src/views/Users/UsersDataList.js
@@ -24,12 +24,10 @@ const t = i18n.namespace("Security.UsersDataList");
 
 type Props = WithCrudListProps & WithSecurityProps;
 
-const UsersDataList = ({ dataList, data, meta, router, security, deleteRecord }: Props) => {
+const UsersDataList = ({ dataList, router, security, deleteRecord }: Props) => {
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`Security Users`}
             sorters={[
                 {
@@ -42,11 +40,11 @@ const UsersDataList = ({ dataList, data, meta, router, security, deleteRecord }:
                 },
                 {
                     label: "Name A-Z",
-                    sorters: { name: 1 }
+                    sorters: { lastName: 1 }
                 },
                 {
                     label: "Name Z-A",
-                    sorters: { name: -1 }
+                    sorters: { lastName: -1 }
                 }
             ]}
         >

diff --git a/packages/webiny-app-cms/src/admin/views/Categories/CategoriesDataList.js b/packages/webiny-app-cms/src/admin/views/Categories/CategoriesDataList.js
@@ -16,12 +16,10 @@ import {
 
 const t = i18n.namespace("Cms.CategoriesDataList");
 
-const CategoriesDataList = ({ data, dataList, meta, router, deleteRecord }: WithCrudListProps) => {
+const CategoriesDataList = ({ dataList, router, deleteRecord }: WithCrudListProps) => {
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`CMS Categories`}
             sorters={[
                 {

diff --git a/packages/webiny-app-cms/src/admin/views/Pages/Pages.js b/packages/webiny-app-cms/src/admin/views/Pages/Pages.js
@@ -10,6 +10,7 @@ import PagesDataList from "./PagesDataList";
 import PageDetails from "./PageDetails";
 import CategoriesDialog from "./CategoriesDialog";
 import { createPage, loadPages } from "webiny-app-cms/admin/graphql/pages";
+import { get } from "lodash";
 
 type Props = {
     createPage: (category: string, title: string) => Promise<Object>,
@@ -45,10 +46,10 @@ class Pages extends React.Component<Props, State> {
                 />
                 <CompactView>
                     <LeftPanel>
-                        <PagesDataList dataList={dataList}/>
+                        <PagesDataList dataList={dataList} />
                     </LeftPanel>
                     <RightPanel>
-                        <PageDetails refreshPages={dataList.refresh}/>
+                        <PageDetails refreshPages={dataList.refresh} />
                     </RightPanel>
                 </CompactView>
                 <FloatingActionButton onClick={this.closeDialog} />
@@ -62,8 +63,10 @@ export default compose(
     withRouter(),
     graphql(createPage, { name: "createMutation" }),
     withDataList({
-        name: "dataList",
         query: loadPages,
+        response: data => {
+            return get(data, "cms.pages", {});
+        },
         variables: {
             sort: { savedOn: -1 }
         }

diff --git a/packages/webiny-app-cms/src/admin/views/Pages/PagesDataList.js b/packages/webiny-app-cms/src/admin/views/Pages/PagesDataList.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from "react";
-import { get } from "dot-prop-immutable";
 import TimeAgo from "timeago-react";
 import { withRouter } from "webiny-app/components";
 import { i18n } from "webiny-app/i18n";
@@ -18,13 +17,9 @@ const t = i18n.namespace("Cms.PagesDataList");
 const PagesDataList = props => {
     const { dataList, router } = props;
 
-    const { data, meta } = get(dataList, "data.cms.pages") || { data: [], meta: {} };
-
     return (
         <DataList
             {...dataList}
-            data={data}
-            meta={meta}
             title={t`CMS Pages`}
             sorters={[
                 {

diff --git a/packages/webiny-app/bkp/actions/crud/generateCreateQuery.js b/packages/webiny-app/bkp/actions/crud/generateCreateQuery.js
diff --git a/packages/webiny-app/bkp/actions/crud/generateDeleteQuery.js b/packages/webiny-app/bkp/actions/crud/generateDeleteQuery.js
diff --git a/packages/webiny-app/bkp/actions/crud/generateListQuery.js b/packages/webiny-app/bkp/actions/crud/generateListQuery.js