To fetch the count numbers of posts, categories, users and comments and display in dashboard, create a hook and a component to render the data.
// hooks/useNumbers
import { useEffect, useState, useContext } from "react";
import { AuthContext } from "../context/auth";
import axios from "axios";
const useNumbers = () => {
// context
const [auth, setAuth] = useContext(AuthContext);
// state
const [numbers, setNumbers] = useState({});
// console.log("numbers", numbers);
useEffect(() => {
if (auth?.token) getNumbers();
}, [auth?.token]);
const getNumbers = async () => {
try {
const { data } = await axios.get("/numbers");
console.log(data);
setNumbers(data);
} catch (err) {
console.log(err);
}
};
return { numbers };
};
export default useNumbers;
// components/pages/RenderProgress
import { Progress } from "antd";
import CountTo from "react-count-to";
import Link from "next/link";
const RenderProgress = ({
color1 = "#8c1aff",
color2 = "#ff6600",
number,
name,
link = "#",
}) => (
<Link href={link}>
<a>
<Progress
type="circle"
strokeColor={{
"0%": color1,
"100%": color2,
}}
percent={100}
format={() => <CountTo to={number} speed={number * 100} />}
/>
<p style={{ marginTop: 10 }}> {name}</p>
</a>
</Link>
);
export default RenderProgress;
// pages/admin/index
import { Row, Col, Divider } from "antd";
import AdminLayout from "../../components/layout/AdminLayout";
import RenderProgress from "../../components/pages/RenderProgress";
import useNumbers from "../../hooks/useNumbers";
const Admin = () => {
const { numbers } = useNumbers();
return (
<AdminLayout>
<Row>
<Col span={24}>
<Divider>
<h1>Statistics</h1>
</Divider>
</Col>
</Row>
<Row>
<Col
span={12}
style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
>
<RenderProgress
number={numbers.posts}
name="Posts"
link="/admin/posts"
/>
</Col>
<Col
span={12}
style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
>
<RenderProgress
number={numbers.categories}
name="Categories"
link="/admin/categories"
/>
</Col>
<Col
span={12}
style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
>
<RenderProgress
number={numbers.comments}
name="Comments"
link="/admin/comments"
/>
</Col>
<Col
span={12}
style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
>
<RenderProgress
number={numbers.users}
name="Users"
link="/admin/users"
/>
</Col>
</Row>
</AdminLayout>
);
};
export default Admin;