From 34a0b4eb054ab91c94ae95568dffaef7c7c754c5 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 15 Feb 2025 00:12:20 +1300 Subject: [PATCH 1/4] Base savedBrew on current brew state, apply only updated properties from API call --- client/homebrew/pages/editPage/editPage.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index ffb6a6b40..bef4ec1b0 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -247,7 +247,13 @@ const EditPage = createClass({ }); if(!res) return; - this.savedBrew = res.body; + this.savedBrew = { + ...this.state.brew, + googleId : res.body.googleId ? res.body.googleId : null, + editId : res.body.editId, + shareId : res.body.shareId, + version : res.body.version + }; history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); this.setState((prevState)=>({ From 2cb8b5d014a3951ab09f9d733a25366a436a6ccf Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 15 Feb 2025 00:12:55 +1300 Subject: [PATCH 2/4] Set brew state to exactly match savedBrew --- client/homebrew/pages/editPage/editPage.jsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index bef4ec1b0..6750023dd 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -256,13 +256,8 @@ const EditPage = createClass({ }; history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); - this.setState((prevState)=>({ - brew : { ...prevState.brew, - googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null, - editId : this.savedBrew.editId, - shareId : this.savedBrew.shareId, - version : this.savedBrew.version - }, + this.setState(()=>({ + brew : this.savedBrew, isPending : false, isSaving : false, unsavedTime : new Date() From 1af66cf571fce7ccc7ff7a5c09a172bd54fb0d33 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Sat, 15 Feb 2025 00:13:23 +1300 Subject: [PATCH 3/4] Add default case for SAVE button text --- client/homebrew/pages/editPage/editPage.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 6750023dd..9b08327b1 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -337,6 +337,7 @@ const EditPage = createClass({ if(!this.state.isPending && !this.state.isSaving){ return saved.; } + return no changes.; }, handleAutoSave : function(){ From 9b0da36365d8a6d9b2f3d967a0a6cce00f7b8cec Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 25 Feb 2025 19:56:23 +1300 Subject: [PATCH 4/4] Rework isPending & hasChanges --- client/homebrew/pages/editPage/editPage.jsx | 42 +++++++++++++-------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 9b08327b1..40c74f9a8 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -102,6 +102,14 @@ const EditPage = createClass({ window.onbeforeunload = function(){}; document.removeEventListener('keydown', this.handleControlKeys); }, + componentDidUpdate : function(){ + const hasChange = this.hasChanges(); + if(this.state.isPending != hasChange){ + this.setState({ + isPending : hasChange + }); + } + }, handleControlKeys : function(e){ if(!(e.ctrlKey || e.metaKey)) return; @@ -138,15 +146,13 @@ const EditPage = createClass({ this.setState((prevState)=>({ brew : { ...prevState.brew, text: text }, - isPending : true, htmlErrors : htmlErrors, }), ()=>{if(this.state.autoSave) this.trySave();}); }, handleStyleChange : function(style){ this.setState((prevState)=>({ - brew : { ...prevState.brew, style: style }, - isPending : true + brew : { ...prevState.brew, style: style } }), ()=>{if(this.state.autoSave) this.trySave();}); }, @@ -158,8 +164,7 @@ const EditPage = createClass({ brew : { ...prevState.brew, ...metadata - }, - isPending : true, + } }), ()=>{if(this.state.autoSave) this.trySave();}); }, @@ -312,7 +317,14 @@ const EditPage = createClass({ }, renderSaveButton : function(){ - if(this.state.autoSaveWarning && this.hasChanges()){ + + // #1 - Currently saving, show SAVING + if(this.state.isSaving){ + return saving...; + } + + // #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING + if(this.state.isPending && this.state.autoSaveWarning){ this.setAutosaveWarning(); const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60); const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`; @@ -325,19 +337,17 @@ const EditPage = createClass({ ; } - if(this.state.isSaving){ - return saving...; + // #3 - Unsaved changes exist, click to save, show SAVE NOW + // Use trySave(true) instead of save() to use debounced save function + if(this.state.isPending){ + return this.trySave(true)} color='blue' icon='fas fa-save'>Save Now; } - if(this.state.isPending && this.hasChanges()){ - return Save Now; - } - if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){ + // #4 - No unsaved changes, autosave is ON, show AUTO-SAVED + if(this.state.autoSave){ return auto-saved.; } - if(!this.state.isPending && !this.state.isSaving){ - return saved.; - } - return no changes.; + // DEFAULT - No unsaved changes, show SAVED + return saved.; }, handleAutoSave : function(){