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 | 1x 8x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 8x 6x 6x 6x 5x 4x 4x 4x 4x 3x 3x 3x 1x 4x 15x 10x 8x 8x 1x 8x 8x 8x 15x 10x 10x 9x 9x 9x 2x 1x 15x 2x 15x 1x 1x 1x 1x 15x | 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 = getData();
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 saveFn(data);
lastSavedSnapshot.current = snapshot;
setLastSavedAt(new Date());
setSaveStatus("saved");
} catch {
setSaveStatus("error");
} finally {
savingRef.current = false;
}
}, [blogId, proId, getData, saveFn]);
useEffect(() => {
if (!enabled || !blogId) return;
// Take initial snapshot
lastSavedSnapshot.current = JSON.stringify(getData());
intervalRef.current = setInterval(() => {
saveNow();
}, intervalMs);
return () => {
Eif (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [enabled, blogId, intervalMs, saveNow, getData]);
// 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 };
}
|