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

jefische · 2025-11-11T18:06:13Z

Description

Before:

When initiating a gift exchange group drawing and generating gift suggestions , the WaitingForSuggestions component loads but the user has to refresh the page repeatedly to see the AI generated gift suggestions.

After:

As soon as the gift suggestions are generated, they are sent back to the client real-time allowing for immediate rendering of the gifts.

Closes #677

Testing instructions

To test this an exchange group has to be created with 3 or more users to allow a drawing to be initiated. Once the drawing is initiated, the page will render the WaitingForSuggestions component if no gifts are available. Once all 3 gifts are generated in the database, the 3 GiftSuggestionCard components will display.

Additional information

Screenshot of the `WaitingForSuggestions` and `GiftSuggestionCard` components

Pre-submission checklist

Code builds and passes locally
PR title follows Conventional Commit format (e.g. test #001: created unit test for __ component)
Request reviews from the Peer Code Reviewers and Senior+ Code Reviewers groups
Thread has been created in Discord and PR is linked in gis-code-questions

vercel · 2025-11-11T18:06:18Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
elecretanta	Ready	Preview	Comment	Nov 13, 2025 3:23pm
elecretanta-storybook	Ready	Preview	Comment	Nov 13, 2025 3:23pm
elecretanta-unit-test	Ready	Preview	Comment	Nov 13, 2025 3:23pm

shashilo · 2025-11-11T22:40:14Z

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

-
-              {giftSuggestions?.length !== 0 && (
+
+              {giftSuggestions?.length < 3 ? (


What if a giftSuggstion fails? I would just show the gifts as they come in. If there are any failures, we'll never have 3 gifts.

That makes sense, I'll revert this back to how it was.

shashilo · 2025-11-11T22:41:10Z

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

+          table: 'gift_suggestions',
+          filter: `gift_exchange_id=eq.${id}`,
+        },
+        (payload: any) => {


No use of any.

shashilo · 2025-11-11T22:41:41Z

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

+          filter: `gift_exchange_id=eq.${id}`,
+        },
+        (payload: any) => {
+          if (payload.new.giver_id !== session.user.id) return;


Shorthand is nice, but it comes at the cost of legibility.

Suggested change

if (payload.new.giver_id !== session.user.id) return;

if (payload.new.giver_id !== session.user.id) {

return;

}

Copilot

Pull Request Overview

This PR adds real-time WebSocket functionality to eliminate the need for users to manually refresh the page when gift suggestions are being generated. The implementation uses Supabase's real-time subscriptions to listen for new gift suggestion inserts and automatically updates the UI.

Implements WebSocket subscription to listen for gift suggestion INSERTs in real-time
Adds test coverage for rendering gift suggestion cards and the waiting state
Adds data-testid to GiftSuggestionCard for test identification

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
app/gift-exchanges/[id]/page.tsx	Added Supabase real-time subscription to listen for new gift suggestions and update state automatically
app/gift-exchanges/[id]/page.test.tsx	Added mock for Supabase client and two new test cases for gift suggestion rendering scenarios
components/GiftSuggestionCard/GiftSuggestionCard.tsx	Added data-testid attribute for testing purposes

Comments suppressed due to low confidence (1)

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

The fetchGiftExchangeData callback has [id, session, isSignedIn] as dependencies but is called in a useEffect that also depends on [fetchGiftExchangeData, session, id]. This creates a potential infinite loop since fetchGiftExchangeData will be recreated whenever session or id change, triggering the effect again. The WebSocket effect (lines 54-89) should include fetchGiftExchangeData in its dependency array if it relies on having up-to-date gift suggestions, or add router and toast to the fetchGiftExchangeData dependencies to ensure stable function identity.

  }, [id, session, isSignedIn]);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-12T16:32:21Z

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

+            id: String(payload.new.id),
+          };
+
+          setGiftSuggestions((prev) => [...prev, newSuggestion]);


This implementation could lead to duplicate gift suggestions if the WebSocket delivers the same INSERT event multiple times or if there's a race condition between the initial fetch and real-time updates. Consider checking if the suggestion already exists before adding it: setGiftSuggestions((prev) => prev.some(s => s.id === newSuggestion.id) ? prev : [...prev, newSuggestion]);

Suggested change

setGiftSuggestions((prev) => [...prev, newSuggestion]);

setGiftSuggestions((prev) =>

prev.some(s => s.id === newSuggestion.id) ? prev : [...prev, newSuggestion]

);

Please use this suggestion

I noticed this as well, I'll add it in.

Copilot · 2025-11-12T16:32:21Z

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

+
+    const giftSuggestionCards = screen.queryAllByTestId('gift-suggestion-card');
+    expect(giftSuggestionCards.length).toBe(0);
+  })


Missing semicolon at the end of the test case.

Suggested change

})

});

Copilot · 2025-11-12T16:32:21Z

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

+    const waitingForSuggestions = screen.queryByTestId('suggestions-waiting');
+    expect(waitingForSuggestions).not.toBeInTheDocument();
+
+    // Verifiy 3 gift suggestions are provided


Corrected spelling of 'Verifiy' to 'Verify'.

Suggested change

// Verifiy 3 gift suggestions are provided

// Verify 3 gift suggestions are provided

Copilot · 2025-11-12T16:32:22Z

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

+    giftSuggestionCards.forEach(card => {
+      expect(card).toBeInTheDocument();
+    });
+  })


Missing semicolon at the end of the test case.

Suggested change

})

});

@jefische Is your Linter working? Your IDE should've autoformatted and added this semi colon.

I need to get this figured out, I thought it was working. I'll make the changes manually for now.

shashilo · 2025-11-12T18:40:19Z

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

 import { TOASTS } from '@/components/Toast/toasts.consts';
