Add [FEATURE]: Story Draft Auto-Save to LocalStorage in ShareStory and EditStory #151

[dhruvpatel16120]

🛠️ Pull Request

🏷️ PR Type

Select the type of PR (check one):

• ✨ Feature
• 🛠️ Improvement / Refactor
• 🔗 Related Issue

Closes #151

---

📝 Rationale / Motivation

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.

To address this, this PR implements a client-side auto-save mechanism using localStorage in both ShareStory and EditStory editors. This preserves progress and eliminates the risk of losing long stories.

---

✨ Description of Changes

💾 LocalStorage Auto-Save

• Share Story Drafts:

  • Modified ShareStory.tsx to load the draft title and content from localStorage (safevoice_draft_title, safevoice_draft_content) on editor load.
  • Auto-saves changes to localStorage dynamically as the user types.
  • Clears the cached draft upon successful submission of the story.

• Edit Story Drafts:

  • Modified EditStory.tsx to store story edit drafts using dynamic keys indexed by the story ID (safevoice_edit_title_${story.id}, safevoice_edit_content_${story.id}) to prevent draft collisions.
  • Auto-saves changes as the user edits.
  • Clears the specific story edit draft upon successful update or when the user deliberately cancels editing.

---

🧪 Testing Instructions

Run the project locally:

npm install
npm run dev

1. Navigate to the Share Story page.
2. Enter a title and write a story.
3. Refresh the page or navigate away and come back. Verify the editor prepopulates with your draft.
4. Submit the story successfully. Verify that the form is reset and the local storage draft is cleared.
5. Edit an existing story, modify its contents, navigate away, and verify that the edited draft is retained when you go back to edit that same story.
6. Click Cancel inside the editor. Verify that the draft is discarded.

---

⚡ Checklist

• Prepopulate editor state from localStorage on mount
• Cache title and content to localStorage on change
• Clear localStorage keys only after successful submission or update
• Clear localStorage keys on editor edit cancellation
• No TypeScript compiler errors

[netlify]

👷 Deploy request for safevoiceforwomen pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0e209ec