From f49e93e6596853cbd525ef8568516f34734d4d89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?=
 <miguel.barrenechea@vizzuality.com>
Date: Thu, 16 Nov 2023 13:26:39 +0100
Subject: [PATCH] Project filters: server side

---
 client/src/app/(app)/layout.tsx | 10 +++++++++-
 client/src/app/store.ts         |  1 +
 client/src/middleware.ts        | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 client/src/middleware.ts

diff --git a/client/src/app/(app)/layout.tsx b/client/src/app/(app)/layout.tsx
index 9258a0af..583a96f3 100644
--- a/client/src/app/(app)/layout.tsx
+++ b/client/src/app/(app)/layout.tsx
@@ -1,6 +1,9 @@
 import { PropsWithChildren } from "react";
 
+import { headers } from "next/headers";
+
 import { Hydrate, dehydrate } from "@tanstack/react-query";
+import { parseAsArrayOf, parseAsInteger } from "next-usequerystate";
 
 import getQueryClient from "@/lib/react-query/getQueryClient";
 
@@ -20,6 +23,11 @@ import Sidebar from "@/containers/sidebar";
 import LayoutProviders from "./layout-providers";
 
 export default async function AppLayout({ children }: PropsWithChildren) {
+  const url = new URL(headers().get("x-url")!);
+  const searchParams = url.searchParams;
+
+  const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
+
   const queryClient = getQueryClient();
 
   // Prefetch countries
@@ -66,7 +74,7 @@ export default async function AppLayout({ children }: PropsWithChildren) {
   await queryClient.prefetchQuery({
     ...getGetProjectsQueryOptions(
       GET_PROJECTS_OPTIONS("", {
-        pillars: [],
+        pillars: pillarsParser.parseServerSide(searchParams.get("pillars") || []),
       }),
     ),
   });
diff --git a/client/src/app/store.ts b/client/src/app/store.ts
index 8dc3c809..2575871a 100644
--- a/client/src/app/store.ts
+++ b/client/src/app/store.ts
@@ -51,6 +51,7 @@ export const useSyncCountriesComparison = () => {
 export const useSyncProject = () => {
   return useQueryState("project", parseAsInteger);
 };
+
 const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
 export const useSyncPillars = () => {
   return useQueryState("pillars", pillarsParser);
diff --git a/client/src/middleware.ts b/client/src/middleware.ts
new file mode 100644
index 00000000..53cd376b
--- /dev/null
+++ b/client/src/middleware.ts
@@ -0,0 +1,15 @@
+// /middleware.ts
+import { NextResponse } from "next/server";
+
+export function middleware(request: Request) {
+  // Store current request url in a custom header, which you can read later
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-url", request.url);
+
+  return NextResponse.next({
+    request: {
+      // Apply new request headers
+      headers: requestHeaders,
+    },
+  });
+}