Merge pull request #5014 from naturalcrit/new/edit/Home-Move-unsavedChange-checker-to-common-hook

New/edit/home move unsaved change checker to common hook

client/homebrew/pages/editPage/editPage.jsx

@@ -78,15 +78,6 @@ const EditPage = (props)=>{
 	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 	const saveTimeout        = useRef(null);
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
-
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	});
-
-	const handleSplitMove = ()=>{
-		editorRef.current?.update();
-	};
 
 	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
 		...prevBrew,
@@ -326,6 +317,7 @@ const EditPage = (props)=>{
 	};
 
 	const {
+		handleSplitMove,
 		handleBrewChange
 	} = useCommonEditPageFunctions({
 		saveGoogle,
@@ -344,11 +336,12 @@ const EditPage = (props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		trySave,
 		sandbox,
-		lastSavedBrew
+		lastSavedBrew,
+		editorRef
 	});
 
 	return (

client/homebrew/pages/homePage/homePage.jsx

@@ -62,14 +62,9 @@ const HomePage =(props)=>{
 	const [autoSaveEnabled, setAutoSaveEnabled]             = useState(false);
 	const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
 
-	const editorRef         = useRef(null);
+	const editorRef          = useRef(null);
-	const lastSavedBrew     = useRef(_.cloneDeep(props.brew));
+	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef = useRef(unsavedChanges);
-
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	}, [unsavedChanges]);
 
 	const save = ()=>{
 		request.post('/api')
@@ -84,10 +79,6 @@ const HomePage =(props)=>{
 			});
 	};
 
-	const handleSplitMove = ()=>{
-		editorRef.current.update();
-	};
-
 	const resetWarnUnsavedTimer = ()=>{
 		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
 		clearTimeout(warnUnsavedTimeout.current);
@@ -150,7 +141,8 @@ const HomePage =(props)=>{
 		</Navbar>;
 	};
 
-		const {
+	const {
+		handleSplitMove,
 		handleBrewChange
 	} = useCommonEditPageFunctions({
 		setError,
@@ -168,10 +160,11 @@ const HomePage =(props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		sandbox,
-		lastSavedBrew
+		lastSavedBrew,
+		editorRef
 	});
 
 	return (

client/homebrew/pages/newPage/newPage.jsx

@@ -62,11 +62,10 @@ const NewPage = (props)=>{
 	const [autoSaveEnabled, setAutoSaveEnabled] = useState(false);
 	const [warnUnsavedChanges, setWarnUnsavedChanges] = useState(true);
 
-	const editorRef     = useRef(null);
+	const editorRef          = useRef(null);
-	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
 	// const saveTimeout        = useRef(null);
 	const warnUnsavedTimeout = useRef(null);
-	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
 
 	useEffect(()=>{
 		loadBrew();
@@ -101,14 +100,6 @@ const NewPage = (props)=>{
 			window.history.replaceState({}, window.location.title, '/new/');
 	};
 
-	useEffect(()=>{
-		unsavedChangesRef.current = unsavedChanges;
-	});
-
-	const handleSplitMove = ()=>{
-		editorRef.current.update();
-	};
-
 	const resetWarnUnsavedTimer = ()=>{
 		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
 		clearTimeout(warnUnsavedTimeout.current);
@@ -204,7 +195,8 @@ const NewPage = (props)=>{
 		</Navbar>
 	);
 
-		const {
+	const {
+		handleSplitMove,
 		handleBrewChange
 	} = useCommonEditPageFunctions({
 		setError,
@@ -222,11 +214,12 @@ const NewPage = (props)=>{
 		autoSaveEnabled,
 		setAutoSaveEnabled,
 		setWarnUnsavedChanges,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
 		trySave,
 		sandbox,
-		lastSavedBrew
+		lastSavedBrew,
+		editorRef
 	});
 
 	return (

client/homebrew/utils/commonEditPageFunctions.js

@@ -24,16 +24,18 @@ export default function useCommonEditPageFunctions(dependencies) {
 		trySave = ()=>{},
 		sandbox,
 		saveGoogle = false,
-		unsavedChangesRef,
+		unsavedChanges,
 		setUnsavedChanges,
-		lastSavedBrew
+		lastSavedBrew,
+		editorRef
 	} = dependencies;
 
+	const unsavedChangesRef  = useRef(unsavedChanges); // onBeforeUnload lives outside React and needs ref to unsavedChanges
+
 	//==--------- Page setup ----------==//
 	useEffect(()=>{
 		const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
 		setAutoSaveEnabled(autoSavePref);
-		console.log(autoSavePref)
 		setWarnUnsavedChanges(!autoSavePref);
 		setHTMLErrors(hbfm.validate(currentBrew.text));
 		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
@@ -63,10 +65,14 @@ export default function useCommonEditPageFunctions(dependencies) {
 	useEffect(()=>{
 		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
 		setUnsavedChanges(hasChange);
+		unsavedChangesRef.current = hasChange;
 
 		if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
 	}, [currentBrew]);
 
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
 	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
 		if(subfield == 'renderer' || subfield == 'theme')
@@ -92,6 +98,7 @@ export default function useCommonEditPageFunctions(dependencies) {
 	};
 
 	return {
+		handleSplitMove,
 		handleBrewChange
 	}
 }