Fix: Selected framework in Code component #12496
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
@gkettani is attempting to deploy a commit to the authjs Team on Vercel. A member of the Team first needs to authorize it. |
docs/components/Code/index.tsx
Outdated
| const [selectedFramework, setSelectedFramework] = useState<string>( | ||
| Object.values(renderedFrameworks)[0] | ||
| ) | ||
|
|
||
| const updateFrameworkStorage = (value: string): void => { | ||
| const params = new URLSearchParams(searchParams?.toString()) | ||
| params.set("framework", value) |
There was a problem hiding this comment.
To avoid repeating the use of parseParams throughout the code, please move it to the updateFrameworkStorage function.
| useEffect(() => { | ||
| const length = Object.keys(renderedFrameworks).length | ||
| function handleStorage(event: StorageEvent) { | ||
| if ( | ||
| event.key === AUTHJS_TAB_KEY && | ||
| event.newValue && | ||
| Object.values(renderedFrameworks).includes(event.newValue) | ||
| ) { | ||
| setSelectedFramework(event.newValue) | ||
| } | ||
| } | ||
| window.addEventListener("storage", handleStorage) | ||
| return () => { | ||
| window.removeEventListener("storage", handleStorage) | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
I think this logic is unnecessary because changing the framework in the tabs will automatically update the selected framework, regardless of the active tab or whether you have instances of the page open in different windows on your computer. It will synchronize the updates.
There was a problem hiding this comment.
You're correct; that was indeed the case when we used the storageKey prop in the Tabs component. The Tabs component managed the synchronization logic across all tabs.
next-auth/docs/components/Code/index.tsx
Lines 90 to 93 in 9d704a0
However, because the Tabs component relies on an index to track and sync the selected tab, this approach caused the issue we’re addressing.
To resolve this, I extracted the synchronization logic from the Tabs component and adapted it to our use case. During this process, I reviewed the implementation of the Tabs component to understand its behavior and made targeted adjustments to ensure it works properly in our context, specifically by replacing the index-based tracking with framework names.
There was a problem hiding this comment.
Thanks for your explanation, that makes sense. When you remove the storageKey prop from Tabs, it becomes necessary to configure how the selected value is updated. For this, you’ve used the selectedIndex prop, which allows changing the selected value. However, by not using the storageKey prop, you’ve synchronized the selected value between the tabs of the page using the storage event to address the issue. Only the currently active tab updates the value, while the others remain unchanged. This is a great approach to solving the problem!
docs/components/Code/index.tsx
Outdated
| if (!getFrameworkStorage) { | ||
| window.localStorage.setItem(AUTHJS_TAB_KEY, "0") | ||
| handleFrameworkChange(Object.values(renderedFrameworks)[0]) |
There was a problem hiding this comment.
You can simply use the value selectedFramework
docs/components/Code/index.tsx
Outdated
| if (textContent) { | ||
| handleFrameworkChange(textContent) | ||
| } |
There was a problem hiding this comment.
Check if the selected value is within renderedFrameworks, as selecting a tab in the package manager will update the framework value.
☕️ Reasoning
The
Codecomponent currently uses theTabscomponent from the Nextra UI library to display different code examples for various frameworks. TheTabscomponent achieves synchronization across all instances by storing the selected tab's index in local storage. However, relying on an index introduces limitations when the tabs differ in content or order between components.This PR refactors the
Codecomponent to handle tab synchronization and local storage management directly, decoupling this logic from theTabscomponent. Instead of storing an index, the name of the framework is stored in local storage. This implementation:🧢 Checklist
🎫 Affected issues
Fixes: #12451
📌 Resources