From 0e820a570e7f24c40f2e741c03a8e929a98214a1 Mon Sep 17 00:00:00 2001 From: Christopher Solanilla Date: Thu, 5 Sep 2024 14:10:11 -0400 Subject: [PATCH 1/4] Updates save draft button on cancel without whitespace monster --- src/components/widget-creator.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/widget-creator.jsx b/src/components/widget-creator.jsx index e6bb9a669..f569fc13c 100644 --- a/src/components/widget-creator.jsx +++ b/src/components/widget-creator.jsx @@ -455,6 +455,8 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { }) setCreatorState({...creatorState, heartbeatEnabled: false}) + //also update the text on the Save Draft Button + setCreatorState({ ...creatorState, saveText: 'Failed to save' }) } else { setAlertDialog({ enabled: true, @@ -463,6 +465,9 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { fatal: false, enableLoginButton: false }) + //also update the text on the Save Draft Button + setCreatorState({ ...creatorState, saveText: 'Failed to save' }) + } } else { setAlertDialog({ @@ -472,6 +477,9 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { fatal: false, enableLoginButton: false }) + //also update the text on the Save Draft Button + setCreatorState({ ...creatorState, saveText: 'Failed to save' }) + } } @@ -830,4 +838,4 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { } -export default WidgetCreator \ No newline at end of file +export default WidgetCreator From 007710ec7260d0c4e5c707bef1e00804767527f4 Mon Sep 17 00:00:00 2001 From: Christopher Solanilla Date: Thu, 5 Sep 2024 15:01:31 -0400 Subject: [PATCH 2/4] runnign tests --- src/components/widget-creator.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/widget-creator.jsx b/src/components/widget-creator.jsx index f569fc13c..b927203b7 100644 --- a/src/components/widget-creator.jsx +++ b/src/components/widget-creator.jsx @@ -455,7 +455,7 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { }) setCreatorState({...creatorState, heartbeatEnabled: false}) - //also update the text on the Save Draft Button + //also update the text on the Save Draft Buttons setCreatorState({ ...creatorState, saveText: 'Failed to save' }) } else { setAlertDialog({ From 46fd1758a186e0838edd5c1328df1b72c16fbf10 Mon Sep 17 00:00:00 2001 From: Christopher Solanilla Date: Thu, 5 Sep 2024 17:11:29 -0400 Subject: [PATCH 3/4] reverts text back to 'Save Draft' after 5 seconds --- src/components/widget-creator.jsx | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/widget-creator.jsx b/src/components/widget-creator.jsx index b927203b7..29e186305 100644 --- a/src/components/widget-creator.jsx +++ b/src/components/widget-creator.jsx @@ -39,7 +39,8 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { popupState: null, returnUrl: null, returnLocation: 'Widget Catalog', - directUploadMediaFile: null + directUploadMediaFile: null, + isTimeoutRunning: false }) const [alertDialog, setAlertDialog] = useState({ @@ -295,6 +296,13 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { if (!!saveWidgetComplete) { if (saveWidgetComplete == 'save') { setCreatorState(creatorState => ({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle'})) + if(!creatorState.isTimeoutRunning) { + //this line is needed again or else the text will revert to 'Save Draft' immidietly + setCreatorState({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle', isTimeoutRunning: true}) + setTimeout( () => { + setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) + } , 5000) //text gets reverted after 5 seconds(format is millisecond) + } } else if (saveWidgetComplete == 'preview') { setCreatorState(creatorState => ({...creatorState, saveStatus: 'idle'})) @@ -469,6 +477,14 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { setCreatorState({ ...creatorState, saveText: 'Failed to save' }) } + if(!creatorState.isTimeoutRunning) { + setCreatorState({...creatorState, saveText: 'Failed to save', saveStatus: 'idle', isTimeoutRunning: true}) + setTimeout( () => { + setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) + } , 5000) //text gets reverted after 5 seconds(format is millisecond) + } + + } else { setAlertDialog({ enabled: true, @@ -479,6 +495,14 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { }) //also update the text on the Save Draft Button setCreatorState({ ...creatorState, saveText: 'Failed to save' }) + if(!creatorState.isTimeoutRunning) { + setCreatorState({...creatorState, saveText: 'Failed to save', saveStatus: 'idle', isTimeoutRunning: true}) + setTimeout( () => { + setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) + } , 5000) //text gets reverted after 5 seconds(format is millisecond) + } + + } } From c6391a9be99e9e2ce152e2f2df5d434130e8005e Mon Sep 17 00:00:00 2001 From: Christopher Solanilla Date: Mon, 23 Sep 2024 10:41:19 -0400 Subject: [PATCH 4/4] replaces spaces with tabs and creates a new useEffect and reduces redundant set calls --- src/components/widget-creator.jsx | 69 +++++++++++++++++-------------- 1 file changed, 39 insertions(+), 30 deletions(-) diff --git a/src/components/widget-creator.jsx b/src/components/widget-creator.jsx index 29e186305..6090d0d2a 100644 --- a/src/components/widget-creator.jsx +++ b/src/components/widget-creator.jsx @@ -40,7 +40,7 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { returnUrl: null, returnLocation: 'Widget Catalog', directUploadMediaFile: null, - isTimeoutRunning: false + isTimeoutRunning: false }) const [alertDialog, setAlertDialog] = useState({ @@ -296,13 +296,9 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { if (!!saveWidgetComplete) { if (saveWidgetComplete == 'save') { setCreatorState(creatorState => ({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle'})) - if(!creatorState.isTimeoutRunning) { - //this line is needed again or else the text will revert to 'Save Draft' immidietly - setCreatorState({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle', isTimeoutRunning: true}) - setTimeout( () => { - setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) - } , 5000) //text gets reverted after 5 seconds(format is millisecond) - } + if(!creatorState.isTimeoutRunning) { + setCreatorState({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle', isTimeoutRunning: true}); + } } else if (saveWidgetComplete == 'preview') { setCreatorState(creatorState => ({...creatorState, saveStatus: 'idle'})) @@ -312,6 +308,21 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { } },[saveWidgetComplete]) + useEffect( () => { + if(creatorState.isTimeoutRunning) { + const timeoutID = setTimeout( () => { + setCreatorState( prevState => ({ + ...prevState, + saveText: 'Save Draft', + isTimeoutRunning: false + })); + }, 5000); + + return () => clearTimeout(timeoutID); + } + + }, [creatorState.isTimeoutRunning]); + /* =========== postMessage handlers =========== */ const onPostMessage = (e) => { @@ -462,9 +473,13 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { enableLoginButton: true }) - setCreatorState({...creatorState, heartbeatEnabled: false}) - //also update the text on the Save Draft Buttons - setCreatorState({ ...creatorState, saveText: 'Failed to save' }) + setCreatorState({ + ...creatorState, + heartbeatEnabled: false, + saveText: 'Failed to save', + saveStatus: 'idle', + isTimeoutRunning: true + }); } else { setAlertDialog({ enabled: true, @@ -473,17 +488,15 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { fatal: false, enableLoginButton: false }) - //also update the text on the Save Draft Button - setCreatorState({ ...creatorState, saveText: 'Failed to save' }) + //also update the text on the Save Draft Button + setCreatorState({ + ...creatorState, + saveText: 'Failed to save', + saveStatus: 'idle', + isTimeoutRunning: true + }); } - if(!creatorState.isTimeoutRunning) { - setCreatorState({...creatorState, saveText: 'Failed to save', saveStatus: 'idle', isTimeoutRunning: true}) - setTimeout( () => { - setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) - } , 5000) //text gets reverted after 5 seconds(format is millisecond) - } - } else { setAlertDialog({ @@ -493,16 +506,12 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => { fatal: false, enableLoginButton: false }) - //also update the text on the Save Draft Button - setCreatorState({ ...creatorState, saveText: 'Failed to save' }) - if(!creatorState.isTimeoutRunning) { - setCreatorState({...creatorState, saveText: 'Failed to save', saveStatus: 'idle', isTimeoutRunning: true}) - setTimeout( () => { - setCreatorState( {...creatorState, saveText: 'Save Draft', isTimeoutRunning:false} ) - } , 5000) //text gets reverted after 5 seconds(format is millisecond) - } - - + setCreatorState({ + ...creatorState, + saveText: 'Failed to save', + saveStatus: 'idle', + isTimeoutRunning: true + }); } }