Skip to content

fix: Adding missing field to store #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 15, 2025
Merged

Conversation

amareshsm
Copy link
Member

Prerequisites checklist

What is the purpose of this pull request?

What changes did you make? (Give an overview)

Use the onRehydrateStorage hook to add any new field if it is missing in the store.

The previous implementation - #97, where we checked for missing language code, works fine in cases where a user manually selects a new language from the dropdown. In this scenario, if the corresponding code entry was missing, we could dynamically patch it on the fly.

However, this approach breaks when a user opens a shared link that points directly to a newly added language. Since the state is rehydrated from the URL hash and doesn’t include the new language (because it wasn’t present in the original persisted state), the app can break.

We’re now using the onRehydrateStorage hook provided by Zustand. This hook ensures that immediately after the state is loaded from storage, any missing fields (like code for a new language) are automatically added using defaultCode. This centralises the patching logic inside the store (use-explorer file), ensures the state is always complete, and prevents issues with incomplete or outdated persisted data.

Also, all code logic related to state hydration and defaults stays cleanly inside the Zustand store.

Related Issues

Is there anything you'd like reviewers to focus on?

Copy link

netlify bot commented May 12, 2025

Deploy Preview for eslint-code-explorer ready!

Name Link
🔨 Latest commit 0a80015
🔍 Latest deploy log https://app.netlify.com/sites/eslint-code-explorer/deploys/682275434ed62f00082a16ab
😎 Deploy Preview https://deploy-preview-101--eslint-code-explorer.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Comment on lines -107 to +121
const storedValue = searchParams.get(key) ?? "";
const storedValue = getHashParams().get(key) ?? "";
return storedValue ? JSON.parse(atob(storedValue)) : "";
},
setItem: (key, newValue): void => {
const searchParams = new URLSearchParams(location.hash.slice(1));
const searchParams = getHashParams();
const encodedValue = btoa(JSON.stringify(newValue));
searchParams.set(key, encodedValue);
location.hash = searchParams.toString();
},
removeItem: (key): void => {
const searchParams = new URLSearchParams(location.hash.slice(1));
const searchParams = getHashParams();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like we're creating a new URLSearchParams for each method. Is that necessary or can the same one be reused?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it is necessary to create a new URLSearchParams. If we reused a single URLSearchParams instance, it would contain stale data that doesn't reflect the current state of location.hash.

@nzakas nzakas changed the title chore: Adding missing field to store fix: Adding missing field to store May 14, 2025
@eslint-github-bot eslint-github-bot bot added the bug Something isn't working label May 14, 2025
Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Would like another review before merging.

@nzakas nzakas added this to Triage May 14, 2025
@github-project-automation github-project-automation bot moved this to Needs Triage in Triage May 14, 2025
@nzakas nzakas moved this from Needs Triage to Second Review Needed in Triage May 14, 2025
@lumirlumir lumirlumir added the accepted There is consensus among the team that this change meets the criteria for inclusion label May 15, 2025
Copy link
Member

@lumirlumir lumirlumir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, Thanks!

@lumirlumir lumirlumir merged commit c310380 into main May 15, 2025
8 checks passed
@lumirlumir lumirlumir deleted the adding_missing_field_to_store branch May 15, 2025 09:01
@github-project-automation github-project-automation bot moved this from Second Review Needed to Complete in Triage May 15, 2025
@harish-sethuraman
Copy link
Member

@amareshsm should we remove the dropdown change case then? I can send a PR for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion bug Something isn't working chore
Projects
Status: Complete
Development

Successfully merging this pull request may close these issues.

4 participants