fix(console): migrate useFavorites to React Context to fix star toggle reactivity#1201
Merged
xuyushun441-sys merged 4 commits intomainfrom Apr 10, 2026
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…r) to fix star toggle reactivity Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/26bb233a-d5c2-4042-8361-e6c14d430389 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix star/favorite button effect on Home page
fix(console): migrate Apr 9, 2026
useFavorites to React Context to fix star toggle reactivity
github-actions
bot
added
documentation
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Contributor
|
@copilot 继续完成开发，and fix all ci build and test errors |
Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/eb0d0766-8b77-462f-ac89-6dfeb9b0e31c Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…al chaining Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/eb0d0766-8b77-462f-ac89-6dfeb9b0e31c Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Contributor
Author
All CI build and test errors are now resolved. Here's a summary of what was fixed in commits Build errors fixed:
Test failures fixed (5 files, 35 tests → 0):
Also hardened Result: 64 test files pass, 893 tests pass, build succeeds, CodeQL: 0 alerts. |
Contributor
❌ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Each component calling
useFavorites()got an independentuseStateinstance. Toggling a star inAppCardupdated localStorage and its own local state, butHomePage's separate state was never notified — no re-render, star appears broken.Changes
context/FavoritesProvider.tsx(new): React Context + Provider holding the single sharedfavoritesstate. Context value is memoized; stableuseCallback([], [])callbacks don't cause extra re-renders. IncludesTODOfor future server-side persistence adapter.hooks/useFavorites.ts: Replaced with a re-export shim — all existing import paths acrossHomePage,AppCard,AppSidebar,UnifiedSidebar,StarredAppscontinue to work without modification.App.tsx:<FavoritesProvider>mounted inside<NavigationProvider>, wrapping the entire router tree so all routes share one context instance.__tests__/Favorites.test.tsx: AllrenderHookcalls wrapped withFavoritesProvider. Added two new cases: cross-component reactivity (mutation via hook A is immediately visible to hook B in the same provider) and throws-outside-provider guard.Original prompt
Bug
On the Home page (
/home), clicking the star/favorite button on anAppCardhas no visible effect. The star icon doesn't toggle, and the "Starred" section doesn't update.Demo URL: https://demo.objectui.org/home
Root Cause
useFavoritesis a standalone hook (inapps/console/src/hooks/useFavorites.ts) using localuseState+localStorage. It is called independently by:HomePage.tsx(line 36):const { favorites } = useFavorites();— reads favorites to render StarredApps section and computeisFavoritefor each AppCardAppCard.tsx(line 25):const { toggleFavorite } = useFavorites();— mutates favorites on star clickBecause each call creates an independent React state, when
AppCardtoggles a favorite:localStorageis updated correctlyAppCard's own internal state updatesHomePage'sfavoritesstate is NOT notified → no re-render → star appears "broken"The same issue affects
AppSidebar.tsxandUnifiedSidebar.tsx, which also calluseFavorites()independently.Required Fix
Convert
useFavoritesfrom a standalone hook to a React Context + Provider pattern so all consumers share a single state instance.Implementation Steps
Create
FavoritesContextandFavoritesProviderinapps/console/src/context/FavoritesProvider.tsx:favorites,addFavorite,removeFavorite,toggleFavorite,isFavorite,clearFavoritesuseFavorites()hook that reads from the context (throws if used outside provider)Update
apps/console/src/hooks/useFavorites.ts:useFavoritesandFavoriteItemtype from the new context module for backward compatibilityMount
FavoritesProviderin the app shell:<FavoritesProvider>inapps/console/src/App.tsx(or wherever the console app's provider tree is composed), wrapping the router/layout so all pages share the context.MetadataProvider,AuthProvider, etc.Verify all existing consumers work without changes:
HomePage.tsximportsuseFavoritesfrom../../hooks/useFavorites— works via re-exportAppCard.tsximportsuseFavoritesfrom../../hooks/useFavorites— works via re-exportAppSidebar.tsximportsuseFavoritesfrom../hooks/useFavorites— works via re-exportUnifiedSidebar.tsximportsuseFavoritesfrom../hooks/useFavorites— works via re-exportStarredApps.tsximportstype FavoriteItemfrom../../hooks/useFavorites— works via re-exportUpdate existing tests in
apps/console/src/__tests__/Favorites.test.tsx:renderHook(() => useFavorites())need to wrap withFavoritesProviderKeep localStorage as persistence layer for now, but add a
// TODO:comment in the provider documenting the future migration path to server-side persistence via the adapter/API layer.Update
CHANGELOG.mdunder[Unreleased]→### Fixed:Key architectural constraints
FavoritesProvidershould use localStorage for now but be designed to accept an optional server-side persistence adapter in the future (e.g., via a prop or by reading from the adapter context)window.addEventListener('storage')cross-tab sync as a workaround — that's fragile and doesn't solve the same-tab problemThe following is the prior conversation context from the user's chat exploration (may be truncated):
User: 首页应用上点星标没有反应，以及建议应该如何保存星标数据。https://demo.objectui.org/home
Assistant:
I'll investigate the star/favorite functionality issue on the homepage. Let me start by exploring the repository structure and understanding how the star feature is currently implemented.
Assistant: Now let me check if there are tests for favorites and look at the existing issues:
Assistant: Now I have a thorough und...
This pull request was created from Copilot chat.