From 2a0437e8b5f25d3868603171e21db51d99fcaa9f Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Wed, 13 May 2020 20:09:17 +0200
Subject: [PATCH] handle error when saving to DB

---
 packages/web/src/datagrid/DataGridCore.js    | 15 ++++++---
 packages/web/src/modals/ErrorMessageModal.js | 33 ++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 packages/web/src/modals/ErrorMessageModal.js

diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js
index efbfe8aa..46a7bac9 100644
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/packages/web/src/datagrid/DataGridCore.js
@@ -40,6 +40,8 @@ import DataGridContextMenu from './DataGridContextMenu';
 import useSocket from '../utility/SocketProvider';
 import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
+import showModal from '../modals/showModal';
+import ErrorMessageModal from '../modals/ErrorMessageModal';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -817,7 +819,7 @@ export default function DataGridCore(props) {
   }
 
   async function handleConfirmSql() {
-    await axios.request({
+    const resp = await axios.request({
       url: 'database-connections/query-data',
       method: 'post',
       params: {
@@ -827,9 +829,14 @@ export default function DataGridCore(props) {
       data: { sql: confirmSql },
     });
 
-    dispatchChangeSet({ type: 'reset', value: createChangeSet() });
-    setConfirmSql(null);
-    display.reload();
+    const { errorMessage } = resp.data || {};
+    if (errorMessage) {
+      showModal((modalState) => <ErrorMessageModal modalState={modalState} message={errorMessage} title='Error when saving' />);
+    } else {
+      dispatchChangeSet({ type: 'reset', value: createChangeSet() });
+      setConfirmSql(null);
+      display.reload();
+    }
   }
 
   const insertNewRow = () => {
diff --git a/packages/web/src/modals/ErrorMessageModal.js b/packages/web/src/modals/ErrorMessageModal.js
new file mode 100644
index 00000000..105f4b42
--- /dev/null
+++ b/packages/web/src/modals/ErrorMessageModal.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import FormStyledButton from '../widgets/FormStyledButton';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import { FormButtonRow } from '../utility/forms';
+
+const Wrapper = styled.div`
+display:flex
+align-items:center
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 10px;
+  font-size: 20pt;
+`;
+
+export default function ErrorMessageModal({ modalState, title = 'Error', message }) {
+  return (
+    <ModalBase modalState={modalState}>
+      <h2>{title}</h2>
+      <Wrapper>
+        <IconWrapper>
+          <FontIcon icon="fas fa-times-circle red" />
+        </IconWrapper>
+        {message}
+      </Wrapper>
+      <FormButtonRow>
+        <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+      </FormButtonRow>
+    </ModalBase>
+  );
+}