feat: create session cookie and set session cookie

app/routes/action/set-theme.tsx

@@ -0,0 +1,25 @@
+import { json } from '@remix-run/node';
+import type { ActionFunction } from '@remix-run/node';
+
+import { getThemeSession } from '~/utils/theme.server';
+import { isTheme } from '~/utils/theme-provider';
+
+export const action: ActionFunction = async ({ request }) => {
+  const themeSession = await getThemeSession(request);
+  const requestText = await request.text();
+  const form = new URLSearchParams(requestText);
+  const theme = form.get('theme');
+
+  if (!isTheme(theme)) {
+    return json({
+      success: false,
+      message: `theme value of ${theme} is not a valid theme`,
+    });
+  }
+
+  themeSession.setTheme(theme);
+  return json(
+    { success: true },
+    { headers: { 'Set-Cookie': await themeSession.commit() } },
+  );
+};

app/utils/theme.server.ts

@@ -0,0 +1,34 @@
+import { createCookieSessionStorage } from '@remix-run/node';
+
+import type { Theme } from './theme-provider';
+import { isTheme } from './theme-provider';
+
+const sessionSecret = process.env.SESSION_SECRET;
+if (!sessionSecret) {
+  throw new Error('SESSION_SECRET must be set');
+}
+
+const themeStorage = createCookieSessionStorage({
+  cookie: {
+    name: 'my_remix_theme',
+    secure: true,
+    secrets: [sessionSecret],
+    sameSite: 'lax',
+    path: '/',
+    httpOnly: true,
+  },
+});
+
+async function getThemeSession(request: Request) {
+  const session = await themeStorage.getSession(request.headers.get('Cookie'));
+  return {
+    getTheme: () => {
+      const themeValue = session.get('theme');
+      return isTheme(themeValue) ? themeValue : null;
+    },
+    setTheme: (theme: Theme) => session.set('theme', theme),
+    commit: () => themeStorage.commitSession(session),
+  };
+}
+
+export { getThemeSession };