feat: status-system

src/pages/profile_settings.tsx

@@ -3,22 +3,47 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { cn } from "@/utils/class-merge";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const status = 12;
+  const [status, setStatus] = useState(0);
   const maxStatus = 100;
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(points);
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
   return (
     <div class={classes.container}>
       <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
         <div id={classes.avatar}>Аватар</div>
         <div class={classes.header_block__name}>
           <p class="text-4xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">Статус</p>
+          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
           <div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
             <div
               class={cn("relative top-0 left-0 h-2 bg-black")}