+import type { IGiftSuggestion } from '@/app/types/giftSuggestion';
+
+type GiftSuggestionsResponse = {


Why are we adding a new type into a test file?

I added this originally as I was getting a typescript warning, but I see this actually isn't needed. I'll remove it.

shashilo · 2025-11-12T18:40:52Z

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

+            id: String(payload.new.id),
+          };
+
+          setGiftSuggestions((prev) => [...prev, newSuggestion]);


Please use this suggestion

shashilo · 2025-11-12T18:41:23Z

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

+    giftSuggestionCards.forEach(card => {
+      expect(card).toBeInTheDocument();
+    });
+  })


@jefische Is your Linter working? Your IDE should've autoformatted and added this semi colon.

Copilot

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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

Copilot · 2025-11-12T19:23:18Z

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

+          if (payload.new.giver_id !== session.user.id)  {
+            return;
+          }


[nitpick] There's an extra space before the opening brace. While this doesn't affect functionality, it's inconsistent with the rest of the codebase's formatting. Consider removing the extra space for consistency.

Copilot · 2025-11-12T19:23:18Z

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

+          setGiftSuggestions((prev) =>
+            prev.some(s => s.id === newSuggestion.id) ? prev : [...prev, newSuggestion]
+          );


The duplicate check compares newSuggestion.id (which is String(payload.new.id)) against existing suggestion IDs, but the existing suggestions loaded from the API also use database IDs converted to strings. However, this check may fail to prevent duplicates if the initial fetch happens while a WebSocket INSERT event is in flight. Consider also checking if the suggestion with the same ID already exists in the initial data fetch to handle potential race conditions.

Copilot · 2025-11-12T19:23:18Z

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

+        "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",


[nitpick] The mock gift suggestions data uses inconsistent field ordering compared to the IGiftSuggestion interface definition. Consider reordering the fields to match the interface definition (id, title, price, description, matchReasons, matchScore, imageUrl) for better readability and maintainability.

Suggested change

"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",

"id": "1451",

"title": "Bamboo Cheese Board and Knife Set",

"price": "$50",

"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"

],

"matchScore": 80,

"imageUrl": null,

},

{

"id": "1454",

"title": "Swarovski Crystal Watch",

"price": "$60",

"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"

],

"matchScore": 90,

"imageUrl": null,

},

{

"id": "1455",

"title": "Artisanal Gluten-Free Baking Kit",

"price": "$55",

"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"

],

"matchScore": 85,

"imageUrl": null,

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

1346ffc

Copilot AI review requested due to automatic review settings November 11, 2025 18:06

jefische requested review from bethanyann, nickytonline and shashilo as code owners November 11, 2025 18:06

shashilo requested review from a team, bethanyann and tonyb650 and removed request for a team, bethanyann, Copilot, nickytonline and shashilo November 11, 2025 18:06

Copilot started reviewing on behalf of jefische November 11, 2025 18:06 View session

Copilot finished reviewing on behalf of jefische November 11, 2025 18:08

jefische requested review from alexappleget and shashilo November 11, 2025 18:15

shashilo requested changes Nov 11, 2025

View reviewed changes

updating render logic for gift card components and adding unit tests

d8ef1f6

Copilot AI review requested due to automatic review settings November 12, 2025 16:30

Copilot started reviewing on behalf of jefische November 12, 2025 16:30 View session

vercel bot deployed to Preview – elecretanta-storybook November 12, 2025 16:30 View deployment

vercel bot deployed to Preview – elecretanta November 12, 2025 16:30 View deployment

Copilot finished reviewing on behalf of jefische November 12, 2025 16:31

vercel bot deployed to Preview – elecretanta-unit-test November 12, 2025 16:31 View deployment

Copilot AI reviewed Nov 12, 2025

View reviewed changes

shashilo requested changes Nov 12, 2025

View reviewed changes

adding copilot feedback for duplicate gift check, unit test updates

5fcf0db

vercel bot deployed to Preview – elecretanta-storybook November 12, 2025 19:17 View deployment

vercel bot deployed to Preview – elecretanta November 12, 2025 19:17 View deployment

vercel bot deployed to Preview – elecretanta-unit-test November 12, 2025 19:18 View deployment

jefische requested a review from Copilot November 12, 2025 19:20

Copilot started reviewing on behalf of jefische November 12, 2025 19:20 View session

Copilot finished reviewing on behalf of jefische November 12, 2025 19:22

Copilot AI reviewed Nov 12, 2025

View reviewed changes

shashilo approved these changes Nov 13, 2025

View reviewed changes

Merge branch 'develop' into jeremy/677-gift-suggestions-not-loading

b41c9dd

vercel bot deployed to Preview – elecretanta-storybook November 13, 2025 15:23 View deployment

vercel bot deployed to Preview – elecretanta November 13, 2025 15:23 View deployment

vercel bot deployed to Preview – elecretanta-unit-test November 13, 2025 15:23 View deployment

shashilo merged commit 1873863 into develop Nov 13, 2025
4 checks passed

shashilo deleted the jeremy/677-gift-suggestions-not-loading branch November 13, 2025 15:25


		{giftSuggestions?.length !== 0 && (

		{giftSuggestions?.length < 3 ? (

	// Verifiy 3 gift suggestions are provided
	// Verify 3 gift suggestions are provided

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

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

Uh oh!

Conversation

jefische commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Before:

After:

Testing instructions

Additional information

Screenshot of the WaitingForSuggestions and GiftSuggestionCard components

Pre-submission checklist

Uh oh!

vercel bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

jefische commented Nov 11, 2025 •

edited

Loading

Screenshot of the `WaitingForSuggestions` and `GiftSuggestionCard` components

vercel bot commented Nov 11, 2025 •

edited

Loading