fix #677: adding web socket for real-time gift generation updates (#678)

* fix #677: adding web socket for real-time gift generation updates

* updating render logic for gift card components and adding unit tests

* adding copilot feedback for duplicate gift check, unit test updates

---------

Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com>

Author: jefische

app/gift-exchanges/[id]/page.test.tsx

@@ -3,9 +3,31 @@ import GiftExchangePage from './page';
 import { useAuthContext } from '@/context/AuthContextProvider';
 import * as utils from '@/lib/utils';
 import { TOASTS } from '@/components/Toast/toasts.consts';
+import type { IGiftSuggestion } from '@/app/types/giftSuggestion';
 
 const routerPush = jest.fn();
 
+jest.mock('@/lib/supabase/client', () => ({
+  createClient: jest.fn(() => ({
+    auth: {
+      onAuthStateChange: jest.fn(),
+      getSession: jest.fn().mockResolvedValue({ data: { session: null } }),
+      getUser: jest.fn().mockResolvedValue({ data: { user: { id: 'test-member' } } }),
+    },
+    from: jest.fn(() => ({
+      select: jest.fn().mockReturnThis(),
+      eq: jest.fn().mockReturnThis(),
+      single: jest.fn().mockReturnThis(),
+      then: jest.fn(),
+    })),
+    channel: jest.fn(() => ({
+      on: jest.fn().mockReturnThis(),
+      subscribe: jest.fn().mockReturnThis(),
+    })),
+    removeChannel: jest.fn(),
+  })),
+}));
+
 jest.mock('next/navigation', () => ({
   useParams: () => ({ id: '123' }),
   useRouter: () => ({
@@ -46,7 +68,49 @@ const mockGiftExchangeData = {
 
 const mockGiftSuggestions = {
   match: null,
-  suggestions: [],
+  suggestions: [] as IGiftSuggestion[],
+};
+
+const mockGiftSuggestionsFull = {
+  match: null,
+  suggestions: [
+    {
+        "price": "$50",
+        "title": "Bamboo Cheese Board and Knife Set",
+        "imageUrl": null,
+        "matchScore": 80,
+        "description": "This elegant bamboo cheese board comes with a hidden slide-out drawer that holds a cheese knife set. Perfect for hosting gatherings and enjoying a selection of cheeses.",
+        "matchReasons": [
+            "Luxurious bamboo material",
+            "Ideal for hosting food-related events"
+        ],
+        "id": "1451",
+    },
+    {
+        "price": "$60",
+        "title": "Swarovski Crystal Watch",
+        "imageUrl": null,
+        "matchScore": 90,
+        "description": "A stunning Swarovski crystal watch that combines functionality with luxury. The intricate design and sparkling crystals make it a stylish accessory for any occasion.",
+        "matchReasons": [
+            "Luxurious item for a luxury watch enthusiast",
+            "Adds a touch of style and fashion"
+        ],
+        "id": "1454",
+    },
+    {
+        "price": "$55",
+        "title": "Artisanal Gluten-Free Baking Kit",
+        "imageUrl": null,
+        "matchScore": 85,
+        "description": "A complete baking kit with high-quality gluten-free ingredients and recipes for creating delicious treats at home. Perfect for someone with a gluten allergy who enjoys baking.",
+        "matchReasons": [
+            "Caters to gluten allergy",
+            "Combines food & cooking with arts & crafts"
+        ],
+        "id": "1455",
+    }
+  ] as IGiftSuggestion[],
 };
 
 const mockGroupMember = {
@@ -74,7 +138,7 @@ const mockNonMemberSession = {
 const mockNoSession = { session: null };
 
 describe('GiftExchangePage', () => {
-  const mockDataFetch = (status: string) => {
+  const mockDataFetch = (status: string, suggestions = mockGiftSuggestions) => {
     (global.fetch as jest.Mock)
       .mockResolvedValueOnce({
         json: async () => ({ ...mockGiftExchangeData, status }),
@@ -83,7 +147,7 @@ describe('GiftExchangePage', () => {
         json: async () => mockMembers,
       })
       .mockResolvedValueOnce({
-        json: async () => mockGiftSuggestions,
+        json: async () => suggestions,
       });
   };
 
@@ -182,4 +246,35 @@ describe('GiftExchangePage', () => {
       });
     });
   });
+
+  it('renders the WaitingForSuggestions component when no gift suggestions are available', async () => {
+    (useAuthContext as jest.Mock).mockReturnValue(mockMemberSession);
+    mockDataFetch('active');
+    render(<GiftExchangePage />);
+
+    const waitingForSuggestions = await screen.findByTestId('suggestions-waiting');
+    expect(waitingForSuggestions).toBeInTheDocument();
+
+    const giftSuggestionCards = screen.queryAllByTestId('gift-suggestion-card');
+    expect(giftSuggestionCards.length).toBe(0);
+  });
+
+  it('renders 3 GiftSuggestionCard components when 3 gift suggestions are available', async () => {
+    (useAuthContext as jest.Mock).mockReturnValue(mockMemberSession);
+    mockDataFetch('active', mockGiftSuggestionsFull);
+    render(<GiftExchangePage />);
+
+    // Verify the waiting for suggestions component is not rendering
+    const waitingForSuggestions = screen.queryByTestId('suggestions-waiting');
+    expect(waitingForSuggestions).not.toBeInTheDocument();
+
+    // Verify 3 gift suggestions are provided
+    const giftSuggestionCards = await screen.findAllByTestId('gift-suggestion-card');
+    expect(giftSuggestionCards.length).toBe(3);
+
+    // Verify each card is in the document
+    giftSuggestionCards.forEach(card => {
+      expect(card).toBeInTheDocument();
+    });
+  });
 });

app/gift-exchanges/[id]/page.tsx

@@ -20,6 +20,7 @@ import { WaitingForSuggestions } from './WaitingForSuggestions/WaitingForSuggest
 import { useToast } from '@/hooks/use-toast';
 import { signInWithGoogle } from '@/lib/utils';
 import { TOASTS } from '@/components/Toast/toasts.consts';
+import { createClient } from '@/lib/supabase/client';
 
 export default function GiftExchangePage() {
   const { id } = useParams();
@@ -50,6 +51,45 @@ export default function GiftExchangePage() {
     : false;
   const inviteLink = window.location.href; // Invite Link for Invite Card
 
+  useEffect(() => {
+    if (!session?.user.id || !id) {
+      return;
+    } 
+
+    const supabase = createClient();
+
+    const channel = supabase
+      .channel('gift_suggestions_live')
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'gift_suggestions',
+          filter: `gift_exchange_id=eq.${id}`,
+        },
+        (payload) => {
+          if (payload.new.giver_id !== session.user.id)  {
+            return;
+          }
+
+          const newSuggestion: IGiftSuggestion = {
+            ...payload.new.suggestion,
+            id: String(payload.new.id),
+          };
+
+          setGiftSuggestions((prev) =>
+            prev.some(s => s.id === newSuggestion.id) ? prev : [...prev, newSuggestion]
+          );
+        },
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [id, session?.user.id]);
+
   const handleGiftUpdate = (
     updatedGift: IGiftSuggestion,
     originalIndex: number,
@@ -160,6 +200,7 @@ export default function GiftExchangePage() {
             </section>
             <section className="flex flex-col">
               <h1 className="font-bold">Gift Suggestions</h1>
+              
               {giftSuggestions?.length === 0 && <WaitingForSuggestions />}
 
               {giftSuggestions?.length !== 0 && (

components/GiftSuggestionCard/GiftSuggestionCard.tsx

@@ -28,7 +28,7 @@ const GiftSuggestionCard = ({
   };
 
   return (
-    <Card className="bg-giftSuggestionsCardBackground h-100 w-80 flex flex-col justify-between m-5">
+    <Card className="bg-giftSuggestionsCardBackground h-100 w-80 flex flex-col justify-between m-5" data-testid="gift-suggestion-card">
       {isShowingFeedback ? (
         <FeedbackView
           allGiftSuggestions={allGiftSuggestions}