feat: Implement automatic code saving and loading to local storage #210
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 resolved the conflicts, please check |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements automatic code persistence using localStorage for the code editor. When a user switches between programming languages or types code, their work is automatically saved and restored.
Key Changes:
- Added localStorage integration to save code per language
- Implemented debounced auto-save with 500ms delay
- Added error handling for localStorage operations with user-friendly notifications
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setCode(savedCode); | ||
| } else { | ||
| setCode(selectedLanguage.HELLO_WORLD); | ||
| } }, [currentLanguage, enqueueSnackbar]); |
There was a problem hiding this comment.
Extra whitespace before the closing brace. The closing brace should be on its own line or immediately follow the closing brace of the if-else statement.
| } }, [currentLanguage, enqueueSnackbar]); | |
| }}, [currentLanguage, enqueueSnackbar]); |
| } catch (e) { | ||
| enqueueSnackbar("Failed to save code automatically. Local storage might be full or unavailable.", { variant: "error" }); | ||
| console.error("Local storage save error:", e); | ||
| } }, 500); // 500ms debounce |
There was a problem hiding this comment.
Extra whitespace before the closing brace. There should be proper formatting with the closing brace on a new line or a single space.
| } }, 500); // 500ms debounce | |
| } }, 500); // 500ms debounce |
| if (code) { | ||
| localStorage.setItem(`code-${currentLanguage}`, code); | ||
| } else { | ||
| localStorage.removeItem(`code-${currentLanguage}`); | ||
| } |
There was a problem hiding this comment.
The auto-save logic removes code from localStorage when code is empty/falsy, but empty string is a valid code state. This means users cannot save an empty editor state and will always get the HELLO_WORLD template instead. Consider checking for null/undefined specifically: if (code !== null && code !== undefined).
2 participants
Resolves #150
PR Fixes:
This PR introduces automatic code saving and loading functionality to the editor, enhancing user experience by preventing data loss
and improving persistence across sessions and language switches.
Key Changes & Improvements:
selected language.
during rapid typing.
localStorage full, private browsing mode) and notify the user via snackbar.
that an empty state is correctly preserved.
imported code is not overwritten.
loaded.
Why this is needed:
This feature addresses the critical need for code persistence, allowing users to leave and return to the editor without losing their
work. It significantly improves the reliability and user-friendliness of the IDE.
How to Test:
localStoragefor localhost:3000 in Developer Tools (Application tab) to ensure a clean state.Checklist before requesting a review
mainbranchnpm run lint:fixlocally