Merge pull request #35 from khanghy2130/minor-changes

update avatar in side panel after editing avatar
khanghy2130 · Oct 16, 2024 · 4152a98 · 4152a98
2 parents d3d0ed2 + c545fc6
commit 4152a98
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 26 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -232,6 +232,7 @@ function App() {
                             userDisplayName,
                             setUserDisplayName,
                             addNotification,
+                            setAvatarUri,
                         }}
                     />
                 </div>

diff --git 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<ContextProps>();
 
     const [enableNameEdit, setEnableNameEdit] = useState<boolean>(false);
@@ -44,15 +45,16 @@ export default function ProfileInfo() {
     }, []);
 
     const [showAvatarModal, setShowAvatarModal] = useState<boolean>(false);
-    const [avatarUri, setAvatarUri] = useState<string>("");
+    // underscore to differentiate from the one in outlet context
+    const [_avatarUri, _setAvatarUri] = useState<string>("");
     // trigger a refetch
     const [avatarUriTrigger, setAvatarUriTrigger] = useState<{}>({});
 
     // fetch avatar options from db
     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)}
                 >
                     <div className="flex h-36 w-36 items-center justify-center overflow-hidden rounded-lg">
-                        {avatarUri === "" ? (
+                        {_avatarUri === "" ? (
                             <div className="h-1/3 w-1/3 text-primaryColor">
                                 <SpinnerSVG />
                             </div>
                         ) : (
-                            <img className="h-full w-full" src={avatarUri} />
+                            <img className="h-full w-full" src={_avatarUri} />
                         )}
                     </div>
                     <div className="absolute -right-3 -top-3 flex rounded-full bg-bgColor2 p-2 group-hover:bg-bgColor3">

diff --git 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";
@@ -64,8 +63,8 @@ export default function ReviewItem({ review }: Props) {
                     </div>
                 </div>
 
-                <div className="flex overflow-hidden px-3 py-2">
-                    <div className="flex flex-col items-start overflow-auto">
+                <div className="flex flex-grow overflow-hidden px-3 py-2">
+                    <div className="flex w-full flex-col items-start overflow-auto">
                         {/* Product title */}
                         <Link
                             to={`/product/${review.product_id}`}
@@ -87,7 +86,9 @@ export default function ReviewItem({ review }: Props) {
                         </div>
 
                         {/* Feedback */}
-                        <p className="pr-2">{review.feedback}</p>
+                        <p className="whitespace-pre-wrap pr-2">
+                            {review.feedback}
+                        </p>
                     </div>
                 </div>
             </div>

diff --git 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
@@ -68,6 +68,7 @@ describe("Profile page", () => {
             },
             setUserDisplayName: vi.fn(),
             setWishlist: vi.fn(),
+            setAvatarUri: vi.fn(),
         });
         (useLoaderData as Mock).mockReturnValue({
             newWishlist: [1, 2],

diff --git 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<string>;
     addNotification: (message: string, type: PopupNotification["type"]) => void;
+    setAvatarUri: SetState<string>;
 };