Listen for page publication from websocket server

Author: algomaster99

src/components/profile/cmsIntegration.js

@@ -5,7 +5,7 @@ import { Icon, Segment, Button } from 'semantic-ui-react';
 import { toast } from 'react-semantic-toasts';
 
 import { jsonHeaders } from '../../constants/formPostRequestHeaders'
-import { urlCmsIntegration, urlIITRMain, urlCms } from '../../urls';
+import { urlCmsIntegration, urlWebSocketServer } from '../../urls';
 
 import style from '../../styles.css';
 
@@ -20,10 +20,22 @@ class CMSIntegration extends React.PureComponent {
         publish: false
       }
     }
+    this.streamSocket = new WebSocket(urlWebSocketServer());
+  }
+  componentDidMount() {
+    this.streamSocket.onmessage = (e) => {
+      const data = JSON.parse(e.data)
+      this.setState({
+        loading: {
+          ...this.state.loading,
+          publish: !(data.published === 'published'),
+        }
+      })
+    }
   }
   onPreview = () => {
     this.setState({
-      loading:{
+      loading: {
         ... this.state.loading,
         preview: true
       }
@@ -80,7 +92,7 @@ class CMSIntegration extends React.PureComponent {
 
   onPublish = () => {
     this.setState({
-      loading:{
+      loading: {
         ... this.state.loading,
         publish: true
       }
@@ -96,10 +108,10 @@ class CMSIntegration extends React.PureComponent {
         const url = data.url;
         const description = (
           <p>
-            Your page will be published at{' '}
+            Your page will be published at this{' '}
             <a href={url} target="_blank" styleName="style.toastLink">
-              { url }
-            </a>
+              link
+            </a>.
             <br/>
             Wait some time for content to update.
           </p>
@@ -120,6 +132,12 @@ class CMSIntegration extends React.PureComponent {
             Try previewing your page after some time!
           </p>
         )
+        this.setState({
+          loading:{
+            ... this.state.loading,
+            publish: false
+          }
+        });
         toast({
           type: 'error',
           title: 'Publish Error',
@@ -129,21 +147,13 @@ class CMSIntegration extends React.PureComponent {
         });
         return 'error';
       })
-      .finally(code =>{
-        this.setState({
-          loading:{
-            ... this.state.loading,
-            publish: false
-          }
-        });
-      });
   }
 
   render() {
     const { theme } = this.props;
     const previewLoad = this.state.loading.preview;
     const publishLoad = this.state.loading.publish;
-    return (   
+    return (
       <div>
         <BrowserView>
           <Segment

src/urls.js

@@ -5,3 +5,7 @@ export function urlMainApp() {
 export function urlCmsIntegration() {
   return `${urlMainApp()}cms/`;
 }
+
+export function urlWebSocketServer() {
+  return `ws://localhost:60025/ws/faculty_profile/cms/`;
+}