feat: Implement automatic code saving and loading to local storage #206
Conversation
|
Someone is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@DhanushNehru please review this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds localStorage-based code persistence to the EditorComponent, allowing users to automatically save and restore their code when switching between programming languages.
- Added localStorage retrieval of saved code when changing languages
- Implemented automatic saving of code to localStorage whenever code or language changes
- Preserved fallback to default "Hello World" template when no saved code exists
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/pages/EditorComponent.js
Outdated
| useEffect(() => { | ||
| if (code) { | ||
| localStorage.setItem(`code-${currentLanguage}`, code); | ||
| } | ||
| }, [code, currentLanguage]); |
There was a problem hiding this comment.
The useEffect saves to localStorage on every code change, including when importing files. This will overwrite the imported file's code with the previous language's saved code due to race conditions. Consider checking isImportingRef.current to avoid saving during file imports, similar to the pattern used in the language change effect.
src/pages/EditorComponent.js
Outdated
| useEffect(() => { | ||
| if (code) { | ||
| localStorage.setItem(`code-${currentLanguage}`, code); | ||
| } | ||
| }, [code, currentLanguage]); |
There was a problem hiding this comment.
This effect triggers on every keystroke in the editor since it depends on code. This can cause performance issues and excessive localStorage writes. Consider debouncing the localStorage save operation or using a manual save trigger instead of automatic saving on every change.
|
@DhanushNehru I have updated the code with the fixes suggested by copilot and tested them properly. |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/pages/EditorComponent.js
Outdated
|
|
||
| const handler = setTimeout(() => { | ||
| if (code) { | ||
| localStorage.setItem(`code-${currentLanguage}`, code); |
There was a problem hiding this comment.
The autosave logic doesn't handle the case when a user intentionally clears all code. When code becomes an empty string, it won't save to localStorage, leaving stale code from the previous session. This means switching languages and returning will restore old code instead of the empty state. Consider saving even when code is empty or explicitly handling the clear case by removing the localStorage item.
| localStorage.setItem(`code-${currentLanguage}`, code); | |
| localStorage.setItem(`code-${currentLanguage}`, code); | |
| } else { | |
| localStorage.removeItem(`code-${currentLanguage}`); |
src/pages/EditorComponent.js
Outdated
| return () => { | ||
| clearTimeout(handler); | ||
| }; | ||
| }, [code, currentLanguage]); |
There was a problem hiding this comment.
The autosave effect can trigger on the initial mount when code is null, and will run every time currentLanguage changes even though the language change effect (lines 124-142) already handles setting the correct code. This creates a race condition where both effects compete to set code in localStorage. The autosave should only track code changes, not currentLanguage. Remove currentLanguage from the dependency array and only use it as part of the storage key.
| }, [code, currentLanguage]); | |
| }, [code]); |
src/pages/EditorComponent.js
Outdated
| const savedCode = localStorage.getItem(`code-${currentLanguage}`); | ||
| if (savedCode) { | ||
| setCode(savedCode); | ||
| } else { | ||
| setCode(selectedLanguage.HELLO_WORLD); | ||
| } |
There was a problem hiding this comment.
The condition if (savedCode) will be false for both null (key doesn't exist) and empty string (user cleared code). This means users can't save an empty code state. Consider checking explicitly for null using savedCode !== null to distinguish between 'no saved code' and 'intentionally empty code'.
|
@DhanushNehru have tried to address all edge cases, I think its safe to merge now |
|
Resolve merge conflicts @Incharajayaram |
2 participants
Resolves #150
PR Fixes:
This pull request introduces a new feature that automatically saves and loads the user's code to and from the browser's local storage.
This prevents the user from losing their work when they refresh the page or navigate away from the editor.
Changes Made:
saved code in the local storage for that specific language. If found, it loads it into the editor. Otherwise, it loads the default
"Hello World" snippet.
This ensures that the user's latest work is always preserved.
This implementation uses the browser's localStorage API, which is a lightweight and effective solution for this use case.
Checklist before requesting a review
mainbranchnpm run lint:fixlocally