implements sst bucket to change profile pic

components/BannerImagePanel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import NextImage from "next/image";
 import Banner0 from "@/public/Banner0.svg";
 import Banner1 from "@/public/Banner1.svg";
 import Banner2 from "@/public/Banner2.svg";
@@ -67,7 +66,7 @@ const BannerImagePanel = ({ closeModal }: { closeModal: () => void }) => {
           } mt-4 rounded-lg px-10 py-2 font-medium text-white drop-shadow-lg`}
           onClick={handleBannerSubmit}
         >
-          Upload
+          Done
         </button>
       </div>
     </div>

components/ProfileImagePanel.tsx

@@ -3,10 +3,38 @@
 import { useState } from "react";
 import { Image } from "@mantine/core";
 import { Dropzone, IMAGE_MIME_TYPE, FileWithPath } from "@mantine/dropzone";
+import { changeProfileImage, getPreSignedURL } from "@/services/images";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
 
-const ProfileImagePanel = () => {
+const ProfileImagePanel = ({ closeModal }: { closeModal: () => void }) => {
+  const queryClient = useQueryClient();
+  const router = useRouter();
   const [file, setFile] = useState<FileWithPath[]>([]);
 
+  const handleSubmitImage = async () => {
+    if (!file[0]) {
+      throw new Error("Image was not selected by the user");
+    }
+
+    const url = await getPreSignedURL();
+
+    const image = await fetch(url, {
+      body: file[0],
+      method: "PUT",
+      headers: {
+        "Content-Type": file[0].type,
+        "Content-Disposition": `attachment; filename="${file[0].name}"`,
+      },
+    });
+
+    const uploadedURL = image.url.split("?")[0];
+    await changeProfileImage(uploadedURL);
+    closeModal();
+    await queryClient.invalidateQueries({ queryKey: ["user"] });
+    router.refresh();
+  };
+
   const preview = file.map((image, index) => {
     const imageUrl = URL.createObjectURL(image);
     return (
@@ -56,6 +84,7 @@ const ProfileImagePanel = () => {
           Reset
         </button>
         <button
+          onClick={handleSubmitImage}
           disabled={file.length === 0}
           className={`${
             file.length === 0

components/UserProfileButton.tsx

@@ -28,7 +28,6 @@ const UserProfileButton = ({
     >
       {photoUrl ? (
         <Image
-          priority
           src={photoUrl}
           alt={"User profile photo"}
           className={`rounded-full ${sizes[size]}`}

components/modals/SettingsDialog.tsx

@@ -75,7 +75,7 @@ const SettingsDialog = ({ showModal, onClose }: SettingsDialogProps) => {
                   </Tabs.List>
 
                   <Tabs.Panel value="profileImage">
-                    <ProfileImagePanel />
+                    <ProfileImagePanel closeModal={onClose} />
                   </Tabs.Panel>
 
                   <Tabs.Panel value="bannerImage">

next.config.mjs

@@ -14,6 +14,10 @@ const nextConfig = {
         // Optionally, you can also specify the pathname prefix if needed:
         // pathname: '/your/pathname/prefix/*',
       },
+      {
+        protocol: "https",
+        hostname: "*.amazonaws.com",
+      },
     ],
   },
   eslint: {