Skip to content

Commit

Permalink
Update countingNumbers.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
sk0618054 authored Mar 21, 2024
1 parent 9dd4827 commit 7610ae7
Showing 1 changed file with 51 additions and 74 deletions.
125 changes: 51 additions & 74 deletions components/utils/countingNumbers.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,8 @@
"use client";

import { useInView } from "framer-motion";
import { useEffect, useRef, useState } from "react";

export default function CountingNumbers({
className,
reverse = false,
start = reverse ? 1000 : 0,
interval = 10,
duration = 800,
}: {
className: string;
reverse?: boolean;
start?: number;
interval?: number;
duration?: number;
}) {
const [top, setTop] = useState<boolean>(true);
// Custom hook for fetching data
function useStarsCount() {
const [starsCount, setStarsCount] = useState<number>(3000);
const [number, setNumber] = useState(start);

// detect whether user has scrolled the page down by 10px
const scrollHandler = () => {
window.pageYOffset > 10 ? setTop(false) : setTop(true);
};

useEffect(() => {
scrollHandler();
window.addEventListener("scroll", scrollHandler);
return () => window.removeEventListener("scroll", scrollHandler);
}, [top]);

let value: number;

useEffect(() => {
const fetchStarsCount = async () => {
Expand All @@ -41,9 +12,7 @@ export default function CountingNumbers({
);
if (response.ok) {
const data = await response.json();
// Use setStarsCount to update the state
setStarsCount(data.stargazers_count);
console.log(data.stargazers_count);
} else {
console.error("Failed to fetch stars count", response.statusText);
}
Expand All @@ -53,54 +22,62 @@ export default function CountingNumbers({
};

fetchStarsCount();
}, [starsCount]); // Include starsCount as a dependency
}, []);

let increment = Math.floor(
Math.abs(start - starsCount) / (duration / interval)
);
if (increment === 0) {
increment = 1;
}
return starsCount;
}

// Custom hook for counting animation
function useCountAnimation(start: number, target: number, duration: number) {
const [number, setNumber] = useState(start);
const increment = Math.floor(Math.abs(start - target) / (duration / 10));

useEffect(() => {
const timer = setInterval(() => {
if (number < target) {
setNumber((num) => Math.min(num + increment, target));
} else if (number > target) {
setNumber((num) => Math.max(num - increment, target));
}
}, 10);

return () => clearInterval(timer);
}, [number, target, increment]);

return number;
}

export default function CountingNumbers({
className,
reverse = false,
start = reverse ? 1000 : 0,
interval = 10,
duration = 800,
}: {
className: string;
reverse?: boolean;
start?: number;
interval?: number;
duration?: number;
}) {
const [top, setTop] = useState<boolean>(true);
const starsCount = useStarsCount();
const number = useCountAnimation(start, starsCount, duration);
const ref = useRef(null);
const isInView = useInView(ref);

useEffect(() => {
if (isInView) {
let timer = setInterval(() => {
if (reverse) {
if (number > starsCount) {
setNumber((num) => {
let newstarsCount = num - increment;
if (newstarsCount < starsCount) {
newstarsCount = starsCount;
if (timer) clearInterval(timer);
}
return newstarsCount;
});
} else if (timer) {
clearInterval(timer);
}
} else {
if (number < starsCount) {
setNumber((num) => {
let newstarsCount = num + increment;
if (newstarsCount > starsCount) {
newstarsCount = starsCount;
if (timer) clearInterval(timer);
}
return newstarsCount;
});
} else if (timer) {
clearInterval(timer);
}
}
}, interval);
}
}, [isInView]);
const scrollHandler = () => {
window.pageYOffset > 10 ? setTop(false) : setTop(true);
};

scrollHandler();
window.addEventListener("scroll", scrollHandler);
return () => window.removeEventListener("scroll", scrollHandler);
}, []);

return (
<p className={className} ref={ref}>
{Intl.NumberFormat().format(starsCount)}
{Intl.NumberFormat().format(number)}
</p>
);
}

0 comments on commit 7610ae7

Please sign in to comment.