import React, { useState, useEffect } from "react";
import { __ } from "@wordpress/i18n";
import apiFetch from "@wordpress/api-fetch";
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
const Counts = () => {
const [counts, setCounts] = useState({
created_docs: 0,
published_docs: 0,
created_faq: 0,
published_faq: 0
});
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchCounts = async () => {
try {
const response = await apiFetch({
path: "/betterdocs/v1/docs-faq-count"
});
setCounts(response);
setLoading(false);
} catch (err) {
setError(err.message);
setLoading(false);
}
};
fetchCounts();
}, []);
const loader = () => {
return (
<>
)
};
if (error) {
return {__("Error loading counts:", "betterdocs")} {error}
;
}
return (
<>
{loading ? (
<>{loader()}
) : (
<>{counts.created_docs}
)}
{__("Created Docs", "betterdocs")}
{loading ? (
<>{loader()}
) : (
<>{counts.published_docs}
)}
{__("Published Docs", "betterdocs")}
{loading ? (
<>{loader()}
) : (
<>{counts.created_faq}
)}
{__("Created FAQs", "betterdocs")}
{loading ? (
<>{loader()}
) : (
<>{counts.published_faq}
)}
{__("Published FAQs", "betterdocs")}
);
};
export default Counts;