hide side widget button flash animation if quiz is completed

This commit is contained in:
nflnkr 2024-05-04 19:47:47 +03:00
parent a18dbf0022
commit 756b93a8b2
3 changed files with 21 additions and 1 deletions

@ -9,6 +9,7 @@ export default function RunningStripe({ sx = [] }: Props) {
return (
<Box
component="span"
sx={[
{
position: "absolute",

@ -0,0 +1,17 @@
import { useMemo } from "react";
export function useQuizCompletionStatus(quizId: string): boolean {
return useMemo(() => {
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
if (
typeof sessions[quizId] === "number"
&& Date.now() - sessions[quizId] < 86400000
) {
return true;
}
return false;
}, [quizId]);
}

@ -4,6 +4,7 @@ import { useState } from "react";
import { createPortal } from "react-dom";
import QuizDialog from "../shared/QuizDialog";
import RunningStripe from "../shared/RunningStripe";
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
const PADDING = 10;
@ -21,6 +22,7 @@ interface Props {
export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions, fullScreen = false }: Props) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isMobile = useMediaQuery("(max-width: 600px)");
const isQuizCompleted = useQuizCompletionStatus(quizId);
return createPortal(
<ThemeProvider theme={lightTheme}>
@ -78,7 +80,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
},
]}
>
<RunningStripe />
{!isQuizCompleted && <RunningStripe />}
Пройти квиз
</Button>
</ThemeProvider>,