From a6b45cc2c059cf8c0f1a8da31eb830b39bad08a9 Mon Sep 17 00:00:00 2001
From: Jingchao Di <alswlx@gmail.com>
Date: Sun, 12 May 2024 20:12:21 +0800
Subject: [PATCH] feat: enable error diags

---
 src/pages/Home/index.tsx | 82 ++++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 719d239..92d1b8a 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,5 +1,5 @@
-import { Parser } from '@dbml/core';
-import { Col, Row } from 'antd';
+import { CompilerDiagnostic, Parser } from '@dbml/core';
+import { Col, Row, message } from 'antd';
 import { debounce } from 'lodash-es';
 import { useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
@@ -7,9 +7,11 @@ import MonacoEditor from 'react-monaco-editor';
 import { InitCode } from '@/components/editor';
 import Viewer from '@/components/viewer/viewer';
 import { PageContainer } from '@ant-design/pro-components';
+import { CompilerError } from '@dbml/core/types/parse/error';
 import './index.less';
 
 export default () => {
+  const [messageApi, contextHolder] = message.useMessage();
   const parser = new Parser();
 
   const [code] = useState(InitCode);
@@ -28,40 +30,56 @@ export default () => {
       console.log(newDB);
       setDatabase(newDB);
     } catch (e) {
-      console.error(e);
-      // TODO hl to editor
+      if (e as CompilerError) {
+        const diags = (e as CompilerError).diags
+          .map((d: CompilerDiagnostic) => {
+            return `${d.location.start.line}:${d.location.start.column} ${d.message}`;
+          })
+          .join('\n');
+
+        messageApi.error(diags);
+        console.error(e);
+        // TODO hl to editor
+      } else if (e instanceof Error) {
+        messageApi.error(`${e.message}`);
+      } else {
+        throw e;
+      }
     }
   };
   const debouncedOnChange = debounce(onChange, 500);
 
   return (
-    <PageContainer ghost header={{ title: '' }}>
-      <Row gutter={[8, 8]}>
-        <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
-          <div className="editor">
-            <MonacoEditor
-              width={'100%'}
-              language="dbml"
-              theme="vs-dark"
-              value={code}
-              options={{
-                selectOnLineNumbers: true,
-                minimap: {
-                  enabled: false,
-                },
-                automaticLayout: true,
-                scrollBeyondLastLine: false,
-              }}
-              onChange={debouncedOnChange}
-              editorDidMount={editorDidMount}
-              // handle resize TODO
-            />
-          </div>
-        </Col>
-        <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
-          <Viewer code={code} database={database} />
-        </Col>
-      </Row>
-    </PageContainer>
+    <>
+      {contextHolder}
+      <PageContainer ghost header={{ title: '' }}>
+        <Row gutter={[8, 8]}>
+          <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
+            <div className="editor">
+              <MonacoEditor
+                width={'100%'}
+                language="dbml"
+                theme="vs-dark"
+                value={code}
+                options={{
+                  selectOnLineNumbers: true,
+                  minimap: {
+                    enabled: false,
+                  },
+                  automaticLayout: true,
+                  scrollBeyondLastLine: false,
+                }}
+                onChange={debouncedOnChange}
+                editorDidMount={editorDidMount}
+                // handle resize TODO
+              />
+            </div>
+          </Col>
+          <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
+            <Viewer code={code} database={database} />
+          </Col>
+        </Row>
+      </PageContainer>
+    </>
   );
 };