Merge branch 'PennyWalker-patch-3' of https://github.com/SSWConsultin…

…g/SSW.Website into PennyWalker-patch-3

.eslintignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 dist

.eslintrc

@@ -4,20 +4,27 @@
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    "next/typescript",
+    "plugin:react/recommended",
     "plugin:tailwindcss/recommended",
-    "plugin:prettier/recommended",
     "next/core-web-vitals",
+    "plugin:prettier/recommended",
   ],
   "rules": {
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+      },
+    ],
     "quotes": ["error", "double"],
     "no-console": "warn",
     "tailwindcss/no-arbitrary-value": "error",
     "tailwindcss/no-custom-classname": [
       "error",
       {
-        "whitelist": ["g\\-yt.+", "legend"],
+        "whitelist": ["g\\-yt.+", "legend", "dark"],
       },
     ],
     "prettier/prettier": [

.prettierignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 content

.prettierrc

@@ -3,5 +3,6 @@
 	"singleQuote": false,
 	"tabWidth": 2,
 	"trailingComma": "es5",
+	"tailwindConfig": "./tailwind.config.js",
 	"plugins": ["prettier-plugin-tailwindcss"]
 }

app/articles/[filename]/page.tsx

@@ -15,7 +15,6 @@ const getData = async (
   props: UseTinaProps & ArticlePageProps["props"];
 }> => {
   const tinaProps = await getArticle(filename);
-  tinaProps.data.articlesIndex.title;
   return {
     props: {
       data: tinaProps.data,

app/articles/index.tsx

@@ -28,8 +28,6 @@ type ArticlesIndexPageProps = {
 
 function ArticlesIndexPage({ props, tinaProps }: ArticlesIndexPageProps) {
   const { data } = tinaProps;
-  data.articlesIndex;
-  data.articlesIndex.seo;
   const { dehydratedState } = props;
   return (
     <>

app/components/page-layout.tsx

@@ -6,7 +6,7 @@ type PageLayoutProps = {
 };
 const PageLayout = ({ children, megaMenu }: PageLayoutProps) => {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex h-screen min-h-screen flex-col">
       <header className="no-print">{megaMenu}</header>
       <main className="grow bg-white">{children}</main>
       <Footer />

app/consulting/[filename]/consulting2.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Blocks } from "@/components/blocks-renderer";
+import { PreFooter } from "@/components/layout/footer/pre-footer";
+import { SectionColor } from "@/components/util/constants/styles";
+import { Container } from "@/components/util/container";
+import { Section } from "@/components/util/section";
+import { Consultingv2Query } from "@/tina/types";
+
+type ConsultingV2PageProps<T> = {
+  tinaProps: {
+    data: Consultingv2Query;
+  };
+  props: T;
+};
+
+export default function ConsultingV2({
+  tinaProps,
+}: ConsultingV2PageProps<object>) {
+  const { data } = tinaProps;
+
+  return (
+    <>
+      <div className="dark flex h-full flex-col">
+        <Section color={SectionColor.ToggleLightMode}>
+          <Container width="custom" size="small" className="w-full sm:py-12">
+            <div className="w-full">
+              {data.consultingv2.blocks ? (
+                <Blocks
+                  prefix={"Consultingv2Blocks"}
+                  blocks={data.consultingv2.blocks}
+                />
+              ) : (
+                <></>
+              )}
+            </div>
+          </Container>
+        </Section>
+        <PreFooter />
+      </div>
+    </>
+  );
+}

app/consulting/[filename]/page.tsx

@@ -1,49 +1,102 @@
 import { MediaCardProps } from "@/components/consulting/mediaCard/mediaCard";
 import { getRandomTestimonialsByCategory } from "@/helpers/getTestimonials";
+import { useSEO } from "@/hooks/useSeo";
 import client from "@/tina/client";
 import "aos/dist/aos.css"; // This is important to keep the animation
 import { TODAY } from "hooks/useFetchEvents";
-import { useSEO } from "hooks/useSeo";
 import { Metadata } from "next";
 import { Open_Sans } from "next/font/google";
 import { TinaClient } from "../../tina-client";
-import ConsultingPage from "./consulting";
-
+import OldConsultingPage from "./consulting";
+import ConsultingPage2 from "./consulting2";
 const openSans = Open_Sans({
   variable: "--open-sans-font",
   subsets: ["latin"],
   display: "swap",
   weight: ["300", "400", "600"],
 });
+type NewConsultingPage = Awaited<
+  ReturnType<typeof client.queries.consultingv2>
+>;
+
+type OldConsultingPage = Awaited<
+  ReturnType<typeof client.queries.consultingContentQuery>
+>;
+
+type NewConsultingPages = Awaited<
+  ReturnType<typeof client.queries.consultingv2Connection>
+>;
+type ConsultingPages = Awaited<
+  ReturnType<typeof client.queries.consultingConnection>
+>;
 
 export const dynamicParams = false;
 
-export async function generateStaticParams() {
-  let pageListData = await client.queries.consultingConnection();
-  const allPagesListData = pageListData;
+type ConsultingPageParams = {
+  filename: string;
+};
 
-  while (pageListData.data.consultingConnection.pageInfo.hasNextPage) {
-    const lastCursor =
-      pageListData.data.consultingConnection.pageInfo.endCursor;
-    pageListData = await client.queries.consultingConnection({
-      after: lastCursor,
-    });
+async function extractAllPages(query, field: string) {
+  let consultingFetch = await query();
 
-    allPagesListData.data.consultingConnection.edges.push(
-      ...pageListData.data.consultingConnection.edges
+  const accmulatedPages = consultingFetch;
+
+  while (consultingFetch.data[field].pageInfo.hasNextPage) {
+    const lastCursor = consultingFetch.data[field].pageInfo.endCursor;
+
+    consultingFetch = await query({ after: lastCursor });
+
+    accmulatedPages.data[field].edges.push(
+      ...consultingFetch.data[field].edges
     );
   }
+  return accmulatedPages;
+}
+
+export async function generateStaticParams(): Promise<ConsultingPageParams[]> {
+  const newConsultingPages: NewConsultingPages = await extractAllPages(
+    client.queries.consultingv2Connection,
+    "consultingv2Connection"
+  );
+
+  const newConsultingPagesData: ConsultingPageParams[] =
+    newConsultingPages.data.consultingv2Connection.edges.map((page) => {
+      return { filename: page.node._sys.filename, isNewConsultingPage: true };
+    });
 
-  const pages = allPagesListData.data.consultingConnection.edges.map(
-    (page) => ({
-      filename: page.node._sys.filename,
-    })
+  const consultingPagesData: ConsultingPages = await extractAllPages(
+    client.queries.consultingConnection,
+    "consultingConnection"
   );
+  const consultingPages: ConsultingPageParams[] =
+    consultingPagesData.data.consultingConnection.edges.map((page) => {
+      return { filename: page.node._sys.filename, isNewConsultingPage: false };
+    });
 
-  return pages;
+  return [...consultingPages, ...newConsultingPagesData];
 }
 
-const getData = async (filename: string) => {
+const newConsultingPageData = async (filename: string) => {
+  const tinaProps: NewConsultingPage = await client.queries.consultingv2({
+    relativePath: `${filename}.json`,
+  });
+  const global = await client.queries.global({ relativePath: "index.json" });
+  const seo = tinaProps.data.consultingv2.seo;
+  return {
+    props: {
+      data: tinaProps.data,
+      query: tinaProps.query,
+      variables: tinaProps.variables,
+      header: {
+        url: global.data.global.header.url,
+      },
+      seo,
+      ...tinaProps,
+    },
+  };
+};
+
+const consultingPageData = async (filename: string) => {
   const tinaProps = await client.queries.consultingContentQuery({
     relativePath: `${filename}.mdx`,
     date: TODAY.toISOString(),
@@ -120,13 +173,19 @@ type GenerateMetaDataProps = {
 };
 
 export async function generateMetadata({
-  params,
+  params: { filename },
 }: GenerateMetaDataProps): Promise<Metadata> {
-  const tinaProps = await getData(params.filename);
+  const isNewConsultingPage = Boolean(await findConsultingPageType(filename));
+
+  const tinaProps = isNewConsultingPage
+    ? await newConsultingPageData(filename)
+    : await consultingPageData(filename);
 
-  const seo = tinaProps.props.seo;
+  const seo =
+    tinaProps.props.data[isNewConsultingPage ? "consultingv2" : "consulting"]
+      .seo;
   if (seo && !seo.canonical) {
-    seo.canonical = `${tinaProps.props.header.url}consulting/${params.filename}`;
+    seo.canonical = `${tinaProps.props.header.url}consulting/${filename}`;
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -138,15 +197,45 @@ export async function generateMetadata({
 export default async function Consulting({
   params,
 }: {
-  params: { filename: string };
+  params: ConsultingPageParams;
 }) {
-  const { filename } = params;
-
-  const { props } = await getData(filename);
+  const isNewConsultingPage: boolean = Boolean(
+    await findConsultingPageType(params.filename)
+  );
+  let pageData:
+    | Awaited<ReturnType<typeof consultingPageData>>
+    | Awaited<ReturnType<typeof newConsultingPageData>>;
+
+  if (isNewConsultingPage) {
+    pageData = await newConsultingPageData(params.filename);
+  } else {
+    pageData = await consultingPageData(params.filename);
+  }
+  const { props } = pageData;
 
-  return (
+  return isNewConsultingPage ? (
+    <TinaClient props={props} Component={ConsultingPage2} />
+  ) : (
     <div className={openSans.className}>
-      <TinaClient props={props} Component={ConsultingPage} />
+      <TinaClient props={props} Component={OldConsultingPage} />
     </div>
   );
 }
+
+const findConsultingPageType = async (
+  filename: string
+): Promise<ConsultingPageType> => {
+  const v2Pages = await client.queries.consultingv2Connection();
+
+  for (const page of v2Pages.data.consultingv2Connection.edges) {
+    if (page.node._sys.filename === filename) {
+      return ConsultingPageType.New;
+    }
+  }
+  return ConsultingPageType.Old;
+};
+
+enum ConsultingPageType {
+  New = 1,
+  Old = 0,
+}