diff --git a/components/BannerImagePanel.tsx b/components/BannerImagePanel.tsx index 380b957..83f9403 100644 --- a/components/BannerImagePanel.tsx +++ b/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 diff --git a/components/ProfileImagePanel.tsx b/components/ProfileImagePanel.tsx index f2ce61e..6cb3525 100644 --- a/components/ProfileImagePanel.tsx +++ b/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([]); + 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