diff --git a/src/components/Questions/QuestionFinished.tsx b/src/components/Questions/QuestionFinished.tsx new file mode 100644 index 000000000..d16de8cc2 --- /dev/null +++ b/src/components/Questions/QuestionFinished.tsx @@ -0,0 +1,97 @@ +import type { ReactNode } from 'react'; +import { + PartyPopper, + RefreshCcw, + SkipForward, + Sparkles, + ThumbsUp, +} from 'lucide-react'; +import type { QuestionProgressType } from './QuestionsList'; + +type ProgressStatButtonProps = { + isDisabled?: boolean; + icon: ReactNode; + label: string; + count: number; + onClick: () => void; +}; + +function ProgressStatButton(props: ProgressStatButtonProps) { + const { icon, label, count, onClick, isDisabled = false } = props; + + return ( + + ); +} + +type QuestionFinishedProps = { + knowCount: number; + didNotKnowCount: number; + skippedCount: number; + totalCount: number; + onReset: (type: QuestionProgressType | 'all') => void; +}; + +export function QuestionFinished(props: QuestionFinishedProps) { + const { knowCount, didNotKnowCount, skippedCount, totalCount, onReset } = + props; + + return ( +
+ +

+ Questions Finished +

+

+ Click below revisit specific or all questions +

+ +
+ } + label="Knew" + count={knowCount} + isDisabled={knowCount === 0} + onClick={() => onReset('know')} + /> + } + label="Learned" + count={didNotKnowCount} + isDisabled={didNotKnowCount === 0} + onClick={() => onReset('dontKnow')} + /> + } + label="Skipped" + count={skippedCount} + isDisabled={skippedCount === 0} + onClick={() => onReset('skip')} + /> +
+
+ +
+
+ ); +} diff --git a/src/components/Questions/QuestionsList.tsx b/src/components/Questions/QuestionsList.tsx index e8ce4b740..64525e36d 100644 --- a/src/components/Questions/QuestionsList.tsx +++ b/src/components/Questions/QuestionsList.tsx @@ -8,6 +8,7 @@ import type { QuestionType } from '../../lib/question-group'; import { Confetti } from '../Confetti'; import { httpGet, httpPut } from '../../lib/http'; import { useToast } from '../../hooks/use-toast'; +import { QuestionFinished } from './QuestionFinished'; type UserQuestionProgress = { know: string[]; @@ -15,7 +16,7 @@ type UserQuestionProgress = { skip: string[]; }; -type ProgressType = keyof UserQuestionProgress; +export type QuestionProgressType = keyof UserQuestionProgress; type QuestionsListProps = { groupId: string; @@ -90,7 +91,7 @@ export function QuestionsList(props: QuestionsListProps) { setIsLoading(false); } - async function resetProgress(type: ProgressType | 'all' = 'all') { + async function resetProgress(type: QuestionProgressType | 'all' = 'all') { let knownQuestions = userProgress?.know || []; let didNotKnowQuestions = userProgress?.dontKnow || []; let skipQuestions = userProgress?.skip || []; @@ -146,7 +147,7 @@ export function QuestionsList(props: QuestionsListProps) { } async function updateQuestionStatus( - status: ProgressType, + status: QuestionProgressType, questionId: string ) { setIsLoading(true); @@ -216,13 +217,24 @@ export function QuestionsList(props: QuestionsListProps) { />
- {!isLoading && } + {!isLoading && hasProgress && !currQuestion && ( + { + resetProgress(type).finally(() => null); + }} + /> + )} + {!isLoading && currQuestion && } {isLoading && }