Merge pull request #15 from vurak/hotfix/delete-localstorage-save-on-…

…post hotfix/delete localstorage save on post
fbold · Aug 9, 2024 · 68107e8 · 68107e8
2 parents a8e9966 + f1ba0d7
commit 68107e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/app/(main)/edit/[id]/client-editor.tsx b/app/(main)/edit/[id]/client-editor.tsx
@@ -18,6 +18,7 @@ export default function EditClient({
  const router = useRouter()
  const params = useSearchParams()
  const category = params.get("c") || ""
+ const localStorageKey = tileId + "-edit"
 
  const { trigger, loading, success, error } = usePATCH<Partial<Tile>, any>(
  `/api/tile?id=${tileId}`
@@ -27,10 +28,18 @@ export default function EditClient({
  const result = await trigger({ title, content })
 
  if (result) {
+ localStorage.removeItem(localStorageKey)
  router.push(`/read/${result.tile.id}`)
  }
  }
 
+ // override fetched tile content with localstorage in case something has been saved
+ // locally on top of it, quicksave
+ const localSave =
+ typeof window !== "undefined" ? localStorage.getItem(localStorageKey) : null
+ const { editorContent: editorContent_local = "", title: title_local = "" } =
+ localSave ? JSON.parse(localSave) : {}
+
  return (
  // <div className="flex justify-center h-full max-h-full scroll">
  <div
@@ -40,9 +49,9 @@ export default function EditClient({
  <Editor
  onSave={handleSave}
  loadingSave={loading}
- category={category}
- initialContent={editorContent}
- initialTitle={title}
+ initialContent={editorContent_local || editorContent}
+ initialTitle={title_local || title}
+ saveTo={localStorageKey}
  />
  </div>
  // </div>

diff --git a/app/(main)/write/page.tsx b/app/(main)/write/page.tsx
@@ -8,6 +8,7 @@ export default function Write() {
  const router = useRouter()
  const params = useSearchParams()
  const category = params.get("c") || ""
+ const localStorageKey = category + "-write"
 
  const { trigger, loading, success, error } = usePOST<Partial<Tile>, any>(
  "/api/tile"
@@ -18,12 +19,13 @@ export default function Write() {
  const result = await trigger({ title, content, category_id: category })
 
  if (result) {
+ localStorage.removeItem(localStorageKey)
  router.push(`/read/${result.tile.id}`)
  }
  }
 
  const localSave =
- typeof window !== "undefined" ? localStorage.getItem(category) : null
+ typeof window !== "undefined" ? localStorage.getItem(localStorageKey) : null
  const { editorContent = "", title = "" } = localSave
  ? JSON.parse(localSave)
  : {}
@@ -37,9 +39,9 @@ export default function Write() {
  <Editor
  onSave={handleSave}
  loadingSave={loading}
- category={category}
  initialContent={editorContent}
  initialTitle={title}
+ saveTo={localStorageKey}
  />
  </div>
  // </div>

diff --git a/components/editor/editor.tsx b/components/editor/editor.tsx
@@ -24,10 +24,10 @@ import { localSave } from "@/lib/editor"
 
 type EditorProps = {
  onSave: (title: string, content?: string) => {}
- category: string
  initialTitle?: string
  initialContent?: string
  loadingSave: boolean //UseMutationState
+ saveTo?: string
 }
 
 const PoemSchema = z.object({
@@ -38,10 +38,10 @@ type PoemType = z.infer<typeof PoemSchema>
 
 const Editor = ({
  onSave,
- category,
  initialTitle,
  initialContent,
  loadingSave,
+ saveTo,
 }: EditorProps) => {
  const savingTimeout = useRef<NodeJS.Timeout | null>(null)
 
@@ -64,12 +64,13 @@ const Editor = ({
  class: "px-2 pt-1 pb-32 min-h-full focus:outline-none break-words",
  },
  },
- onUpdate() {
+ onUpdate(e) {
+ if (!saveTo) return
  if (savingTimeout.current) clearTimeout(savingTimeout.current)
 
  savingTimeout.current = setTimeout(() => {
  console.log("saving to localStorage")
- localSave(editor?.getHTML() || "", getValues("title"), category)
+ localSave(e.editor?.getHTML() || "", getValues("title"), saveTo)
  }, 1000)
  },
  })