From 852ac9ad0d8760f2ecf5d534df1d8b91da8d9cea Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 7 May 2025 10:42:23 +0300
Subject: [PATCH] feat: real login and logout

---
 src/components/menu.tsx        | 51 ++++++++++++++-----------
 src/pages/profile_settings.tsx | 68 +++++++++++++++++++++-------------
 2 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 94522be..3549e9a 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -4,8 +4,22 @@ import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { useEffect, useState } from "preact/hooks";
+import apiClient from "@/services/api";
+import { useAppContext } from "@/providers/AuthProvider";
+
+interface UserProfile {
+  username: string;
+  email: string;
+  status: string;
+  avatar_url: string | null;
+  telegram_notifications: boolean;
+  telegram_chat_id: string;
+}
+
+interface UserSettings {
+  profile: UserProfile;
+}
 
 interface MenuItemProps {
   title: string;
@@ -36,32 +50,27 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
   );
 };
 
-
 const Avatar: FunctionComponent = () => {
   const [status, setStatus] = useState("");
+  const [username, setUsername] = useState("");
   const { route, path } = useLocation();
+  const { isLoggedIn } = useAppContext();
 
   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(getCurrentStatus(points));
-    };
-
-    // Initial update
-    updateStatus();
-
-    // Update when tasks change
-    const handleStorage = (e: StorageEvent) => {
-      if (e.key === "tasks") {
-        updateStatus();
+    const fetchUserData = async () => {
+      try {
+        const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
+        setUsername(response.profile.username);
+        setStatus(response.profile.status);
+      } catch (error) {
+        console.error("Failed to fetch user data:", error);
       }
     };
-    
-    window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
-  }, []);
+
+    if (isLoggedIn.value) {
+      fetchUserData();
+    }
+  }, [isLoggedIn.value]);
 
   return (
     <button
@@ -77,7 +86,7 @@ const Avatar: FunctionComponent = () => {
       >
         <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
         <div class="flex flex-col items-center justify-center">
-          <p class="text-3xl font-semibold">никнейм</p>
+          <p class="text-3xl font-semibold">{username}</p>
           <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>
diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx
index bde1bf3..c2f6371 100644
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -4,44 +4,56 @@ import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
-import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
+interface UserProfile {
+  username: string;
+  email: string;
+  status: string;
+  avatar_url: string | null;
+  telegram_notifications: boolean;
+  telegram_chat_id: string;
+}
+
+interface UserSettings {
+  profile: UserProfile;
+}
+
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const [status, setStatus] = useState(0);
+  const [userData, setUserData] = useState<UserProfile>({
+    username: "",
+    email: "",
+    status: "",
+    avatar_url: null,
+    telegram_notifications: false,
+    telegram_chat_id: "",
+  });
   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();
+    const fetchUserData = async () => {
+      try {
+        const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
+        setUserData(response.profile);
+      } catch (error) {
+        console.error("Failed to fetch user data:", error);
       }
     };
 
-    window.addEventListener("storage", handleStorage);
-    return () => window.removeEventListener("storage", handleStorage);
-  }, []);
+    if (isLoggedIn.value) {
+      fetchUserData();
+    }
+  }, [isLoggedIn.value]);
 
   const handleLogout = async () => {
     try {
-      await apiClient("/api/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
+      await apiClient("/api/settings/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
       isLoggedIn.value = false;
       localStorage.removeItem("loggedIn");
       localStorage.removeItem("user");
@@ -54,18 +66,24 @@ const ProfileSettings: FunctionComponent = () => {
   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 id={classes.avatar}>
+          {userData.avatar_url ? (
+            <img src={userData.avatar_url} alt="User avatar" class="h-full w-full rounded-full object-cover" />
+          ) : (
+            "Аватар"
+          )}
+        </div>
         <div class={classes.header_block__name}>
-          <p class="text-4xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
+          <p class="text-4xl font-semibold">{userData.username}</p>
+          <p class="text-2xl font-light">{userData.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")}
-              style={{ width: `${(status / maxStatus) * 100}%` }}
+              style={{ width: `${userData.telegram_chat_id ? 100 : 0}%` }}
             ></div>
           </div>
           <div class="-mt-3 self-end text-sm font-light">
-            {status}/{maxStatus}
+            {userData.telegram_chat_id ? "100" : "0"}/{maxStatus}
           </div>
         </div>
       </div>