feat: stricter lint, check pipelines, docker-containers, pnpm

src/portfolio/helpers/ProgressBar.tsx

@@ -1,28 +1,27 @@
-import {FC, MutableRefObject, useEffect, useRef, useState} from "react";
+import { FC, MutableRefObject, useEffect, useRef, useState } from "react";
 
-
-type args = {
+type ProgressBarArgs = {
     percentage : number,
     customScore? : string,
 }
-const ProgressBar : FC<args> = ({percentage,customScore}) => {
+const ProgressBar : FC<ProgressBarArgs> = ({ percentage,customScore }): JSX.Element => {
 	const ref = useRef<HTMLDivElement>() as MutableRefObject<HTMLDivElement>;
 	const onScreen = useOnScreen(ref);
 
 	const [current,setCurrent] = useState(0);
 
-	useEffect(()=>{
-		if(onScreen && current==0)
+	useEffect(() => {
+		if (onScreen && current==0)
 		{
 			let counter = 0;
 			const id = setInterval(() => {
-				if(counter<percentage*2)
+				if (counter<percentage*2)
 				{
 					counter += (percentage/100);
 					setCurrent(counter);
 				}
-				else{
-					if(counter>percentage*2)
+				else {
+					if (counter>percentage*2)
 					{
 						setCurrent(percentage*2);
 					}
@@ -30,20 +29,20 @@ const ProgressBar : FC<args> = ({percentage,customScore}) => {
 				}
 			},25);
 		}
-	},[onScreen]);
+	},[onScreen, current, percentage]);
 
 	return (
 		<div className={"pBContainer"} ref={ref}>
 			<div className={"progressBar"}>
-				<div className={"inner"} style={{width : `${current/2}%`}}></div>
+				<div className={"inner"} style={{ width : `${current/2}%` }}></div>
 			</div>
-			<div className={"below"} style={{width : customScore? "100%" : `${current/2}%`, textAlign: "right"}}>{customScore? customScore : Math.ceil(current/2)+"%"}</div>
+			<div className={"below"} style={{ width : customScore? "100%" : `${current/2}%`, textAlign: "right" }}>{customScore? customScore : Math.ceil(current/2)+"%"}</div>
 		</div>
 
 	);
 };
 
-function useOnScreen(ref : MutableRefObject<HTMLDivElement>, rootMargin = "0px") {
+function useOnScreen(ref : MutableRefObject<HTMLDivElement>, rootMargin = "0px"): boolean {
 	// State and setter for storing whether element is visible
 	const [isIntersecting, setIntersecting] = useState(false);
 	useEffect(() => {
@@ -53,22 +52,25 @@ function useOnScreen(ref : MutableRefObject<HTMLDivElement>, rootMargin = "0px")
 				setIntersecting(entry.isIntersecting);
 			},
 			{
-				rootMargin,
+				rootMargin
 			}
 		);
-		if (ref.current) {
-			observer.observe(ref.current);
+		const currentRef = ref.current;
+		if (currentRef) {
+			observer.observe(currentRef);
 		}
 		return () => {
-			try{
-				observer.unobserve(ref.current);
-			}
-			catch (e) {
-				console.log("REPORTED: observer failure :/");
+			if (currentRef) {
+				try {
+					observer.unobserve(currentRef);
+				}
+				catch {
+					// Observer failure handled silently
+				}
 			}
 		};
-	}, []); // Empty array ensures that effect is only run on mount and unmount
+	}, [ref, rootMargin]);
 	return isIntersecting;
 }
 
-export default ProgressBar;
+export default ProgressBar;