feat: avatars

src/components/menu.tsx

@@ -1,12 +1,13 @@
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";
 
 interface UserProfile {
   username: string;
@@ -72,7 +73,7 @@ const Avatar: FunctionComponent = () => {
     }
   }, [isLoggedIn.value]);
 
-  return (
+  return username ? (
     <button
       onClick={() => route("/profile/settings")}
       class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -84,14 +85,16 @@ const Avatar: FunctionComponent = () => {
           "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
         )}
       >
-        <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
+        <div class="my-5 aspect-square h-full rounded-full">
+          <img class="size-full rounded-full" src={getAvatarPicUrl(status)} alt="avatar" />
+        </div>
         <div class="flex flex-col items-center justify-center">
           <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>
     </button>
-  );
+  ) : null;
 };
 
 interface MenuItems {

src/pages/profile_calendar.tsx

@@ -374,15 +374,15 @@ const ProfileCalendar: FunctionComponent = () => {
     month: { className: calendarStyles.month },
     year: { className: calendarStyles.year },
   };
+  if (isLoading)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
 
   return (
     <div class="flex w-full flex-col items-center">
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <>
       <ModalTags
         refreshTags={fetchTags}
         isOpen={openModalTags}
@@ -492,12 +492,9 @@ const ProfileCalendar: FunctionComponent = () => {
             {errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
             <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
               <div
-                    class={cn(
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
-                      "flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1",
-                      {
                   "cursor-pointer": isEditModal,
-                      }
+                })}
-                    )}
                 onClick={() => {
                   if (!isEditModal) return;
                   setOpenModalCalendar(true);
@@ -516,12 +513,9 @@ const ProfileCalendar: FunctionComponent = () => {
                 </p>
               </div>
               <div
-                    class={cn(
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
-                      "flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2",
-                      {
                   "cursor-pointer": isEditModal,
-                      }
+                })}
-                    )}
                 onClick={() => {
                   if (!isEditModal) return;
                   setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
@@ -589,8 +583,6 @@ const ProfileCalendar: FunctionComponent = () => {
           <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
         )}
       </div>
-        </>
-      )}
     </div>
   );
 };

src/pages/profile_settings.module.scss

@@ -5,7 +5,7 @@
 }
 
 #avatar {
-  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
+  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full;
 }
 
 .profile_container {

src/pages/profile_settings.tsx

@@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
@@ -62,11 +63,19 @@ const ProfileSettings: FunctionComponent = () => {
       console.error("Logout failed:", error);
     }
   };
+  if (!userData.username)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
   return (
     <div class={classes.container}>
       <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
       <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}>
+          <img class="size-28 rounded-full" src={getAvatarPicUrl(userData.status)} alt="avatar" />
+        </div>
         <div class={classes.header_block__name}>
           <p class="text-4xl font-semibold">{userData.username}</p>
           <p class="text-2xl font-light">{userData.status}</p>
@@ -100,4 +109,6 @@ const ProfileSettings: FunctionComponent = () => {
   );
 };
 
+ProfileSettings.displayName = "ProfileSettings";
+
 export default withTitle(UrlsTitle.PROFILE, ProfileSettings);

src/pages/profile_tasks.tsx

@@ -385,13 +385,15 @@ const ProfileTasks: FunctionComponent = () => {
     }
   };
 
+  if (isLoading)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
+
   return (
     <div class={classes.container}>
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
       <ModalTags
         refreshTags={fetchTags}
         zIndex={70}
@@ -404,7 +406,6 @@ const ProfileTasks: FunctionComponent = () => {
         }}
         onChange={setTags}
       />
-      )}
       <ModalCalendar
         zIndex={80}
         isOpen={openModalCalendar}

src/services/avatar-pic.ts

@@ -0,0 +1,21 @@
+import Status1 from "@/assets/status/1.png";
+import Status2 from "@/assets/status/2.png";
+import Status3 from "@/assets/status/3.png";
+import Status4 from "@/assets/status/4.png";
+import Status5 from "@/assets/status/5.png";
+export const getAvatarPicUrl = (status: string) => {
+  switch (true) {
+    case status.includes("точно"):
+      return Status1;
+    case status.includes("плана нет"):
+      return Status2;
+    case status.includes("прокрастинации"):
+      return Status3;
+    case status.includes("3000"):
+      return Status4;
+    case status.includes("планирования"):
+      return Status5;
+    default:
+      return Status1;
+  }
+};