MediumArticle.js

import { useControls, button } from "leva";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./styles.css";
import { CircleProgress } from "./CircleProgress";
import { useEffect } from "react";

export default function App() {
  const [{ readTime, progress }, set] = useControls(() => ({
    readTime: { value: 10 * 1000, label: "Read Time (ms)" }, // Default to 10 seconds
    progress: { value: 0, min: 0, max: 100, label: "Progress" },
    "Reset Progress": button(() => set({ progress: 0 }))
  }));

  useEffect(() => {
    let timer = setTimeout(() => {
      if (progress < 100) {
        // Increase progress every second.
        const progressPerSecond = (100 * 1000) / readTime;
        const newProgress = Math.min(100, progress + progressPerSecond);
        timer = set({ progress: newProgress });
      } else {
        // Show notification.
        toast.success("+1 free article!");
      }
    }, 1000);

    return () => {
      clearTimeout(timer);
    };
  }, [progress, readTime, set]);

  return (
    <div className="App">
      <CircleProgress progress={progress} />
      <h1>Medium Article</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <ToastContainer position="bottom-left" autoClose={2000} />
    </div>
  );
}