reset data button when data saved in localstorage

src/app/lib/redux/local-storage.ts

@@ -1,4 +1,5 @@
-import type { RootState } from "lib/redux/store";
+import { store, type RootState } from "lib/redux/store";
+import { resetResume } from "./resumeSlice";
 
 // Reference: https://dev.to/igorovic/simplest-way-to-persist-redux-state-to-localstorage-e67
 
@@ -23,4 +24,16 @@ export const saveStateToLocalStorage = (state: RootState) => {
   }
 };
 
+export const clearLocalStorage = () => {
+  try {
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
+    console.log(localStorage.getItem(LOCAL_STORAGE_KEY),"sss");
+
+    store.dispatch(resetResume());
+    
+  } catch (e) {
+    // Ignore
+  }
+};
+
 export const getHasUsedAppBefore = () => Boolean(loadStateFromLocalStorage());

src/app/lib/redux/resumeSlice.ts

@@ -197,6 +197,7 @@ export const resumeSlice = createSlice({
     setResume: (draft, action: PayloadAction<Resume>) => {
       return action.payload;
     },
+    resetResume: () => initialResumeState,
   },
 });
 
@@ -211,6 +212,7 @@ export const {
   moveSectionInForm,
   deleteSectionInFormByIdx,
   setResume,
+  resetResume,
 } = resumeSlice.actions;
 
 export const selectResume = (state: RootState) => state.resume;

src/app/resume-import/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { getHasUsedAppBefore } from "lib/redux/local-storage";
+import { clearLocalStorage, getHasUsedAppBefore } from "lib/redux/local-storage";
 import { ResumeDropzone } from "components/ResumeDropzone";
 import { useState, useEffect } from "react";
 import Link from "next/link";
@@ -15,6 +15,11 @@ export default function ImportResume() {
     setHasUsedAppBefore(getHasUsedAppBefore());
   }, []);
 
+  const handleCreateFromScratch = () => {
+    clearLocalStorage(); 
+    setHasAddedResume(false);
+  };
+
   return (
     <main>
       <div className="mx-auto mt-14 max-w-3xl rounded-md border border-gray-200 px-10 py-10 text-center shadow-md">
@@ -44,6 +49,8 @@ export default function ImportResume() {
                 <SectionWithHeadingAndCreateButton
                   heading="You have data saved in browser from prior session"
                   buttonText="Continue where I left off"
+                  secondaryButtonText="Create from scratch"
+                  onCreateFromScratch={handleCreateFromScratch}
                 />
                 <OrDivider />
               </>
@@ -73,20 +80,33 @@ const OrDivider = () => (
 const SectionWithHeadingAndCreateButton = ({
   heading,
   buttonText,
+  secondaryButtonText,
+  onCreateFromScratch,
 }: {
   heading: string;
   buttonText: string;
+  secondaryButtonText?: string;
+  onCreateFromScratch?: () => void;
 }) => {
   return (
     <>
       <p className="font-semibold text-gray-900">{heading}</p>
-      <div className="mt-5">
+      <div className="mt-5 flex flex-col md:flex-row md:justify-center md:items-center gap-2">
         <Link
           href="/resume-builder"
-          className="outline-theme-blue rounded-full bg-sky-500 px-6 pb-2 pt-1.5 text-base font-semibold text-white"
+          className="block md:inline-block w-full md:w-auto outline-theme-blue rounded-full bg-sky-500 px-6 pb-2 pt-1.5 text-base font-semibold text-white"
         >
           {buttonText}
         </Link>
+        {secondaryButtonText && (
+          <Link
+            href="/resume-builder"
+            onClick={onCreateFromScratch}
+            className="block md:inline-block w-full md:w-auto outline-theme-blue rounded-full bg-sky-500 px-6 pb-2 pt-1.5 text-base font-semibold text-white"
+          >
+            {secondaryButtonText}
+          </Link>
+        )}
       </div>
     </>
   );