refactor: loader session

.eslintrc

@@ -21,7 +21,7 @@
  "comma-dangle": ["error", "only-multiline"],
  "import/no-cycle": "off",
  "import/prefer-default-export": "off",
- "no-console": ["error", { "allow": ["warn", "error"] }],
+ "no-console": ["warn", { "allow": ["warn", "error"] }],
  "react/function-component-definition": "off",
  "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }],
  "react/jsx-props-no-spreading": "off",

app/features/sessions.ts

@@ -1,7 +1,16 @@
-import { createCookieSessionStorage } from '@remix-run/node';
+import {
+ ActionFunction,
+ createCookieSessionStorage,
+ json,
+ redirect,
+} from '@remix-run/node';
 
+import { configApp, configAvailableThemes } from '~/configs';
 import { dateFns } from '~/libs';
-import { getEnvServer } from '~/utils';
+import { getEnv, getEnvServer } from '~/utils';
+
+import type { LoaderFunction } from '@remix-run/node';
+import type { LoaderDataSession, Theme } from '~/types';
 
 const currentDate = Date.now();
 const expiryInDays = 30;
@@ -26,3 +35,43 @@ export const { getSession, commitSession, destroySession } =
  secure: true,
  },
  });
+
+export const loaderSession: LoaderFunction = async ({ request }) => {
+ const session = await getSession(request.headers.get('Cookie'));
+ const themeFromSession = await session.get('theme');
+
+ // Only parse if theme string exist
+ const themeParsed: Theme = themeFromSession
+ ? JSON.parse(themeFromSession)
+ : configApp?.theme;
+
+ const currentTheme = configAvailableThemes.find((item) => {
+ return item.id === themeParsed.colorScheme;
+ });
+
+ const data: LoaderDataSession = {
+ theme: {
+ ...themeParsed,
+ currentTheme,
+ },
+ user: (await session.get('user')) || {},
+ error: (await session.get('error')) || false,
+ ENV: getEnv(),
+ };
+
+ return json(data, {
+ headers: {
+ 'Set-Cookie': await commitSession(session),
+ },
+ });
+};
+
+export const actionSession: ActionFunction = async ({ request }) => {
+ const session = await getSession(request.headers.get('Cookie'));
+
+ return redirect('/', {
+ headers: {
+ 'Set-Cookie': await commitSession(session),
+ },
+ });
+};

app/root.tsx

