Move FT progress bar to be between the breadcrumbs and the title

Author: mlt47

src/app/components/elements/FastTrackProgress.tsx

@@ -17,7 +17,7 @@ const fastTrackStates: LevelTag[] = ['ft_top_ten', 'ft_upper', 'ft_lower'];
 function getFastTrackLevel(tags?: string[]): LevelTag {
     if (!tags) throw new Error("Unknown level for undefined tags");
     for (let state of fastTrackStates) {
-        if (tags.indexOf(state) != -1) {
+        if (tags.includes(state)) {
             return state;
         }
     }
@@ -439,10 +439,10 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
         />;
     }
 
-    function createQuestionRow(conceptQuestions: AugmentedQuestion[], fastTrackLevel: string, conceptRowIndex: number) {
+    function createQuestionRow(questions: AugmentedQuestion[], fastTrackLevel: string, conceptRowIndex: number) {
         return <g key={fastTrackLevel + '-question-hexagons'}
             transform={'translate(0,' + conceptRowIndex * (6 * hexagon.quarterHeight + 2 * hexagon.padding) + ')'}>
-            {conceptQuestions.map((question, columnIndex) => (
+            {questions.map((question, columnIndex) => (
                 <g key={question.id} className={fastTrackLevel + '-question-hexagon'}
                     transform={'translate(' + columnIndex * 2 * (hexagon.halfWidth + hexagon.padding) + ', 0)'}>
                     {createQuestionHexagon(question)}
@@ -464,7 +464,7 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
     }
 
     function renderProgress(progress: Progress) {
-        return <RS.Row className="mt-sm-3">
+        return <RS.Row className="my-sm-3">
             <RS.Col cols={12} md={3} lg={4}>
                 <h4>{gameboard.title}</h4>
                 <div className="d-none d-md-block">

src/app/components/elements/TitleAndBreadcrumb.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, {ReactElement} from "react";
 import {BreadcrumbTrailProps, BreadcrumbTrail} from "./BreadcrumbTrail";
 import {PageTitleProps, PageTitle} from "./PageTitle";
 
 type TitleAndBreadcrumbProps = BreadcrumbTrailProps & PageTitleProps & {
     breadcrumbTitleOverride?: string;
+    children?: ReactElement | boolean;
 };
 
 export const TitleAndBreadcrumb = (props: TitleAndBreadcrumbProps) => {
@@ -13,6 +14,7 @@ export const TitleAndBreadcrumb = (props: TitleAndBreadcrumbProps) => {
     }
     return <React.Fragment>
         <BreadcrumbTrail {...breadcrumbProps} />
+        {props.children}
         <PageTitle {...props} />
     </React.Fragment>;
 };

src/app/components/pages/Question.tsx

@@ -77,18 +77,15 @@ export const Question = withRouter(({questionIdOverride, match, location}: Quest
 
         return <div className={`pattern-01 ${doc.subjectId || ""}`}>
             <Container>
-                {isFastTrack && <FastTrackProgress doc={doc} search={location.search} />}
-                {/*Print options*/}
                 {/*High contrast option*/}
                 <TitleAndBreadcrumb
                     currentPageTitle={title}
-                    intermediateCrumbs={[
-                        ...navigation.breadcrumbHistory,
-                        ...getTags(doc.tags)
-                    ]}
+                    intermediateCrumbs={[...navigation.breadcrumbHistory, ...getTags(doc.tags)]}
                     collectionType={navigation.collectionType}
                     level={doc.level}
-                />
+                >
+                    {isFastTrack && <FastTrackProgress doc={doc} search={location.search} />}
+                </TitleAndBreadcrumb>
                 <div className="no-print d-flex align-items-center">
                     <EditContentButton doc={doc} />
                     <div className="question-actions question-actions-leftmost mt-3">
@@ -139,7 +136,7 @@ export const Question = withRouter(({questionIdOverride, match, location}: Quest
 
                         <NavigationLinks navigation={navigation}/>
 
-                        {doc.relatedContent && doc.type !== "isaacFastTrackQuestionPage" && <RelatedContent content={doc.relatedContent} parentPage={doc} />}
+                        {doc.relatedContent && !isFastTrack && <RelatedContent content={doc.relatedContent} parentPage={doc} />}
                     </Col>
                 </Row>
             </Container>

src/app/services/fastTrack.ts

@@ -1,14 +1,3 @@
-const fastTrackStates = ['ft_top_ten', 'ft_upper', 'ft_lower'];
-
-export function getFastTrackLevel(tags: string[] | undefined) {
-    if (!tags) return;
-    for (let state of fastTrackStates) {
-        if (tags.indexOf(state) != -1) {
-            return state;
-        }
-    }
-}
-
 export function makeUrl(url: string, queryParams?: { [p: string]: string | undefined }) {
     function valueIsNotUndefined(v: [string, string | undefined]): v is [string, string] {
         return v[1] !== undefined;