App Routing - Migrating Company Index (#3239)

* App Routing - Migrating Company Index

Fixed #3238

Affected Route: `/company`

* Adding partners page

* fixing the client side components rendering

app/company/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { BuiltOnAzure } from "@/components/blocks";
+import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
+import CompanyHeader from "@/components/company/companyHeader";
+import CompanyPages from "@/components/company/companyPages";
+import { Section } from "@/components/util/section";
+import { removeExtension } from "@/services/client/utils.service";
+import { Breadcrumbs } from "app/components/breadcrumb";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export default function CompanyIndexPage({ props, tinaProps }) {
+  const { data } = tinaProps;
+  const { companyPageProps } = props;
+
+  return (
+    <>
+      {data.companyIndex.headerImage?.heroBackground && (
+        <Section className="mx-auto hidden w-full sm:block">
+          <CompanyHeader
+            data={data.companyIndex.headerImage}
+            schema={data.companyIndex.headerImage}
+          />
+        </Section>
+      )}
+      {data.companyIndex.seo?.showBreadcrumb === null ||
+        (data.companyIndex.seo?.showBreadcrumb && (
+          <Section className="mx-auto w-full max-w-9xl px-8 py-5">
+            <Breadcrumbs
+              path={removeExtension(props.variables.relativePath)}
+              suffix={data.global.breadcrumbSuffix}
+              title={data.companyIndex.seo?.title}
+              seoSchema={data.companyIndex.seo}
+            />
+          </Section>
+        ))}
+      <Section className="mx-auto w-full max-w-9xl px-8 pb-4 pt-2">
+        <h1
+          className="mt-0 py-2"
+          data-tina-field={tinaField(data.companyIndex, "title")}
+        >
+          {data.companyIndex.title}
+        </h1>
+      </Section>
+      {data.companyIndex._body.children.length > 0 && (
+        <Section className="mx-auto w-full max-w-9xl px-8 py-5">
+          <div data-tina-field={tinaField(data.companyIndex, "_body")}>
+            <TinaMarkdown
+              components={componentRenderer}
+              content={data.companyIndex._body}
+            />
+          </div>
+        </Section>
+      )}
+      {data.companyIndex.companyPages?.length > 0 ? (
+        <Section className="mx-auto !bg-gray-100 px-8">
+          <CompanyPages
+            cardProps={companyPageProps}
+            schema={data.companyIndex.companyPages}
+          />
+        </Section>
+      ) : (
+        <></>
+      )}
+      <Section>
+        <BuiltOnAzure data={{ backgroundColor: "default" }} />
+      </Section>
+    </>
+  );
+}

app/company/page.tsx

@@ -0,0 +1,57 @@
+import client from "@/tina/client";
+import { TinaClient } from "app/tina-client";
+
+import { CompanyIndexProps } from "@/components/company/companyPageCard";
+import { TODAY } from "hooks/useFetchEvents";
+import { useSEO } from "hooks/useSeo";
+import { Metadata } from "next";
+import CompanyIndex from "./index";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const tinaProps = await getData();
+
+  const seo = tinaProps.props.seo;
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}/company`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+
+  return { ...seoProps };
+}
+
+const getData = async () => {
+  const tinaProps = await client.queries.companyIndexContentQuery({
+    relativePath: "index.mdx",
+    date: TODAY.toISOString(),
+  });
+
+  const seo = tinaProps.data.companyIndex.seo;
+
+  const companyPageProps =
+    tinaProps.data.companyIndex?.companyPages?.map<CompanyIndexProps>((m) => ({
+      title: m.title,
+      body: m.body,
+      pageURL: m.pageURL,
+      isExternal: m.isExternal,
+    })) || [];
+
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+      variables: tinaProps.variables,
+      seo,
+      companyPageProps,
+    },
+  };
+};
+
+export default async function Index() {
+  const { props } = await getData();
+  return <TinaClient props={props} Component={CompanyIndex} />;
+}

app/company/partners/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { PageCard } from "@/components/blocks/pageCards";
+import { Container } from "@/components/util/container";
+import { Breadcrumbs } from "app/components/breadcrumb";
+
+export default function PartnersIndex({ tinaProps }) {
+  const { data } = tinaProps;
+
+  return (
+    <>
+      <Container className="mb-10 flex-1 pt-2">
+        <Breadcrumbs path={"/Partners"} suffix="" title={"Partners"} />
+        <h1 className="mb-0 py-0 text-3xl">{data.partnerIndex.title}</h1>
+        <h2 className="mb-4 text-base">{data.partnerIndex.subTitle}</h2>
+        <div className="flex flex-col md:flex-row">
+          <div className="grid w-full grid-cols-1 gap-2 lg:grid-cols-2">
+            {data.partnerIndex.partnersList?.map((partner, index) => (
+              <PageCard page={partner} key={index} />
+            ))}
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+}

app/company/partners/page.tsx

@@ -0,0 +1,44 @@
+import client from "@/tina/client";
+import { TinaClient } from "app/tina-client";
+
+import { TODAY } from "hooks/useFetchEvents";
+import { useSEO } from "hooks/useSeo";
+import { Metadata } from "next";
+import PartnerIndex from "./index";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const tinaProps = await getData();
+
+  const seo = tinaProps.props.seo;
+  if (seo && !seo.canonical) {
+    seo.canonical = `${tinaProps.props.header.url}company/partners`;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { seoProps } = useSEO(seo);
+
+  return { ...seoProps };
+}
+
+const getData = async () => {
+  const tinaProps = await client.queries.partnerIndexQuery({
+    date: TODAY.toISOString(),
+  });
+
+  const seo = tinaProps.data.partnerIndex.seo;
+
+  return {
+    props: {
+      ...tinaProps,
+      header: {
+        url: tinaProps.data.global.header.url,
+      },
+      seo,
+    },
+  };
+};
+
+export default async function Index() {
+  const { props } = await getData();
+  return <TinaClient props={props} Component={PartnerIndex} />;
+}

app/consulting/page.tsx

@@ -11,7 +11,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
   const seo = tinaProps.props.seo;
   if (seo && !seo.canonical) {
-    seo.canonical = `${tinaProps.props.header.url}/consulting`;
+    seo.canonical = `${tinaProps.props.header.url}consulting`;
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks