feat: study queue button in subject pages

Lemmmy · Oct 14, 2023 · 8c1f7b9 · 8c1f7b9
1 parent 241f821
commit 8c1f7b9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 35 deletions.
diff --git a/src/pages/subject/SubjectInfo.tsx b/src/pages/subject/SubjectInfo.tsx
@@ -36,6 +36,7 @@ import { SimpleSkeleton } from "@comp/SimpleSkeleton.tsx";
 
 export interface SubjectInfoProps {
   subject: StoredSubject;
+  showQueueButton?: boolean;
   useHintStage?: boolean;
   questionType?: "meaning" | "reading";
   charactersMax?: number;
@@ -131,6 +132,7 @@ export function SubjectInfo(props: SubjectInfoProps): JSX.Element {
       hasSingleCharacter={hasSingleCharacter}
       charactersMax={charactersMax}
 
+      showQueueButton={props.showQueueButton}
       hintStage={useHintStage ? hintStage : undefined}
       onNextHintStage={useHintStage ? nextHintStage : undefined}
 

diff --git a/src/pages/subject/SubjectInfoTopRow.tsx b/src/pages/subject/SubjectInfoTopRow.tsx
@@ -16,6 +16,7 @@ import { SubjectCharacters } from "@comp/subjects/SubjectCharacters";
 import { AudioButtons } from "@comp/subjects/AudioButtons";
 
 import { isVocabularyLike, normalizeVocabType, useBooleanSetting } from "@utils";
+import { StudyQueueButton } from "@comp/study-queue/StudyQueueButton.tsx";
 
 const PitchAccentDiagrams = lazy(() => import("./readings/PitchAccentDiagrams.tsx"));
 
@@ -25,45 +26,34 @@ interface Props {
   hasSingleCharacter?: boolean;
   charactersMax?: number;
 
+  showQueueButton?: boolean;
   hintStage?: SubjectHintStage | undefined;
   onNextHintStage?: () => void;
 
   hideMeanings?: boolean;
   hideReadings?: boolean;
   hideAudio?: boolean;
-
   autoPlayAudio?: boolean;
 
   subjectCharactersClass?: string;
   subjectCharactersFontClass?: string;
   subjectCharactersImageClass?: string;
 }
 
-export function SubjectInfoTopRow({
-  subject,
-  hasSingleCharacter,
-  charactersMax,
-
-  hintStage,
-  onNextHintStage,
-
-  hideMeanings,
-  hideReadings,
-  hideAudio,
+export function SubjectInfoTopRow(props: Props): JSX.Element {
+  const {
+    subject, hasSingleCharacter, charactersMax,
+    showQueueButton, hintStage, onNextHintStage,
+    hideMeanings, hideReadings, hideAudio, autoPlayAudio,
+    subjectCharactersClass, subjectCharactersFontClass, subjectCharactersImageClass,
+  } = props;
 
-  autoPlayAudio,
-
-  subjectCharactersClass,
-  subjectCharactersFontClass,
-  subjectCharactersImageClass,
-}: Props): JSX.Element {
   const objectType = subject.object;
   const normObjectType = normalizeVocabType(subject.object);
   const { level, meanings } = subject.data;
 
   // Used for the audio buttons
   const isVocab = isVocabularyLike(subject);
-  const vocabSubject = subject as ApiSubjectVocabulary;
 
   // Get the CommaList components for all the meanings and readings lists
   const meaningsComp = useMemo(() => <CommaList
@@ -108,16 +98,13 @@ export function SubjectInfoTopRow({
             )}
           </div>
 
-          {/* Audio buttons */}
-          {!hideAudio && isVocab && <AudioButtons
-            subject={vocabSubject}
-            autoPlay={autoPlayAudio}
-          />}
-
-          {/* Show more/Show all hint stage buttons */}
-          <HintStageButtons
+          <CommonButtons
+            subject={subject}
+            showQueueButton={showQueueButton}
+            autoPlayAudio={autoPlayAudio}
             hintStage={hintStage}
             onNextHintStage={onNextHintStage}
+            hideAudio={hideAudio}
           />
         </div>
 
@@ -160,18 +147,49 @@ export function SubjectInfoTopRow({
             )}
           </div>
 
-          {/* Audio buttons */}
-          {!hideAudio && isVocab && <AudioButtons
-            subject={vocabSubject}
-            autoPlay={autoPlayAudio}
-          />}
-
-          {/* Show more/Show all hint stage buttons */}
-          <HintStageButtons
+          <CommonButtons
+            subject={subject}
+            showQueueButton={showQueueButton}
+            autoPlayAudio={autoPlayAudio}
             hintStage={hintStage}
             onNextHintStage={onNextHintStage}
+            hideAudio={hideAudio}
           />
         </div>
       </div>
     );
 }
+
+type CommonButtonsProps = Pick<Props, "subject" | "showQueueButton" | "autoPlayAudio" | "hintStage" |
+  "onNextHintStage" | "hideAudio">;
+
+function CommonButtons({
+  subject,
+  showQueueButton,
+  autoPlayAudio,
+  hintStage,
+  onNextHintStage,
+  hideAudio
+}: CommonButtonsProps) {
+  const isVocab = isVocabularyLike(subject);
+  const vocabSubject = subject as ApiSubjectVocabulary;
+
+  return <>
+    <div className="flex flex-col gap-sm">
+      {/* Queue button */}
+      {showQueueButton && <StudyQueueButton subjectId={subject.id} />}
+
+      {/* Audio buttons */}
+      {!hideAudio && isVocab && <AudioButtons
+        subject={vocabSubject}
+        autoPlay={autoPlayAudio}
+      />}
+    </div>
+
+    {/* Show more/Show all hint stage buttons */}
+    <HintStageButtons
+      hintStage={hintStage}
+      onNextHintStage={onNextHintStage}
+    />
+  </>;
+}
diff --git a/src/pages/subject/SubjectPage.tsx b/src/pages/subject/SubjectPage.tsx
@@ -16,6 +16,7 @@ export function SubjectPage({ siteTitle, subject }: SubjectPageHook): JSX.Elemen
     <SubjectInfo
       subject={subject}
       showToc
+      showQueueButton
     />
   </PageLayout>;
 }