delete support + query params

src/cv-maker/core/template.tsx

@@ -145,7 +145,6 @@ function ResumeHead(resume: ResumeObject) {
 function CompanyProject(project: ProjectDetails, isLast: boolean) {
   let clazz = "project no-break pb-3";
   if (!isLast) clazz += " border-b-1 border-gray-300 border-dashed mb-2";
-  console.log({ title: project.title, isLast })
   return (
     <div className={clazz}>
       <div className="flex">

src/cv-maker/core/utils.ts

@@ -40,4 +40,15 @@ export function debounce<T extends (...args: unknown[]) => void>(
       func(...args);
     }, wait);
   };
-}
+}
+
+export function getUrlParam(name: string) {
+  const params = new URLSearchParams(location.search);
+  return params.get(name);
+}
+
+export function setUrlParam(name: string, value: string) {
+  const url = new URL(location.href);
+  url.searchParams.set(name, value);
+  window.history.replaceState(null, '', url);
+}

src/cv-maker/index.html

@@ -84,6 +84,7 @@
       <button
         class="btn bg-[#DC382D] hover:bg-[#B93224]"
         x-on:click="$dispatch('delete')"
+        x-show="availableResumes.length > 1"
       >Delete</button>
       </div>
 

src/cv-maker/main.ts

@@ -1,5 +1,5 @@
 import Alpine from "alpinejs";
-import { debounce, getResumeObject, parseJSON, resumeObjectToHTML } from "./core/utils";
+import { debounce, getResumeObject, getUrlParam, parseJSON, resumeObjectToHTML, setUrlParam } from "./core/utils";
 import type resumeSchema from "./static/resume-schema.json"
 import { makeJsonEditor } from "#/common/editor/make";
 import { hasMajorError } from "#/common/editor/text-model";
@@ -56,7 +56,7 @@ const state: {
     mode: "view",
     editorHasError: false,
     availableResumes: [],
-    currentResume: "example"
+    currentResume: getUrlParam("resume") ?? "example"
   });
 
 Alpine.data("state", () => state);
@@ -80,6 +80,12 @@ async function loadStoredResume() {
       name: key
     });
   };
+
+  const lastResumeId = state.availableResumes.at(-1)?.id;
+
+  if (lastResumeId) {
+    state.currentResume = lastResumeId;
+  }
 
 }
 
@@ -96,6 +102,7 @@ function selectResume() {
   };
   state.resumeObject = resume;
   state.resumeHtml = resumeObjectToHTML(resume);
+  setUrlParam("resume", state.currentResume);
 }
 
 async function setup() {
@@ -181,6 +188,15 @@ async function setup() {
     if (!name) return;
     localStorage.setItem(name, JSON.stringify(state.resumeObject));
     state.availableResumes.push({ id: name, name });
+    state.currentResume = name;
+    selectResume();
+    prepareEditor();
+  });
+
+  window.addEventListener('delete', () => {
+    localStorage.removeItem(state.currentResume);
+    loadStoredResume();
+    selectResume();
   });
 
   window.addEventListener('resize', () => {