@@ -1,5 +1,3 @@
-import { json } from '@remix-run/node';
-
 import {
  Links,
  LiveReload,
@@ -10,8 +8,8 @@ import {
  NProgress,
  ThemeProvider,
 } from '~/components';
-import { configApp, configDocumentLinks } from '~/configs';
-import { commitSession, getSession } from '~/features';
+import { configDocumentLinks } from '~/configs';
+import { loaderSession } from '~/features';
 import {
  useEffect,
  useState,
@@ -20,7 +18,7 @@ import {
  useTransition,
 } from '~/hooks';
 import { Layout } from '~/layouts';
-import { createMetaData, getEnv } from '~/utils';
+import { createMetaData } from '~/utils';
 
 import type {
  LinksFunction,
@@ -44,28 +42,7 @@ export const meta: MetaFunction = () => {
  return createMetaData();
 };
 
-export const loader: LoaderFunction = async ({ request }) => {
- const session = await getSession(request.headers.get('Cookie'));
- const themeFromSession = await session.get('theme');
-
- // Only parse if theme string exist
- const themeParsed = themeFromSession
- ? JSON.parse(themeFromSession)
- : configApp?.theme;
-
- const data: LoaderDataSession = {
- user: await session.get('user'),
- theme: themeParsed,
- error: await session.get('error'),
- ENV: getEnv(),
- };
-
- return json(data, {
- headers: {
- 'Set-Cookie': await commitSession(session),
- },
- });
-};
+export const loader: LoaderFunction = loaderSession;
 
 export default function App() {
  return (

app/routes/examples/debug.tsx

@@ -1,12 +1,9 @@
-import { json, redirect } from '@remix-run/node';
-
-import { H1, H2, Pre, RadixScrollArea } from '~/components';
-import { configAvailableThemes, configApp, configThemes } from '~/configs';
-import { getSession, commitSession } from '~/features';
+import { H1, H2, Pre } from '~/components';
+import { loaderSession } from '~/features';
 import { useLoaderData } from '~/hooks';
 import { Layout } from '~/layouts';
 
-import type { ActionFunction, LoaderFunction, Theme } from '~/types';
+import type { LoaderFunction } from '~/types';
 import type { SEOHandle } from '~/utils';
 
 export const handle: SEOHandle = {
@@ -15,65 +12,17 @@ export const handle: SEOHandle = {
  },
 };
 
-export const loader: LoaderFunction = async ({ request }) => {
- const session = await getSession(request.headers.get('Cookie'));
- const themeFromSession = await session.get('theme');
-
- const themeParsed: Theme = themeFromSession
- ? JSON.parse(themeFromSession)
- : configApp?.theme;
-
- const sessionInfo = {
- theme: themeParsed,
- user: (await session.get('user')) || {},
- error: (await session.get('error')) || false,
- };
-
- const currentTheme = configAvailableThemes.find((item) => {
- return item.id === themeParsed.colorScheme;
- });
-
- return json({
- sessionInfo,
- currentTheme,
- themes: configThemes,
- availableThemes: configAvailableThemes,
- });
-};
-
-export const action: ActionFunction = async ({ request }) => {
- const session = await getSession(request.headers.get('Cookie'));
-
- return redirect('/', {
- headers: {
- 'Set-Cookie': await commitSession(session),
- },
- });
-};
+export const loader: LoaderFunction = loaderSession;
 
 export default function DebugRoute() {
- const { sessionInfo, currentTheme, themes, availableThemes } =
- useLoaderData();
+ const data = useLoaderData();
 
  return (
  <Layout>
  <H1>Debug</H1>
 
- <H2>Session Data</H2>
- <Pre>{sessionInfo}</Pre>
-
- <H2>Current Theme</H2>
- <Pre>{currentTheme}</Pre>
-
- <H2>Config Themes</H2>
- <RadixScrollArea>
- <Pre>{themes}</Pre>
- </RadixScrollArea>
-
- <H2>Config Available Themes</H2>
- <RadixScrollArea>
- <Pre>{availableThemes}</Pre>
- </RadixScrollArea>
+ <H2>Data</H2>
+ <Pre>{data}</Pre>
  </Layout>
  );
 }

app/utils/env.server.ts

@@ -8,12 +8,12 @@ const processEnv = {
  APP_ENV: process.env.APP_ENV /* local | development | staging | production */,
  API_URL: process.env.API_URL /* localhost | api.domain.com */,
  VERCEL: process.env.VERCEL,
- REST_ENDPOINT: process.env.REST_ENDPOINT,
- GRAPHQL_ENDPOINT: process.env.GRAPHQL_ENDPOINT,
- GRAPHCMS_ENDPOINT: process.env.GRAPHCMS_ENDPOINT,
- CONVERTKIT_API_KEY: process.env.CONVERTKIT_API_KEY,
- CONVERTKIT_FORM_ID: process.env.CONVERTKIT_FORM_ID,
  GA_MEASUREMENT_ID: process.env.GA_MEASUREMENT_ID,
+ // REST_ENDPOINT: process.env.REST_ENDPOINT,
+ // GRAPHQL_ENDPOINT: process.env.GRAPHQL_ENDPOINT,
+ // GRAPHCMS_ENDPOINT: process.env.GRAPHCMS_ENDPOINT,
+ // CONVERTKIT_API_KEY: process.env.CONVERTKIT_API_KEY,
+ // CONVERTKIT_FORM_ID: process.env.CONVERTKIT_FORM_ID,
  // Never expose the SESSION_SECRET!
 };