feat: keep user content when save fails due to being logged out

pepfar-datim · Mar 11, 2022 · e404151 · e404151
1 parent e47be24
commit e404151
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/src/modules/edit/edit.component.tsx b/src/modules/edit/edit.component.tsx
@@ -28,19 +28,21 @@ const styles = {
 class Edit extends React.Component<
     { enqueueSnackbar: any },
     {
-        loggedOut: boolean;
+        loggedOutOnEdit: boolean;
+        loggedOutOnSave: boolean;
         editedContent?: string;
     }
 > {
     editor;
     constructor(props) {
         super(props);
         this.state = {
-            loggedOut: false
+            loggedOutOnEdit: false,
+            loggedOutOnSave: false,
         };
-        fetchContent().then((resp ) => {
+        fetchContent().then((resp) => {
             if (resp === loggedOut) {
-                this.setState({loggedOut: true})
+                this.setState({ loggedOutOnEdit: true, loggedOutOnSave: false });
             } else {
                 this.setState({
                     editedContent: resp,
@@ -52,7 +54,7 @@ class Edit extends React.Component<
                     // @ts-ignore
                     window.editor = this.editor;
                 }
-            } 
+            }
         });
     }
 
@@ -65,41 +67,44 @@ class Edit extends React.Component<
         saveContent(contentHook(this.state.editedContent))
             .then((resp) => {
                 if (resp.redirected === true && resp.url.includes('login.action')) {
-                    this.setState({loggedOut: true})
+                    this.setState({ loggedOutOnSave: true, loggedOutOnEdit: false });
                     this.props.enqueueSnackbar('Error: Logged out and cannot save');
                 } else {
                     this.props.enqueueSnackbar('Content saved');
+                    window.location.hash = '/';
                 }
-                window.location.hash = '/';
             })
             .catch((e) => {
                 this.props.enqueueSnackbar('Error: Cannot save');
             });
     };
 
     render() {
-        if (this.state.loggedOut) {
-            return <LoggedOutMessage />
+        const {loggedOutOnEdit, loggedOutOnSave} = this.state
+        if (loggedOutOnEdit) {
+            return <LoggedOutMessage requestRefresh={true} />;
         }
         return (
             <React.Fragment>
-                <ReadmeLink/>
+                {loggedOutOnSave ? <LoggedOutMessage requestRefresh={false} /> : <ReadmeLink />}
                 <div style={styles.buttons}>
                     <ButtonStrip>
                         <Button onClick={this.saveChanges} primary dataTest={'save-button'}>
                             Save
                         </Button>
                         <Link to={`/`} style={styles.cancel}>
-                            <Button destructive dataTest={'cancel-button'}>Cancel</Button>
+                            <Button destructive dataTest={'cancel-button'}>
+                                Cancel
+                            </Button>
                         </Link>
                     </ButtonStrip>
                 </div>
-                <div style={styles.clear as any}/>
-                <div id='edit'/>
+                <div style={styles.clear as any} />
+                <div id="edit" />
             </React.Fragment>
         );
     }
-    componentWillUnmount(){
+    componentWillUnmount() {
         let editor = document.querySelector('.jodit-container');
         if (editor) editor.remove();
     }

diff --git a/src/modules/render/components/render.component.tsx b/src/modules/render/components/render.component.tsx
@@ -46,7 +46,7 @@ export default class Render extends React.Component<any, {
         })
     }
     renderContent() {
-        if (this.state.loggedOut) return <LoggedOutMessage />
+        if (this.state.loggedOut) return <LoggedOutMessage requestRefresh={true} />
         if (this.state.loading) return <Loading/>
         if (!this.state.content||this.state.content.length===0) return <Typography>New Dashboard Information widget</Typography>;
         return <React.Fragment>

diff --git a/src/modules/shared/components/LoggedOutMessage.tsx b/src/modules/shared/components/LoggedOutMessage.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-const LoggedOutMessage = () => {
+const LoggedOutMessage = ({requestRefresh}) => {
+    console.log(requestRefresh);
     const styles = {
         loginLink: {
             color: '#069',
@@ -10,11 +11,12 @@ const LoggedOutMessage = () => {
         },
         loggedOut: {
             fontFamily: 'Roboto',
+            float: 'left'
         },
     };
     const baseUrl = window.parent.location.origin;
     return (
-        <p style={styles.loggedOut}>
+        <p style={styles.loggedOut as any}>
             You are no longer logged in, please click{' '}
             <a
                 style={styles.loginLink}
@@ -24,7 +26,8 @@ const LoggedOutMessage = () => {
             >
                 here
             </a>{' '}
-            to open a new tab and login, then refresh the current page.
+            to open a new tab and login, then
+            {requestRefresh ? ' refresh the current page' : ' try saving again'}.
         </p>
     );
 };