updated

ThakareSakshi · Apr 3, 2024 · b143784 · b143784
1 parent 2b81245
commit b143784
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 86 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,44 +1,43 @@
-import   {createBrowserRouter,
-RouterProvider,} from "react-router-dom"
-import './App.css';
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "./App.css";
+
 
-import Compiler from './Components/Compiler';
 import HomePage from "./Pages/homePage";
 import Editorpage from "./Pages/editorpage";
 import LoginPage from "./Pages/LoginPage";
 import SignupPage from "./Pages/SignupPage";
 import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css"
-
+import "react-toastify/dist/ReactToastify.css";
+import CompilerContext from "./Context/CompilerContext";
 
 function App() {
-
-  const router=createBrowserRouter([
+  const router = createBrowserRouter([
     {
-      path:"/",
-      element:<HomePage/>
+      path: "/",
+      element: <HomePage />,
     },
     {
-      path:"/compiler/:problemID",
-      element:<Editorpage/>
+      path: "/compiler/:problemID",
+      element: <Editorpage />,
     },
     {
-      path:"/login",
-      element:<LoginPage/>
+      path: "/login",
+      element: <LoginPage />,
     },
     {
-      path:"/signup",
-      element:<SignupPage/>
-    }
-  ])
+      path: "/signup",
+      element: <SignupPage />,
+    },
+  ]);
 
   return (
     <div className="App bg-[#1A1A1A]">
-       <RouterProvider router={router}>
-
-       </RouterProvider>
-       <ToastContainer/>
+      <CompilerContext>
+        <RouterProvider router={router}>
 
+        </RouterProvider>
+        <ToastContainer />
+      </CompilerContext>
     </div>
   );
 }

diff --git a/src/Components/Case.js b/src/Components/Case.js
@@ -1,8 +1,10 @@
 import React from 'react'
 
