| 1 |
import React, { useState, useEffect } from "react"; |
| 2 |
import { __ } from "@wordpress/i18n"; |
| 3 |
import apiFetch from "@wordpress/api-fetch"; |
| 4 |
import Skeleton from 'react-loading-skeleton' |
| 5 |
import 'react-loading-skeleton/dist/skeleton.css' |
| 6 |
|
| 7 |
const Counts = () => { |
| 8 |
const [counts, setCounts] = useState({ |
| 9 |
created_docs: 0, |
| 10 |
published_docs: 0, |
| 11 |
created_faq: 0, |
| 12 |
published_faq: 0 |
| 13 |
}); |
| 14 |
const [loading, setLoading] = useState(true); |
| 15 |
const [error, setError] = useState(null); |
| 16 |
|
| 17 |
useEffect(() => { |
| 18 |
const fetchCounts = async () => { |
| 19 |
try { |
| 20 |
const response = await apiFetch({ |
| 21 |
path: "/betterdocs/v1/docs-faq-count" |
| 22 |
}); |
| 23 |
setCounts(response); |
| 24 |
setLoading(false); |
| 25 |
} catch (err) { |
| 26 |
setError(err.message); |
| 27 |
setLoading(false); |
| 28 |
} |
| 29 |
}; |
| 30 |
|
| 31 |
fetchCounts(); |
| 32 |
}, []); |
| 33 |
|
| 34 |
const loader = () => { |
| 35 |
return ( |
| 36 |
<> |
| 37 |
<Skeleton |
| 38 |
count={1} |
| 39 |
borderRadius="4px" |
| 40 |
height={'100%'} |
| 41 |
width={'40px'} |
| 42 |
className="grid-loader-inner-child betterdocs-card-counter-loader" |
| 43 |
/> |
| 44 |
</> |
| 45 |
) |
| 46 |
}; |
| 47 |
|
| 48 |
if (error) { |
| 49 |
return <div>{__("Error loading counts:", "betterdocs")} {error}</div>; |
| 50 |
} |
| 51 |
|
| 52 |
return ( |
| 53 |
<> |
| 54 |
<div className="betterdocs-overview-card"> |
| 55 |
<div className="betterdocs-row"> |
| 56 |
<div className="betterdocs-overview-col betterdocs-col-3 "> |
| 57 |
<div className="betterdocs-card-wrapper created-docs"> |
| 58 |
<div className="betterdocs-card-left"> |
| 59 |
<h3 className="betterdocs-card-counter"> |
| 60 |
{loading ? ( |
| 61 |
<>{loader()}</> |
| 62 |
) : ( |
| 63 |
<>{counts.created_docs}</> |
| 64 |
)} |
| 65 |
</h3> |
| 66 |
<p className="betterdocs-card-sub-header">{__("Created Docs", "betterdocs")}</p> |
| 67 |
</div> |
| 68 |
|
| 69 |
<div className="betterdocs-card-right"> |
| 70 |
<div className="betterdocs-card-icon"> |
| 71 |
<svg width="32" height="34" viewBox="0 0 32 34" fill="none"> |
| 72 |
<path |
| 73 |
d="M17.2628 5.4734V1.55542L24.8319 9.39139H21.0474C18.3898 9.39139 17.2628 8.2247 17.2628 5.4734ZM25.9421 17.1577L15.9004 27.6231C15.4271 28.1125 15.1609 28.7764 15.1603 29.4689V31.0709C15.1603 31.1395 15.1472 31.2074 15.1219 31.2708C15.0965 31.3342 15.0593 31.3918 15.0125 31.4403C14.9656 31.4888 14.91 31.5273 14.8488 31.5535C14.7876 31.5798 14.7219 31.5933 14.6557 31.5933H5.90915C5.22372 31.6946 4.52493 31.6292 3.86811 31.4025C3.21128 31.1758 2.61446 30.7939 2.12488 30.287C1.63529 29.7802 1.2664 29.1623 1.04739 28.4823C0.828388 27.8024 0.765286 27.0789 0.863082 26.3693V5.4734C0.765286 4.76381 0.828388 4.04038 1.04739 3.3604C1.2664 2.68042 1.63529 2.06255 2.12488 1.55571C2.61446 1.04886 3.21128 0.666961 3.86811 0.440234C4.52493 0.213507 5.22372 0.14818 5.90915 0.249424H14.7398V5.4734C14.6403 6.3558 14.7351 7.25006 15.0169 8.08917C15.2987 8.92827 15.7603 9.69047 16.3671 10.3187C16.9739 10.9468 17.7102 11.4247 18.5207 11.7165C19.3312 12.0082 20.195 12.1063 21.0474 12.0034H26.0934V16.792C26.0953 16.8607 26.0828 16.929 26.0566 16.9921C26.0305 17.0553 25.9914 17.1118 25.9421 17.1577ZM15.5808 22.8867C15.5808 22.5403 15.4479 22.2081 15.2113 21.9632C14.9747 21.7183 14.6538 21.5807 14.3193 21.5807H7.59118C7.2566 21.5807 6.93573 21.7183 6.69915 21.9632C6.46257 22.2081 6.32966 22.5403 6.32966 22.8867C6.32966 23.233 6.46257 23.5652 6.69915 23.8102C6.93573 24.0551 7.2566 24.1927 7.59118 24.1927H14.3193C14.6538 24.1927 14.9747 24.0551 15.2113 23.8102C15.4479 23.5652 15.5808 23.233 15.5808 22.8867ZM20.6269 15.9214C20.6269 15.575 20.4939 15.2428 20.2574 14.9979C20.0208 14.753 19.6999 14.6154 19.3653 14.6154H7.59118C7.2566 14.6154 6.93573 14.753 6.69915 14.9979C6.46257 15.2428 6.32966 15.575 6.32966 15.9214C6.32966 16.2677 6.46257 16.5999 6.69915 16.8448C6.93573 17.0898 7.2566 17.2274 7.59118 17.2274H19.3653C19.6999 17.2274 20.0208 17.0898 20.2574 16.8448C20.4939 16.5999 20.6269 16.2677 20.6269 15.9214ZM17.6833 29.4689V33.3346H21.4174L28.1455 26.4042L24.3778 22.5036L17.6833 29.4689ZM30.7022 21.5807L29.037 19.8568C28.8983 19.7119 28.7332 19.5969 28.5513 19.5184C28.3694 19.4399 28.1743 19.3995 27.9773 19.3995C27.7803 19.3995 27.5852 19.4399 27.4033 19.5184C27.2214 19.5969 27.0563 19.7119 26.9176 19.8568L25.5552 21.2847L29.3229 25.1852L30.7022 23.7748C30.8421 23.6312 30.9532 23.4603 31.029 23.272C31.1049 23.0837 31.1439 22.8817 31.1439 22.6777C31.1439 22.4737 31.1049 22.2717 31.029 22.0835C30.9532 21.8952 30.8421 21.7243 30.7022 21.5807Z" |
| 74 |
fill="#00B884" |
| 75 |
/> |
| 76 |
</svg> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
<div className="betterdocs-overview-col betterdocs-col-3 "> |
| 82 |
<div className="betterdocs-card-wrapper published-docs"> |
| 83 |
<div className="betterdocs-card-left"> |
| 84 |
<h3 className="betterdocs-card-counter"> |
| 85 |
{loading ? ( |
| 86 |
<>{loader()}</> |
| 87 |
) : ( |
| 88 |
<>{counts.published_docs}</> |
| 89 |
)} |
| 90 |
</h3> |
| 91 |
<p className="betterdocs-card-sub-header">{__("Published Docs", "betterdocs")}</p> |
| 92 |
</div> |
| 93 |
<div className="betterdocs-card-right"> |
| 94 |
<div className="betterdocs-card-icon"> |
| 95 |
<svg width="56" height="56" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 96 |
<rect x="0.5" y="0.5" width="55" height="55" rx="4.16667" /> |
| 97 |
<path d="M32.6011 10.0625H14.3364C11.9223 10.0625 9.96875 12.0539 9.96875 14.5149V39.6101C9.96875 42.0711 11.9223 44.0625 14.3364 44.0625H27.2646C25.867 42.1196 25.057 39.7558 25.057 37.1815C25.057 30.7054 30.2188 25.4435 36.5717 25.4435C36.6987 25.4435 36.8417 25.4435 36.9688 25.4596V14.5149C36.9688 12.0539 35.0152 10.0625 32.6011 10.0625ZM16.3217 16.5387H22.6746C23.5482 16.5387 24.2629 17.2673 24.2629 18.1577C24.2629 19.0482 23.5482 19.7768 22.6746 19.7768H16.3217C15.4482 19.7768 14.7335 19.0482 14.7335 18.1577C14.7335 17.2673 15.4482 16.5387 16.3217 16.5387ZM24.2629 32.7292H16.3217C15.4482 32.7292 14.7335 32.0006 14.7335 31.1101C14.7335 30.2196 15.4482 29.4911 16.3217 29.4911H24.2629C25.1364 29.4911 25.8511 30.2196 25.8511 31.1101C25.8511 32.0006 25.1364 32.7292 24.2629 32.7292ZM30.6158 26.253H16.3217C15.4482 26.253 14.7335 25.5244 14.7335 24.6339C14.7335 23.7435 15.4482 23.0149 16.3217 23.0149H30.6158C31.4893 23.0149 32.204 23.7435 32.204 24.6339C32.204 25.5244 31.4893 26.253 30.6158 26.253Z" fill="#2E90FA" /> |
| 98 |
<circle cx="36" cy="37" r="6" fill="#2E90FA" /> |
| 99 |
</svg> |
| 100 |
|
| 101 |
</div> |
| 102 |
</div> |
| 103 |
</div> |
| 104 |
</div> |
| 105 |
<div className="betterdocs-overview-col betterdocs-col-3 "> |
| 106 |
<div className="betterdocs-card-wrapper created-FAQs"> |
| 107 |
<div className="betterdocs-card-left"> |
| 108 |
<h3 className="betterdocs-card-counter"> |
| 109 |
{loading ? ( |
| 110 |
<>{loader()}</> |
| 111 |
) : ( |
| 112 |
<>{counts.created_faq}</> |
| 113 |
)} |
| 114 |
</h3> |
| 115 |
<p className="betterdocs-card-sub-header">{__("Created FAQs", "betterdocs")}</p> |
| 116 |
</div> |
| 117 |
<div className="betterdocs-card-right"> |
| 118 |
<div className="betterdocs-card-icon"> |
| 119 |
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 120 |
<g clipPath="url(#clip0_11442_165721)"> |
| 121 |
<path d="M25.9707 5.64062C24.4145 5.64062 23.1484 6.90666 23.1484 8.46289C23.1484 10.0191 24.4145 11.2852 25.9707 11.2852C26.4624 11.2852 26.925 11.1585 27.328 10.9365L26.7275 10.3359C26.4033 10.0117 26.4033 9.48614 26.7275 9.16195C27.0517 8.83775 27.5772 8.83775 27.9014 9.16195L28.484 9.74453C28.6811 9.35964 28.793 8.92421 28.793 8.46296C28.793 6.90666 27.5269 5.64062 25.9707 5.64062Z" fill="#F79009" /> |
| 122 |
<path d="M16.3027 9.49227H18.3051L17.3085 6.85156L16.3027 9.49227Z" fill="#F79009" /> |
| 123 |
<path d="M30.8457 0H8.26758C6.52548 0 5.11328 1.4122 5.11328 3.1543V13.7793C5.11328 15.5214 6.52548 16.9336 8.26758 16.9336H11.0898V20.5456C11.0898 21.4331 12.1628 21.8775 12.7903 21.25L17.1067 16.9336H30.8457C32.5878 16.9336 34 15.5214 34 13.7793V3.1543C34 1.4122 32.5878 0 30.8457 0ZM12.5204 9.22768H10.625V12.1191C10.625 12.5775 10.2533 12.9492 9.79492 12.9492C9.33652 12.9492 8.96484 12.5775 8.96484 12.1191V4.81445C8.96484 4.35605 9.33652 3.98437 9.79492 3.98437H12.7555C13.2139 3.98437 13.5856 4.35605 13.5856 4.81445C13.5856 5.27285 13.2139 5.64453 12.7555 5.64453H10.625V7.56752H12.5204C12.9788 7.56752 13.3504 7.9392 13.3504 8.3976C13.3504 8.856 12.9788 9.22768 12.5204 9.22768ZM20.4755 12.8958C20.379 12.9322 20.2799 12.9494 20.1825 12.9494C19.8471 12.9495 19.5312 12.7446 19.4058 12.4122L18.9316 11.1556H15.6704L15.1909 12.4146C15.0277 12.843 14.5482 13.058 14.1197 12.8948C13.6913 12.7317 13.4763 12.252 13.6394 11.8236L16.3824 4.62187C16.3848 4.61557 16.3873 4.60932 16.3898 4.60302C16.5434 4.22755 16.9048 3.98471 17.3104 3.98437H17.3114C17.7167 3.98437 18.078 4.22649 18.2321 4.60136C18.2352 4.60879 18.2381 4.61643 18.241 4.624L20.959 11.8261C21.1209 12.2549 20.9044 12.7339 20.4755 12.8958ZM30.2374 12.6766C29.9132 13.0008 29.3876 13.0008 29.0634 12.6766L28.5299 12.1431C27.8035 12.6505 26.9212 12.9493 25.9698 12.9493C23.4982 12.9493 21.4874 10.9385 21.4874 8.46686C21.4874 5.99522 23.4982 3.98444 25.9698 3.98444C28.4415 3.98444 30.4522 5.99522 30.4522 8.46686C30.4522 9.38851 30.1724 10.2459 29.6936 10.959L30.2373 11.5027C30.5615 11.8268 30.5615 12.3524 30.2374 12.6766Z" fill="#F79009" /> |
| 124 |
<path d="M14.199 22.6625C13.6333 23.2282 12.8854 23.5398 12.0932 23.5398C10.4415 23.5398 9.09772 22.1984 9.09772 20.5496V18.9296H8.26764C5.42977 18.9296 3.12109 16.6209 3.12109 13.7832V12.4609C1.3944 12.4789 0 13.8835 0 15.6144V26.2394C0 27.9815 1.4122 29.3937 3.1543 29.3937H4.64844V33.0057C4.64844 33.8932 5.72136 34.3375 6.3489 33.7101L10.6653 29.3937H15.9375H18.0625C20.995 26.564 25.3986 22.3019 27.5586 20.189V18.9296H17.9319L14.199 22.6625Z" fill="#F79009" /> |
| 125 |
<path d="M28.3111 21.6069L20.1267 29.792C20.0855 29.8333 20.0558 29.8854 20.0416 29.9414L19.1344 33.5826C19.1073 33.6922 19.1395 33.8088 19.2195 33.8888C19.28 33.9493 19.3625 33.9828 19.4469 33.9828C19.4727 33.9828 19.4991 33.9796 19.5249 33.9731L23.166 33.0659C23.2228 33.0517 23.2743 33.0221 23.3155 32.9809L31.5007 24.7965L28.3111 21.6069Z" fill="#F79009" /> |
| 126 |
<path d="M33.5283 20.4925L32.6173 19.5815C32.0083 18.9726 30.9471 18.9731 30.3389 19.5815L29.2229 20.6975L32.4123 23.8869L33.5283 22.7709C33.8325 22.4668 34 22.0622 34 21.6318C34 21.2014 33.8325 20.7967 33.5283 20.4925Z" fill="#F79009" /> |
| 127 |
</g> |
| 128 |
<defs> |
| 129 |
<clipPath id="clip0_11442_165721"> |
| 130 |
<rect width="34" height="34" fill="white" /> |
| 131 |
</clipPath> |
| 132 |
</defs> |
| 133 |
</svg> |
| 134 |
</div> |
| 135 |
</div> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
<div className="betterdocs-overview-col betterdocs-col-3 "> |
| 139 |
<div className="betterdocs-card-wrapper published-FAQs"> |
| 140 |
<div className="betterdocs-card-left"> |
| 141 |
<h3 className="betterdocs-card-counter"> |
| 142 |
{loading ? ( |
| 143 |
<>{loader()}</> |
| 144 |
) : ( |
| 145 |
<>{counts.published_faq}</> |
| 146 |
)} |
| 147 |
</h3> |
| 148 |
<p className="betterdocs-card-sub-header">{__("Published FAQs", "betterdocs")}</p> |
| 149 |
</div> |
| 150 |
<div className="betterdocs-card-right"> |
| 151 |
<div className="betterdocs-card-icon"> |
| 152 |
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 153 |
<g clipPath="url(#clip0_11442_165735)"> |
| 154 |
<path d="M25.9707 5.64062C24.4145 5.64062 23.1484 6.90666 23.1484 8.46289C23.1484 10.0191 24.4145 11.2852 25.9707 11.2852C26.4624 11.2852 26.925 11.1585 27.328 10.9365L26.7275 10.3359C26.4033 10.0117 26.4033 9.48614 26.7275 9.16195C27.0517 8.83775 27.5772 8.83775 27.9014 9.16195L28.484 9.74453C28.6811 9.35964 28.793 8.92421 28.793 8.46296C28.793 6.90666 27.5269 5.64062 25.9707 5.64062Z" fill="#7F56D9" /> |
| 155 |
<path d="M16.3027 9.49227H18.3051L17.3085 6.85156L16.3027 9.49227Z" fill="#7F56D9" /> |
| 156 |
<path d="M30.8457 0H8.26758C6.52548 0 5.11328 1.4122 5.11328 3.1543V13.7793C5.11328 15.5214 6.52548 16.9336 8.26758 16.9336H11.0898V20.5456C11.0898 21.4331 12.1628 21.8775 12.7903 21.25L17.1067 16.9336H30.8457C32.5878 16.9336 34 15.5214 34 13.7793V3.1543C34 1.4122 32.5878 0 30.8457 0ZM12.5204 9.22768H10.625V12.1191C10.625 12.5775 10.2533 12.9492 9.79492 12.9492C9.33652 12.9492 8.96484 12.5775 8.96484 12.1191V4.81445C8.96484 4.35605 9.33652 3.98437 9.79492 3.98437H12.7555C13.2139 3.98437 13.5856 4.35605 13.5856 4.81445C13.5856 5.27285 13.2139 5.64453 12.7555 5.64453H10.625V7.56752H12.5204C12.9788 7.56752 13.3504 7.9392 13.3504 8.3976C13.3504 8.856 12.9788 9.22768 12.5204 9.22768ZM20.4755 12.8958C20.379 12.9322 20.2799 12.9494 20.1825 12.9494C19.8471 12.9495 19.5312 12.7446 19.4058 12.4122L18.9316 11.1556H15.6704L15.1909 12.4146C15.0277 12.843 14.5482 13.058 14.1197 12.8948C13.6913 12.7317 13.4763 12.252 13.6394 11.8236L16.3824 4.62187C16.3848 4.61557 16.3873 4.60932 16.3898 4.60302C16.5434 4.22755 16.9048 3.98471 17.3104 3.98437H17.3114C17.7167 3.98437 18.078 4.22649 18.2321 4.60136C18.2352 4.60879 18.2381 4.61643 18.241 4.624L20.959 11.8261C21.1209 12.2549 20.9044 12.7339 20.4755 12.8958ZM30.2374 12.6766C29.9132 13.0008 29.3876 13.0008 29.0634 12.6766L28.5299 12.1431C27.8035 12.6505 26.9212 12.9493 25.9698 12.9493C23.4982 12.9493 21.4874 10.9385 21.4874 8.46686C21.4874 5.99522 23.4982 3.98444 25.9698 3.98444C28.4415 3.98444 30.4522 5.99522 30.4522 8.46686C30.4522 9.38851 30.1724 10.2459 29.6936 10.959L30.2373 11.5027C30.5615 11.8268 30.5615 12.3524 30.2374 12.6766Z" fill="#7F56D9" /> |
| 157 |
<path d="M14.199 22.6625C13.6333 23.2282 12.8854 23.5398 12.0932 23.5398C10.4415 23.5398 9.09772 22.1984 9.09772 20.5496V19.3296C9.09772 19.1087 8.91864 18.9296 8.69772 18.9296H8.26764C5.42977 18.9296 3.12109 16.6209 3.12109 13.7832V12.8651C3.12109 12.6426 2.93851 12.4602 2.71807 12.4907C1.18251 12.7031 0 14.0204 0 15.6144V26.2394C0 27.9815 1.4122 29.3937 3.1543 29.3937H4.24844C4.46935 29.3937 4.64844 29.5728 4.64844 29.7937V33.0057C4.64844 33.8932 5.72136 34.3375 6.3489 33.7101L10.5482 29.5108C10.6232 29.4358 10.7249 29.3937 10.831 29.3937H15.9375H20.6327C20.8404 29.3937 21.0134 29.2321 21.0347 29.0254C21.5949 23.5912 23.9725 22.027 27.3396 20.3008C27.4735 20.2322 27.5586 20.0942 27.5586 19.9437V19.3296C27.5586 19.1087 27.3795 18.9296 27.1586 18.9296H18.0976C17.9915 18.9296 17.8897 18.9718 17.8147 19.0468L14.199 22.6625Z" fill="#7F56D9" /> |
| 158 |
<rect x="24" y="23" width="10" height="10" rx="5" fill="#7F56D9" /> |
| 159 |
</g> |
| 160 |
<defs> |
| 161 |
<clipPath id="clip0_11442_165735"> |
| 162 |
<rect width="34" height="34" fill="white" /> |
| 163 |
</clipPath> |
| 164 |
</defs> |
| 165 |
</svg> |
| 166 |
</div> |
| 167 |
</div> |
| 168 |
</div> |
| 169 |
</div> |
| 170 |
</div> |
| 171 |
</div> |
| 172 |
</> |
| 173 |
); |
| 174 |
}; |
| 175 |
|
| 176 |
export default Counts; |
| 177 |
|
