// import React, { useState, useEffect } from 'react'
// import { Link, Redirect } from 'react-router-dom';
// import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
// import quiz from './Quiz'

// function Problems() {

//     const [data, setData] = useState({ name: "", })
//     const [courses, setCourses] = useState([{ name: "", description: "", code: "", }])
//     const [values, setValues] = useState({
//         title: "",
//         problems: [],
//         show: false,
//         startAt: "",
//         endAt: "",
//         course: "",
//     });
//     const { authUser } = useAuth()

//     useEffect(() => {
//         const abortController = new AbortController()
//         const signal = abortController.signal
//         readUser(authUser.user._id, { t: authUser.token }).then(res => {
//             setData(res);
//         })
//         list(signal).then(res => {
//             setCourses(res)
//         })
//     }, []);

//     let Time = 30010 




//     const [question, setQuestion] = useState({
        
//     })
//     const [selected, setSelected] = useState("")  //선택한 답을 보여줄 것

//     const [timeout, settimeout] = useState(false)
//     //for each 사용하기
//     let Solutions = []          //빈 배열
//     console.log(localQnA)

//     localQnA.forEach((element) => {
//         Solutions.push(Number(element.A))
//     });
//     useEffect(() => {
//         for (let i = 1; i <= Solutions.length; i++) {
//             Answers.push(0)
//             localStorage.setItem('Answers', JSON.stringify(Answers))
//             localStorage.setItem("Solutions", JSON.stringify(Solutions))
//         }
//         // eslint-disable-next-line
//     }, [])



//     function handleQuestion() {
//         setQuestion({ ...localQnA[question.N] })
//         setSelected("") //페이지 넘어가면 selected 초기화
//     }

//     let handleChange = (ev) => {
//         setSelected(ev.target.value)  //selected값 변경
//         Answers[question.N - 1] = Number(ev.target.id) + 1
//         localStorage.setItem('Answers', JSON.stringify(Answers))
//     }
//     return (
//         <>
//             <div className="container-fluid">
//                 <div className="text-center  font-italic font-weight-bold py-2 text-muted">해석학 2 (이연주 교수)</div>
//                 <div className="row justify-content-md-center">

//                     <div className="col-md-auto mt-4">
//                         <div className="mb-4small">문제 진척도 {question.N}/{localQnA.length}</div>
//                         <span className="h5 text-left text-danger ">
//                             <Timer
//                                 initialTime={Time}
//                                 direction="backward"
//                                 checkpoints={[
//                                     {
//                                         time: 1,
//                                         callback: () => alert('시간이 초과되었습니다.'),
//                                     },
//                                     {
//                                         time: 0,
//                                         callback: () => settimeout(true),

//                                     }
//                                 ]}
//                             >
//                                 {() => (
//                                     <>
//                                         <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 30 : 00                        </>
//                                 )}
//                             </Timer>     {/* npm i react-compound-timer */}
//                         </span>
//                         <span className=" float-right "> {(question.N - 1 === localQnA.length - 1)
//                             ? <Link to="/end">
//                                 <button className="btn btn-outline-success" /*onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}*/>제출</button>
//                             </Link>
//                             : <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button>
//                         }
//                         </span>


//                         <div className="h2 mt-5">
//                             <span className='mr-4 font-weight-bold text-danger'>Quiz{question.N}.</span>{question.Q}
//                         </div>
//                         <div className="mt-2">
//                             <form>
//                                 {question.Choose.map((a, index) =>
//                                     <div>
//                                         <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={selected === String(a)} />
//                                         <label className="font-weight-bold" htmlFor={a}>{a}</label>
//                                     </div>
//                                 )}
//                             </form>
//                             <span className="h5 font-weight-bold"> Your Answer :</span>
//                             <span className="h2 font-weight-bold text-danger"> {selected}</span>  {/* 선택한 값 보여줌 */}

//                         </div>

//                     </div>
//                     <div className="col">
//                     </div>
//                 </div>
//             </div>
//             {timeout ? <Redirect to='/end' /> : ''}
//         </>
//     )

// }


// export default Problems


// // import React, { useEffect, useState } from "react";
// // import { Link, useParams } from 'react-router-dom';
// // import Card from "react-bootstrap/Card";
// // import Button from "react-bootstrap/Button";
// // import { listByUserId } from "./api-quiz";
// // import authHelpers from "../auth/auth-helpers";

// // function Problems() {

// //     const { userId } = useParams();
// //     const [quizzes, setQuizzes] = useState([]);

// //     const jwt = authHelpers.isAuthenticated();

// //     useEffect(() => {
// //         const abortController = new AbortController();
// //         const signal = abortController.signal;

// //         listByUserId({ userId: userId }, { t: jwt.token }, signal).then((data) => {
// //             if (data.error) {
// //                 console.log(data.error);
// //             } else {
// //                 // console.log(data);
// //                 setQuizzes(data);
// //             }
// //         });

// //         return () => {
// //             abortController.abort();
// //         };
// //     }, [userId]);

// //     return (
// //         <div>{console.log(quizzes)})</div>
// //         // <div>

// //         //     {quizzes.map((quiz, i) => {
// //         //         return (
// //         //             <Link key={i} to={`/quiz/${quiz._id}`}>
// //         //                 // <Card>
// //         //                     <Card.Body>
// //         //                         <Card.Title>
// //         //                             {i + 1}번. {quiz}
// //         //                         </Card.Title>
// //         //  Answers
// //         //  {problem.answers.map((answer, index) => {
// //         //                             return <Card.Text key={index}>{answer}</Card.Text>;
// //         //                         })}
// //         //                         <Link to={`/quiz/problem/edit/${problem._id}`}>
// //         //                             <Button onClick={(event) => onUpdate(number)}>수정</Button>
// //         //                         </Link>
// //         //                         <Button onClick={() => onRemove(number)}>삭제</Button>
// //         //                     </Card.Body>
// //         //                 </Card>
// //         //             </Link>
// //         //         );
// //         //     })}
// //         // </div>

// //         // <Card>
// //         //     <Card.Body>
// //         //         <Card.Title>
// //         //             {number + 1}번. {problem.question}
// //         //         </Card.Title>
// //         // Answers
// //         // {problem.answers.map((answer, index) => {
// //         //             return <Card.Text key={index}>{answer}</Card.Text>;
// //         //         })}
// //         //         <Link to={`/quiz/problem/edit/${problem._id}`}>
// //         //             <Button onClick={(event) => onUpdate(number)}>수정</Button>
// //         //         </Link>
// //         //         <Button onClick={() => onRemove(number)}>삭제</Button>
// //         //     </Card.Body>
// //         // </Card>
// //     );
// // }

// // export default Problems;