No one likes ugly looking UI

StagBIN · Feb 18, 2024 · b457b50 · b457b50
1 parent 5ac3b32
commit b457b50
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 134 deletions.
diff --git a/src/components/AceEditor.js b/src/components/AceEditor.js
@@ -11,19 +11,15 @@ import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/ext-beautify";
 import { useState, useContext } from "react";
-import Dialog from "@material-ui/core/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogActions from "@material-ui/core/DialogActions";
-import Button from "@material-ui/core/Button";
+
 // Loading
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { Box, makeStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 
-import { API_URL, EXPLAIN_URL } from "../Constants";
+import { API_URL } from "../Constants";
 import { StagBinContext } from "../App";
+import ExplainDialog from "./ExplainDialog";
 
 let reqData = {};
 const getData = async (
@@ -91,28 +87,6 @@ export default function PEditor() {
   let { id } = useParams();
   const [loading, setLoading] = useState(id ? true : false);
 
-  // AI
-  const [open, setOpen] = useState(false);
-  const [explanation, setExplanation] = useState("");
-
-  const handleOpen = () => {
-    setOpen(true);
-    axios
-      .post(EXPLAIN_URL, { data: data })
-      .then((res) => {
-        setExplanation(res.data.body);
-      })
-      .catch((err) => {
-        console.log(err);
-        setExplanation("Failed to understand the content");
-      });
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setExplanation("");
-  };
-
   function set_data_if_exists() {
     if (id) {
       if (id.indexOf(".") !== -1) {
@@ -180,43 +154,7 @@ export default function PEditor() {
       <Backdrop className={classes.backdrop} open={loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
-      <Button
-        color="primary"
-        aria-label="add"
-        variant="contained"
-        onClick={handleOpen}
-        style={{
-          position: "fixed",
-          bottom: "40px",
-          right: "20px",
-          opacity: "0.7",
-          size: "large",
-          display: data ? "block" : "none",
-        }}
-      >
-        Explain Content
-      </Button>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>Explanation</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {!explanation && "Understanding your content..."}
-            <Box
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              height="100%"
-            >
-              {explanation ? explanation : <CircularProgress />}
-            </Box>
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} color="primary">
-            Close
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <ExplainDialog data={data} />
     </div>
   );
 }
diff --git a/src/components/ExplainDialog.js b/src/components/ExplainDialog.js
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import axios from "axios";
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import MDEditor from "@uiw/react-md-editor";
+import { Box } from "@material-ui/core";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+import { EXPLAIN_URL } from "../Constants";
+export default function ExplainDialog({ data, exCss = {} }) {
+  // AI
+  const [open, setOpen] = useState(false);
+  const [explanation, setExplanation] = useState("");
+
+  const handleOpen = () => {
+    setOpen(true);
+    axios
+      .post(EXPLAIN_URL, { data: data })
+      .then((res) => {
+        console.log("res", res.data.body);
+        setExplanation(res.data.body);
+      })
+      .catch((err) => {
+        console.log(err);
+        setExplanation("Failed to understand the content");
+      });
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setExplanation("");
+  };
+
+  return (
+    <div>
+      <Button
+        color="primary"
+        aria-label="add"
+        variant="contained"
+        onClick={handleOpen}
+        style={{
+          position: "fixed",
+          bottom: "40px",
+          right: "20px",
+          opacity: "0.7",
+          size: "large",
+          display: data ? "block" : "none",
+        }}
+      >
+        Explain Content
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle
+          style={{
+            backgroundColor: "#1a1a1a",
+            color: "white",
+            borderBottom: "1px solid white",
+          }}
+        >
+          Explanation
+        </DialogTitle>
+        <DialogContent style={{ backgroundColor: "#0d1117" }}>
+          <DialogContentText style={{ color: "white" }}>
+            {!explanation && "Understanding your content..."}
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              height="100%"
+              overflow="auto"
+              p={2}
+              style={{ backgroundColor: "#0d1117" }}
+            >
+              {explanation ? (
+                <MDEditor.Markdown source={explanation} />
+              ) : (
+                <CircularProgress />
+              )}
+            </Box>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions
+          style={{ backgroundColor: "#1a1a1a", borderTop: "1px solid white" }}
+        >
+          <Button
+            onClick={handleClose}
+            color="primary"
+            style={exCss ? exCss : { color: "white" }}
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/components/MonacoEditor.js b/src/components/MonacoEditor.js
@@ -1,10 +1,4 @@
 import { useState, useContext, useEffect } from "react";
-import Dialog from "@material-ui/core/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogActions from "@material-ui/core/DialogActions";
-import Button from "@material-ui/core/Button";
 
 import Editor, { DiffEditor } from "@monaco-editor/react";
 import MDEditor from "@uiw/react-md-editor";
@@ -14,11 +8,12 @@ import axios from "axios";
 // Loading
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { Box, makeStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 
-import { API_URL, EXPLAIN_URL } from "../Constants";
+import { API_URL } from "../Constants";
 import { StagBinContext } from "../App";
 import detectLanguage from "../utils/language";
+import ExplainDialog from "./ExplainDialog";
 
 let reqData = {};
 
@@ -105,28 +100,6 @@ export default function MEditor() {
 
   const [loading, setLoading] = useState(id ? true : false);
 
-  // AI
-  const [open, setOpen] = useState(false);
-  const [explanation, setExplanation] = useState("");
-
-  const handleOpen = () => {
-    setOpen(true);
-    axios
-      .post(EXPLAIN_URL, { data: data })
-      .then((res) => {
-        setExplanation(res.data.body);
-      })
-      .catch((err) => {
-        console.log(err);
-        setExplanation("Failed to understand the content");
-      });
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setExplanation("");
-  };
-
   useEffect(() => {
     function set_data_if_exists() {
       if (id) {
@@ -271,43 +244,7 @@ export default function MEditor() {
       <Backdrop className={classes.backdrop} open={loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
-      <Button
-        color="primary"
-        aria-label="add"
-        variant="contained"
-        onClick={handleOpen}
-        style={{
-          position: "fixed",
-          bottom: "40px",
-          right: "20px",
-          opacity: "0.7",
-          size: "large",
-          display: data ? "block" : "none",
-        }}
-      >
-        Explain Content
-      </Button>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>Explanation</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {!explanation && "Understanding your content..."}
-            <Box
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              height="100%"
-            >
-              {explanation ? explanation : <CircularProgress />}
-            </Box>
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose} color="primary">
-            Close
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <ExplainDialog data={data} />
     </div>
   );
 }