beta version of live check for code text area

This commit is contained in:
anovazzi1 2023-03-28 17:35:32 -03:00
commit cc58c0e385
3 changed files with 31 additions and 24 deletions

View file

@ -10,5 +10,6 @@ export async function sendAll(data:sendAllProps) {
} }
export async function checkCode(code:string){ export async function checkCode(code:string){
return []
return await axios.post('/validate',{code})
} }

View file

@ -6,10 +6,11 @@ import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools" import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/webpack-resolver" import "ace-builds/webpack-resolver";
import {darkContext} from "../../contexts/darkContext" import { darkContext } from "../../contexts/darkContext";
import { checkCode } from "../../controllers/API"; import { checkCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
setValue, setValue,
@ -19,7 +20,8 @@ export default function CodeAreaModal({
}) { }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const {dark} = useContext(darkContext) const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
@ -103,9 +105,11 @@ export default function CodeAreaModal({
fontSize={14} fontSize={14}
showGutter showGutter
enableLiveAutocompletion enableLiveAutocompletion
theme={dark?"twilight":"github"} theme={dark ? "twilight" : "github"}
name="CodeEditor" name="CodeEditor"
onChange={(value)=>{setCode(value)}} onChange={(value) => {
setCode(value);
}}
className="h-full w-full rounded-lg" className="h-full w-full rounded-lg"
/> />
</div> </div>
@ -117,19 +121,21 @@ export default function CodeAreaModal({
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => { onClick={() => {
setValue(code) setValue(code)
setModalOpen(false);
}}
>
Save code
</button>
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => {
checkCode(code) checkCode(code)
.then((_) =>{
setSuccessData({ title: "Code is ready to run" })
setModalOpen(false)
}
)
.catch((_) =>
setErrorData({
title:
"There is something wrong with this code, please review it",
})
);
}} }}
> >
Check Code Check & Save
</button> </button>
</div> </div>
</div> </div>