From f9f43255a4d8030a76a0aa49859b64c9860f37d2 Mon Sep 17 00:00:00 2001
From: slackermorris <35620369+slackermorris@users.noreply.github.com>
Date: Sun, 5 Mar 2023 16:20:13 +1300
Subject: [PATCH] feature: actually specify cache control headers, especially
 for the braindump content page (#57)

---
 app/routes/braindumps.list.$braindumpId.tsx | 21 +++++++++++++++------
 app/routes/braindumps.tsx                   |  6 ++++--
 app/routes/braindumps/list.tsx              |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/routes/braindumps.list.$braindumpId.tsx b/app/routes/braindumps.list.$braindumpId.tsx
index 65c5cac..2262695 100644
--- a/app/routes/braindumps.list.$braindumpId.tsx
+++ b/app/routes/braindumps.list.$braindumpId.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useEffect, useState, Fragment, useMemo } from "react";
-import { json } from "@remix-run/node";
+import { HeadersFunction, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
@@ -155,11 +155,20 @@ export const loader = async ({
     );
   }
 
-  return json({
-    braindumpMeta: response,
-    braindumpContent: blocks,
-    braindumpContentReferences: references,
-  });
+  const headers = { "Cache-Control": "max-age=3600" };
+
+  return json(
+    {
+      braindumpMeta: response,
+      braindumpContent: blocks,
+      braindumpContentReferences: references,
+    },
+    { headers }
+  );
+};
+
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+  return { "Cache-Control": loaderHeaders.get("Cache-Control")! };
 };
 
 export const links = () => {
diff --git a/app/routes/braindumps.tsx b/app/routes/braindumps.tsx
index cdf1836..acb9f30 100644
--- a/app/routes/braindumps.tsx
+++ b/app/routes/braindumps.tsx
@@ -110,8 +110,10 @@ const SummaryPanelWithBostockAnimation = () => {
   );
 };
 
-export const headers: HeadersFunction = ({ loaderHeaders }) => {
-  return { "Cache-Control": loaderHeaders.get("Cache-Control")! };
+export const headers: HeadersFunction = () => {
+  return {
+    "Cache-Control": "s-maxage=3600",
+  };
 };
 
 export default function BraindumpsIndex() {
diff --git a/app/routes/braindumps/list.tsx b/app/routes/braindumps/list.tsx
index 17b2360..768f265 100644
--- a/app/routes/braindumps/list.tsx
+++ b/app/routes/braindumps/list.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useEffect, useState } from "react";
 import { useLoaderData, useCatch } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
@@ -73,7 +74,6 @@ export function CatchBoundary() {
   }
 }
 
-// TODO: write note about how remix handles styles, particularly for a component library
 export const links = () => {
   return [
     {