generated from dwd/boilarplate-remix-tailwind-antd
master
Suvodip
parent
9c7a9882ed
commit
f11d95adcd
|
|
@ -0,0 +1,143 @@
|
||||||
|
import React, { useState, useEffect, FormEvent } from 'react';
|
||||||
|
import { Button, Modal, Spin } from 'antd';
|
||||||
|
|
||||||
|
interface QuizModule {
|
||||||
|
moduleId: string;
|
||||||
|
moduleName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [question, setQuestion] = useState('');
|
||||||
|
const [option1, setOption1] = useState('');
|
||||||
|
const [option2, setOption2 ] = useState('');
|
||||||
|
const [option3, setOption3 ] = useState('');
|
||||||
|
const [option4, setOption4 ] = useState('');
|
||||||
|
const [moduleId, setModuleId] = useState('');
|
||||||
|
const [correctAnswer, setCorrectAnswer] = useState('');
|
||||||
|
|
||||||
|
const [moduleList, setModuleList] = useState<QuizModule[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
const [open, setOpen] = useState<boolean>(false);
|
||||||
|
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list`)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
setModuleList(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('An error occurred', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleModuleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const data = { question, option1, option2, option3, option4, correctAnswer, moduleId };
|
||||||
|
setSubmitLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-question`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network Response not ok');
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
// console.log('Success', result);
|
||||||
|
setOpen(false); // Close the modal on successful submission
|
||||||
|
// Optionally, refresh the quiz list here
|
||||||
|
} catch (error) {
|
||||||
|
// console.error('Error', error);
|
||||||
|
} finally {
|
||||||
|
setSubmitLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showLoading = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <Spin size="large" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={showLoading}>New Question</Button>
|
||||||
|
<Modal title="Add New Question" centered footer={false} open={open} onCancel={() => setOpen(false)}>
|
||||||
|
{submitLoading ? (
|
||||||
|
<Spin size="large" />
|
||||||
|
) : (
|
||||||
|
<div className='container mx-auto px-4'>
|
||||||
|
<form onSubmit={handleModuleSubmit} className='flex flex-col'>
|
||||||
|
<div className='flex flex-col mb-4'>
|
||||||
|
<label htmlFor="question">Question:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={question} onChange={(e) => setQuestion(e.target.value)} type="text" name='question' id='question'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col mb-4'>
|
||||||
|
<label htmlFor="option1">Option 1:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option1} onChange={(e) => setOption1(e.target.value)} type="text" name='option1' id='option1'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="option2">Option 2:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option2} onChange={(e) => setOption2(e.target.value)} type="text" name='option2' id='option2'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="option3">Option 3:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option3} onChange={(e) => setOption3(e.target.value)} type="text" name='option3' id='option3'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="option4">Option 4:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={option4} onChange={(e) => setOption4(e.target.value)} type="text" name='option4' id='option4'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col' >
|
||||||
|
<label htmlFor="option4">Correct Answer:</label>
|
||||||
|
<select value={correctAnswer} onChange={(e) => setCorrectAnswer(e.target.value)} name="correctAnswer" id="correctAnswer" className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2'>
|
||||||
|
<option value="">-Select-</option>
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
<option value="option4">Option 4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="moduleId">Module ID:</label>
|
||||||
|
<select className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' name="moduleId" id="moduleId" value={moduleId} onChange={(e) => setModuleId(e.target.value)}>
|
||||||
|
<option value="">-Select-</option>
|
||||||
|
{
|
||||||
|
moduleList.map((module => (
|
||||||
|
<option key={module.moduleId} value={module.moduleId}>{module.moduleName}</option>
|
||||||
|
)))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
// quizList
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
export default function Index(){
|
||||||
|
return(
|
||||||
|
<div className="">
|
||||||
|
<section className="container-fluid bg-[#000] text-[#FFF] py-3">
|
||||||
|
<div className="flex flex-row justify-center space-x-10 place-items-center">
|
||||||
|
<a href="">New Module</a>
|
||||||
|
<a href="">New Quiz</a>
|
||||||
|
<a href="">New Quiz Question</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="container mx-auto px-4">
|
||||||
|
<div className="flex"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface QuizModule {
|
||||||
|
moduleName: string;
|
||||||
|
type: string;
|
||||||
|
moduleId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminIndex() {
|
||||||
|
const [moduleList, setModuleList] = useState<QuizModule[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list`)
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
console.log(data);
|
||||||
|
setModuleList(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>Module ID</th>
|
||||||
|
<th>Module Name</th>
|
||||||
|
<th>Module Type</th>
|
||||||
|
<th className=''>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{moduleList.map(module => (
|
||||||
|
<tr key={module.moduleId}>
|
||||||
|
<td>{module.moduleId}</td>
|
||||||
|
<td>{module.moduleName}</td>
|
||||||
|
<td>{module.type}</td>
|
||||||
|
<td>
|
||||||
|
<div className='flex flex-row space-x-2'>
|
||||||
|
<a href={`/admin/edit-module?id=${module.moduleId}`}>Edit</a>
|
||||||
|
<span>|</span>
|
||||||
|
<a href="">Delete</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import React, { useState, FormEvent } from 'react';
|
||||||
|
import { Button, Modal, Spin } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [moduleName, setModuleName] = useState('');
|
||||||
|
const [moduleType, setModuleType] = useState('');
|
||||||
|
const [open, setOpen] = useState<boolean>(false);
|
||||||
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const handleModuleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const data = {
|
||||||
|
moduleName,
|
||||||
|
moduleType,
|
||||||
|
};
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-module`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network Response not ok');
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
console.log('Success', result);
|
||||||
|
setOpen(false); // Close the modal on successful submission
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showLoading = () => {
|
||||||
|
setOpen(true);
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Simple loading mock. You should add cleanup logic in the real world.
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={showLoading}>New Module</Button>
|
||||||
|
<Modal
|
||||||
|
title="Loading Modal" centered
|
||||||
|
footer={false}
|
||||||
|
open={open}
|
||||||
|
onCancel={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<Spin size="large" />
|
||||||
|
) : (
|
||||||
|
<div className='container mx-auto px-4'>
|
||||||
|
<form onSubmit={handleModuleSubmit} className='flex flex-col'>
|
||||||
|
<div className='flex flex-col mb-4'>
|
||||||
|
<label htmlFor="moduleName">Module Name:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={moduleName} onChange={(e) => setModuleName(e.target.value)} type="text" name='moduleName' id='moduleName' />
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="moduleType">Module Type:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={moduleType} onChange={(e) => setModuleType(e.target.value)} type="text" name='moduleType' id='moduleType' />
|
||||||
|
</div><br />
|
||||||
|
<button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
import React, { useState, useEffect, FormEvent } from 'react';
|
||||||
|
import { Button, Modal, Spin } from 'antd';
|
||||||
|
|
||||||
|
interface QuizModule {
|
||||||
|
moduleId: string;
|
||||||
|
moduleName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [moduleList, setModuleList] = useState<QuizModule[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
const [quizName, setQuizName] = useState('');
|
||||||
|
const [totalQuestion, settotalQuestion] = useState('');
|
||||||
|
const [attendance, setAttendance] = useState('');
|
||||||
|
const [internalMarks, setInternalMarks] = useState('');
|
||||||
|
const [moduleId, setModuleId] = useState('');
|
||||||
|
const [open, setOpen] = useState<boolean>(false);
|
||||||
|
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list`)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
setModuleList(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('An error occurred', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleModuleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const data = {
|
||||||
|
quizName,
|
||||||
|
totalQuestion,
|
||||||
|
attendance,
|
||||||
|
internalMarks,
|
||||||
|
moduleId,
|
||||||
|
|
||||||
|
};
|
||||||
|
setSubmitLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://api.teachertrainingkolkata.in/api/create-quiz`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network Response not ok');
|
||||||
|
}
|
||||||
|
const result = await response.json();
|
||||||
|
console.log('Success', result);
|
||||||
|
setOpen(false); // Close the modal on successful submission
|
||||||
|
// Optionally, refresh the quiz list here
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error', error);
|
||||||
|
} finally {
|
||||||
|
setSubmitLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showLoading = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <Spin size="large" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={showLoading}>New Module</Button>
|
||||||
|
<Modal title="Loading Modal" centered footer={false} open={open} onCancel={() => setOpen(false)}>
|
||||||
|
{submitLoading ? (
|
||||||
|
<Spin size="large" />
|
||||||
|
) : (
|
||||||
|
<div className='container mx-auto px-4'>
|
||||||
|
<form onSubmit={handleModuleSubmit} className='flex flex-col'>
|
||||||
|
<div className='flex flex-col mb-4'>
|
||||||
|
<label htmlFor="quizName">Quiz Name:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={quizName} onChange={(e) => setQuizName(e.target.value)} type="text" name='quizName' id='quizName'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col mb-4'>
|
||||||
|
<label htmlFor="totalQuestion">Total Question:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={totalQuestion} onChange={(e) => settotalQuestion(e.target.value)} type="text" name='totalQuestion' id='totalQuestion'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="attendance">Attendance:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="attendance">Attendance:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={attendance} onChange={(e) => setAttendance(e.target.value)} type="text" name='attendance' id='attendance'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="internalMarks">Internal Marks:</label>
|
||||||
|
<input className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' value={internalMarks} onChange={(e) => setInternalMarks(e.target.value)} type="text" name='internalMarks' id='internalMarks'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<label htmlFor="moduleId">Module ID:</label>
|
||||||
|
<select className='border-[1px] border-[#CFCFCF] focus:outline-none focus:border-[#EF7A0C] rounded-[8px] p-2' name="moduleId" id="moduleId" value={moduleId} onChange={(e) => setModuleId(e.target.value)}>
|
||||||
|
{
|
||||||
|
moduleList.map((module => (
|
||||||
|
<option key={module.moduleId} value={module.moduleId}>{module.moduleName}</option>
|
||||||
|
)))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
<input type="text" name='moduleId' id='moduleId'/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<button className='bg-[#000] py-2.5 text-[#FFF] rounded-[10px]' type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default App;
|
||||||
|
// quizList
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface QuizModule {
|
||||||
|
quizName: string;
|
||||||
|
quizId: string;
|
||||||
|
totalQuestion: string;
|
||||||
|
internalMarks: string;
|
||||||
|
attendance: string;
|
||||||
|
moduleId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminIndex() {
|
||||||
|
const [quizList, setQuizList] = useState<QuizModule[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`https://api.teachertrainingkolkata.in/api/quiz-list`)
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
console.log(data);
|
||||||
|
setQuizList(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>Quiz ID</th>
|
||||||
|
<th>Quiz Name</th>
|
||||||
|
<th>Total Question</th>
|
||||||
|
<th>internalMarks</th>
|
||||||
|
<th>Attendance</th>
|
||||||
|
<th>Module ID</th>
|
||||||
|
<th className=''>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{quizList.map(quiz => (
|
||||||
|
<tr key={quiz.quizId}>
|
||||||
|
<td>{quiz.quizId}</td>
|
||||||
|
<td>{quiz.quizName}</td>
|
||||||
|
<td>{quiz.totalQuestion}</td>
|
||||||
|
<td>{quiz.internalMarks}</td>
|
||||||
|
<td>{quiz.attendance}</td>
|
||||||
|
<td>{quiz.moduleId}</td>
|
||||||
|
<td>
|
||||||
|
<div className='flex flex-row space-x-2'>
|
||||||
|
<a href={`/admin/edit-quiz?id=${quiz.quizId}`}>Edit</a>
|
||||||
|
<span>|</span>
|
||||||
|
<a href="">Delete</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import AdminNav from '~/components/AdminNav'
|
||||||
|
|
||||||
|
export default function AdminIndex(){
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<AdminNav />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import AdminNav from '~/components/AdminNav';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import ModuleList from '~/components/ModuleList';
|
||||||
|
import NewModule from '~/components/NewModule';
|
||||||
|
|
||||||
|
|
||||||
|
export default function AdminIndex(){
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<AdminNav />
|
||||||
|
<NewModule />
|
||||||
|
<div>
|
||||||
|
<ModuleList />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import AdminNav from '~/components/AdminNav';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import NewQuestion from '~/components/AddQuestion'
|
||||||
|
import QuestionList from '~/components/QuestionList'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function AdminIndex(){
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<AdminNav />
|
||||||
|
<div>
|
||||||
|
<NewQuestion />
|
||||||
|
</div>
|
||||||
|
<QuestionList />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import AdminNav from '~/components/AdminNav';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import QuizList from '~/components/QuizList';
|
||||||
|
import NewQuiz from '~/components/NewQuiz';
|
||||||
|
|
||||||
|
|
||||||
|
export default function AdminIndex(){
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<AdminNav />
|
||||||
|
<NewQuiz />
|
||||||
|
<div>
|
||||||
|
<QuizList />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue