hide side widget button flash animation if quiz is completed
This commit is contained in:
parent
a18dbf0022
commit
756b93a8b2
@ -9,6 +9,7 @@ export default function RunningStripe({ sx = [] }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
component="span"
|
||||||
sx={[
|
sx={[
|
||||||
{
|
{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
|
17
src/widgets/shared/useQuizCompletionStatus.ts
Normal file
17
src/widgets/shared/useQuizCompletionStatus.ts
Normal file
@ -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 { createPortal } from "react-dom";
|
||||||
import QuizDialog from "../shared/QuizDialog";
|
import QuizDialog from "../shared/QuizDialog";
|
||||||
import RunningStripe from "../shared/RunningStripe";
|
import RunningStripe from "../shared/RunningStripe";
|
||||||
|
import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus";
|
||||||
|
|
||||||
|
|
||||||
const PADDING = 10;
|
const PADDING = 10;
|
||||||
@ -21,6 +22,7 @@ interface Props {
|
|||||||
export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions, fullScreen = false }: Props) {
|
export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions, fullScreen = false }: Props) {
|
||||||
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
||||||
const isMobile = useMediaQuery("(max-width: 600px)");
|
const isMobile = useMediaQuery("(max-width: 600px)");
|
||||||
|
const isQuizCompleted = useQuizCompletionStatus(quizId);
|
||||||
|
|
||||||
return createPortal(
|
return createPortal(
|
||||||
<ThemeProvider theme={lightTheme}>
|
<ThemeProvider theme={lightTheme}>
|
||||||
@ -78,7 +80,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
|
|||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<RunningStripe />
|
{!isQuizCompleted && <RunningStripe />}
|
||||||
Пройти квиз
|
Пройти квиз
|
||||||
</Button>
|
</Button>
|
||||||
</ThemeProvider>,
|
</ThemeProvider>,
|
||||||
|
Loading…
Reference in New Issue
Block a user