[WIP] Prerender stats pages for faster production builds

src/components/CommonPage.tsx

@@ -43,16 +43,11 @@ const CommonPage = ({
       context === "zenika"
         ? skill && category
           ? `/skills/zenika/${category}`
-          : "/zenika"
+          : `/zenika/${agency || "World"}`
         : "/"
     }`
   );
-  if (agency) {
-    backUrl.searchParams.append(
-      "agency",
-      typeof agency === "string" ? agency : agency.join("")
-    );
-  }
+
   return (
     <div className="flex flex-row justify-center w-full overflow-y-hidden">
       <div className="flex flex-col w-full">

src/components/Navbar.tsx

@@ -38,16 +38,16 @@ const Navbar = ({ path }: { path: string }) => {
         </Link>
       </div>
       <div className="w-1/3">
-        <Link href="/zenika">
+        <Link href="/zenika/World">
           <div className="flex flex-initial flex-col justify-between cursor-pointer">
-            {path === "/zenika" ? (
+            {path.includes("/zenika") ? (
               <Image src="/icons/nav-selected.svg" width="25" height="2" />
             ) : (
               <div className="h-px" />
             )}
             <Image
               src={
-                path === "/zenika"
+                path.includes("/zenika")
                   ? "/icons/zenika-selected.svg"
                   : "/icons/zenika.svg"
               }

src/components/Topbar.tsx

@@ -99,11 +99,11 @@ const Topbar = ({
                   </Link>
                 </div>
                 <div className="w-36">
-                  <Link href="/zenika">
+                  <Link href="/zenika/World">
                     <div className="flex flex-initial flex-col justify-between cursor-pointer">
                       <Image
                         src={
-                          context === "zenika" || path === "/zenika"
+                          context === "zenika" || path.includes("/zenika")
                             ? "/icons/zenika-selected.svg"
                             : "/icons/zenika.svg"
                         }
@@ -114,7 +114,7 @@ const Topbar = ({
                       <span className="text-center">
                         {t("nav.zenikaSkills")}
                       </span>
-                      {context === "zenika" || path === "/zenika" ? (
+                      {context === "zenika" || path.includes("/zenika") ? (
                         <div className="flex flex-row justify-center w-full h-0.5">
                           <div className="w-3/4 h-full gradient-red" />
                         </div>

src/pages/zenika.tsx → src/pages/zenika/[agency].tsx

@@ -1,13 +1,11 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import HomePanel from "../components/HomePanel";
-import Loading from "../components/Loading";
-import { gql, useQuery } from "@apollo/client";
-import PageWithNavAndPanel from "../components/PageWithNavAndPanel";
+import HomePanel from "../../components/HomePanel";
+import Loading from "../../components/Loading";
+import PageWithNavAndPanel from "../../components/PageWithNavAndPanel";
 import { useRouter } from "next/router";
-import FilterByPanel, { Filter } from "../components/FilterByPanel";
 import { useEffect, useState } from "react";
-import { FilterData } from "../utils/types";
-import { useComputeFilterUrl } from "../utils/useComputeFilterUrl";
+import { FilterData } from "../../utils/types";
+import { GetStaticPaths, GetStaticProps } from "next";
 
 type SkillsData = {
   Category: {
@@ -31,7 +29,7 @@ type SkillsData = {
   }[];
 };
 
-const computeZenikaSkillsQuery = ({ agency }: { agency?: string }) => gql`
+const computeZenikaSkillsQuery = ({ agency }: { agency?: string }) => `
   query getSkillsAndTechnicalAppetites${agency ? "($agency: String!)" : ""} {
     Category(order_by: {index: asc}) {
       label
@@ -50,7 +48,7 @@ const computeZenikaSkillsQuery = ({ agency }: { agency?: string }) => gql`
       AverageCurrentSkillsAndDesires_aggregate: ${
         agency ? "Agencies" : "Zenikas"
       }AverageCurrentSkillsAndDesires_aggregate ${
-  agency ? `(where: {agency: {_eq: $agency}})` : ""
+  agency ? `(where: {agency: {_ilike: $agency}})` : ""
 } {
         aggregate {
           count(columns: skillId, distinct: true)
@@ -63,28 +61,14 @@ const computeZenikaSkillsQuery = ({ agency }: { agency?: string }) => gql`
   }
 `;
 
-const Zenika = ({ pathName }) => {
-  const { user, isLoading } = useAuth0();
+const Zenika = ({ pathName, skillsData, error }) => {
   const { query, push } = useRouter();
   const { context, agency } = query;
 
   const [filterByAgency, setFilterByAgency] = useState<
     FilterData<string> | undefined
   >(undefined);
 
-  const { data: skillsData, error } = useQuery<SkillsData>(
-    computeZenikaSkillsQuery({
-      agency: filterByAgency?.selected
-        ? filterByAgency?.selected === "World"
-          ? undefined
-          : filterByAgency?.selected
-        : undefined,
-    }),
-    {
-      variables: { email: user.email, agency: filterByAgency?.selected },
-      fetchPolicy: "network-only",
-    }
-  );
   useEffect(() => {
     setFilterByAgency({
       name: "Agency",
@@ -129,10 +113,7 @@ const Zenika = ({ pathName }) => {
                 selected: filterByAgency.selected,
                 callback: (value) =>
                   push(
-                    useComputeFilterUrl(
-                      `${window.location}`,
-                      value ? [{ name: "agency", value: `${value}` }] : []
-                    )
+                    `${window.location.protocol}//${window.location.host}/zenika/${value}`
                   ),
               },
             ]
@@ -157,4 +138,84 @@ const Zenika = ({ pathName }) => {
   );
 };
 
+const NEXT_PUBLIC_GRAPHQL_URL = process.env.NEXT_PUBLIC_GRAPHQL_URL;
+if (!NEXT_PUBLIC_GRAPHQL_URL) {
+  throw new Error("NEXT_PUBLIC_GRAPHQL_URL env variable is not set");
+}
+
+const fetcher = async (
+  url: string,
+  key: string,
+  query: string,
+  variables: { [key: string]: number | boolean | string }
+) => {
+  const result = await fetch(url, {
+    headers: { "x-hasura-admin-secret": `${key}` },
+    method: "POST",
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  });
+  if (!result.ok) {
+    return { error: await result.json() };
+  }
+  return { data: await result.json() };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const HASURA_ADMIN_SECRET = process.env.HASURA_ADMIN_SECRET;
+  if (!HASURA_ADMIN_SECRET) {
+    throw new Error("HASURA_ADMIN_SECRET env variable is not set");
+  }
+  const agency = context.params?.agency;
+  const computedAgency =
+    agency === "World" || typeof agency !== "string" ? undefined : agency;
+  const { data: skillsData, error } = await fetcher(
+    NEXT_PUBLIC_GRAPHQL_URL,
+    HASURA_ADMIN_SECRET,
+    computeZenikaSkillsQuery({
+      agency: computedAgency,
+    }),
+    { agency: computedAgency }
+  );
+
+  return {
+    props: {
+      skillsData: skillsData.data,
+    },
+    revalidate: 300,
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const HASURA_ADMIN_SECRET = process.env.HASURA_ADMIN_SECRET;
+  if (!HASURA_ADMIN_SECRET) {
+    throw new Error("HASURA_ADMIN_SECRET env variable is not set");
+  }
+  const agencyQuery = `
+    {
+      Agency {
+        name
+      }
+    }
+  `;
+  const { data: agencies, error } = await fetcher(
+    NEXT_PUBLIC_GRAPHQL_URL,
+    HASURA_ADMIN_SECRET,
+    agencyQuery,
+    {}
+  );
+  const paths = ["en", "fr"]
+    .map((locale) => [
+      { params: { agency: "World" }, locale },
+      ...agencies?.data?.Agency?.map((agency) => ({
+        params: { agency: agency.name },
+        locale,
+      })),
+    ])
+    .reduce((previous, current) => [...previous, ...current]);
+  return { paths, fallback: true };
+};
+
 export default Zenika;