feat: add A320 question bank

README.md

@@ -66,6 +66,7 @@ can and will be introduced in patch releases.
 | base-types                   | Base Business types used across the app                     |
 | content-interview-flashcards | Content bank for the interview prep module                  |
 | content-question-bank-737    | Content bank for the 737 TR module                          |
+| content-question-bank-a320   | Content bank for the A320 TR module                         |
 | content-question-bank-atpl   | Content bank for the ATPL theory module                     |
 | core-analytics               | Analytics provider (currently a custom solution)            |
 | core-app                     | Business logic blocks sharable between React SPA/SSR and RN |

apps/next-app/pages/articles/blog/002-question-editor-release.page.mdx

@@ -4,7 +4,6 @@ import { default as OpenInNewIcon } from "@mui/icons-material/OpenInNew";
 import { Sheet } from "@mui/joy";
 import { default as dedent } from "ts-dedent";
 import { MarkdownClientDemo } from "@chair-flight/react/components";
-import { QuestionSearchDemo } from "@chair-flight/react/containers";
 import { BlogPageLayout } from "./_blog-page.layout";
 
 export const meta = {
@@ -39,14 +38,12 @@ Today we are releasing one essential piece of the puzzle to make that happen.
 
 ## Finding questions
 
-In case you don't know it yet, you can [search for questions](/questions).
-
-<QuestionSearchDemo />
+In case you don't know it yet, you can [search for questions](/modules/atpl/questions).
 
 Our entire question bank is free and open for you to explore. But not all our
 questions are created equal. Some are better than others. Whenever you find a
 question that could be improved... now you can do it by pressing the
-[Edit](/questions/QDL7KCZC7I/edit) button.
+[Edit](/modules/atpl/questions/QDL7KCZC7I/edit) button.
 
 Our question editor is designed to be as intuitive as possible, but there are
 still a few things you should know about it.

apps/next-app/pages/articles/blog/004-webapp-redesign.page.mdx

@@ -77,6 +77,8 @@ without being distracted by contents that are not geared towards them.
   />
 </Stack>
 
+**See you in the skies!**
+
 export default ({ children }) => (
   <BlogPageLayout meta={meta}>{children}</BlogPageLayout>
 );

apps/next-app/pages/articles/blog/005-new-a320-question-bank.page.mdx

@@ -0,0 +1,47 @@
+import { Suspense } from "react";
+import { useRouter } from "next/router";
+import { NoSsr } from "@mui/base";
+import { default as AirplaneTicketIcon } from "@mui/icons-material/AirplaneTicket";
+import { default as FlightTakeoffIcon } from "@mui/icons-material/FlightTakeoff";
+import { default as StyleIcon } from "@mui/icons-material/Style";
+import { Stack, Link } from "@mui/joy";
+import { ModuleSelectionButton } from "@chair-flight/react/components";
+import { TestMaker, useTestProgress } from "@chair-flight/react/containers";
+import { BlogPageLayout } from "./_blog-page.layout";
+
+export const meta = {
+  title: "New A320 Question Bank!",
+  linkTitle: "New A320 Question Bank!",
+  file: "005-new-a320-question-bank",
+  description: [
+    "In order to keep our focus we decided to restructure our application in three ",
+    "different segments. The main ovjective with this refactor is to allow students",
+    "on each of the 3 stages of their aeronautical careers a customized experience ",
+    "without being distracted by contents that are not geared towards them. ",
+  ].join(""),
+  tags: ["Feature"],
+  author: "PupoSDC",
+  isoDate: "2023-12-18T20:00:00.000Z",
+};
+
+# New A320 Question Bank!
+
+Today we are adding a new question bank to our application. This time we are
+showing some love to all aspiring A320 pilots out there.
+
+<br />
+
+This question bank is based on the official Airbus A320 FCOM and it is
+available for free to all our users.
+
+<br />
+
+You can get started here: [A320 Question Bank](/modules/a320)
+
+<br />
+
+**See you in the skies!**
+
+export default ({ children }) => (
+  <BlogPageLayout meta={meta}>{children}</BlogPageLayout>
+);

apps/next-app/pages/articles/blog/_blog-page.layout.tsx

@@ -62,11 +62,11 @@ export const BlogPageLayout: FunctionComponent<BlogPageLayoutProps> = ({
               <Typography
                 level="h2"
                 component="h1"
-                sx={{ fontWeight: "bold", mb: 0.5 }}
+                sx={{ fontWeight: "bold" }}
                 children={children}
               />
-              <Divider sx={{ width: "100%", my: 2 }} />
-              <Box>
+              <Divider sx={{ width: "100%", mb: 1 }} />
+              <Box sx={{ mb: 2 }}>
                 {meta.tags.map((tag) => (
                   <BlogPostChip
                     key={tag}

apps/next-app/pages/index.page.tsx

@@ -5,28 +5,23 @@ import { default as AirplaneTicketIcon } from "@mui/icons-material/AirplaneTicke
 import { default as ChevronRightIcon } from "@mui/icons-material/ChevronRight";
 import { default as FlightTakeoffIcon } from "@mui/icons-material/FlightTakeoff";
 import { default as StyleIcon } from "@mui/icons-material/Style";
-import {
-  Box,
-  styled,
-  Grid,
-  Typography,
-  Button,
-  Link,
-  Divider,
-  GlobalStyles,
-} from "@mui/joy";
+import { Box, styled, Grid, Typography, Button, Link, Divider } from "@mui/joy";
 import {
   CoolSlidingThing,
   CountUp,
   ModuleSelectionButton,
   Typical,
-  getGlobalColorScheme,
 } from "@chair-flight/react/components";
-import { AppHead, LayoutPublic } from "@chair-flight/react/containers";
+import {
+  AppHead,
+  GlobalColorScheme,
+  LayoutPublic,
+} from "@chair-flight/react/containers";
 import {
   getTrpcHelper,
   preloadContentForStaticRender,
 } from "@chair-flight/trpc/server";
+import type { GlobalColorSchemeProps } from "@chair-flight/react/containers";
 import type { GetStaticProps, NextPage } from "next";
 
 const fadeIn = keyframes`
@@ -48,6 +43,7 @@ const RightContainer = styled(Grid)`
 type IndexPageProps = {
   numberOfAtplQuestions: number;
   numberOf737Questions: number;
+  numberOfA320Questions: number;
   numberOfFlashcards: number;
 };
 
@@ -59,12 +55,13 @@ export const IndexPage: NextPage<IndexPageProps> = ({
   numberOfFlashcards,
   numberOfAtplQuestions,
   numberOf737Questions,
+  numberOfA320Questions,
 }) => {
   const rightSideContainer = useRef<HTMLDivElement>(null);
-  const [activeTheme, setActiveTheme] = useState<Theme | undefined>();
+  const [module, setModule] = useState<GlobalColorSchemeProps["module"]>();
 
   const goToTheme = (theme: Theme) => {
-    setActiveTheme(theme);
+    setModule(theme);
     const top = rightSideContainer.current?.offsetTop ?? 0;
     setTimeout(
       () => window.scrollTo({ top: top - 50, behavior: "smooth" }),
@@ -76,21 +73,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
 
   return (
     <LayoutPublic fixedHeight noPadding background={<CoolSlidingThing />}>
-      <GlobalStyles
-        styles={(t) => {
-          const palette = t.colorSchemes.light.palette;
-          switch (activeTheme) {
-            case "737":
-              return getGlobalColorScheme(palette.primaryRose);
-            case "prep":
-              return getGlobalColorScheme(palette.primaryTeal);
-            case "atpl":
-              return getGlobalColorScheme(palette.primaryBlue);
-            default:
-              return getGlobalColorScheme(palette.primaryBlue);
-          }
-        }}
-      />
+      <GlobalColorScheme module={module} />
       <AppHead
         linkDescription={[
           "Chair Flight is a community driven Aviation Question Bank built by ",
@@ -188,7 +171,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 "Explore questions, learning objectives, and theory reviews ",
                 "from the EASA QB ATPL exams.",
               ].join("")}
-              active={activeTheme === "atpl"}
+              active={module === "atpl"}
               icon={<AirplaneTicketIcon />}
               onClick={() => goToTheme("atpl")}
               showMoreHref="/modules/atpl"
@@ -202,7 +185,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 "Use our flash cards to practice answering open ended ",
                 "questions and secure your first job.",
               ].join("")}
-              active={activeTheme === "prep"}
+              active={module === "prep"}
               icon={<StyleIcon />}
               onClick={() => goToTheme("prep")}
               showMoreHref="/modules/prep"
@@ -211,11 +194,12 @@ export const IndexPage: NextPage<IndexPageProps> = ({
               fullWidth
               sx={{ mb: { xs: 1, md: 2 } }}
               color={"rose"}
-              title={"737 Type rating"}
-              active={activeTheme === "737"}
+              title={"Type Rating"}
+              active={["737", "a320"].includes(module ?? "")}
               description={[
                 `Prepare or review your theory knowledge for a type rating `,
-                `on the Boeing 737 with ${numberOf737Questions} questions.`,
+                `on the Boeing 737 with ${numberOf737Questions} questions, `,
+                `or the Airbus A320 with ${numberOfA320Questions} questions.`,
               ].join("")}
               icon={<FlightTakeoffIcon />}
               onClick={() => goToTheme("737")}
@@ -258,7 +242,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
           })}
         >
           <NoSsr>
-            {activeTheme === "atpl" && (
+            {module === "atpl" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"
@@ -327,7 +311,7 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 </Grid>
               </RightContainer>
             )}
-            {activeTheme === "prep" && (
+            {module === "prep" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"
@@ -366,38 +350,27 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                 />
               </RightContainer>
             )}
-            {activeTheme === "737" && (
+            {module === "737" && (
               <RightContainer container xs={6}>
                 <Typography
                   level="h3"
                   component="h2"
                   sx={{ fontSize: { md: "3em" }, lineHeight: 1.2 }}
                 >
-                  {`Review your 737 knowledge with `}
-                  <CountUp
-                    component={"span"}
-                    end={numberOf737Questions}
-                    duration={2000}
-                    sx={{
-                      color: "primary.500",
-                      width: "2.0em",
-                      display: "inline-flex",
-                      justifyContent: "flex-end",
-                    }}
-                  />
-                  {` questions`}
+                  {`Prepare your next Type Rating exam`}
                 </Typography>
                 <Typography level="h4" component="p" sx={{ mt: 2 }}>
-                  Review the most commonly asked questions during a 737 type
-                  rating initial tech exam.
+                  Review the most commonly asked tech knowledge questions for
+                  the 2 most popular aircraft in the world: the Airbus A320 and
+                  Boeing 737
                 </Typography>
                 <Grid container spacing={2} sx={{ pt: 2 }}>
                   <Grid xs={12} sm={6}>
                     <Button
                       fullWidth
                       size="lg"
                       component={Link}
-                      children={"Explore Questions"}
+                      children={"Explore 737 Questions"}
                       href="/modules/737/questions"
                     />
                   </Grid>
@@ -406,10 +379,28 @@ export const IndexPage: NextPage<IndexPageProps> = ({
                       fullWidth
                       size="lg"
                       component={Link}
-                      children={"Create a Test"}
+                      children={"Create 737 Test"}
                       href="/modules/737/tests/create"
                     />
                   </Grid>
+                  <Grid xs={12} sm={6}>
+                    <Button
+                      fullWidth
+                      size="lg"
+                      component={Link}
+                      children={"Explore A320 Questions"}
+                      href="/modules/a320/questions"
+                    />
+                  </Grid>
+                  <Grid xs={12} sm={6}>
+                    <Button
+                      fullWidth
+                      size="lg"
+                      component={Link}
+                      children={"Create A320 Test"}
+                      href="/modules/a320/tests/create"
+                    />
+                  </Grid>
                 </Grid>
               </RightContainer>
             )}
@@ -428,17 +419,20 @@ export const getStaticProps: GetStaticProps<IndexPageProps> = async () => {
     { count: numberOfFlashcards },
     { count: numberOfAtplQuestions },
     { count: numberOf737Questions },
+    { count: numberOfA320Questions },
   ] = await Promise.all([
     helper.interviewPrep.getNumberOfFlashcards.fetch(),
-    helper.questionBankAtpl.getNumberOfQuestions.fetch(),
-    helper.questionBank737.getNumberOfQuestions.fetch(),
+    helper.questionBank.getNumberOfQuestions.fetch({ questionBank: "atpl" }),
+    helper.questionBank.getNumberOfQuestions.fetch({ questionBank: "737" }),
+    helper.questionBank.getNumberOfQuestions.fetch({ questionBank: "a320" }),
   ]);
 
   return {
     props: {
       numberOfFlashcards,
       numberOfAtplQuestions,
       numberOf737Questions,
+      numberOfA320Questions,
     },
   };
 };