| 1 |
import React, { useEffect, useState } from "react"; |
| 2 |
import { Outlet, useSearchParams } from "react-router-dom"; |
| 3 |
import useFetch from "../dashboard/hooks/useFetch"; |
| 4 |
import { addQueryArgs } from "@wordpress/url"; |
| 5 |
import Header from './Header'; |
| 6 |
import { saveFaqOrder } from '../faq-builder/utils/function'; |
| 7 |
|
| 8 |
const Layout = () => { |
| 9 |
const [searchParams] = useSearchParams(); |
| 10 |
const [mkbFilter, setMkbFilterValue] = useState(''); |
| 11 |
const [callRefetch, setCallRefetch] = useState(false); |
| 12 |
let { isLoading, totalPages, totalItems, setRefetch } = useFetch({ |
| 13 |
path: addQueryArgs(`/wp/v2/docs`, { |
| 14 |
status:'trash', |
| 15 |
}), |
| 16 |
parse: false |
| 17 |
}); |
| 18 |
const post_status = searchParams.get('post_status'); |
| 19 |
const [faqKeywordSearch, setFaqKeywordSearch] = useState(''); |
| 20 |
const [debouncedFaqKeyword, setDebouncedFaqKeywordSearch] = useState(''); |
| 21 |
const [docCategoriesKeyword, setDocCategoriesKeyword] = useState(''); |
| 22 |
const [debouncedDocCategoriesKeyword, setDebouncedDocCategoriesKeyword] = useState(''); |
| 23 |
const [docTagsKeyword, setDocTagsKeyword] = useState(''); |
| 24 |
const [debouncedDocTagsKeyword, setDebouncedDocTagsKeyword] = useState(''); |
| 25 |
// Seed from the saved preference (option `betterdocs_faq_order`) so the |
| 26 |
// builder opens on the same order the front end is currently using. |
| 27 |
const [faqOrder, setFaqOrder] = useState(betterdocs_admin?.faq_order || 'default'); |
| 28 |
// Update the dropdown immediately, then persist so the front end mirrors it. |
| 29 |
const handleFaqOrderChange = (order) => { |
| 30 |
setFaqOrder(order); |
| 31 |
saveFaqOrder(order).catch(() => {}); |
| 32 |
}; |
| 33 |
const debounceDelay = 500; |
| 34 |
const page = searchParams.get('page'); |
| 35 |
|
| 36 |
useEffect(() => { |
| 37 |
const handler = setTimeout(() => { |
| 38 |
if (page == 'betterdocs-faq') { |
| 39 |
setDebouncedFaqKeywordSearch(faqKeywordSearch); |
| 40 |
} else if (page == 'betterdocs-doc-categories') { |
| 41 |
setDebouncedDocCategoriesKeyword(docCategoriesKeyword); |
| 42 |
} else if (page == 'betterdocs-doc-tags') { |
| 43 |
setDebouncedDocTagsKeyword(docTagsKeyword); |
| 44 |
} |
| 45 |
}, debounceDelay); |
| 46 |
|
| 47 |
return () => { clearTimeout(handler); }; |
| 48 |
}, [page, faqKeywordSearch, docCategoriesKeyword, docTagsKeyword]); |
| 49 |
|
| 50 |
useEffect(() => { |
| 51 |
setFaqKeywordSearch(''); |
| 52 |
setDebouncedFaqKeywordSearch(''); |
| 53 |
setDocCategoriesKeyword(''); |
| 54 |
setDebouncedDocCategoriesKeyword(''); |
| 55 |
setDocTagsKeyword(''); |
| 56 |
setDebouncedDocTagsKeyword(''); |
| 57 |
}, [page]); |
| 58 |
|
| 59 |
useEffect(() => { |
| 60 |
if( !isLoading ){ |
| 61 |
if( searchParams?.size >= 1 || searchParams?.get('mode') == 'grid' ){ |
| 62 |
setCallRefetch(true); |
| 63 |
} else if ( searchParams?.get('mode') == 'list' && post_status == 'any' ) { |
| 64 |
setCallRefetch(true); |
| 65 |
} else if( searchParams.get('mode') == 'list' && post_status == 'trash' ) { |
| 66 |
setCallRefetch(true); |
| 67 |
} |
| 68 |
} |
| 69 |
}, [isLoading, totalItems, setRefetch, post_status, searchParams]); |
| 70 |
|
| 71 |
return ( |
| 72 |
<div> |
| 73 |
<Header |
| 74 |
page={page} |
| 75 |
postStatus={searchParams.get('post_status')} |
| 76 |
filter={[mkbFilter, setMkbFilterValue]} |
| 77 |
docs={[isLoading, totalItems]} |
| 78 |
mode={betterdocs_admin?.dashboard_mode != undefined && betterdocs_admin?.dashboard_mode != '' ? betterdocs_admin?.dashboard_mode : searchParams.get('mode')} |
| 79 |
faqSearchKeyword={faqKeywordSearch} |
| 80 |
handleFAQSearch={(e) => setFaqKeywordSearch(e?.target?.value)} |
| 81 |
faqOrder={faqOrder} |
| 82 |
onFaqOrderChange={handleFaqOrderChange} |
| 83 |
docCategoriesKeyword={docCategoriesKeyword} |
| 84 |
handleDocCategoriesSearch={(e) => setDocCategoriesKeyword(e?.target?.value)} |
| 85 |
docTagsKeyword={docTagsKeyword} |
| 86 |
handleDocTagsSearch={(e) => setDocTagsKeyword(e?.target?.value)} |
| 87 |
/> |
| 88 |
{/* Slot 2 used to carry the glossary search keyword. Glossaries moved to |
| 89 |
Pro, which owns its own search field via `betterdocs_admin_header_search`, |
| 90 |
so it is reserved here purely to keep the positional indices below stable. */} |
| 91 |
<Outlet context={[mkbFilter, (callRefetch ? setRefetch : null), null, debouncedFaqKeyword, faqOrder, debouncedDocCategoriesKeyword, debouncedDocTagsKeyword]}/> |
| 92 |
</div> |
| 93 |
); |
| 94 |
}; |
| 95 |
|
| 96 |
export default Layout; |
| 97 |
|
