Merge pull request #48 from StagBIN/dev

Add a very basic Static code checker

package.json

@@ -22,6 +22,7 @@
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
+    "react-icons": "^5.0.1",
     "react-responsive": "^9.0.0-beta.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/Constants.js

@@ -1,4 +1,5 @@
 const API_URL = "https://api.stagb.in/dev/content/";
+const EXPLAIN_URL = "https://api.stagb.in/dev/explain/";
 const RAW_URL = "https://raw.stagb.in/StagBIN-Raw/";
 
-export { API_URL, RAW_URL };
+export { API_URL, RAW_URL, EXPLAIN_URL };

src/components/AceEditor.js

@@ -19,6 +19,7 @@ import { makeStyles } from "@material-ui/core";
 
 import { API_URL } from "../Constants";
 import { StagBinContext } from "../App";
+import ExplainDialog from "./ExplainDialog";
 
 let reqData = {};
 const getData = async (
@@ -85,6 +86,7 @@ export default function PEditor() {
 
   let { id } = useParams();
   const [loading, setLoading] = useState(id ? true : false);
+
   function set_data_if_exists() {
     if (id) {
       if (id.indexOf(".") !== -1) {
@@ -152,6 +154,7 @@ export default function PEditor() {
       <Backdrop className={classes.backdrop} open={loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
+      <ExplainDialog data={data} />
     </div>
   );
 }

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>
+  );
+}

src/components/MonacoEditor.js

@@ -12,6 +12,8 @@ import { makeStyles } from "@material-ui/core";
 
 import { API_URL } from "../Constants";
 import { StagBinContext } from "../App";
+import detectLanguage from "../utils/language";
+import ExplainDialog from "./ExplainDialog";
 
 let reqData = {};
 
@@ -21,6 +23,7 @@ const getData = async (
   setOldEncrypted,
   setEncryptedReadOnly,
   setOpenPasswordDialog,
+  setLanguage,
   id,
   redirect,
   base_url,
@@ -49,6 +52,7 @@ const getData = async (
     setOpenPasswordDialog(reqData.isEncrypted || false);
     setData(reqData.data);
     setLoading(false);
+    if (id.indexOf(".") === -1) setLanguage(detectLanguage(reqData.data));
   }
   if (reqData.url && !redirect) {
     window.location = reqData.data;
@@ -135,8 +139,6 @@ export default function MEditor() {
             default:
               break;
           }
-        } else {
-          setLanguage("javascript");
         }
         if (!(!readOnly && edited)) setReadOnly(true);
         setUrl(id);
@@ -147,13 +149,15 @@ export default function MEditor() {
             setOldEncrypted,
             setEncryptedReadOnly,
             setOpenPasswordDialog,
+            setLanguage,
             id,
             redirect,
             base_url,
             setIsSameContentbuid,
             setLoading
           );
         }
+      } else {
       }
     }
 
@@ -240,6 +244,7 @@ export default function MEditor() {
       <Backdrop className={classes.backdrop} open={loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
+      <ExplainDialog data={data} />
     </div>
   );
 }

src/utils/language.js

@@ -0,0 +1,25 @@
+const detectLanguage = (code) => {
+  if (code.includes("import java")) {
+    return "java";
+  } else if (code.includes("import ") && code.includes("print(")) {
+    return "python";
+  } else if (code.includes("#include") && code.includes("cout")) {
+    return "cpp";
+  } else if (code.includes("#include")) {
+    return "c";
+  } else if (code.includes("<html>") || code.includes("</html>")) {
+    return "html";
+  } else if (code.includes("func main()")) {
+    return "go";
+  } else if (code.includes("function") && code.includes(";")) {
+    return "javascript";
+  } else if (code.includes("#") && code.includes("-")) {
+    return "markdown";
+  } else if (code.includes("{") && code.includes("}") && code.includes(":")) {
+    return "css";
+  } else {
+    return "javascript";
+  }
+};
+
+export default detectLanguage;