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,223 +374,215 @@ 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 ? (
+      <ModalTags
-        <div class="flex w-full flex-1 items-center justify-center">
+        refreshTags={fetchTags}
-          <div class="text-2xl">Загрузка...</div>
+        isOpen={openModalTags}
-        </div>
+        setIsOpen={setOpenModalTags}
-      ) : (
+        tagsList={example_tags}
-        <>
+        value={tags}
-          <ModalTags
+        onClose={() => {
-            refreshTags={fetchTags}
+          setTags({ first: 0, second: 0, overdue: false });
-            isOpen={openModalTags}
+        }}
-            setIsOpen={setOpenModalTags}
+        onChange={setTags}
-            tagsList={example_tags}
+      />
-            value={tags}
+      <ModalCalendar
-            onClose={() => {
+        isOpen={openModalCalendar}
-              setTags({ first: 0, second: 0, overdue: false });
+        setIsOpen={setOpenModalCalendar}
-            }}
+        onClose={() => {
-            onChange={setTags}
+          if (isEdit && !isEditModal) setCalendarDate(null);
-          />
+        }}
-          <ModalCalendar
+        onChange={(e) => isEditModal && setCalendarDate(e.value)}
-            isOpen={openModalCalendar}
+        value={calendarDate!}
-            setIsOpen={setOpenModalCalendar}
+      />
-            onClose={() => {
+      <ModalWindow
-              if (isEdit && !isEditModal) setCalendarDate(null);
+        isOpen={openModal}
-            }}
+        setIsOpen={setIsOpen}
-            onChange={(e) => isEditModal && setCalendarDate(e.value)}
+        onClose={() => {
-            value={calendarDate!}
+          setIsEdit(false);
-          />
+          setEditContent(null);
-          <ModalWindow
+          setSelectedPriority(4);
-            isOpen={openModal}
+          setIsEditModal(false);
-            setIsOpen={setIsOpen}
+          setTags({ first: 0, second: 0, overdue: false });
-            onClose={() => {
+          setCalendarDate(null);
-              setIsEdit(false);
+        }}
-              setEditContent(null);
+      >
-              setSelectedPriority(4);
+        {isEdit && editContent && (
-              setIsEditModal(false);
+          <form
-              setTags({ first: 0, second: 0, overdue: false });
+            class="flex h-full w-full flex-col items-start justify-between"
-              setCalendarDate(null);
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
             }}
           >
-            {isEdit && editContent && (
+            <div class="flex w-full flex-row items-start justify-between">
-              <form
+              <div class="flex flex-1 flex-col gap-1 pe-2">
-                class="flex h-full w-full flex-col items-start justify-between"
+                <input
-                onSubmit={(e) => {
+                  class={cn("w-full p-2 text-2xl outline-0", {
-                  e.preventDefault();
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                  if (isEditModal) handleSubmit(saveTask)();
+                  })}
-                  else setIsEditModal(!isEditModal);
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {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("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);
+                  setCalendarDate(editContent.date);
                 }}
               >
-                <div class="flex w-full flex-row items-start justify-between">
+                <CalendarDaysIcon class="size-10" />
-                  <div class="flex flex-1 flex-col gap-1 pe-2">
+                <p>
-                    <input
+                  {Intl.DateTimeFormat("ru-RU", {
-                      class={cn("w-full p-2 text-2xl outline-0", {
+                    day: "2-digit",
-                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                    month: "2-digit",
-                      })}
+                    year: "numeric",
-                      disabled={!isEditModal}
+                    hour: "2-digit",
-                      placeholder="Название"
+                    minute: "2-digit",
-                      {...register("name", {
+                  }).format(calendarDate!)}
-                        required: "Заполните название",
+                </p>
-                        maxLength: { value: 20, message: "Максимум 20 символов в названии" },
-                      })}
-                    />
-                    <textarea
-                      class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
-                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                      })}
-                      disabled={!isEditModal}
-                      placeholder={isEditModal ? "Описание" : ""}
-                      {...register("description", {
-                        maxLength: { value: 200, message: "Максимум 200 символов в описании" },
-                      })}
-                    />
-                    <input
-                      type="datetime-local"
-                      value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
-                      hidden
-                      {...register("date")}
-                    />
-                    <input type="checkbox" hidden {...register("checked")} />
-                  </div>
-                  <div class="flex flex-row gap-4">
-                    <div
-                      className="flex cursor-pointer flex-col items-center gap-3"
-                      onClick={() => {
-                        if (isEditModal) {
-                          handleSubmit(saveTask)();
-                          setIsEditModal(!isEditModal);
-                        } else setIsEditModal(!isEditModal);
-                      }}
-                    >
-                      {isEditModal ? (
-                        <>
-                          <InboxArrowDownIcon class="size-6" />
-                          <p class="text-[0.7rem]">Сохранить</p>
-                        </>
-                      ) : (
-                        <>
-                          <PencilIcon class="size-6" />
-                          <p class="text-[0.7rem]">Редактировать</p>
-                        </>
-                      )}
-                    </div>
-                    <div
-                      className="flex cursor-pointer flex-col items-center gap-3"
-                      onClick={() => setShowDeleteDialog(true)}
-                    >
-                      <TrashIcon class="size-6" />
-                      <p class="text-[0.7rem]">Удалить</p>
-                    </div>
-                  </div>
-                </div>
-                {errors.name && <p class="text-red-500">{errors.name.message}</p>}
-                {errors.description && <p class="text-red-500">{errors.description.message}</p>}
-                {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-                {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(
-                      "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);
-                      setCalendarDate(editContent.date);
-                    }}
-                  >
-                    <CalendarDaysIcon class="size-10" />
-                    <p>
-                      {Intl.DateTimeFormat("ru-RU", {
-                        day: "2-digit",
-                        month: "2-digit",
-                        year: "numeric",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      }).format(calendarDate!)}
-                    </p>
-                  </div>
-                  <div
-                    class={cn(
-                      "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 });
-                      setOpenModalTags(true);
-                    }}
-                  >
-                    <p class="flex flex-row gap-2">
-                      <BookOpenIcon class="size-5" />
-                      {editContent.subject.name}
-                    </p>
-                    <p class="flex flex-row gap-2">
-                      <DocumentDuplicateIcon class="size-5" />
-                      {editContent.taskType.name}
-                    </p>
-                  </div>
-                  <Dropdown
-                    disabled={!isEditModal}
-                    pt={DropdownStyles}
-                    options={priorities}
-                    value={selectedPriority}
-                    onChange={(e) => setSelectedPriority(e.value)}
-                    itemTemplate={selectedPriorityTemplate}
-                    valueTemplate={selectedPriorityTemplate}
-                  />
-                </div>
-              </form>
-            )}
-          </ModalWindow>
-          <Dialog
-            isOpen={showDeleteDialog}
-            setIsOpen={setShowDeleteDialog}
-            title="Удаление задачи"
-            onConfirm={handleDeleteTask}
-            confirmText="Удалить"
-            cancelText="Отмена"
-          >
-            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
-          </Dialog>
-          <Calendar
-            value={currentDate}
-            onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
-            inline
-            pt={pt}
-            dateTemplate={dateTemplate}
-            className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
-          />
-
-          <div class="mt-8 w-full px-4">
-            <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
-            {selectedTasks.length > 0 ? (
-              <div class="flex flex-col gap-4">
-                {selectedTasks.map((task) => (
-                  <Task
-                    key={task.id}
-                    name={task.name}
-                    checked={task.checked}
-                    priority={task.priority}
-                    overdue={task.date < new Date()}
-                    onClick={() => handleViewTask(task.id)}
-                    onMarkClick={() => handleTaskCheck(task.id)}
-                  />
-                ))}
               </div>
-            ) : (
+              <div
-              <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
+                class={cn("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 });
+                  setOpenModalTags(true);
+                }}
+              >
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.subject.name}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.taskType.name}
+                </p>
+              </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
+            </div>
+          </form>
+        )}
+      </ModalWindow>
+      <Dialog
+        isOpen={showDeleteDialog}
+        setIsOpen={setShowDeleteDialog}
+        title="Удаление задачи"
+        onConfirm={handleDeleteTask}
+        confirmText="Удалить"
+        cancelText="Отмена"
+      >
+        <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+      </Dialog>
+      <Calendar
+        value={currentDate}
+        onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
+        inline
+        pt={pt}
+        dateTemplate={dateTemplate}
+        className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
+      />
+
+      <div class="mt-8 w-full px-4">
+        <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
+        {selectedTasks.length > 0 ? (
+          <div class="flex flex-col gap-4">
+            {selectedTasks.map((task) => (
+              <Task
+                key={task.id}
+                name={task.name}
+                checked={task.checked}
+                priority={task.priority}
+                overdue={task.date < new Date()}
+                onClick={() => handleViewTask(task.id)}
+                onMarkClick={() => handleTaskCheck(task.id)}
+              />
+            ))}
           </div>
-        </>
+        ) : (
-      )}
+          <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,26 +385,27 @@ 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 ? (
+      <ModalTags
-        <div class="flex w-full flex-1 items-center justify-center">
+        refreshTags={fetchTags}
-          <div class="text-2xl">Загрузка...</div>
+        zIndex={70}
-        </div>
+        isOpen={openModalTags}
-      ) : (
+        setIsOpen={setOpenModalTags}
-        <ModalTags
+        tagsList={example_tags}
-          refreshTags={fetchTags}
+        value={tags}
-          zIndex={70}
+        onClose={() => {
-          isOpen={openModalTags}
+          if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
-          setIsOpen={setOpenModalTags}
+        }}
-          tagsList={example_tags}
+        onChange={setTags}
-          value={tags}
+      />
-          onClose={() => {
-            if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
-          }}
-          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;
+  }
+};