fix bugs

Neo-Zenith · Jan 20, 2024 · c9fae04 · c9fae04
1 parent 764d2a8
commit c9fae04
Show file tree

Hide file tree

Showing 9 changed files with 315 additions and 46 deletions.
diff --git a/client/src/components/OutputWindow/OutputWindow.jsx b/client/src/components/OutputWindow/OutputWindow.jsx
@@ -1,4 +1,4 @@
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, CircularProgress, IconButton, Typography } from "@mui/material";
 import CustomSnackbar from "../Snackbar/Snackbar";
 import { CodeBlock, vs2015 } from "react-code-blocks";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
@@ -8,8 +8,10 @@ import { useState } from "react";
 import MenuDropdown from "../MenuDropdown/MenuDropdown";
 import SourceIcon from "@mui/icons-material/Source";
 import ArticleIcon from "@mui/icons-material/Article";
+import { useSelector } from "react-redux";
 
 export default function OutputWindow({ context }) {
+  const loading = useSelector((state) => state.loading);
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = () => {
@@ -76,7 +78,25 @@ export default function OutputWindow({ context }) {
           </IconButton>
         </div>
 
-        <div className="output-content">
+        <div className="output-content" style={{ position: "relative" }}>
+          {loading && (
+            <div
+              className="loader-div"
+              style={{
+                position: "absolute",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                margin: "auto",
+                width: "100%",
+                height: "47vh",
+                boxSizing: "border-box",
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              }}
+            >
+              <CircularProgress />
+            </div>
+          )}
           <CodeBlock
             text={context.code}
             language={context.language}

diff --git a/client/src/components/PromptInput/PromptInput.css b/client/src/components/PromptInput/PromptInput.css
@@ -1,5 +1,5 @@
 .prompt-input {
-	width: 85%;
+	width: 100%;
 	font-size: 0.875rem;
 	font-weight: 400;
 	line-height: 1.5;
@@ -9,6 +9,7 @@
 	background: var(--color-secondary);
 	border: 1px solid #000;
 	box-shadow: 0px 2px 4px "rgba(0,0,0,0.5)";
+	box-sizing: border-box;
 
 	&::placeholder {
 		color: var(--color-accent);

diff --git a/client/src/components/PromptInput/PromptInput.jsx b/client/src/components/PromptInput/PromptInput.jsx
@@ -16,27 +16,22 @@ export default function PromptInput() {
   };
 
   const handleFileUpload = (e) => {
-    if (e.target.files.length === 0) {
+    const file = e.target.files[0];
+
+    // Check if a file is selected
+    if (!file) {
+      console.error("No file selected");
       return;
     }
 
-    const file = e.target.files[0];
-    const imgUrl = URL.createObjectURL(file);
-    const link = document.createElement("a");
-    link.href = imgUrl;
-    link.download = "upload.png";
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    // Create a FormData object and append the file to it
+    const formData = new FormData();
+    formData.append("file", file);
 
-    const url = "http://localhost:5000/image-to-expression";
-    dispatch({ type: "SET_LOADING", payload: true });
-    fetch(url, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+    // Perform the upload using fetch
+    fetch("http://localhost:5000/image-to-expression", {
+      method: "POST",
+      body: formData,
     })
       .then((response) => {
         if (!response.ok) {
@@ -113,10 +108,12 @@ export default function PromptInput() {
         width: "100%",
         height: "100%",
         paddingLeft: "1rem",
+        paddingRight: "1rem",
         justifyContent: "center",
+        boxSizing: "border-box",
       }}
     >
-      <Typography sx={{ fontSize: "3rem", fontWeight: 700 }}>
+      <Typography sx={{ fontSize: "1.5rem", fontWeight: 700 }}>
         Text Input
       </Typography>
 
@@ -133,7 +130,7 @@ export default function PromptInput() {
         <input type="file" hidden onChange={handleFileUpload} />
       </Button>
 
-      <QueryButtons handleClick={handleSubmit} containerWidth={"90%"} />
+      <QueryButtons handleClick={handleSubmit} containerWidth={"100%"} />
     </div>
   );
 }
diff --git a/client/src/pages/QueryPage.jsx b/client/src/pages/QueryPage.jsx
@@ -3,6 +3,7 @@ import CodeEditor from "../components/CodeEditor/CodeEditor";
 import PromptInput from "../components/PromptInput/PromptInput";
 import Output from "../components/Output/Output";
 import { useState } from "react";
+import Navbar from "../components/Navbar/Navbar";
 
 export default function QueryPage() {
   const [showCodeEditor, setShowCodeEditor] = useState(true);
@@ -13,27 +14,30 @@ export default function QueryPage() {
 
   return (
     <>
-      <h1 style={{ textAlign: "center" }}>Monaco Editor Example</h1>
+      <Navbar />
+      <div style={{ marginTop: "6rem" }}>
+        <h1 style={{ textAlign: "center" }}>Monaco Editor Example</h1>
 
-      <div style={{ textAlign: "center", marginTop: "1rem" }}>
-        <Button variant="contained" color="info" onClick={toggleEditor}>
-          Toggle Editor
-        </Button>
-      </div>
+        <div style={{ textAlign: "center", marginTop: "1rem" }}>
+          <Button variant="contained" color="info" onClick={toggleEditor}>
+            Toggle Editor
+          </Button>
+        </div>
 
-      <div style={{ paddingLeft: "1rem", paddingRight: "1rem" }}>
-        <Grid container spacing={2}>
-          <Grid item xs={showCodeEditor ? 6 : 5}>
-            {showCodeEditor ? (
-              <CodeEditor defaultCode={"# Paste/Enter your code here"} />
-            ) : (
-              <PromptInput />
-            )}
-          </Grid>
-          <Grid item xs={showCodeEditor ? 6 : 7}>
-            <Output />
+        <div style={{ paddingLeft: "1rem", paddingRight: "1rem" }}>
+          <Grid container spacing={2}>
+            <Grid item xs={showCodeEditor ? 6 : 5}>
+              {showCodeEditor ? (
+                <CodeEditor defaultCode={"# Paste/Enter your code here"} />
+              ) : (
+                <PromptInput />
+              )}
+            </Grid>
+            <Grid item xs={showCodeEditor ? 6 : 7}>
+              <Output />
+            </Grid>
           </Grid>
-        </Grid>
+        </div>
       </div>
     </>
   );

diff --git a/express/.gitignore b/express/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.env
+.env
+.DS_STORE
diff --git a/express/img/test.png b/express/img/test.png