| 1 |
import { useEffect, useRef, useState } from "@wordpress/element"; |
| 2 |
import { jsonParse } from "../../blocks/shared/helpFn"; |
| 3 |
import Pagination from "../../blocks/shared/templates/templates-parts/pagination"; |
| 4 |
import { usePaginationFn } from "./functionality"; |
| 5 |
import useApiData from "../../hooks/useApiData"; |
| 6 |
import useMetaData from "../../hooks/useMetaData"; |
| 7 |
|
| 8 |
export const EditorPaginationWrapper = ({ children }) => { |
| 9 |
const { attributes, posts } = children?.props; |
| 10 |
const { postCount } = useMetaData(attributes); |
| 11 |
const { uniqueId, paginationEnable, navigationArrowPosition, paginationType } = jsonParse(attributes); |
| 12 |
|
| 13 |
return ( |
| 14 |
<div id={uniqueId}> |
| 15 |
{posts?.length > 0 && ( |
| 16 |
<> |
| 17 |
{/* top pagination */} |
| 18 |
{paginationEnable && paginationType === "navigation" && navigationArrowPosition === "top" && ( |
| 19 |
<Pagination attributes={attributes} /> |
| 20 |
)} |
| 21 |
{/* render component */} |
| 22 |
{children} |
| 23 |
{/* bottom pagination */} |
| 24 |
{paginationEnable && paginationType === "navigation" && navigationArrowPosition === "bottom" && ( |
| 25 |
<Pagination attributes={attributes} /> |
| 26 |
)} |
| 27 |
{paginationEnable && paginationType !== "navigation" && ( |
| 28 |
<Pagination currentPage={1} postCount={postCount} attributes={attributes} /> |
| 29 |
)} |
| 30 |
</> |
| 31 |
)} |
| 32 |
</div> |
| 33 |
); |
| 34 |
}; |
| 35 |
|
| 36 |
export const SavePaginationWrapper = ({ children, setPosts }) => { |
| 37 |
const observerRef = useRef(null); |
| 38 |
const ref = useRef(null); |
| 39 |
const [currentPage, setCurrentPage] = useState(1); |
| 40 |
const { attributes } = children?.props; |
| 41 |
const parsedAttr = jsonParse(attributes); |
| 42 |
const { paginationEnable, navigationArrowPosition, paginationType, uniqueId } = parsedAttr; |
| 43 |
const { posts, postCount } = useApiData({ |
| 44 |
...parsedAttr, |
| 45 |
currentPage: currentPage, |
| 46 |
}); |
| 47 |
|
| 48 |
const { allPosts } = usePaginationFn({ |
| 49 |
posts: posts, |
| 50 |
postCount: postCount, |
| 51 |
attributes: parsedAttr, |
| 52 |
observerRef: observerRef, |
| 53 |
ref: ref, |
| 54 |
currentPage: currentPage, |
| 55 |
setCurrentPage: setCurrentPage, |
| 56 |
}); |
| 57 |
|
| 58 |
useEffect(() => { |
| 59 |
setPosts(allPosts); |
| 60 |
}, [allPosts]); |
| 61 |
|
| 62 |
return ( |
| 63 |
<div id={uniqueId} ref={ref}> |
| 64 |
{paginationEnable && |
| 65 |
paginationType === "navigation" && |
| 66 |
navigationArrowPosition === "top" && |
| 67 |
posts?.length > 0 && ( |
| 68 |
<Pagination |
| 69 |
postCount={postCount} |
| 70 |
attributes={attributes} |
| 71 |
currentPage={currentPage} |
| 72 |
setCurrentPage={setCurrentPage} |
| 73 |
/> |
| 74 |
)} |
| 75 |
{children} |
| 76 |
{paginationEnable && |
| 77 |
paginationType === "navigation" && |
| 78 |
navigationArrowPosition === "bottom" && |
| 79 |
posts?.length > 0 && ( |
| 80 |
<Pagination |
| 81 |
postCount={postCount} |
| 82 |
attributes={attributes} |
| 83 |
currentPage={currentPage} |
| 84 |
setCurrentPage={setCurrentPage} |
| 85 |
/> |
| 86 |
)} |
| 87 |
{paginationEnable && paginationType !== "navigation" && posts?.length > 0 && ( |
| 88 |
<Pagination |
| 89 |
postCount={postCount} |
| 90 |
attributes={attributes} |
| 91 |
currentPage={currentPage} |
| 92 |
setCurrentPage={setCurrentPage} |
| 93 |
/> |
| 94 |
)} |
| 95 |
<div ref={observerRef}></div> |
| 96 |
</div> |
| 97 |
); |
| 98 |
}; |
| 99 |
|
