From 8d4bbced1f0a83b5d8b28f1d38408494b213fa16 Mon Sep 17 00:00:00 2001
From: Carlos Eduardo <eduardocesb@fb.com>
Date: Wed, 25 May 2022 12:28:46 -0300
Subject: [PATCH] chore: add message when the server it's not running

---
 src/js/components/Preview.react.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/js/components/Preview.react.js b/src/js/components/Preview.react.js
index 60f301b..0dbcc39 100644
--- a/src/js/components/Preview.react.js
+++ b/src/js/components/Preview.react.js
@@ -18,6 +18,7 @@ import { Loader, Dimmer, Form, Tab } from 'semantic-ui-react';
 import Warnings from './Warnings.react';
 import debounce from '../utils/debounce';
 import EditorActions from '../data/EditorActions';
+import { renderToString } from 'react-dom/server';
 
 import webserver from '../utils/preview-webserver';
 import { BrowserWindow } from 'electron';
@@ -53,6 +54,16 @@ class Preview extends React.Component<Props, State> {
     };
   }
 
+  serverErrorMessage = () => {
+    return (
+      <div style={{display: 'flex', alignItems: 'center', fontFamily: 'sans-serif', color: '#ccc', height: '100%'}}>
+        <p style={{maxWidth: '300px', margin: 'auto', textAlign: 'center'}}>
+          Webserver error: Please check if the server is running.
+        </p>
+      </div>
+    );
+  }
+
   previewLoading = () => {
     this.setState({ previewLoading: true });
   };
@@ -151,6 +162,15 @@ class Preview extends React.Component<Props, State> {
         }
       }
     };
+
+    xhr.onerror = () => {
+      this.previewFinishedLoading();
+      this.setState({
+        errorHtml: renderToString(this.serverErrorMessage()),
+      });
+      this.reloadPreview();
+    };
+
     xhr.open('POST', url.href);
     xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     xhr.send(this.getWSURLParams());