From c7b99604416de63b1737d8756b8977c20fa74e8b Mon Sep 17 00:00:00 2001 From: Hy Nguyen Date: Tue, 15 Oct 2024 23:13:12 -0500 Subject: [PATCH 1/4] update avatar in side panel after editing avatar --- app/root.tsx | 1 + .../profile/profile_info/ProfileInfo.tsx | 46 ++++++++++--------- app/utils/types/ContextProps.type.ts | 1 + 3 files changed, 26 insertions(+), 22 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index 7ba00ee..5edaf81 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -232,6 +232,7 @@ function App() { userDisplayName, setUserDisplayName, addNotification, + setAvatarUri, }} /> diff --git a/app/routes/profile/profile_info/ProfileInfo.tsx b/app/routes/profile/profile_info/ProfileInfo.tsx index dc10926..e6ae760 100644 --- a/app/routes/profile/profile_info/ProfileInfo.tsx +++ b/app/routes/profile/profile_info/ProfileInfo.tsx @@ -14,6 +14,7 @@ export default function ProfileInfo() { addNotification, userDisplayName, setUserDisplayName, + setAvatarUri, } = useOutletContext(); const [enableNameEdit, setEnableNameEdit] = useState(false); @@ -44,7 +45,8 @@ export default function ProfileInfo() { }, []); const [showAvatarModal, setShowAvatarModal] = useState(false); - const [avatarUri, setAvatarUri] = useState(""); + // underscore to differentiate from the one in outlet context + const [_avatarUri, _setAvatarUri] = useState(""); // trigger a refetch const [avatarUriTrigger, setAvatarUriTrigger] = useState<{}>({}); @@ -52,7 +54,7 @@ export default function ProfileInfo() { useEffect(() => { (async function () { if (!user) return; - setAvatarUri(""); + _setAvatarUri(""); const { data, error } = await supabase .from("AVATARS") .select(`*`) @@ -70,24 +72,24 @@ export default function ProfileInfo() { } const avt = data[0]; - - setAvatarUri( - createAvatar(bigSmile, { - accessoriesProbability: avt.accessoriesProbability!, - backgroundColor: [avt.backgroundColor!], - skinColor: [avt.skinColor!], - hairColor: [avt.hairColor!], - // expect errors of not matching types - // @ts-expect-error - hair: [avt.hair!], - // @ts-expect-error - eyes: [avt.eyes!], - // @ts-expect-error - mouth: [avt.mouth!], - // @ts-expect-error - accessories: [avt.accessories!], - }).toDataUri(), - ); + const newAvatarUri = createAvatar(bigSmile, { + accessoriesProbability: avt.accessoriesProbability!, + backgroundColor: [avt.backgroundColor!], + skinColor: [avt.skinColor!], + hairColor: [avt.hairColor!], + // expect errors of not matching types + // @ts-expect-error + hair: [avt.hair!], + // @ts-expect-error + eyes: [avt.eyes!], + // @ts-expect-error + mouth: [avt.mouth!], + // @ts-expect-error + accessories: [avt.accessories!], + }).toDataUri(); + + setAvatarUri(newAvatarUri); + _setAvatarUri(newAvatarUri); })(); }, [avatarUriTrigger]); @@ -137,12 +139,12 @@ export default function ProfileInfo() { onClick={() => setShowAvatarModal(true)} >
- {avatarUri === "" ? ( + {_avatarUri === "" ? (
) : ( - + )}
diff --git a/app/utils/types/ContextProps.type.ts b/app/utils/types/ContextProps.type.ts index d30c3ea..462b713 100644 --- a/app/utils/types/ContextProps.type.ts +++ b/app/utils/types/ContextProps.type.ts @@ -23,4 +23,5 @@ export type ContextProps = { userDisplayName: string; setUserDisplayName: SetState; addNotification: (message: string, type: PopupNotification["type"]) => void; + setAvatarUri: SetState; }; From eb4318949f64fe9b77d4316aaa138decedc89e8c Mon Sep 17 00:00:00 2001 From: Hy Nguyen Date: Tue, 15 Oct 2024 23:15:07 -0500 Subject: [PATCH 2/4] set prewrap for reviews in /profile --- app/routes/profile/reviews/ReviewItem.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/routes/profile/reviews/ReviewItem.tsx b/app/routes/profile/reviews/ReviewItem.tsx index 84d0a69..cfd6b00 100644 --- a/app/routes/profile/reviews/ReviewItem.tsx +++ b/app/routes/profile/reviews/ReviewItem.tsx @@ -1,5 +1,4 @@ import { Link, useOutletContext } from "@remix-run/react"; -import { Tables } from "database.types"; import { useEffect, useState } from "react"; import { ContextProps } from "~/utils/types/ContextProps.type"; import { MyReview } from "./MyReviews"; @@ -87,7 +86,9 @@ export default function ReviewItem({ review }: Props) {
{/* Feedback */} -

{review.feedback}

+

+ {review.feedback} +

From a08469c08554c5699edb9aebc42274b8e884f35d Mon Sep 17 00:00:00 2001 From: Hy Nguyen Date: Tue, 15 Oct 2024 23:18:32 -0500 Subject: [PATCH 3/4] /profile: fix review items styling --- app/routes/profile/reviews/ReviewItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/profile/reviews/ReviewItem.tsx b/app/routes/profile/reviews/ReviewItem.tsx index cfd6b00..f7bdc5e 100644 --- a/app/routes/profile/reviews/ReviewItem.tsx +++ b/app/routes/profile/reviews/ReviewItem.tsx @@ -63,8 +63,8 @@ export default function ReviewItem({ review }: Props) { -
-
+
+
{/* Product title */} Date: Wed, 16 Oct 2024 01:38:59 -0500 Subject: [PATCH 4/4] update tests --- app/tests/product/ProductDetails.test.tsx | 20 ++++++++++++++++++++ app/tests/profile/index.test.tsx | 1 + 2 files changed, 21 insertions(+) diff --git a/app/tests/product/ProductDetails.test.tsx b/app/tests/product/ProductDetails.test.tsx index 991082e..c0eb3a0 100644 --- a/app/tests/product/ProductDetails.test.tsx +++ b/app/tests/product/ProductDetails.test.tsx @@ -32,6 +32,26 @@ const mockUseOutletContext = { error: null, }), ), + range: vi.fn(() => ({ + order: vi.fn(() => ({ + abortSignal: vi.fn(() => ({ + returns: vi.fn(() => + Promise.resolve({ + data: [{ id: 1, name: "item1" }], + error: null, + }), + ), + })), + })), + abortSignal: vi.fn(() => ({ + returns: vi.fn(() => + Promise.resolve({ + data: [], + error: null, + }), + ), + })), + })), })), })), }), diff --git a/app/tests/profile/index.test.tsx b/app/tests/profile/index.test.tsx index c49204f..d013271 100644 --- a/app/tests/profile/index.test.tsx +++ b/app/tests/profile/index.test.tsx @@ -68,6 +68,7 @@ describe("Profile page", () => { }, setUserDisplayName: vi.fn(), setWishlist: vi.fn(), + setAvatarUri: vi.fn(), }); (useLoaderData as Mock).mockReturnValue({ newWishlist: [1, 2],