editor and toast (improved)

TeaByte · Jan 20, 2024 · 9aa53b3 · 9aa53b3
1 parent ba2075c
commit 9aa53b3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
 import { useToast } from "./useToast.ts";
-import { newPassSignal } from "./signals/store.ts"
+import { newPassSignal } from "./signals/store.ts";
 interface EditorProps {
   preCode: string;
   testingCode: string;
@@ -29,7 +29,11 @@ export default function Editor(props: EditorProps) {
 
   const [output, setOutput] = useState<string>("");
   const [isError, setIsError] = useState<boolean>(false);
+
   const [testing, setTesting] = useState<boolean>(false);
+  const [isTestPassed, setIsTestPassed] = useState<boolean | undefined>(
+    undefined,
+  );
   const { showToast } = useToast();
 
   function handleCodeClear() {
@@ -42,7 +46,7 @@ export default function Editor(props: EditorProps) {
     if (props.testingCode === "") {
       showToast(
         {
-          msg: "لا يوجد اختبارات لهذا السؤال",
+          msg: "لا يوجد اختبارات لهذا الدرس",
           type: "info",
         },
       );
@@ -78,13 +82,17 @@ export default function Editor(props: EditorProps) {
           type: "success",
         });
         newPassSignal.value = newPassSignal.value + 1;
+        setOutput("تم تجاوز الاختبارات بنجاح");
+        setIsTestPassed(true);
         setTesting(false);
         return;
       } else {
         showToast({
           msg,
           type: "error",
         });
+        setOutput(`${msg}`);
+        setIsTestPassed(false);
         setTesting(false);
         return;
       }
@@ -93,6 +101,8 @@ export default function Editor(props: EditorProps) {
         msg: "لم يتم تجاوز الاختبارات",
         type: "error",
       });
+      setOutput(`${error}`);
+      setIsTestPassed(false);
       setTesting(false);
       return;
     }
@@ -101,6 +111,7 @@ export default function Editor(props: EditorProps) {
   function handleCodeRun() {
     const code: string | undefined = window.editor.getValue();
     try {
+      setIsTestPassed(undefined);
       const capturedOutput: string[] = [];
       const originalConsoleLog = console.log;
       // deno-lint-ignore no-explicit-any
@@ -155,7 +166,13 @@ export default function Editor(props: EditorProps) {
             مسح
           </button>
           <button
-            class="btn btn-active btn-ghost grow"
+            class={`btn grow border-0 ${
+              isTestPassed === undefined
+                ? "btn-active btn-ghost"
+                : isTestPassed
+                ? "btn-info bg-success hover:bg-[#9bc27a]"
+                : "btn-info bg-error hover:bg-[#ff6868]"
+            }`}
             onClick={handleCodeTest}
             disabled={testing}
           >

diff --git a/islands/Toast.tsx b/islands/Toast.tsx
@@ -12,33 +12,33 @@ export default function Toast() {
         <div class="toast text-2xl text-center toast-start mr-4 animation-toast z-[1000]">
           {ToastSignal.value.type === "success"
             ? (
-              <div class="alert alert-success">
+              <div class="alert alert-success flex">
                 <span>{ToastSignal.value.message}</span>
               </div>
             )
             : (
               ToastSignal.value.type === "error"
                 ? (
-                  <div class="alert alert-error">
+                  <div class="alert alert-error flex">
                     <span>{ToastSignal.value.message}</span>
                   </div>
                 )
                 : (
                   ToastSignal.value.type === "warning"
                     ? (
-                      <div class="alert alert-warning">
+                      <div class="alert alert-warning flex">
                         <span>{ToastSignal.value.message}</span>
                       </div>
                     )
                     : (
                       ToastSignal.value.type === "info"
                         ? (
-                          <div class="alert alert-info">
+                          <div class="alert alert-info flex">
                             <span>{ToastSignal.value.message}</span>
                           </div>
                         )
                         : (
-                          <div class="alert">
+                          <div class="alert flex">
                             <span>{ToastSignal.value.message}</span>
                           </div>
                         )