will work on help later

This commit is contained in:
2024-09-18 09:08:49 -06:00
parent 11f9fd81bd
commit 49c5ae789a
2 changed files with 27 additions and 12 deletions

View File

@@ -30,6 +30,7 @@ export default function EditQuiz({
const updateQuizMutation = useUpdateQuizMutation(); const updateQuizMutation = useUpdateQuizMutation();
const [quizText, setQuizText] = useState(quizMarkdownUtils.toMarkdown(quiz)); const [quizText, setQuizText] = useState(quizMarkdownUtils.toMarkdown(quiz));
const [error, setError] = useState(""); const [error, setError] = useState("");
const [showHelp, setShowHelp] = useState(false);
useEffect(() => { useEffect(() => {
const delay = 500; const delay = 500;
@@ -60,6 +61,8 @@ export default function EditQuiz({
}, [moduleName, quiz, quizName, quizText, updateQuizMutation]); }, [moduleName, quiz, quizName, quizText, updateQuizMutation]);
return ( return (
<>
{showHelp && <div className="w-72"> help here</div>}
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="columns-2 min-h-0 flex-1"> <div className="columns-2 min-h-0 flex-1">
<div className="flex-1 h-full"> <div className="flex-1 h-full">
@@ -70,17 +73,24 @@ export default function EditQuiz({
<QuizPreview quiz={quiz} /> <QuizPreview quiz={quiz} />
</div> </div>
</div> </div>
<QuizButtons moduleName={moduleName} quizName={quizName} /> <QuizButtons
moduleName={moduleName}
quizName={quizName}
toggleHelp={() => setShowHelp((h) => !h)}
/>
</div> </div>
</>
); );
} }
function QuizButtons({ function QuizButtons({
moduleName, moduleName,
quizName, quizName,
toggleHelp,
}: { }: {
quizName: string; quizName: string;
moduleName: string; moduleName: string;
toggleHelp: () => void;
}) { }) {
const { data: canvasQuizzes } = useCanvasQuizzesQuery(); const { data: canvasQuizzes } = useCanvasQuizzesQuery();
const { data: quiz } = useQuizQuery(moduleName, quizName); const { data: quiz } = useQuizQuery(moduleName, quizName);
@@ -92,7 +102,11 @@ function QuizButtons({
const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName); const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);
return ( return (
<div className="p-5 flex flex-row gap-3 justify-end"> <div className="p-5 flex flex-row justify-between">
<div>
<button onClick={toggleHelp}>Toggle Help</button>
</div>
<div className="flex flex-row gap-3 justify-end">
{(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />} {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
{quizInCanvas && !quizInCanvas.published && ( {quizInCanvas && !quizInCanvas.published && (
<div className="text-rose-300 my-auto">Not Published</div> <div className="text-rose-300 my-auto">Not Published</div>
@@ -128,5 +142,6 @@ function QuizButtons({
Go Back Go Back
</Link> </Link>
</div> </div>
</div>
); );
} }