Screen Shot 2022-03-06 at 2.24.07 AM

Server

// route
router.get("/numbers", requireSignin, isAdmin, getNumbers);
// controller
export const getNumbers = async (req, res) => {
  try {
    const posts = await Post.countDocuments();
    const users = await User.countDocuments();
    const comments = await Comment.countDocuments();
    return res.json({
      posts,
      users,
      comments,
    });
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};

Client

// pages/admin/index
import { useEffect, useState, useContext } from "react";
import { Row, Col, Progress } from "antd";
import AdminLayout from "../../components/layout/AdminLayout";
import { AuthContext } from "../../context/auth";
import CountTo from "react-count-to";
import Link from "next/link";
import axios from "axios";

const Admin = () => {
  // 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 (
    <AdminLayout>
      <Row>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.posts}
            name="Posts"
            link="/admin/posts"
          />
        </Col>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.comments}
            name="Comments"
            link="/admin/comments"
          />
        </Col>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.users}
            name="Users"
            link="/admin/users"
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

const RenderProgress = ({
  color1 = "#108ee9",
  color2 = "#87d068",
  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 Admin;