diff --git a/components/CodeEditor.js b/components/CodeEditor.js index c054637..c42256f 100644 --- a/components/CodeEditor.js +++ b/components/CodeEditor.js @@ -1,210 +1,211 @@ -import axios from "axios" -import { useState, useEffect } from "react" - +import axios from "axios"; +import { useState, useEffect } from "react"; export default function CodeEditor(props) { - - const [user, setUser] = useState('kuro') - const [pass, setPass] = useState('kuro123') - - const [userId, setUserId] = useState(1) - const [object, setObject] = useState('') - const [codeText, setCodeText] = useState('') - const [tokenCode, setTokenCode] = useState('') - - const baseUrl = 'https://kuro-space-rest-api.herokuapp.com/' - const token = 'api/token/' - const code = 'api/v1/code/' - const problem = `api/v1/problem/` - const compile = 'problems/compile/' - - - - - async function webFetchAll() { - const base = 'https://kuro-space-rest-api.herokuapp.com' - try { - const tokenResponse = await axios.post(base + '/api/token/', { - username: "kuro", - password: "kuro123", - }); - const { refresh, access } = tokenResponse.data; - setTokenCode(access) - const config = { - headers: { Authorization: `Bearer ${access}` } - }; - const problemsResponse = await axios.get(base + "/api/v1/problem/", config); - return problemsResponse.data - } catch (error) { - console.error(error); - } - return []; + const [user, setUser] = useState("kuro"); + const [pass, setPass] = useState("kuro123"); + + const [userId, setUserId] = useState(1); + const [object, setObject] = useState(""); + const [codeText, setCodeText] = useState(""); + const [tokenCode, setTokenCode] = useState(""); + + const baseUrl = "https://kuro-space-rest-api.herokuapp.com/"; + const token = "api/token/"; + const code = "api/v1/code/"; + const problem = `api/v1/problem/`; + const compile = "problems/compile/"; + + async function webFetchAll() { + const base = "https://kuro-space-rest-api.herokuapp.com"; + try { + const tokenResponse = await axios.post(base + "/api/token/", { + username: "kuro", + password: "kuro123", + }); + const { refresh, access } = tokenResponse.data; + setTokenCode(access); + const config = { + headers: { Authorization: `Bearer ${access}` }, + }; + const problemsResponse = await axios.get( + base + "/api/v1/problem/", + config + ); + return problemsResponse.data; + } catch (error) { + console.error(error); } - - - const [starterCode, setStarterCode] = useState('') - const [problemTitle, setProblemTitle] = useState('') - const [problemDescription, setProblemDescription] = useState('') - const [problemId, setProblemId] = useState(1) - - - - useEffect(() => { - const getProblem = async () => { - const data = await webFetchAll() - data.map(problem => { - if (problem.id == problemId) { - setStarterCode(problem.starter) - setProblemTitle(problem.title) - setProblemDescription(problem.description) - setProblemId(problem.id) - } - }) - } - getProblem() - }, []) - - const [raw, setRaw] = useState('') - const [output, setOutput] = useState('') - const [errors, setErrors] = useState('') - const [input, setInput] = useState('') - const [passed, setPassed] = useState(true) - const [status, setStatus] = useState('') - const [errorState, setErrorState] = useState('') - - - function handleTextArea(event) { - setCodeText(event.target.value) - return event.target.value - } - - async function webFetchCode() { - // try{ - - const tokenResponse = await axios.post(baseUrl + 'api/token/', { - username: "kuro", - password: "kuro123", - }); - const { refresh, access } = tokenResponse.data; - setTokenCode(access) - const config = { - method: "post", - headers: { Authorization: `Bearer ${access}` }, - url: `${baseUrl}${compile}`, - data: { code: codeText, problem: problemId } - }; - // console.log(); - // const { user } = useAuth0(); - // console.log("user id:", user.sub); - - - const response = await axios(config); - console.log(response.data) - return response.data; - // }catch(error){ - // console.error(error) - // } - } - - async function getResult() { - const data = await webFetchCode() //make sure whether data is an object so it will be used as the following or it is an array so we should map over it - setRaw(data.stdout) - setErrors(data.error) - setInput(data.input) - setStatus(True) - } - - function checkCode(event) { - // event.preventDefault() - // try{ - // useEffect(() => { - // }, []) - try { - getResult() - - } catch (error) { - console.error(error.response.data) + return []; + } + + const [starterCode, setStarterCode] = useState(""); + const [problemTitle, setProblemTitle] = useState(""); + const [problemDescription, setProblemDescription] = useState(""); + const [problemId, setProblemId] = useState(1); + + useEffect(() => { + const getProblem = async () => { + const data = await webFetchAll(); + data.map((problem) => { + if (problem.id == problemId) { + setStarterCode(problem.starter); + setProblemTitle(problem.title); + setProblemDescription(problem.description); + setProblemId(problem.id); } - - - // }catch{ - // setStatus(false) - // setErrorState('Oops! There is an error Please refresh the page to see if this will fix it, sorry fo the inconvenience') - // } - } - - function submitCode(event) { - event.preventDefault() - - + }); + }; + getProblem(); + }, []); + + const [raw, setRaw] = useState(""); + const [output, setOutput] = useState(""); + const [errors, setErrors] = useState(""); + const [input, setInput] = useState(""); + const [passed, setPassed] = useState(true); + const [status, setStatus] = useState(""); + const [errorState, setErrorState] = useState(""); + + function handleTextArea(event) { + setCodeText(event.target.value); + return event.target.value; + } + + async function webFetchCode() { + // try{ + + const tokenResponse = await axios.post(baseUrl + "api/token/", { + username: "kuro", + password: "kuro123", + }); + const { refresh, access } = tokenResponse.data; + setTokenCode(access); + const config = { + method: "post", + headers: { Authorization: `Bearer ${access}` }, + url: `${baseUrl}${compile}`, + data: { code: codeText, problem: problemId }, + }; + // console.log(); + // const { user } = useAuth0(); + // console.log("user id:", user.sub); + + const response = await axios(config); + console.log(response.data); + return response.data; + // }catch(error){ + // console.error(error) + // } + } + + async function getResult() { + const data = await webFetchCode(); //make sure whether data is an object so it will be used as the following or it is an array so we should map over it + setRaw(data.stdout); + setErrors(data.error); + setInput(data.input); + setStatus(True); + } + + function checkCode(event) { + // event.preventDefault() + // try{ + // useEffect(() => { + // }, []) + try { + getResult(); + } catch (error) { + console.error(error.response.data); } + // }catch{ + // setStatus(false) + // setErrorState('Oops! There is an error Please refresh the page to see if this will fix it, sorry fo the inconvenience') + // } + } + + function submitCode(event) { + event.preventDefault(); + } + + return ( +
{problemDescription}
+{problemDescription}
+{key}
+{key}
+{key}
-{key}