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 && }