Added the ability for a user to select to avoid repeated exams

This commit is contained in:
Tiago Ribeiro
2023-09-21 23:43:48 +01:00
parent 1bac6eb110
commit d46d0ab42f
4 changed files with 56 additions and 19 deletions

View File

@@ -13,13 +13,13 @@ import {sortByModuleName} from "@/utils/moduleUtils";
interface Props {
user: User;
onStart: (modules: Module[]) => void;
onStart: (modules: Module[], avoidRepeated: boolean) => void;
disableSelection?: boolean;
}
export default function Selection({user, onStart, disableSelection = false}: Props) {
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(false);
const {stats} = useStats(user?.id);
const toggleModule = (module: Module) => {
@@ -184,12 +184,13 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
</section>
<div className="flex w-full justify-between items-center">
<div
className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer"
className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer tooltip"
data-tip="If possible, the platform will choose exams not yet done"
onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
<input type="checkbox" className="hidden" />
<div
className={clsx(
"w-6 h-6 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out",
avoidRepeatedExams && "!bg-mti-purple-light ",
)}>
@@ -199,7 +200,10 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
</div>
<Button
onClick={() =>
onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
onStart(
!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
avoidRepeatedExams,
)
}
color="purple"
className="px-12 w-full max-w-xs self-end"