-
Notifications
You must be signed in to change notification settings - Fork 582
/
PagesList.tsx
93 lines (79 loc) · 2.64 KB
/
PagesList.tsx
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import { usePageBuilder } from "../../../../hooks/usePageBuilder";
import { LIST_PUBLISHED_PAGES } from "./graphql";
import { plugins } from "@webiny/plugins";
import { get } from "lodash";
import { PbPageElementPagesListComponentPlugin } from "../../../../types";
import { useRecoilValue } from "recoil";
import { pageAtom } from "../../../recoil/modules";
const PagesList = props => {
const { component, ...vars } = props.data;
const components = plugins.byType<PbPageElementPagesListComponentPlugin>(
"pb-page-element-pages-list-component"
);
const pageList = components.find(cmp => cmp.componentName === component);
const { theme } = usePageBuilder();
const [cursors, setCursors] = useState([null]);
const [page, setPage] = useState(0);
const pageAtomValue = useRecoilValue(pageAtom);
if (!pageList) {
return <div>Selected page list component not found!</div>;
}
const { component: ListComponent } = pageList;
let sort = null;
if (vars.sortBy && vars.sortDirection) {
sort = `${vars.sortBy}_${vars.sortDirection.toUpperCase()}`;
}
const variables = {
sort,
where: {
category: vars.category,
tags: {
query: vars.tags,
rule: vars.tagsRule
}
},
limit: parseInt(vars.resultsPerPage),
after: cursors[page],
exclude: [pageAtomValue.path]
};
const { data, loading } = useQuery(LIST_PUBLISHED_PAGES, {
variables,
skip: !ListComponent,
fetchPolicy: "network-only"
});
if (!ListComponent) {
return <div>You must select a component to render your list!</div>;
}
if (loading) {
return <div>Loading...</div>;
}
const totalCount = get(data, "pageBuilder.listPublishedPages.meta.totalCount");
if (!totalCount) {
return <div>No pages match the criteria.</div>;
}
const listPublishedPages = get(data, "pageBuilder.listPublishedPages");
let prevPage = null;
if (page >= 1) {
prevPage = () => {
setPage(page => page - 1);
};
}
let nextPage = null;
if (listPublishedPages.meta.cursor) {
nextPage = () => {
setCursors(cursors => [...cursors, listPublishedPages.meta.cursor]);
setPage(page => page + 1);
};
}
return (
<ListComponent
{...listPublishedPages}
nextPage={nextPage}
prevPage={prevPage}
theme={theme}
/>
);
};
export default React.memo(PagesList);