Removes the drop down menu for word eval (#130)

byronwall · Oct 29, 2023 · 64e4bc0 · 64e4bc0
1 parent 3ce96b0
commit 64e4bc0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 83 deletions.
diff --git a/src/components/questions/SentenceQuestionPractice.tsx b/src/components/questions/SentenceQuestionPractice.tsx
@@ -27,7 +27,7 @@ type WordWithSentence =
 export type WordToRender = {
   displayWord: string;
   word: WordWithSentence["words"][0] | undefined;
-  score: number | undefined;
+  score: number;
 };
 
 export function SentenceQuestionPractice() {
@@ -50,7 +50,7 @@ export function SentenceQuestionPractice() {
     setActiveQuestionIndex((prevIndex) => prevIndex - 1);
   };
 
-  const [fontSize, setFontSize] = useLocalStorage("sentenceFontSize", 5);
+  const [fontSize, setFontSize] = useLocalStorage("sentenceFontSize", 3.5);
 
   const { data: minTimeForNextQuestion } =
     trpc.questionRouter.getMinTimeForNextQuestion.useQuery();
@@ -74,7 +74,7 @@ export function SentenceQuestionPractice() {
         return {
           displayWord: _word,
           word: undefined,
-          score: undefined,
+          score: 0,
         };
       }
 
@@ -96,7 +96,7 @@ export function SentenceQuestionPractice() {
 
   // link the word to the words in the sentence
 
-  const handleScore = (word: WordToRender, score: number | undefined) => {
+  const handleScore = (word: WordToRender, score: number) => {
     // update the score
     const newWordsToRender = wordsToRender.map((wordToRender) => {
       if (wordToRender.word?.word === word.word?.word) {

diff --git a/src/components/questions/WordInSentence.tsx b/src/components/questions/WordInSentence.tsx
@@ -3,19 +3,12 @@
 import { trpc } from "~/lib/trpc/client";
 import { cn } from "~/lib/utils";
 import { useQuerySsr } from "~/hooks/useQuerySsr";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
-import { Button } from "~/components/ui/button";
-import { Icons } from "~/components/common/icons";
 
 import { type WordToRender } from "./SentenceQuestionPractice";
 
 export function WordInSentence(props: {
   wordToRender: WordToRender;
-  onUpdateScore: (score: number | undefined) => void;
+  onUpdateScore: (score: number) => void;
 }) {
   const { wordToRender, onUpdateScore } = props;
 
@@ -25,83 +18,32 @@ export function WordInSentence(props: {
 
   // color map
   // score = undefined = blue; black  = 100; red = 0
-  const color =
-    wordToRender.score === undefined
-      ? "text-blue-700"
-      : wordToRender.score > 50
-      ? "text-black"
-      : "text-red-700";
-
-  const showGoodButton =
-    wordToRender.score === undefined || wordToRender.score < 100;
-  const showBadButton =
-    wordToRender.score === undefined || wordToRender.score > 0;
-  const showSkipButton = wordToRender.score !== undefined;
+  const color = wordToRender.score > 50 ? "text-black" : "text-red-700";
 
   // check focus by matching ID
   const isFocused = focusedWords?.some((c) => c.id === wordToRender.word?.id);
 
+  const toggleScoreGoodBad = () => {
+    if (wordToRender.score > 50) {
+      onUpdateScore(0);
+    } else {
+      onUpdateScore(100);
+    }
+  };
   return (
     <>
-      <Popover>
-        <PopoverTrigger>
-          <div className={cn("cursor-pointer", color)}>
-            <div
-              className={cn({
-                "border-b-2 border-yellow-500": isFocused,
-              })}
-            >
-              {wordToRender.displayWord}
-            </div>
-            <div className={cn("text-sm text-gray-700")}>
-              {wordToRender.word?.summaries[0]?.interval ?? 1}
-            </div>
-          </div>
-        </PopoverTrigger>
-        <PopoverContent>
-          <div className="flex flex-col gap-2">
-            {showGoodButton && (
-              <Button
-                variant="outline"
-                onClick={() => {
-                  onUpdateScore(100);
-                }}
-              >
-                <div className="flex gap-2">
-                  <Icons.thumbsUp />
-                  <span>Good</span>
-                </div>
-              </Button>
-            )}
-            {showBadButton && (
-              <Button
-                variant="outline"
-                onClick={() => {
-                  onUpdateScore(0);
-                }}
-              >
-                <div className="flex gap-2">
-                  <Icons.thumbsDown />
-                  <span>Bad</span>
-                </div>
-              </Button>
-            )}
-            {showSkipButton && (
-              <Button
-                variant="outline"
-                onClick={() => {
-                  onUpdateScore(undefined);
-                }}
-              >
-                <div className="flex gap-2">
-                  <Icons.ellipsis />
-                  <span>Skip</span>
-                </div>
-              </Button>
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
+      <div className={cn("cursor-pointer", color)} onClick={toggleScoreGoodBad}>
+        <div
+          className={cn({
+            "border-b-2 border-yellow-500": isFocused,
+          })}
+        >
+          {wordToRender.displayWord}
+        </div>
+        <div className={cn("text-sm text-gray-700")}>
+          {wordToRender.word?.summaries[0]?.interval ?? 1}
+        </div>
+      </div>
     </>
   );
 }