BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / category-slate-layout / src / edit.js

edit.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/category-slate-layout/src/edit.js

194 lines 6.7 KB

Raw Download Zip

1	import { useBlockProps } from "@wordpress/block-editor";
2	import { buildQueryString } from "@wordpress/url";
3	import { Spinner } from "@wordpress/components";
4	import { useMemo } from "@wordpress/element";
5
6	import Inspector from "./inspector";
7	import Style from "./style";
8	import { NotFound, SingleCategory } from "../../../components";
9	import {
10	usePreviewDeviceType,
11	useDuplicateBlockIdFix,
12	useFetch,
13	} from "../../../hooks";
14
15	const BLOCK_PREFIX = "betterdocs-category-slate-layout";
16
17	const Edit = ({ attributes, setAttributes, isSelected, clientId }) => {
18	const {
19	blockId,
20	selectKB,
21	includeCategories,
22	excludeCategories,
23	gridPerPage,
24	offset,
25	orderBy,
26	order,
27	postsPerPage,
28	postsOrderBy,
29	postsOrder,
30	categoryTitleLink,
31	} = attributes;
32
33	usePreviewDeviceType(setAttributes);
34	useDuplicateBlockIdFix(BLOCK_PREFIX, blockId, clientId, setAttributes);
35
36	const categoryApiURL = useMemo(() => {
37	let query = {
38	per_page: gridPerPage ? gridPerPage : 9,
39	offset: offset ? offset : 0,
40	orderby: orderBy,
41	order: order,
42	hide_empty: 0, // Show empty categories in editor mode for better preview
43	};
44
45	let knowledge_base = [];
46	if (selectKB && selectKB !== "[]") {
47	try {
48	const kbObject = typeof selectKB === 'string' ? JSON.parse(selectKB) : selectKB;
49	if (typeof kbObject === "object" && kbObject.value !== undefined) {
50	knowledge_base.push(kbObject.value);
51	} else if (Array.isArray(kbObject)) {
52	knowledge_base = kbObject.map(kb => kb.value);
53	}
54	} catch (e) {
55	console.warn('Error parsing selectKB:', e);
56	}
57	}
58
59	let include = [];
60	if (includeCategories && includeCategories !== "[]") {
61	try {
62	const includeData = typeof includeCategories === 'string' ? JSON.parse(includeCategories) : includeCategories;
63	if (Array.isArray(includeData)) {
64	include = includeData.map((category) => category.value \|\| category);
65	}
66	} catch (e) {
67	console.warn('Error parsing includeCategories:', e);
68	}
69	}
70
71	let exclude = [];
72	if (excludeCategories && excludeCategories !== "[]") {
73	try {
74	const excludeData = typeof excludeCategories === 'string' ? JSON.parse(excludeCategories) : excludeCategories;
75	if (Array.isArray(excludeData)) {
76	exclude = excludeData.map((category) => category.value \|\| category);
77	}
78	} catch (e) {
79	console.warn('Error parsing excludeCategories:', e);
80	}
81	}
82
83	include = include.filter((item) => !exclude.includes(item));
84
85	if (include.length > 0) {
86	query["include"] = include.join(',');
87	}
88	if (exclude.length > 0) {
89	query["exclude"] = exclude.join(',');
90	}
91
92	if (knowledge_base.length > 0) {
93	query["filter[knowledgebase]"] = knowledge_base.join(",");
94	}
95
96	// Add posts query parameters
97	query["posts_per_page"] = postsPerPage;
98	query["posts_orderby"] = postsOrderBy;
99	query["posts_order"] = postsOrder;
100
101	return `/wp/v2/doc_category/?${buildQueryString(query)}`;
102	}, [
103	selectKB,
104	includeCategories,
105	excludeCategories,
106	gridPerPage,
107	offset,
108	orderBy,
109	order,
110	postsPerPage,
111	postsOrderBy,
112	postsOrder,
113	]);
114
115	const {
116	data: categoriesData,
117	isLoading: isCategoryLoading,
118	} = useFetch(categoryApiURL);
119
120	// Ensure categories is always an array and filter out empty categories in editor mode
121	const allCategories = Array.isArray(categoriesData) ? categoriesData : [];
122	const categories = allCategories.filter(category => category.count > 0);
123
124	const blockProps = useBlockProps({
125	className: `betterdocs-blocks betterdocs-category-layout-8 ${blockId}`,
126	});
127
128	return (
129	<>
130	{isSelected && (
131	<Inspector
132	attributes={attributes}
133	setAttributes={setAttributes}
134	docCategories={categories}
135	/>
136	)}
137	<Style
138	attributes={attributes}
139	setAttributes={setAttributes}
140	clientId={clientId}
141	/>
142	<div {...blockProps}>
143	<div className="betterdocs-category-grid-three-wrapper betterdocs-blocks-grid betterdocs-shortcode">
144	<div
145	className="betterdocs-category-grid-inner-wrapper layout-3 layout-flex docs-col-4"
146	data-column_desktop="4"
147	style={{"--column": 4}}
148	>
149	{
150	/**
151	* If item is not loaded yet
152	*/
153	isCategoryLoading && <Spinner />
154	}
155	{
156	/**
157	* If no item is found.
158	*/
159	!isCategoryLoading && categories?.length == 0 && (
160	<NotFound />
161	)
162	}
163	{
164	/**
165	* If items are loaded.
166	*/
167	!isCategoryLoading &&
168	categories?.length > 0 &&
169	categories.map((category) => (
170	<SingleCategory
171	key={category.id}
172	widgetType="category-grid"
173	layout="layout-3"
174	attributes={{
175	...attributes,
176	showCount: false,
177	showList: true,
178	}}
179	categories={categories}
180	titleLink={categoryTitleLink}
181	{...category}
182	/>
183	))
184	}
185	</div>
186	<div className="clearfix"></div>
187	</div>
188	</div>
189	</>
190	);
191	};
192
193	export default Edit;
194