App router - Migrated /training/internship-fullstack page (#3393)

* migrated training page to app router

* deleted old training page

* fix seo

app/training/[filename]/index.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Breadcrumbs } from "@/app/components/breadcrumb";
+import { Blocks } from "@/components/blocks-renderer";
+import { ClientLogos } from "@/components/blocks/clientLogos";
+import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
+import { TestimonialRow } from "@/components/testimonials/TestimonialRow";
+import TrainingCarousel from "@/components/training/trainingHeader";
+import { Container } from "@/components/util/container";
+import { Section } from "@/components/util/section";
+import VideoCards, { VideoCardType } from "@/components/util/videoCards";
+import { sanitiseXSS, spanWhitelist } from "@/helpers/validator";
+import { removeExtension } from "@/services/client/utils.service";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export default function TrainingPage({ props, tinaProps }) {
+  const { data } = tinaProps;
+  const videoCardProps: VideoCardType[] =
+    data?.training.videos?.videoCards?.map((video) => ({
+      title: video.title,
+      link: video.link,
+    })) || [];
+
+  return (
+    <>
+      <div data-tina-field={tinaField(data.training, "trainingHeaderCarousel")}>
+        <TrainingCarousel data={data.training.trainingHeaderCarousel} />
+      </div>
+      <Container padding={"md:px-8 px-0"} className="pt-2">
+        {(data.training.seo?.showBreadcrumb === null ||
+          data.training.seo?.showBreadcrumb) && (
+          <div
+            data-tina-field={tinaField(data.training.seo, "title")}
+            className="px-8 md:px-8"
+          >
+            <Breadcrumbs
+              path={removeExtension(props.variables.relativePath)}
+              title={data.training?.seo?.title}
+            />
+          </div>
+        )}
+        <h1
+          data-tina-field={tinaField(data.training, "title")}
+          className="py-0 text-center text-5xl font-semibold"
+          dangerouslySetInnerHTML={{
+            __html: sanitiseXSS(data.training.title, spanWhitelist),
+          }}
+        />
+
+        <Blocks prefix="Training_body" blocks={data.training._body} />
+
+        <div data-tina-field={tinaField(data.training, "videos")}>
+          <VideoCards
+            cardProps={videoCardProps}
+            channelLink={data.training.videos?.channelLink}
+            defaultChannelLink={data.global.youtubeChannelLink}
+          />
+        </div>
+
+        {data.training.showTestimonials && (
+          <Section color="white" className="">
+            <Container padding={"md:px-8 px-2"} className={"flex-1 pt-0"}>
+              <div
+                data-tina-field={tinaField(
+                  data.training.testimonials,
+                  "tagline"
+                )}
+                className="mx-auto flex max-w-9xl flex-col items-center"
+              >
+                <TestimonialRow
+                  testimonialsResult={props.testimonialResult}
+                  categories={["Internship"]}
+                  tagline={data.training.testimonials?.tagline}
+                />
+              </div>
+            </Container>
+          </Section>
+        )}
+
+        <Section color="white">
+          <Container padding={"md:px-8 px-4"} className={"flex-1 pt-0"}>
+            <div className="flex flex-col items-center pb-15 text-center">
+              <h2>
+                Trusted by more than <span className="text-sswRed">1000+</span>{" "}
+                clients in the world
+              </h2>
+              <p className="max-w-3xl text-lg font-light text-gray-500">
+                Our software developers & consultants have delivered the best in
+                the business to more than 1,000 clients in 15 countries.
+              </p>
+            </div>
+            <ClientLogos />
+          </Container>
+        </Section>
+      </Container>
+      <div data-tina-field={tinaField(data.training, "footer")}>
+        <TinaMarkdown
+          content={data.training.footer}
+          components={componentRenderer}
+        />
+      </div>
+    </>
+  );
+}

app/training/[filename]/page.tsx

@@ -0,0 +1,70 @@
+import { getTestimonialsByCategories } from "@/helpers/getTestimonials";
+import { TODAY } from "@/hooks/useFetchEvents";
+import { useSEO } from "@/hooks/useSeo";
+import client from "@/tina/client";
+import { Metadata } from "next";
+import TrainingPage from ".";
+import { TinaClient } from "../../tina-client";
+
+export const dynamicParams = false;
+
+type GenerateMetaDataProps = {
+  params: { filename: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({
+  params,
+}: GenerateMetaDataProps): Promise<Metadata> {
+  const tinaProps = await getData(params.filename);
+  const seo = tinaProps.props.seo;
+
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}training/${params.filename}`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+  return { ...seoProps };
+}
+
+export async function generateStaticParams() {
+  const pagesListData = await client.queries.trainingConnection();
+
+  return pagesListData.data.trainingConnection.edges.map((page) => ({
+    filename: page.node._sys.filename,
+  }));
+}
+
+const getData = async (filename: string) => {
+  const tinaProps = await client.queries.trainingContentQuery({
+    relativePath: `${filename}.mdx`,
+    date: TODAY.toISOString(),
+  });
+
+  const testimonialsResult = await getTestimonialsByCategories(["Internship"]);
+
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      testimonialResult: testimonialsResult || [],
+      seo: tinaProps.data.training.seo,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+    },
+  };
+};
+
+export default async function Training({
+  params,
+}: {
+  params: { filename: string };
+}) {
+  const { filename } = params;
+  const { props } = await getData(filename);
+
+  return <TinaClient props={props} Component={TrainingPage} />;
+}