-const Case = ({index, input ,output,setTestCase}) => {
+const Case = ({index,setTestCase,passed}) => {
   return (
-    <div className='bg-[#333333] p-2 rounded-md text-white cursor-pointer' onClick={()=>setTestCase(index)}> Case {index}</div>
+    <div className='bg-[#333333] p-2 rounded-md text-white cursor-pointer flex items-center gap-2' onClick={()=>setTestCase(index)}> 
+    <div className=" p-[1px]   h-[5px] w-[5px] rounded-full" style={{backgroundColor:(passed ? passed.status? "green": "red":"#333333")}}></div> 
+    Case {index}</div>
 
   )
 }

diff --git a/src/Components/Compiler.js b/src/Components/Compiler.js
@@ -45,7 +45,7 @@ const Compiler = () => {
   <Editor
         height="50vh"
         width={`100%`}
-        language={"java"}
+        language={"javascript"}
         value={inputCode}
         theme='myTheme'
         defaultValue={" "}

diff --git a/src/Components/CompilerHeader.js b/src/Components/CompilerHeader.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useDispatch,useSelector} from "react-redux";
 import { setCurrentProblem, setIsSuccess, setOutputCode } from "../store/compilerSlice";
 import { useNavigate } from "react-router-dom";
@@ -9,6 +9,7 @@ import { getFirestore,runTransaction ,doc,
 import app from "../Data/firebase";
 import {problemDesc} from "../Data/ProblemsDescription"
 import ld from "lodash"
+import { ProblemsContext } from "../Context/CompilerContext";
 
 
 
@@ -29,6 +30,7 @@ const CompilerHeader = () => {
 
   const problem=problemDesc.filter(problem=> problem.id ==currentProblemId);
   const handlerFunction=problem[0].handlerFunction;
+  const testCtx=useContext(ProblemsContext);
 
 
 
@@ -106,7 +108,7 @@ const CompilerHeader = () => {
 
       if(typeof handler==="function"){
         let result=handler(cb);
-
+        testCtx.setTestResult(result);
         if(result===true){
         toast.success("compiled successFully");
 
@@ -124,16 +126,16 @@ const CompilerHeader = () => {
      }
 
 
-  const submitCode=()=>{
+  const submitCode=async ()=>{
     if(isLogin== false ){
       toast.error("you must be login to run code",{position:"top-center", autoClose:3000});
   }
     try{
       console.log("code submitted");
-      const cb = new Function(`return ${inputcode}`)();
+      const cb =await new Function(`return ${inputcode}`)();
       console.log(cb);
-			const handler =handlerFunction;
-      console.log("type of handler",typeof handler)
+			const handler = handlerFunction;
+      console.log("type of handler :",typeof handler)
 
       if(typeof handler==="function"){
         let result=handler(cb);

diff --git a/src/Components/ProblemStatement.js b/src/Components/ProblemStatement.js
@@ -18,6 +18,8 @@ import { getFirestore } from "firebase/firestore";
 import { setAllProblemsData, setInputCode, setOutputCode, setStdOutput } from "../store/compilerSlice";
 import { setUserData } from "../store/AuthSlice";
 import Submissions from "./Submissions";
+import { ProblemsContext } from "../Context/CompilerContext";
+import { useContext } from "react";
 // import { useAuthState } from "react-firebase-hooks";
 
 const ProblemStatement = ({ id }) => {
@@ -31,6 +33,9 @@ const ProblemStatement = ({ id }) => {
   const [display,setdisplay]=useState(false);
   dispatch(setStdOutput(data[0].stdOutput));
 
+
+  const testCTx=useContext(ProblemsContext)
+
 
   const [color, setColor] = useState("red");
   const [Udata, setUData] = useState({
@@ -50,7 +55,7 @@ const ProblemStatement = ({ id }) => {
       } else {
         setColor("red");
       }
-      dispatch(setInputCode(data[0].defaultCode))
+
 
       const getDataFromDb = async () => {
         const q = query(collection(db, "problems"),where("id", "==", currentProblemId));
@@ -76,6 +81,12 @@ const ProblemStatement = ({ id }) => {
     dispatch(setOutputCode(""));
   }, [currentProblemId,AllProblemsData]);
 
+  useEffect(()=>{
+    dispatch(setInputCode(data[0].defaultCode))
+    testCTx.setTestResult([]);
+
+  },[currentProblemId])
+
   //----------------getuserdata----------------------
   const getUsersDataOnProblem = async () => {
     const userRef = doc(db, "users", user.user.uid);
@@ -286,7 +297,7 @@ const ProblemStatement = ({ id }) => {
 
       {/* ------------examples-------------------- */}
       {data[0].examples.map((ex, index) => (
-        <Example index={"e"+index+1} {...ex} />
+        <Example key={"e"+index} index={index+1} {...ex} />
       ))}
 
       {/* ---------constraints----------------  */}
@@ -295,7 +306,7 @@ const ProblemStatement = ({ id }) => {
         <ul className="list-disc text-white li">
           {data[0].constraints.map((constraint) => {
             return (
-              <li className=" m-2  text-white text-sm bg-neutral-700 rounded-md px-2 w-fit list-item">
+              <li className=" m-2  text-white text-sm bg-neutral-700 rounded-md px-2 w-fit list-item" key={constraint.desc+1}>
                 {constraint.desc}
               </li>
             );

diff --git a/src/Components/testCases.js b/src/Components/testCases.js
@@ -1,10 +1,11 @@
 import React from 'react'
-import { UseDispatch,useDispatch,useSelector } from 'react-redux'
+import { useDispatch,useSelector } from 'react-redux'
 import { setOutputCode } from '../store/compilerSlice';
-import { UseSelector } from 'react-redux';
+import { useContext } from 'react';
 import { problemDesc } from '../Data/ProblemsDescription';
 import Case from './Case';
 import { useState } from 'react';
+import { ProblemsContext } from '../Context/CompilerContext';
 
 
 const TestCases = () => {
@@ -14,6 +15,9 @@ const TestCases = () => {
     const isSuccess=useSelector((state)=>state.compiler.isSuccess)
     const dispatch=useDispatch();
     const [testcase,setTestCase]=useState(0);
+
+    const testCtx=useContext(ProblemsContext);
+
 
 
 
@@ -27,15 +31,31 @@ const TestCases = () => {
        <div className='flex gap-2 bg-[#262626] p-3'>
         {
           data[0].examples.map((test,index)=>{
-             return  <Case key={"c"+index} index={index} {...test} setTestCase={setTestCase}/> })
+             return   <Case key={"c"+index} index={index} {...test} setTestCase={setTestCase} passed={testCtx.testResult ? testCtx.testResult[index]: null}/> })
         }
        </div>
-       <div className='text-white bg-[#262626] p-2'>
-         <span>Input:</span>
-         <div className='bg-[#333333] rounded-md p-2 my-1'>{data[0].examples[testcase].input}</div>
-         <span>Output:</span>
-         <div className='bg-[#333333] rounded-md p-2 my-1'>{data[0].examples[testcase].output}</div>
-       </div>
+      {
+        testCtx.testResult.length ==0 ?
+        <div className='text-white bg-[#262626] p-2'>
+        <span>Input:</span>
+        <div className='bg-[#333333] rounded-md p-2 my-1'>{data[0].examples[testcase].input}</div>
+        <span>Output:</span>
+        <div className='bg-[#333333] rounded-md p-2 my-1'>{data[0].examples[testcase].output}</div>
+      </div>
+        :
+
+      <div className='text-white bg-[#262626] p-2'>
+        <span>Input:</span>
+        <div className='bg-[#333333] rounded-md p-2 my-1'>{data[0].examples[testcase].input}</div>
+        <span>Your Output:</span>
+
+        <div className='bg-[#333333] rounded-md p-2 my-1 h-8'>{JSON.stringify(testCtx.testResult[testcase].output)}</div>
+
+        <span>expected Output:</span>
+
+        <div className='bg-[#333333] rounded-md p-2 my-1'>{JSON.stringify(testCtx.testResult[testcase].expected)}</div>
+      </div>
+      }
        <textarea value={outputtext} className='w-full  bg-[#262626] outline-none  text-red-500' readOnly="readOnly"></textarea>
 
     </div>

diff --git a/src/Context/CompilerContext.js b/src/Context/CompilerContext.js
@@ -0,0 +1,26 @@
+import { createContext} from "react";
+import { useState } from "react";
+
+export const ProblemsContext=createContext();
+
+
+
+
+const CompilerContext = (props) => {
+
+    const [testResult,setTestResult]=useState([]);
+
+    const data={
+      testResult,
+      setTestResult,
+    }
+  return (
+    <ProblemsContext.Provider value={data}>
+        {
+            props.children
+        }
+    </ProblemsContext.Provider>
+  )
+}
+
+export default CompilerContext