Feat: Make the run button disabled if no test case

Planet-NULLCAST · May 3, 2021 · 1077823 · 1077823
1 parent 7c5ed05
commit 1077823
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 53 deletions.
diff --git a/website/component/editor/RunButton.jsx b/website/component/editor/RunButton.jsx
@@ -2,53 +2,56 @@ import React, { useContext } from "react";
 import UserContext from "../../context/user/userContext";
 
 export default function Runbutton({ editorVal }) {
-  const globalState = useContext(UserContext);
-  const testCase = globalState.test;
-  // console.log(testCase);
+	const globalState = useContext(UserContext);
+	const testCase = globalState.test;
+	// console.log(testCase);
 
-  let clicked = false;
+	let clicked = false;
 
-  const clickHandle = () => {
-    clicked = true;
-    globalState.setRun(clicked);
+	const clickHandle = () => {
+		clicked = true;
+		globalState.setRun(clicked);
 
-    let i = 0;
+		let i = 0;
 
-    while (i < editorVal.length) {
-      // console.log(i);
-      editorVal[i] = editorVal[i].replace(/\s\s+/g, "");
-      // console.log(editorVal[i]);
+		while (i < editorVal.length) {
+			// console.log(i);
+			editorVal[i] = editorVal[i].replace(/\s\s+/g, "");
+			// console.log(editorVal[i]);
 
-      editorVal[i] = editorVal[i].replace(/"+/g, "'");
-      // console.log(editorVal[i]);
+			editorVal[i] = editorVal[i].replace(/"+/g, "'");
+			// console.log(editorVal[i]);
 
-      if (editorVal[i] === "{") {
-        editorVal[i - 1] = editorVal[i - 1] + "{";
-        editorVal.splice(i, 1);
-        // console.log(i);
-        continue;
-      }
-      // console.log(editorVal[i]);
-      if (i < testCase.length) {
-        if (testCase[i].case.includes(editorVal[i])) {
-          testCase[i].isCorrect = true;
-        } else {
-          testCase[i].isCorrect = false;
-        }
-      }
-      i = i + 1;
-    }
-    console.log(editorVal);
-    globalState.setTest(testCase);
-  };
-  return (
-    <div className="absolute bottom-14">
-      <button
-        className="bg-green-600  text-white font-medium py-1 px-3 ml-4 mt-20 rounded-sm"
-        onClick={clickHandle}
-      >
-        Run
-      </button>
-    </div>
-  );
+			if (editorVal[i] === "{") {
+				editorVal[i - 1] = editorVal[i - 1] + "{";
+				editorVal.splice(i, 1);
+				// console.log(i);
+				continue;
+			}
+			// console.log(editorVal[i]);
+			if (i < testCase.length) {
+				if (testCase[i].case.includes(editorVal[i])) {
+					testCase[i].isCorrect = true;
+				} else {
+					testCase[i].isCorrect = false;
+				}
+			}
+			i = i + 1;
+		}
+		// console.log(editorVal);
+		globalState.setTest(testCase);
+	};
+	return (
+		<div className="absolute bottom-14">
+			<button
+				className={`bg-green-600  text-white font-medium py-1 px-3 ml-4 mt-20 rounded-sm ${
+					!testCase && "disabled:opacity-50"
+				}`}
+				onClick={clickHandle}
+				disabled={!testCase}
+			>
+				Run
+			</button>
+		</div>
+	);
 }
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -1,11 +1,13 @@
 module.exports = {
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}
+	purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+	darkMode: false, // or 'media' or 'class'
+	theme: {
+		extend: {}
+	},
+	variants: {
+		extend: {
+			opacity: ["disabled"]
+		}
+	},
+	plugins: []
+};