feat: profile picture

apps/web/src/views/settings/components/Avatar.tsx

@@ -0,0 +1,113 @@
+import Image from "next/image";
+import { useState } from "react";
+
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+import createClient from "~/utils/supabase/client";
+
+export default function Avatar({
+  userId,
+  userImage,
+}: {
+  userId: string | undefined;
+  userImage: string | null | undefined;
+}) {
+  const supabase = createClient();
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+  const [uploading, setUploading] = useState(false);
+
+  const updateUser = api.user.update.useMutation({
+    onSuccess: async () => {
+      try {
+        await utils.user.getUser.refetch();
+      } catch (e) {
+        console.error(e);
+        throw e;
+      }
+    },
+    onError: () => {
+      showPopup({
+        header: "Error updating profile image",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
+  });
+
+  const avatarUrl = userImage
+    ? supabase.storage.from("avatars").getPublicUrl(userImage).data.publicUrl
+    : null;
+
+  const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      setUploading(true);
+
+      if (!event.target.files || event.target.files.length === 0) {
+        throw new Error("You must select an image to upload.");
+      }
+
+      if (!userId) {
+        throw new Error("User ID is required.");
+      }
+
+      const file = event.target.files[0];
+
+      if (!file) {
+        throw new Error("No file selected.");
+      }
+
+      const fileExt = file.name.split(".").pop();
+      const fileName = `${userId}/avatar.${fileExt}`;
+      const filePath = `${fileName}`;
+
+      const { error: uploadError } = await supabase.storage
+        .from("avatars")
+        .upload(filePath, file, { upsert: true });
+
+      if (uploadError) {
+        throw uploadError;
+      }
+
+      updateUser.mutate({ image: filePath });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="relative">
+        <input
+          className="absolute z-10 h-16 w-16 cursor-pointer rounded-full opacity-0"
+          type="file"
+          id="single"
+          accept="image/*"
+          onChange={uploadAvatar}
+          disabled={uploading}
+        />
+        {avatarUrl ? (
+          <Image
+            src={avatarUrl}
+            alt="Avatar"
+            width={64}
+            height={64}
+            className="rounded-full"
+          />
+        ) : (
+          <span className="inline-block h-16 w-16 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
+            <svg
+              className="h-full w-full text-dark-700"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/views/settings/index.tsx

@@ -6,6 +6,8 @@ import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+import Avatar from "./components/Avatar";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
@@ -16,6 +18,8 @@ export default function SettingsPage() {
   const { modalContentType, openModal } = useModal();
   const { workspace } = useWorkspace();
 
+  const { data } = api.user.getUser.useQuery();
+
   const handleOpenBillingPortal = async () => {
     try {
       const response = await fetch("/api/stripe/create_billing_session", {
@@ -47,6 +51,13 @@ export default function SettingsPage() {
               </h1>
             </div>
 
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Profile picture
+              </h2>
+              <Avatar userId={data?.id} userImage={data?.image} />
+            </div>
+
             <div className="mb-8 border-t border-light-300 dark:border-dark-300">
               <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                 Workspace name