[FEATURE] Story Draft Auto-Save to LocalStorage in ShareStory and EditStory

[dhruvpatel16120]

Description

Sharing personal experiences of distress can be emotionally taxing. Currently, if a user refreshes the page, accidentally closes their tab, or gets logged out mid-typing, their draft content is completely lost. We should implement a client-side auto-save mechanism using localStorage to preserve progress.

Proposed Solution

1. In src/pages/ShareStory.tsx and src/pages/EditStory.tsx, implement useEffect hooks to synchronize draft state:
   • On component mount, check for any cached title and content in localStorage. If present, prepopulate the editor state.
   • As the user types (on state change of title or content), cache the current text into localStorage.
2. Clear the specific localStorage keys only after a successful story submission.

Code Snippet Reference

In ShareStory.tsx:

// 1. Load draft on mount
useEffect(() => {
  const savedTitle = localStorage.getItem('safevoice_draft_title');
  const savedContent = localStorage.getItem('safevoice_draft_content');
  if (savedTitle) setTitle(savedTitle);
  if (savedContent) setContent(savedContent);
}, []);

// 2. Save draft on change
useEffect(() => {
  localStorage.setItem('safevoice_draft_title', title);
  localStorage.setItem('safevoice_draft_content', content);
}, [title, content]);

// 3. Clear draft inside handleSubmit after successful submit
localStorage.removeItem('safevoice_draft_title');
localStorage.removeItem('safevoice_draft_content');

Impact

• Eliminates the risk of losing long stories due to network disruptions or accidental closures.
• Protects the user's emotional and creative investment in telling their story.
• Highly performant, client-side only solution with zero server overhead.

[dhruvpatel16120]

hello @Piyushydv08 ! i want to work on this feature under GSSOC, please assign this to me !

[Piyushydv08]

hello @Piyushydv08 ! i want to work on this feature under GSSOC, please assign this to me !

Assigned to u @dhruvpatel16120