Integrate question backend

src/components/Questions/QuestionFinished.tsx

@@ -23,7 +23,7 @@ function ProgressStatButton(props: ProgressStatButtonProps) {
     <button
       disabled={isDisabled}
       onClick={onClick}
-      className="group relative flex flex-1 items-center overflow-hidden rounded-xl border border-gray-300 bg-white py-3 px-4 text-black disabled:pointer-events-none disabled:opacity-50"
+      className="group relative flex flex-1 items-center overflow-hidden rounded-xl border border-gray-300 bg-white py-3 px-4 text-black disabled:pointer-events-none disabled:opacity-50 hover:border-black transition-colors"
     >
       {icon}
       <span className="flex flex-grow justify-between">
@@ -32,7 +32,7 @@ function ProgressStatButton(props: ProgressStatButtonProps) {
       </span>
 
       <span className="absolute top-full left-0 right-0 flex h-full items-center justify-center border border-black bg-black text-white transition-all duration-200 group-hover:top-0">
-        Restart
+        Restart Asking
       </span>
     </button>
   );
@@ -43,7 +43,7 @@ type QuestionFinishedProps = {
   didNotKnowCount: number;
   skippedCount: number;
   totalCount: number;
-  onReset: (type: QuestionProgressType | 'all') => void;
+  onReset: (type: QuestionProgressType | 'reset') => void;
 };
 
 export function QuestionFinished(props: QuestionFinishedProps) {
@@ -85,7 +85,7 @@ export function QuestionFinished(props: QuestionFinishedProps) {
       </div>
       <div className="mt-2 text-sm">
         <button
-          onClick={() => onReset('all')}
+          onClick={() => onReset('reset')}
           className="flex items-center gap-0.5 text-red-700 hover:text-black"
         >
           <RefreshCcw className="mr-1 h-4" />

src/components/Questions/QuestionsList.tsx

@@ -80,7 +80,7 @@ export function QuestionsList(props: QuestionsListProps) {
     setIsLoading(false);
   }
 
-  async function resetProgress(type: QuestionProgressType | 'all' = 'all') {
+  async function resetProgress(type: QuestionProgressType | 'reset' = 'reset') {
     let knownQuestions = userProgress?.know || [];
     let didNotKnowQuestions = userProgress?.dontKnow || [];
     let skipQuestions = userProgress?.skip || [];
@@ -92,7 +92,7 @@ export function QuestionsList(props: QuestionsListProps) {
         didNotKnowQuestions = [];
       } else if (type === 'skip') {
         skipQuestions = [];
-      } else if (type === 'all') {
+      } else if (type === 'reset') {
         knownQuestions = [];
         didNotKnowQuestions = [];
         skipQuestions = [];
@@ -105,7 +105,7 @@ export function QuestionsList(props: QuestionsListProps) {
           import.meta.env.PUBLIC_API_URL
         }/v1-reset-question-progress/${groupId}`,
         {
-          type,
+          status: type,
         }
       );
 
@@ -207,7 +207,7 @@ export function QuestionsList(props: QuestionsListProps) {
         isLoading={isLoading}
         showLoginAlert={!isLoggedIn() && hasProgress}
         onResetClick={() => {
-          resetProgress('all').finally(() => null);
+          resetProgress('reset').finally(() => null);
         }}
       />
 
@@ -231,7 +231,7 @@ export function QuestionsList(props: QuestionsListProps) {
             knowCount={knowCount}
             didNotKnowCount={dontKnowCount}
             skippedCount={skipCount}
-            onReset={(type: QuestionProgressType | 'all') => {
+            onReset={(type: QuestionProgressType | 'reset') => {
               resetProgress(type).finally(() => null);
             }}
           />
@@ -241,8 +241,8 @@ export function QuestionsList(props: QuestionsListProps) {
       </div>
 
       <div
-        className={`flex flex-col gap-3 sm:flex-row ${
-          hasFinished ? 'invisible' : 'visible'
+        className={`flex flex-col gap-3 transition-opacity duration-300 sm:flex-row ${
+          hasFinished ? 'opacity-0' : 'opacity-100'
         }`}
       >
         <button

src/components/Questions/QuestionsProgress.tsx

@@ -30,7 +30,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
       <div className="mb-3 flex items-center text-gray-600">
         <div className="relative w-full flex-1 rounded-xl bg-gray-200 p-1">
           <div
-            className="absolute bottom-0 left-0 top-0 rounded-xl bg-slate-800"
+            className="absolute bottom-0 left-0 top-0 rounded-xl bg-slate-800 transition-[width] duration-400"
             style={{
               width: `${donePercentage}%`,
             }}