From 8c777bd7a2e6bd528c2d75d7ccdf0fd55066ea21 Mon Sep 17 00:00:00 2001 From: maiqel Date: Mon, 12 Aug 2024 08:10:35 +0100 Subject: [PATCH 01/11] feat: implemented functionality to add a profile picture by saving to server and not 3rd party service --- .../admin/(settings)/settings/page.tsx | 105 ++++++++++-------- src/components/card/user-card.tsx | 7 +- src/config/auth.config.ts | 2 +- src/contexts/orgContext.tsx | 4 +- src/lib/auth.ts | 2 +- src/types/index.d.ts | 1 + 6 files changed, 72 insertions(+), 49 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 59a75581a..6a5749ba8 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -1,7 +1,7 @@ "use client"; import axios from "axios"; -import { useSession } from "next-auth/react"; +import { signIn, useSession } from "next-auth/react"; import Image from "next/image"; import { ChangeEvent, useEffect, useState } from "react"; @@ -20,6 +20,7 @@ import { import { toast } from "~/components/ui/use-toast"; import { CloudinaryAsset } from "~/types"; import { InstagramIcon, LinkedinIcon, XIcon } from "./icons"; +import { unstable_update } from "~/lib/auth"; const pronouns = [ { value: "He/Him", label: "He/Him" }, @@ -102,7 +103,7 @@ export default function SettingsPage() { department: response.data.data.department ?? "", username: response.data.data.username ?? "", }); - setProfilePicture(response.data.data.profile_picture); + setProfilePicture(response.data.data.profile_pic_url); setIsSuccess(true); } } catch { @@ -133,20 +134,36 @@ export default function SettingsPage() { ...formData, pronouns: pronoun, social_links: Object.values(socialLinks), - profile_picture: "", + profile_pic_url: '', }; - const formData1 = new FormData(); - formData1.append("file", image!); - formData1.append("upload_preset", "starterhouse"); - formData1.append("api_key", "673723355315667"); - - await fetch(`https://api.cloudinary.com/v1_1/dnik53vns/image/upload`, { - method: "POST", - body: formData1, - }).then(async (response) => { - const data: CloudinaryAsset = await response.json(); - payload.profile_picture = data.url; - }); + + if (image) { + const formData = new FormData(); + formData.append("file", image!); + + const baseUrl = await getApiUrl(); + const UPLOAD_API_URL = `${baseUrl}/api/v1/profile/upload-image`; + + const uploadResponse = await fetch(UPLOAD_API_URL, { + method: "POST", + body: formData, + headers: { + Authorization: `Bearer ${data?.access_token}`, + }, + }); + + const uploadData = await uploadResponse.json(); + if (uploadResponse.ok) { + const baseUrl = await getApiUrl(); + const profilePicUrl = uploadData.data.profile_picture_url.replace('http://localhost:3009', baseUrl); + + payload.profile_pic_url = profilePicUrl; + console.log(payload.profile_pic_url) + setProfilePicture(profilePicUrl); + } else { + throw new Error("Failed to upload image"); + } + } setIsPending(true); @@ -158,41 +175,41 @@ export default function SettingsPage() { Authorization: `Bearer ${data?.access_token}`, }, }); - // if (updated.status === 200) { - // const newSession: Session = { - // ...data, - // user: { - // ...data?.user, - // id: data?.user.id ?? "", - // first_name: data?.user.first_name ?? "", - // last_name: data?.user.last_name ?? "", - - // role: data?.user.role ?? "", - // bio: formData.bio, - // username: formData.username, - // is_superadmin: data?.user.is_superadmin, - // }, - // expires: data?.expires, - // }; - // } - } catch { + + const updatedUser = { + ...data?.user, + image: payload.profile_pic_url, + }; + + const event = new CustomEvent("session", { + detail: { session: { ...data, user: updatedUser } }, + }); + + window.dispatchEvent(event); + + await signIn("credentials", { redirect: false }); + + setIsSuccess(true); + } catch (error) { setIsPending(false); + setError("An error occurred while saving your information"); + console.error("Error during image upload or profile update:", error); } finally { setIsPending(false); } }; - const isFormDisabled = - !formData.bio || - !formData.department || - !formData.email || - !formData.jobTitle || - !formData.username || - !socialLinks.instagram || - !socialLinks.linkedin || - !socialLinks.x || - !profilePicture || - !pronoun; + const isFormDisabled = !( + formData.bio && + formData.department && + formData.jobTitle && + formData.username && + socialLinks.instagram && + socialLinks.linkedin && + socialLinks.x && + pronoun + ); + return (
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx index 792e68cab..1a3621942 100644 --- a/src/components/card/user-card.tsx +++ b/src/components/card/user-card.tsx @@ -1,6 +1,7 @@ import { ChevronDown } from "lucide-react"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; +import { useEffect } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"; import { @@ -25,6 +26,10 @@ const UserCard = () => { const { data: session, status } = useSession(); const { user } = session ?? {}; + useEffect(() => { +console.log(user); + }, []) + return ( @@ -38,7 +43,7 @@ const UserCard = () => { )} {status === "authenticated" && ( - + {user?.first_name?.charAt(0)} diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts index 44768ac63..b7d85bd97 100644 --- a/src/config/auth.config.ts +++ b/src/config/auth.config.ts @@ -137,7 +137,7 @@ export default { customToken.name?.split(" ").slice(1).join(" ") || customToken.fullname?.split(" ").slice(1).join(" ") || "", - image: token.picture || customToken.avatar_url || "", + image: customToken.profile_pic_url || token.picture || customToken.avatar_url || "", role: customToken.role as string, email: token.email as string, }; diff --git a/src/contexts/orgContext.tsx b/src/contexts/orgContext.tsx index 9ad83db4d..70ae101a7 100644 --- a/src/contexts/orgContext.tsx +++ b/src/contexts/orgContext.tsx @@ -97,7 +97,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => { }); }); } - }, [organizations]); + }, []); useEffect(() => { if (userOrg.length > 0) { @@ -113,7 +113,7 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => { ...uniqueOrgs, ]); } - }, [userOrg, organizations]); + }, []); useEffect(() => { document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto"; diff --git a/src/lib/auth.ts b/src/lib/auth.ts index 18de73deb..f104ebe1e 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -18,7 +18,7 @@ declare module "next-auth" { first_name: User["first_name"]; last_name: User["last_name"]; email: User["email"]; - image: User["avatar_url"]; + image: string; role: User["role"]; bio?: string; username?: string; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 6d117589b..f812e5b07 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -11,6 +11,7 @@ export interface CustomJWT extends JWT { last_name?: string; fullname?: string; access_token?: string; + profile_pic_url?: string; } export interface CustomSession extends Session { user: { From 21afd8a214236c3b01394ccd49e676220430ed86 Mon Sep 17 00:00:00 2001 From: maiqel Date: Mon, 12 Aug 2024 08:15:30 +0100 Subject: [PATCH 02/11] chore: deleted console.logs --- src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx | 1 - src/components/card/user-card.tsx | 5 ----- 2 files changed, 6 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 6a5749ba8..4a7dfde1d 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -158,7 +158,6 @@ export default function SettingsPage() { const profilePicUrl = uploadData.data.profile_picture_url.replace('http://localhost:3009', baseUrl); payload.profile_pic_url = profilePicUrl; - console.log(payload.profile_pic_url) setProfilePicture(profilePicUrl); } else { throw new Error("Failed to upload image"); diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx index 1a3621942..f402d61e9 100644 --- a/src/components/card/user-card.tsx +++ b/src/components/card/user-card.tsx @@ -1,7 +1,6 @@ import { ChevronDown } from "lucide-react"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; -import { useEffect } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"; import { @@ -26,10 +25,6 @@ const UserCard = () => { const { data: session, status } = useSession(); const { user } = session ?? {}; - useEffect(() => { -console.log(user); - }, []) - return ( From 28918330df5d7c887fb4d74fa0d3dd4dd211ddfd Mon Sep 17 00:00:00 2001 From: maiqel Date: Mon, 12 Aug 2024 16:09:56 +0100 Subject: [PATCH 03/11] feat: implemented uploading of profile picture to server, fixed bugs --- .../admin/(settings)/settings/page.tsx | 97 +++++++++++-------- src/components/card/user-card.tsx | 51 +++++++++- src/config/auth.config.ts | 2 +- src/lib/auth.ts | 2 +- src/types/index.d.ts | 1 - 5 files changed, 109 insertions(+), 44 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 4a7dfde1d..632aa5a80 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -18,9 +18,7 @@ import { SelectValue, } from "~/components/ui/select"; import { toast } from "~/components/ui/use-toast"; -import { CloudinaryAsset } from "~/types"; import { InstagramIcon, LinkedinIcon, XIcon } from "./icons"; -import { unstable_update } from "~/lib/auth"; const pronouns = [ { value: "He/Him", label: "He/Him" }, @@ -112,6 +110,53 @@ export default function SettingsPage() { })(); }, [data?.access_token, data?.user.id, error]); + const handleImageUpload = async (event: ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + setImage(file); + + const formData = new FormData(); + formData.append("avatar", file); + + try { + const baseUrl = await getApiUrl(); + const UPLOAD_API_URL = `${baseUrl}/api/v1/profile/upload-image`; + + const uploadResponse = await fetch(UPLOAD_API_URL, { + method: "POST", + body: formData, + headers: { + Authorization: `Bearer ${data?.access_token}`, + }, + }); + + const uploadData = await uploadResponse.json(); + if (uploadResponse.ok) { + const profilePicUrl = uploadData.data.profile_pic_url; + window.dispatchEvent( + new CustomEvent("userProfileUpdate", { detail: { profilePicUrl } }), + ); + setProfilePicture(profilePicUrl); + + setFormData((previousData) => ({ + ...previousData, + profile_pic_url: profilePicUrl, + })); + window.dispatchEvent(new Event("profileUpdate")); + } else { + throw new Error("Failed to upload image"); + } + } catch (error) { + console.error("Error during image upload:", error); + toast({ + title: "Error", + description: "Failed to update profile picture. Please try again.", + variant: "destructive", + }); + } + } + }; + const submit = async () => { if (!isValidXUrl(socialLinks.x)) { return toast({ title: "Warning!", description: "Enter a valid X url" }); @@ -134,38 +179,9 @@ export default function SettingsPage() { ...formData, pronouns: pronoun, social_links: Object.values(socialLinks), - profile_pic_url: '', + profile_pic_url: profilePicture, }; - - if (image) { - const formData = new FormData(); - formData.append("file", image!); - - const baseUrl = await getApiUrl(); - const UPLOAD_API_URL = `${baseUrl}/api/v1/profile/upload-image`; - - const uploadResponse = await fetch(UPLOAD_API_URL, { - method: "POST", - body: formData, - headers: { - Authorization: `Bearer ${data?.access_token}`, - }, - }); - - const uploadData = await uploadResponse.json(); - if (uploadResponse.ok) { - const baseUrl = await getApiUrl(); - const profilePicUrl = uploadData.data.profile_picture_url.replace('http://localhost:3009', baseUrl); - - payload.profile_pic_url = profilePicUrl; - setProfilePicture(profilePicUrl); - } else { - throw new Error("Failed to upload image"); - } - } - setIsPending(true); - const baseUrl = await getApiUrl(); const API_URL = `${baseUrl}/api/v1/profile/${data?.user.id}`; @@ -189,6 +205,12 @@ export default function SettingsPage() { await signIn("credentials", { redirect: false }); setIsSuccess(true); + + window.dispatchEvent( + new CustomEvent("userProfileUpdate", { + detail: { profilePicUrl: profilePicture }, + }), + ); } catch (error) { setIsPending(false); setError("An error occurred while saving your information"); @@ -209,7 +231,6 @@ export default function SettingsPage() { pronoun ); - return (
@@ -228,16 +249,12 @@ export default function SettingsPage() { className="sr-only" id="profile-picture" type="file" - onChange={(entries) => - setImage( - entries.target.files ? entries.target.files[0] : undefined, - ) - } + onChange={handleImageUpload} accept="image/jpeg,image/png,image/svg+xml" /> - {image && ( + {(image || profilePicture) && ( Picture of the author { const UserCard = () => { const { data: session, status } = useSession(); const { user } = session ?? {}; + const [profilePicUrl, setProfilePicUrl] = useState(null); + + const fetchProfileData = useCallback(async () => { + if (status === "authenticated" && user?.id) { + try { + const baseUrl = await getApiUrl(); + const API_URL = `${baseUrl}/api/v1/profile/${user.id}`; + const response = await axios.get(API_URL, { + headers: { + Authorization: `Bearer ${session?.access_token}`, + }, + }); + if (response.data?.data?.profile_pic_url) { + setProfilePicUrl(response.data.data.profile_pic_url); + } + } catch (error) { + console.log("Error fetching profile data:", error); + } + } + }, [status, user?.id, session?.access_token]); + + useEffect(() => { + fetchProfileData(); + const handleProfileUpdate = (event: CustomEvent) => { + if (event.detail && event.detail.profilePicUrl) { + setProfilePicUrl(event.detail.profilePicUrl); + } else { + fetchProfileData(); + } + }; + + window.addEventListener( + "userProfileUpdate", + handleProfileUpdate as EventListener, + ); + + return () => { + window.removeEventListener( + "userProfileUpdate", + handleProfileUpdate as EventListener, + ); + }; + }, [fetchProfileData]); return ( @@ -38,7 +84,10 @@ const UserCard = () => { )} {status === "authenticated" && ( - + {user?.first_name?.charAt(0)} diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts index b7d85bd97..44768ac63 100644 --- a/src/config/auth.config.ts +++ b/src/config/auth.config.ts @@ -137,7 +137,7 @@ export default { customToken.name?.split(" ").slice(1).join(" ") || customToken.fullname?.split(" ").slice(1).join(" ") || "", - image: customToken.profile_pic_url || token.picture || customToken.avatar_url || "", + image: token.picture || customToken.avatar_url || "", role: customToken.role as string, email: token.email as string, }; diff --git a/src/lib/auth.ts b/src/lib/auth.ts index f104ebe1e..18de73deb 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -18,7 +18,7 @@ declare module "next-auth" { first_name: User["first_name"]; last_name: User["last_name"]; email: User["email"]; - image: string; + image: User["avatar_url"]; role: User["role"]; bio?: string; username?: string; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index f812e5b07..6d117589b 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -11,7 +11,6 @@ export interface CustomJWT extends JWT { last_name?: string; fullname?: string; access_token?: string; - profile_pic_url?: string; } export interface CustomSession extends Session { user: { From b96bb4dfeb68026dcd0d36d81620a2f0b22f7042 Mon Sep 17 00:00:00 2001 From: maiqel Date: Mon, 12 Aug 2024 16:19:50 +0100 Subject: [PATCH 04/11] fix: fixed linting errors --- .../(admin)/admin/(settings)/settings/page.tsx | 7 +++---- src/components/card/user-card.tsx | 11 ++++++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 632aa5a80..72bfd23e6 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -146,8 +146,8 @@ export default function SettingsPage() { } else { throw new Error("Failed to upload image"); } - } catch (error) { - console.error("Error during image upload:", error); + } catch { + setError("Error during Image upload"); toast({ title: "Error", description: "Failed to update profile picture. Please try again.", @@ -211,10 +211,9 @@ export default function SettingsPage() { detail: { profilePicUrl: profilePicture }, }), ); - } catch (error) { + } catch { setIsPending(false); setError("An error occurred while saving your information"); - console.error("Error during image upload or profile update:", error); } finally { setIsPending(false); } diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx index 8c9215297..2ef084d08 100644 --- a/src/components/card/user-card.tsx +++ b/src/components/card/user-card.tsx @@ -16,6 +16,7 @@ import { DropdownMenuShortcut, DropdownMenuTrigger, } from "~/components/ui/dropdown-menu"; +import { toast } from "~/components/ui/use-toast"; import { cn } from "~/lib/utils"; const handleLogout = async () => { @@ -27,7 +28,7 @@ const handleLogout = async () => { const UserCard = () => { const { data: session, status } = useSession(); const { user } = session ?? {}; - const [profilePicUrl, setProfilePicUrl] = useState(null); + const [profilePicUrl, setProfilePicUrl] = useState(""); const fetchProfileData = useCallback(async () => { if (status === "authenticated" && user?.id) { @@ -42,8 +43,12 @@ const UserCard = () => { if (response.data?.data?.profile_pic_url) { setProfilePicUrl(response.data.data.profile_pic_url); } - } catch (error) { - console.log("Error fetching profile data:", error); + } catch { + toast({ + title: "Error", + description: "Failed to fetch profile data.", + variant: "destructive", + }); } } }, [status, user?.id, session?.access_token]); From 77573fb933187268178f5064d5c8c614a53a9056 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 06:51:56 +0100 Subject: [PATCH 05/11] fix: fixed error upon review, removed signOut --- .../dashboard/(admin)/admin/(settings)/settings/page.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 72bfd23e6..3222e172d 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -1,7 +1,7 @@ "use client"; import axios from "axios"; -import { signIn, useSession } from "next-auth/react"; +import { useSession } from "next-auth/react"; import Image from "next/image"; import { ChangeEvent, useEffect, useState } from "react"; @@ -202,8 +202,6 @@ export default function SettingsPage() { window.dispatchEvent(event); - await signIn("credentials", { redirect: false }); - setIsSuccess(true); window.dispatchEvent( @@ -266,7 +264,7 @@ export default function SettingsPage() {
From 71c61d6d2269fa40dbaba8524e34469bc4c3fe59 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 06:53:58 +0100 Subject: [PATCH 06/11] fix: fixed error upon review, removed signIn --- src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 3222e172d..0907fecb1 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -4,7 +4,6 @@ import axios from "axios"; import { useSession } from "next-auth/react"; import Image from "next/image"; import { ChangeEvent, useEffect, useState } from "react"; - import { getApiUrl } from "~/actions/getApiUrl"; import CustomButton from "~/components/common/common-button/common-button"; import CustomInput from "~/components/common/input/input"; From d854fdbb07e61de0ed4ba73ffbbe5fd46f317cb5 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 07:18:15 +0100 Subject: [PATCH 07/11] fix: fixed error upon review, removed signIn --- src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 0907fecb1..3222e172d 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -4,6 +4,7 @@ import axios from "axios"; import { useSession } from "next-auth/react"; import Image from "next/image"; import { ChangeEvent, useEffect, useState } from "react"; + import { getApiUrl } from "~/actions/getApiUrl"; import CustomButton from "~/components/common/common-button/common-button"; import CustomInput from "~/components/common/input/input"; From 5633cc9178eef670364d01d1429724962c23f7b6 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 11:41:38 +0100 Subject: [PATCH 08/11] fix:made changes to prioritize avatar_url --- .../dashboard/(admin)/admin/(settings)/settings/page.tsx | 8 +++++--- src/components/card/user-card.tsx | 5 +++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 3222e172d..b31fd9fda 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -82,6 +82,7 @@ export default function SettingsPage() { }, }); if (response.data?.data) { + const { avatar_url, profile_pic_url } = response.data.data; setPronoun(response.data.data.pronouns); setSocialLinks({ x: response.data.data.social_links @@ -101,7 +102,7 @@ export default function SettingsPage() { department: response.data.data.department ?? "", username: response.data.data.username ?? "", }); - setProfilePicture(response.data.data.profile_pic_url); + setProfilePicture(avatar_url || profile_pic_url); setIsSuccess(true); } } catch { @@ -132,7 +133,8 @@ export default function SettingsPage() { const uploadData = await uploadResponse.json(); if (uploadResponse.ok) { - const profilePicUrl = uploadData.data.profile_pic_url; + const { avatar_url, profile_pic_url } = uploadData.data; + const profilePicUrl = avatar_url || profile_pic_url; window.dispatchEvent( new CustomEvent("userProfileUpdate", { detail: { profilePicUrl } }), ); @@ -140,7 +142,7 @@ export default function SettingsPage() { setFormData((previousData) => ({ ...previousData, - profile_pic_url: profilePicUrl, + profile_pic_url: profilePicture, })); window.dispatchEvent(new Event("profileUpdate")); } else { diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx index 2ef084d08..8f37be0ac 100644 --- a/src/components/card/user-card.tsx +++ b/src/components/card/user-card.tsx @@ -40,8 +40,9 @@ const UserCard = () => { Authorization: `Bearer ${session?.access_token}`, }, }); - if (response.data?.data?.profile_pic_url) { - setProfilePicUrl(response.data.data.profile_pic_url); + if (response.data?.data) { + const { avatar_url, profile_pic_url } = response.data.data; + setProfilePicUrl(avatar_url || profile_pic_url); } } catch { toast({ From 639a97c504d3d7f681f75d1c92f4c20ed6408f55 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 12:13:27 +0100 Subject: [PATCH 09/11] fix:replaced fetch with axios to maintain consistency --- .../(admin)/admin/(settings)/settings/page.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index b31fd9fda..9e815407b 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -123,17 +123,16 @@ export default function SettingsPage() { const baseUrl = await getApiUrl(); const UPLOAD_API_URL = `${baseUrl}/api/v1/profile/upload-image`; - const uploadResponse = await fetch(UPLOAD_API_URL, { - method: "POST", - body: formData, + const uploadResponse = await axios.post(UPLOAD_API_URL, formData, { headers: { Authorization: `Bearer ${data?.access_token}`, + 'Content-Type': 'multipart/form-data', }, }); - const uploadData = await uploadResponse.json(); - if (uploadResponse.ok) { - const { avatar_url, profile_pic_url } = uploadData.data; + + if (uploadResponse.status === 200) { + const { avatar_url, profile_pic_url } = uploadResponse.data.data; const profilePicUrl = avatar_url || profile_pic_url; window.dispatchEvent( new CustomEvent("userProfileUpdate", { detail: { profilePicUrl } }), From 17f254a7ac10c2ad900845506fa6e1fa6f4f0ad2 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 12:22:06 +0100 Subject: [PATCH 10/11] fix:lint issues --- src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 9e815407b..81f54d9f0 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -126,11 +126,10 @@ export default function SettingsPage() { const uploadResponse = await axios.post(UPLOAD_API_URL, formData, { headers: { Authorization: `Bearer ${data?.access_token}`, - 'Content-Type': 'multipart/form-data', + "Content-Type": "multipart/form-data", }, }); - if (uploadResponse.status === 200) { const { avatar_url, profile_pic_url } = uploadResponse.data.data; const profilePicUrl = avatar_url || profile_pic_url; From e46dcaf74b2c3944a3c5ca29119648481bba71e2 Mon Sep 17 00:00:00 2001 From: maiqel Date: Tue, 13 Aug 2024 12:41:55 +0100 Subject: [PATCH 11/11] fix:lint issues --- .../(admin)/admin/(settings)/settings/page.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx index 81f54d9f0..71f077ab9 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx @@ -133,26 +133,18 @@ export default function SettingsPage() { if (uploadResponse.status === 200) { const { avatar_url, profile_pic_url } = uploadResponse.data.data; const profilePicUrl = avatar_url || profile_pic_url; - window.dispatchEvent( - new CustomEvent("userProfileUpdate", { detail: { profilePicUrl } }), - ); + setProfilePicture(profilePicUrl); setFormData((previousData) => ({ ...previousData, profile_pic_url: profilePicture, })); - window.dispatchEvent(new Event("profileUpdate")); } else { - throw new Error("Failed to upload image"); + throw new Error("."); } } catch { - setError("Error during Image upload"); - toast({ - title: "Error", - description: "Failed to update profile picture. Please try again.", - variant: "destructive", - }); + setError("."); } } };