-
Notifications
You must be signed in to change notification settings - Fork 583
/
Pages.js
72 lines (65 loc) · 2.71 KB
/
Pages.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { useState, useCallback } from "react";
import { useApolloClient } from "react-apollo";
import useReactRouter from "use-react-router";
import { useHandler } from "@webiny/app/hooks/useHandler";
import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
import { FloatingActionButton } from "@webiny/app-admin/components/FloatingActionButton";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { CREATE_PAGE, LIST_PAGES } from "@webiny/app-page-builder/admin/graphql/pages";
import { useDataList } from "@webiny/app/hooks/useDataList";
import { CircularProgress } from "@webiny/ui/Progress";
import PagesDataList from "./PagesDataList";
import PageDetails from "./PageDetails";
import CategoriesDialog from "../Categories/CategoriesDialog";
const Pages = props => {
const [creatingPage, setCreatingPage] = useState(false);
const [showCategoriesDialog, setCategoriesDialog] = useState(false);
const client = useApolloClient();
const { showSnackbar } = useSnackbar();
const { history } = useReactRouter();
const dataList = useDataList({
query: LIST_PAGES,
variables: {
sort: { savedOn: -1 }
}
});
const openDialog = useCallback(() => setCategoriesDialog(true), []);
const closeDialog = useCallback(() => setCategoriesDialog(false), []);
const createPageMutation = useHandler(props, () => async category => {
try {
setCreatingPage(true);
const res = await client.mutate({
mutation: CREATE_PAGE,
variables: { category },
refetchQueries: ["PbListPages"],
awaitRefetchQueries: true
});
setCreatingPage(false);
closeDialog();
const { data } = res.data.pageBuilder.page;
history.push(`/page-builder/editor/${data.id}`);
} catch (e) {
showSnackbar(e.message);
}
});
const onSelect = useCallback(category => {
createPageMutation(category.id);
}, []);
return (
<React.Fragment>
<CategoriesDialog open={showCategoriesDialog} onClose={closeDialog} onSelect={onSelect}>
{creatingPage && <CircularProgress label={"Creating page..."} />}
</CategoriesDialog>
<SplitView>
<LeftPanel span={4}>
<PagesDataList dataList={dataList} />
</LeftPanel>
<RightPanel span={8}>
<PageDetails refreshPages={dataList.refresh} />
</RightPanel>
</SplitView>
<FloatingActionButton onClick={openDialog} />
</React.Fragment>
);
};
export default Pages;