From 84c5b778039102a77b7fda2ddcab2bbf70085bdc Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Thu, 29 May 2025 15:49:50 +0700
Subject: good progress good progrss

---
 src/components/Flashcard/StudyCard.tsx | 94 +++++++++++++++++++++-------------
 1 file changed, 59 insertions(+), 35 deletions(-)

(limited to 'src/components/Flashcard/StudyCard.tsx')

diff --git a/src/components/Flashcard/StudyCard.tsx b/src/components/Flashcard/StudyCard.tsx
index 4e554b4..1c52de7 100644
--- a/src/components/Flashcard/StudyCard.tsx
+++ b/src/components/Flashcard/StudyCard.tsx
@@ -16,11 +16,16 @@ interface StudyCardProps {
   onSkip?: () => void;
 }
 
-export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCardProps) {
+export default function StudyCard({
+  card,
+  userId,
+  onComplete,
+  onSkip,
+}: StudyCardProps) {
   const [isFlipped, setIsFlipped] = useState(false);
   const [startTime, setStartTime] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  
+
   // Reset the timer when a new card is shown
   useEffect(() => {
     setIsFlipped(false);
@@ -42,13 +47,13 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
   // Handle card grading (Good/Again)
   const handleGrade = async (isCorrect: boolean) => {
     if (isSubmitting) return;
-    
+
     setIsSubmitting(true);
-    
+
     try {
       const result = await gradeCard(userId, card.id, isCorrect);
-      
-      if ('error' in result) {
+
+      if ("error" in result) {
         console.error("Error grading card:", result.error);
       } else {
         onComplete(result as CardResponse);
@@ -63,14 +68,14 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
   // Handle detailed grading with accuracy level
   const handleDetailedGrade = async (accuracy: number) => {
     if (isSubmitting) return;
-    
+
     setIsSubmitting(true);
-    
+
     try {
       const reviewTime = getReviewTime();
       const result = await processReview(userId, card.id, accuracy, reviewTime);
-      
-      if ('error' in result) {
+
+      if ("error" in result) {
         console.error("Error processing review:", result.error);
       } else {
         onComplete(result as CardResponse);
@@ -102,7 +107,7 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
     if (card.expression.ipa && card.expression.ipa.length > 0) {
       return (
         <div className="text-gray-500 text-sm mt-2">
-          /{card.expression.ipa[0].ipa}/
+          /{card.expression.ipa[0]!.ipa}/
         </div>
       );
     }
@@ -116,14 +121,22 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
         <div className="mt-4">
           {card.expression.senses.map((sense, index) => (
             <div key={index} className="mb-3">
-              {sense.pos && <span className="text-xs font-medium text-blue-600 mr-2">{sense.pos}</span>}
-              {sense.senses && sense.senses.map((subsense, i) => (
-                <div key={i} className="mt-1">
-                  {subsense.glosses && subsense.glosses.map((gloss, j) => (
-                    <div key={j} className="text-sm">{j+1}. {gloss}</div>
-                  ))}
-                </div>
-              ))}
+              {sense.pos && (
+                <span className="text-xs font-medium text-blue-600 mr-2">
+                  {sense.pos}
+                </span>
+              )}
+              {sense.senses &&
+                sense.senses.map((subsense, i) => (
+                  <div key={i} className="mt-1">
+                    {subsense.glosses &&
+                      subsense.glosses.map((gloss, j) => (
+                        <div key={j} className="text-sm">
+                          {j + 1}. {gloss}
+                        </div>
+                      ))}
+                  </div>
+                ))}
             </div>
           ))}
         </div>
@@ -142,36 +155,47 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
 
   return (
     <div className="flex flex-col items-center">
-      <div className={cn("flashcard-container", { flipped: isFlipped })} onClick={flipCard}>
+      <div
+        className={cn("flashcard-container", { flipped: isFlipped })}
+        onClick={flipCard}
+      >
         <div className="flashcard">
           {/* Front of card */}
           <div className="flashcard-front">
             <Card className="w-full h-full flex flex-col justify-center items-center p-6 relative">
               {renderBookmarked()}
-              <div className="text-2xl font-bold">{card.expression.spelling}</div>
+              <div className="text-2xl font-bold">
+                {card.expression.spelling}
+              </div>
               {!isFlipped && renderIPA()}
               <div className="mt-4 text-lg">{formatCardContent(card.text)}</div>
-              {card.note && <div className="mt-2 text-sm text-gray-500">{card.note}</div>}
+              {card.note && (
+                <div className="mt-2 text-sm text-gray-500">{card.note}</div>
+              )}
               {!isFlipped && (
-                <div className="mt-6 text-sm text-gray-400">
-                  Click to flip
-                </div>
+                <div className="mt-6 text-sm text-gray-400">Click to flip</div>
               )}
             </Card>
           </div>
-          
+
           {/* Back of card */}
           <div className="flashcard-back">
             <Card className="w-full h-full flex flex-col justify-between p-6 relative">
               {renderBookmarked()}
               <div>
-                <div className="text-2xl font-bold">{card.expression.spelling}</div>
+                <div className="text-2xl font-bold">
+                  {card.expression.spelling}
+                </div>
                 {renderIPA()}
-                <div className="mt-4 text-lg">{formatCardContent(card.text, true)}</div>
-                {card.note && <div className="mt-2 text-sm text-gray-500">{card.note}</div>}
+                <div className="mt-4 text-lg">
+                  {formatCardContent(card.text, true)}
+                </div>
+                {card.note && (
+                  <div className="mt-2 text-sm text-gray-500">{card.note}</div>
+                )}
                 {renderSenses()}
               </div>
-              
+
               <div className="flex flex-col mt-6">
                 <div className="text-sm text-gray-500 mb-2">
                   How well did you remember this?
@@ -188,13 +212,13 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
                   <Button
                     variant="default"
                     onClick={() => handleGrade(true)}
-                    disabled={isSubmitting} 
+                    disabled={isSubmitting}
                     className="flex-1"
                   >
                     Good
                   </Button>
                 </div>
-                
+
                 {/* Optional: Detailed grading */}
                 <div className="grid grid-cols-4 gap-2 mt-3">
                   <Button
@@ -239,7 +263,7 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
           </div>
         </div>
       </div>
-      
+
       {/* Progress bar */}
       <div className="w-full mt-4">
         <Progress value={getProgressPercentage()} className="h-2" />
@@ -248,7 +272,7 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
           <span>Ease: {card.progress.easeFactor.toFixed(1)}</span>
         </div>
       </div>
-      
+
       {/* Skip button */}
       {onSkip && (
         <Button
@@ -262,4 +286,4 @@ export default function StudyCard({ card, userId, onComplete, onSkip }: StudyCar
       )}
     </div>
   );
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3