rename one param in Route.TestPage (questions -> limit), add TestPage (it fetches a qualification and questions at the moment only)

pages/kwalifikacja/[slug]/test/[limit].tsx

@@ -0,0 +1,5 @@
+export { default } from 'features/QualificationPage/features/TestPage/TestPage';
+export {
+  getStaticPaths,
+  getStaticProps,
+} from 'features/QualificationPage/features/TestPage/TestPage';

src/common/SEO/SEO.tsx

@@ -4,7 +4,7 @@ import { URL } from 'config/app';
 
 import Head from 'next/head';
 
-const NAME = 'zdamegzaminzawodowy.pl';
+const NAME = 'Zdam Egzamin Zawodowy';
 const DEFAULT_DESCRIPTION =
   'zdamegzaminzawodowy.pl to ogromny baza pytań z różnych egzaminów zawodowych. Pytania pochodzą z arkuszy z lat ubiegłych.';
 

src/config/routing.ts

@@ -1,4 +1,4 @@
 export enum Route {
   IndexPage = '/',
-  TestPage = '/kwalifikacja/[slug]/test/[questions]',
+  TestPage = '/kwalifikacja/[slug]/test/[limit]',
 }

src/features/IndexPage/components/Header/TestForm.tsx

@@ -44,7 +44,10 @@ const TestForm = ({ qualification }: TestFormProps) => {
           title="Rozpocznij test"
           href={{
             pathname: Route.TestPage,
-            query: { slug: qualification.slug, questions: howManyQuestions },
+            query: {
+              slug: qualification.slug,
+              limit: howManyQuestions,
+            },
           }}
         >
           <Button variant="contained" color="secondary">

src/features/IndexPage/components/Professions/Profession.tsx

@@ -44,24 +44,24 @@ const Profession = ({ profession }: ProfessionProps) => {
                         {qualification.name} ({qualification.code})
                       </strong>{' '}
                       -&gt;{' '}
-                      {QUESTIONS.map((howManyQuestions, index) => {
+                      {QUESTIONS.map((limit, index) => {
                         return (
-                          <span key={howManyQuestions}>
+                          <span key={limit}>
                             <Link
                               href={{
                                 pathname: Route.TestPage,
                                 query: {
                                   slug: qualification.slug,
-                                  questions: howManyQuestions,
+                                  limit: limit,
                                 },
                               }}
                             >
-                              Test {howManyQuestions}{' '}
+                              Test {limit}{' '}
                               {polishPlurals(
                                 'pytanie',
                                 'pytania',
                                 'pytań',
-                                howManyQuestions
+                                limit
                               )}
                             </Link>
                             {index + 1 !== QUESTIONS.length ? ' | ' : ''}

src/features/QualificationPage/features/TestPage/TestPage.tsx

@@ -0,0 +1,102 @@
+import { GetStaticPaths, GetStaticProps } from 'next';
+import {
+  createClient,
+  Qualification,
+  Query,
+  QueryGenerateTestArgs,
+  QueryQualificationArgs,
+  Question,
+} from 'libs/graphql';
+import resolveHref from 'utils/resolveHref';
+import { QUESTIONS } from 'config/app';
+import { Route } from 'config/routing';
+import { QUERY_GENERATE_TEST, QUERY_QUALIFICATION } from './queries';
+
+import Layout from 'common/Layout/Layout';
+import SEO from 'common/SEO/SEO';
+
+export type TestPageParams = {
+  slug: string;
+  limit: string;
+};
+
+export interface TestPageProps {
+  questions: Question[];
+  suggestions: Qualification[];
+}
+
+const TestPage = () => {
+  return (
+    <Layout>
+      <SEO />
+      elo
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    fallback: 'blocking',
+    paths: [],
+  };
+};
+
+export const getStaticProps: GetStaticProps<
+  TestPageProps,
+  TestPageParams
+> = async ({ params }) => {
+  const props: TestPageProps = {
+    suggestions: [],
+    questions: [],
+  };
+
+  if (!params) return { notFound: true, revalidate: 600, props };
+  const limit = parseInt(params.limit);
+  const slug = params.slug.trim();
+  if (
+    slug.length === 0 ||
+    isNaN(limit) ||
+    !QUESTIONS.some(numOfQuestions => numOfQuestions === limit)
+  ) {
+    return {
+      props,
+      redirect: {
+        destination: resolveHref(
+          '',
+          {
+            pathname: Route.TestPage,
+            query: { ...params, limit: QUESTIONS[QUESTIONS.length - 1] },
+          },
+          true
+        )[1],
+      },
+    };
+  }
+
+  const client = createClient();
+  try {
+    const { qualification } = await client.request<
+      Pick<Query, 'qualification'>,
+      QueryQualificationArgs
+    >(QUERY_QUALIFICATION, { slug });
+    if (!qualification) {
+      throw new Error('404');
+    }
+    const { generateTest } = await client.request<
+      Pick<Query, 'generateTest'>,
+      QueryGenerateTestArgs
+    >(QUERY_GENERATE_TEST, { limit, qualificationIDs: [qualification.id] });
+    if (Array.isArray(generateTest)) {
+      props.questions = generateTest;
+    }
+  } catch (e) {
+    return { notFound: true, revalidate: 600, props };
+  }
+
+  return {
+    props,
+    revalidate: 20,
+  };
+};
+
+export default TestPage;

src/features/QualificationPage/features/TestPage/queries.ts

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-request';
+
+export const QUERY_QUALIFICATION = gql`
+  query qualification($slug: String!) {
+    qualification(slug: $slug) {
+      id
+      slug
+      name
+      code
+      formula
+    }
+  }
+`;
+
+export const QUERY_GENERATE_TEST = gql`
+  query generateTest($limit: Int!, $qualificationIDs: [ID!]!) {
+    generateTest(limit: $limit, qualificationIDs: $qualificationIDs) {
+      id
+      content
+      image
+      answerA
+      answerAImage
+      answerB
+      answerBImage
+      answerC
+      answerCImage
+      answerD
+      answerDImage
+      correctAnswer
+      updatedAt
+    }
+  }
+`;

src/utils/resolveHref.ts

@@ -0,0 +1,3 @@
+import { resolveHref } from 'next/dist/next-server/lib/router/router';
+
+export default resolveHref;