gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: index lazy for save flagged question on local storage

Browse Source
This commit is contained in:
abiyasa05 2024-10-24 12:24:15 +07:00
parent 55abddddd3
commit 55cc35718d
1 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -221,16 +221,36 @@ export default function AssessmentPage() {
const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
const filteredSubAspects = currentAspect ? currentAspect.subAspects : [];
// Inisialisasi flaggedQuestions dari localStorage saat komponen dimuat
useEffect(() => {
const savedFlags = localStorage.getItem("flaggedQuestions");
if (savedFlags) {
setFlaggedQuestions(JSON.parse(savedFlags));
}
}, []);
// Simpan perubahan flag ke localStorage setiap kali flaggedQuestions berubah
useEffect(() => {
if (Object.keys(flaggedQuestions).length > 0) {
localStorage.setItem("flaggedQuestions", JSON.stringify(flaggedQuestions));
}
}, [flaggedQuestions]);
// Mutation function to toggle flag
const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
mutationFn: toggleFlagAnswer,
onSuccess: (response) => {
if (response && response.answer) {
const { answer } = response;
setFlaggedQuestions((prevFlags) => ({
...prevFlags,
[answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
}));
setFlaggedQuestions((prevFlags) => {
const newFlags = {
...prevFlags,
[answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
};
// Simpan perubahan ke localStorage
localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
return newFlags;
});
}
},
@ -594,10 +614,15 @@ export default function AssessmentPage() {
{/* Action Icon/Flag */}
<ActionIcon
onClick={() => {
setFlaggedQuestions((prevFlags) => ({
...prevFlags,
[questionId]: !prevFlags[questionId],
}));
setFlaggedQuestions((prevFlags) => {
const newFlags = {
...prevFlags,
[questionId]: !prevFlags[questionId],
};
// Simpan perubahan ke localStorage
localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
return newFlags;
});
toggleFlagMutation.mutate(questionId);
}}
title={
@ -608,7 +633,6 @@ export default function AssessmentPage() {
color={flaggedQuestions[questionId] ? "red" : "white"}
style={{
margin: "2px 10px",
border: "1px gray solid",
borderRadius: "4px",
backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
}}
@ -753,14 +777,14 @@ export default function AssessmentPage() {
<button
className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
${answers[questionId] ? "bg-blue-500 text-white" : "bg-transparent text-black"}
${flaggedQuestions[questionId] ? "border-black" : ""}`}
${flaggedQuestions[questionId] ? "border-gray-50" : ""}`}
onClick={() => scrollToQuestion(questionId)}
>
{questionNumber}
</button>
{flaggedQuestions[questionId] && (
<div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-black rounded-e-md" />
<div className="absolute top-0 right-0 w-0 h-0 border-b-[20px] border-b-transparent border-r-[20px] border-r-red-600 rounded-e-md" />
)}
</div>
);