From 1f0235d8d2581625f9d9df50cfc7b0f354cb3d9c Mon Sep 17 00:00:00 2001
From: zobweyt <zobweyt@gmail.com>
Date: Fri, 23 Aug 2024 16:42:42 +0300
Subject: [PATCH] Add avatar update and delete

---
 frontend/src/lib/api/schema.d.ts              |  2 +-
 frontend/src/lib/api/users/me/actions.ts      | 15 ++++++
 frontend/src/lib/api/users/me/server.ts       | 26 ++++++++++
 .../(sidebar)/(authenticated)/settings.tsx    | 51 ++++++++++++++++---
 4 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/api/users/me/actions.ts
 create mode 100644 frontend/src/lib/api/users/me/server.ts

diff --git a/frontend/src/lib/api/schema.d.ts b/frontend/src/lib/api/schema.d.ts
index 254ffca..65defac 100644
--- a/frontend/src/lib/api/schema.d.ts
+++ b/frontend/src/lib/api/schema.d.ts
@@ -237,7 +237,7 @@ export interface components {
              * File
              * Format: binary
              */
-            file: string;
+            file: Blob;
         };
         /** Code */
         Code: {
diff --git a/frontend/src/lib/api/users/me/actions.ts b/frontend/src/lib/api/users/me/actions.ts
new file mode 100644
index 0000000..68c0a6c
--- /dev/null
+++ b/frontend/src/lib/api/users/me/actions.ts
@@ -0,0 +1,15 @@
+import { action } from "@solidjs/router";
+import { $deleteCurrentUserAvatar, $updateCurrentUserAvatar } from "./server";
+
+export const deleteCurrentUserAvatar = action(async () => {
+  "use server";
+
+  await $deleteCurrentUserAvatar();
+});
+
+export const updateCurrentUserAvatar = action(async (file: File) => {
+  "use server";
+
+  await $updateCurrentUserAvatar(file);
+});
+
diff --git a/frontend/src/lib/api/users/me/server.ts b/frontend/src/lib/api/users/me/server.ts
new file mode 100644
index 0000000..b11f488
--- /dev/null
+++ b/frontend/src/lib/api/users/me/server.ts
@@ -0,0 +1,26 @@
+import { formDataSerializer, getClient } from "~/lib/api";
+
+export const $deleteCurrentUserAvatar = async () => {
+  "use server";
+
+  const client = await getClient();
+
+  const { response } = await client.DELETE("/api/v1/users/me/avatar");
+
+  return response.status !== 404;
+};
+
+export const $updateCurrentUserAvatar = async (file: File) => {
+  "use server";
+
+  const client = await getClient();
+
+  const { response } = await client.PATCH("/api/v1/users/me/avatar", {
+    body: {
+      file: file,
+    },
+    bodySerializer: formDataSerializer,
+  });
+
+  return response.status;
+};
diff --git a/frontend/src/routes/(app)/(sidebar)/(authenticated)/settings.tsx b/frontend/src/routes/(app)/(sidebar)/(authenticated)/settings.tsx
index 811b672..a86ba7e 100644
--- a/frontend/src/routes/(app)/(sidebar)/(authenticated)/settings.tsx
+++ b/frontend/src/routes/(app)/(sidebar)/(authenticated)/settings.tsx
@@ -1,18 +1,20 @@
-import { useSubmission } from "@solidjs/router";
+import { useAction, useSubmission } from "@solidjs/router";
 import { Show } from "solid-js";
 
 import { Icon } from "solid-heroicons";
-import { pencilSquare, userCircle } from "solid-heroicons/solid-mini";
+import { pencilSquare, trash, userCircle } from "solid-heroicons/solid-mini";
 
-import { Button, Heading, LocaleSwitcher, Separator, ThemeSwitcher, Title } from "~/components";
+import { Button, Dropdown, Heading, LocaleSwitcher, Separator, ThemeSwitcher, Title } from "~/components";
 import { formatResourceURL } from "~/lib/api/uploads";
 import { unauthenticate, useCurrentUser } from "~/lib/auth";
 import { useI18n } from "~/lib/i18n";
+import { deleteCurrentUserAvatar, updateCurrentUserAvatar } from "~/lib/api/users/me/actions";
 
 export default function Settings() {
   const i18n = useI18n();
   const currentUser = useCurrentUser();
   const loggingOut = useSubmission(unauthenticate);
+  const updateAvatar = useAction(updateCurrentUserAvatar);
 
   return (
     <>
@@ -35,11 +37,44 @@ export default function Settings() {
                   </p>
                 </hgroup>
                 <div class="size-8">
-                  <Show when={user().avatar_url} fallback={<Icon path={userCircle} />}>
-                    {(avatar_url) => (
-                      <img src={formatResourceURL(avatar_url())} alt="Profile picture" class="rounded-full" />
-                    )}
-                  </Show>
+                  <Dropdown gutter={2} placement="bottom">
+                    <Dropdown.Trigger>
+                      <Show when={user().avatar_url} fallback={<Icon class="size-8" path={userCircle} />}>
+                        {(avatar_url) => (
+                          <img
+                            src={formatResourceURL(avatar_url())}
+                            alt={i18n.t.routes.settings.sections.personal.fields.avatar.heading()}
+                            class="rounded-full"
+                          />
+                        )}
+                      </Show>
+                    </Dropdown.Trigger>
+                    <Dropdown.Content class="min-w-64">
+                      <Dropdown.Item as={"label"} for="avatar" class="justify-start gap-2">
+                        <input
+                          type="file"
+                          name="avatar"
+                          id="avatar"
+                          accept="image/*"
+                          class="sr-only"
+                          onChange={async (e) => await updateAvatar(e.currentTarget.files?.[0]!)}
+                        />
+                        <Icon class="size-3.5" path={pencilSquare} />
+                        Upload new avatar
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                        as={"form"}
+                        method="post"
+                        action={deleteCurrentUserAvatar}
+                        disabled={user().avatar_url === null}
+                      >
+                        <button type="submit" class="flex size-full cursor-default items-center gap-2 text-red-600">
+                          <Icon class="size-3.5" path={trash} />
+                          Remove avatar
+                        </button>
+                      </Dropdown.Item>
+                    </Dropdown.Content>
+                  </Dropdown>
                 </div>
               </div>