Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 1x 9x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 9x 7x 7x 7x 6x 5x 5x 5x 5x 4x 4x 4x 1x 5x 19x 11x 9x 9x 2x 9x 9x 9x 19x 11x 11x 10x 10x 10x 2x 1x 19x 2x 19x 1x 1x 1x 1x 19x | import { useState, useRef, useEffect, useCallback } from "react";
export type SaveStatus = "idle" | "saving" | "saved" | "error";
const WORD_LIMIT = 5000;
function countWords(html: string): number {
return html.replace(/<[^>]*>/g, " ").split(/\s+/).filter(Boolean).length;
}
interface SaveableData {
title: string;
content: string;
slug?: string;
metaDescription?: string;
blogType: string;
primaryKeyword?: string;
[key: string]: unknown;
}
interface UseAutoSaveOptions {
blogId: string | null;
proId: string;
getData: () => SaveableData;
saveFn: (data: SaveableData) => Promise<void>;
enabled: boolean;
intervalMs?: number;
}
export function useAutoSave({
blogId,
proId,
getData,
saveFn,
enabled,
intervalMs = 30000,
}: UseAutoSaveOptions) {
const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
const lastSavedSnapshot = useRef<string>("");
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const savingRef = useRef(false);
const getDataRef = useRef(getData);
const saveFnRef = useRef(saveFn);
getDataRef.current = getData;
saveFnRef.current = saveFn;
const saveNow = useCallback(async () => {
if (!blogId || !proId || savingRef.current) return;
const data = getDataRef.current();
const snapshot = JSON.stringify(data);
if (snapshot === lastSavedSnapshot.current) return;
// Skip auto-save when content exceeds word limit
if (data.content && countWords(data.content) > WORD_LIMIT) return;
try {
savingRef.current = true;
setSaveStatus("saving");
await saveFnRef.current(data);
lastSavedSnapshot.current = snapshot;
setLastSavedAt(new Date());
setSaveStatus("saved");
} catch {
setSaveStatus("error");
} finally {
savingRef.current = false;
}
}, [blogId, proId]);
useEffect(() => {
if (!enabled || !blogId) return;
// Take initial snapshot (read via ref so a new getData identity per keystroke
// does not re-run this effect and clobber the snapshot with unsaved edits)
lastSavedSnapshot.current = JSON.stringify(getDataRef.current());
intervalRef.current = setInterval(() => {
saveNow();
}, intervalMs);
return () => {
Eif (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [enabled, blogId, intervalMs, saveNow]);
// Save on unmount if there are unsaved changes
useEffect(() => {
return () => {
if (!blogId || !proId) return;
const data = getDataRef.current();
const snapshot = JSON.stringify(data);
if (snapshot !== lastSavedSnapshot.current && (!data.content || countWords(data.content) <= WORD_LIMIT)) {
saveFnRef.current(data).catch((err) => {
console.error("[AutoSave] Failed to save on unmount:", err);
});
}
};
}, [blogId, proId]);
// Coordinate with external saves (e.g. manual save button)
const markExternalSaveStart = useCallback(() => {
savingRef.current = true;
}, []);
const markExternalSaveEnd = useCallback(() => {
savingRef.current = false;
lastSavedSnapshot.current = JSON.stringify(getDataRef.current());
setLastSavedAt(new Date());
setSaveStatus("saved");
}, []);
return { saveStatus, saveNow, lastSavedAt, markExternalSaveStart, markExternalSaveEnd };
}
|