generated from dwd/boilarplate-remix-tailwind-antd
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
interface QuizModule {
|
|
questionId: string;
|
|
questionText: string;
|
|
option1: string;
|
|
option2: string;
|
|
option3: string;
|
|
option4: string;
|
|
correctAnswer: string;
|
|
moduleId: string;
|
|
}
|
|
|
|
export default function AdminIndex() {
|
|
const [questionList, setQuestionList] = useState<QuizModule[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<Error | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch(`https://api.teachertrainingkolkata.in/api/question-list`)
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
console.log(data);
|
|
setQuestionList(data);
|
|
setLoading(false);
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred', error);
|
|
setError(error);
|
|
setLoading(false);
|
|
});
|
|
}, []); // Dependency array to run the effect only once on mount
|
|
|
|
if (loading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<section className="container mx-auto px-4">
|
|
<div>
|
|
<table className='w-full'>
|
|
<thead>
|
|
<tr>
|
|
<th>Question ID</th>
|
|
<th>Question</th>
|
|
<th>Option 1</th>
|
|
<th>Option 2</th>
|
|
<th>Option 3</th>
|
|
<th>Option 4</th>
|
|
<th>Correct Answer</th>
|
|
<th>Module ID</th>
|
|
<th className=''>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{questionList.map(question => (
|
|
<tr key={question.questionId}>
|
|
<td>{question.questionId}</td>
|
|
<td>{question.questionText}</td>
|
|
<td>{question.option1}</td>
|
|
<td>{question.option2}</td>
|
|
<td>{question.option3}</td>
|
|
<td>{question.option4}</td>
|
|
<td>{question.correctAnswer}</td>
|
|
<td>{question.moduleId}</td>
|
|
<td>
|
|
<div className='flex flex-row space-x-2'>
|
|
<a href={`/admin/edit-question?id=${question.questionId}`}>Edit</a>
|
|
<span>|</span>
|
|
<a href="">Delete</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|