Skip to content

Commit

Permalink
Merge pull request #97 from ITisYourLife-3rd-JJAN/(#91)feat/Explanati…
Browse files Browse the repository at this point in the history 
…onFromChatGPT

(#91)feat/explanation from chat gpt
  • Loading branch information
@richsubin
richsubin authored May 30, 2023
2 parents c81d5dd + d743e58 commit b3e0a7c
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 83 deletions.
212 changes: 130 additions & 82 deletions src/pages/SolvedMission.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,100 +6,148 @@ import axios from 'axios';
import confetti from "https://esm.run/canvas-confetti@1";
import Header from '../components/header/Header';
import Loading from '../lib/Loading';
import Modal from 'react-modal';

const SolvedMission = () => {
const { missionId } = useParams();
const navigate = useNavigate();
const location = useLocation();
const { missionId } = useParams();
const navigate = useNavigate();
const location = useLocation();

const answer = location.state.answer;
const explain = location.state.explain.replace(/\n/g, '<br>');
const mapNum = location.state.mapNum;
const title = location.state.title;
const [isCorrect, setIsCorrect] = useState(0);
const [isLoading, setIsLoading] = useState();
const [apiResponse, setApiResponse] = useState("");
const [isModalOpen, setIsModalOpen] = useState(false);
const [prompt, setPrompt] = useState(`${title}\nwhy is this right? respond me in Korean`)

const userId = sessionStorage.getItem("userId")

useEffect(() => {
const isO = location.state.isO;
const answer = location.state.answer;
const explain = location.state.explain.replace(/\n/g, '<br>');
const mapNum = location.state.mapNum;
let isCorrect = 0;

const [isCorrect, setIsCorrect] = useState(0);
const [isLoading, setIsLoading] = useState();

const userId = sessionStorage.getItem("userId")
if ((isO === true && answer === "O") || (isO === false && answer === "X")) {
isCorrect = 1;
}
setIsCorrect(isCorrect);
saveMissionStatus(isCorrect);
}, []);

useEffect(() => {
const isO = location.state.isO;
const answer = location.state.answer;
let isCorrect = 0;

if ((isO === true && answer === "O") || (isO === false && answer === "X")) {
isCorrect = 1;
}
setIsCorrect(isCorrect);
saveMissionStatus(isCorrect);
}, []);
const saveMissionStatus = (status) => {
axios
.post("http://localhost:8080/api/v1/missions", {
solvedMissionId: missionId,
solvedUserId: userId,
status: status
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error.response.data);
})
.finally(() => {
setIsLoading(false);
});
}

if (isLoading) {
return <Loading />;
}

const saveMissionStatus = (status) => {
axios
.post("http://localhost:8080/api/v1/missions", {
solvedMissionId: missionId,
solvedUserId: userId,
status: status
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error.response.data);
})
.finally(() => {
setIsLoading(false);
});
}
if (isLoading) {
return <Loading/>;
}
const handleNextButtonClick = () => {
confetti({
particleCount: 150,
spread: 60,
});
return navigate(`/kid/map/${mapNum}`);
};

const closeModal = () => {
setIsModalOpen(false);
};

const handleNextButtonClick = () => {
confetti({
particleCount: 150,
spread: 60,
});
return navigate(`/kid/map/${mapNum}`);
};
if(!(location.state.isO)){
setPrompt(`${title}\nwhy is this wrong? respond me in Korean`)
}
const handleSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
try {
const response = await axios.post(
"https://api.openai.com/v1/engines/text-davinci-003/completions",
{
prompt: prompt,
temperature: 0.4,
max_tokens: 2900,
},
{
headers: {
Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
"Content-Type": "application/json",
},
}
);
setIsLoading(false)
setApiResponse(response.data.choices[0].text);
setIsModalOpen(true);
} catch (e) {
console.error(e);
setApiResponse("Something is going wrong. Please try again.");
}
};

return (
return (
<div>
<Header />
{isLoading ? setIsLoading(true) :
<div>
<Header/>
{isLoading ? setIsLoading(true) :
<div>
<div className='maplist-container'>
<div className='answer-notice-box'>
{isCorrect ?
<p>참 잘했어요! 정답은 {answer} 입니다 💙</p>
:
<p>틀렸어요ㅠㅠ 정답은 {answer} 입니다 😿</p>
}
</div>
<div className='solution-box'>
{isCorrect ?
<div className='sol-left-box'>
<p className='gpt-btn'>Chat GPT로 해설보기</p>
<img className="thumb-img" src={`${process.env.PUBLIC_URL}/assets/images/thumb.png`} alt=''></img>
</div> :
<div className='sol-left-box'>
<p className='gpt-btn incorrect'>Chat GPT로 해설보기</p>
<img className="thumb-img" src={`${process.env.PUBLIC_URL}/assets/images/wrong.png`} alt=''></img>
</div>
}
<div className='solution-text-box'>
<p className='solution-text' dangerouslySetInnerHTML={{ __html: explain }}></p>
</div>
</div>
<MapBackground mapId={missionId}/>
<button className="next-btn quiz" onClick={handleNextButtonClick}>
완료
</button>
</div>
<div className='maplist-container'>
<div className='answer-notice-box'>
{isCorrect ?
<p>참 잘했어요! 정답은 {answer} 입니다 💙</p>
:
<p>틀렸어요ㅠㅠ 정답은 {answer} 입니다 😿</p>
}
</div>
<div className='solution-box'>
{isCorrect ?
<div className='sol-left-box' onClick={handleSubmit}>
<p className='gpt-btn'>Chat GPT로 해설보기</p>
<img className="thumb-img" src={`${process.env.PUBLIC_URL}/assets/images/thumb.png`} alt='' />
</div> :
<div className='sol-left-box' onClick={handleSubmit}>
<p className='gpt-btn incorrect'>Chat GPT로 해설보기</p>
<img className="thumb-img" src={`${process.env.PUBLIC_URL}/assets/images/wrong.png`} alt='' />
</div>
}
}
<div className='solution-text-box'>
<p className='solution-text' dangerouslySetInnerHTML={{ __html: explain }}></p>
</div>
</div>
<MapBackground mapId={missionId} />
<button className="next-btn quiz" onClick={handleNextButtonClick}>
완료
</button>
</div>
</div>
);
}
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
contentLabel="Modal"
className="gptModal"
ariaHideApp={false}
>
<div className='gptTitle'>GPT의 해설🖥️ <img onClick={closeModal} className='quitbtnMission' src={`${process.env.PUBLIC_URL}/assets/images/quit.png`} alt="" /> </div>
<div><br/>{apiResponse}</div>
</Modal>
</div>
);
};

export default SolvedMission;
export default SolvedMission;
30 changes: 29 additions & 1 deletion src/pages/css/solvedMission.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
background: #FFFFFF;
border-radius: 50px;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
z-index: 10;
/* z-index: 10; */

overflow: scroll;
}
Expand Down Expand Up @@ -102,4 +102,32 @@
width: 80%;
height: auto;
left: 8%;
}

.gptModal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 40%;
height: auto;
padding: 1rem;
border-radius: 2rem;
border:20px solid;
border-style: 20px solid;
border-color: #4A84C4;
z-index: 9999;
}

.quitbtnMission{
position: relative;
cursor: pointer;
width: 3%;
height: auto;
margin-left: 66%;
}

.gptTitle{
font-size: 2rem;
}

0 comments on commit b3e0a7c

Please sign in to comment.