Merge pull request #1602 from chrissolanilla/1600/save-draft-button

1600/save draft button
ucfopen · Oct 2, 2024 · 10c249c · 10c249c
2 parents a6458a0 + c6391a9
commit 10c249c
Showing 1 changed file with 43 additions and 2 deletions.
diff --git 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,9 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => {
 		if (!!saveWidgetComplete) {
 			if (saveWidgetComplete == 'save') {
 				setCreatorState(creatorState => ({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle'}))
+				if(!creatorState.isTimeoutRunning) {
+					setCreatorState({...creatorState, saveText: 'Draft Saved', saveStatus: 'idle', isTimeoutRunning: true});
+				}
 			}
 			else if (saveWidgetComplete == 'preview') {
 				setCreatorState(creatorState => ({...creatorState, saveStatus: 'idle'}))
@@ -304,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) => {
@@ -465,7 +484,13 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => {
 					enableLoginButton: true
 				})
 
-				setCreatorState({...creatorState, heartbeatEnabled: false})
+				setCreatorState({
+					...creatorState,
+					heartbeatEnabled: false,
+					saveText: 'Failed to save',
+					saveStatus: 'idle',
+					isTimeoutRunning: true
+				});
 			} else {
 				setAlertDialog({
 					enabled: true,
@@ -474,7 +499,16 @@ 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',
+					saveStatus: 'idle',
+					isTimeoutRunning: true
+				});
+
 			}
+
 		} else {
 			setAlertDialog({
 				enabled: true,
@@ -483,6 +517,13 @@ const WidgetCreator = ({instId, widgetId, minHeight='', minWidth=''}) => {
 				fatal: false,
 				enableLoginButton: false
 			})
+			setCreatorState({
+				...creatorState,
+				saveText: 'Failed to save',
+				saveStatus: 'idle',
+				isTimeoutRunning: true
+			});
+
 		}
 	}