export type LoaderData = {
  url: string;
  requestInfo?: {
    title?: string;
    description?: string;
  };
};

// Be called on the server before rendering
export const loader: LoaderFunction = async ({ request }) => {
  return json<LoaderData>({
    url: request.url,
  });
};

export const meta: MetaFunction = ({ data }) => {
  const requestInfo = (data as LoaderData | undefined)?.requestInfo;
  return {
    ...getSocialMetas({
      url: data?.url,
      title: requestInfo?.title,
      description: requestInfo?.description,
    }),
  };
};

import { MY_ICON } from '@company/shared';

export function getSocialMetas({
  image = MY_ICON,
  url = 'https://my.company.com',
  title = 'My Company',
  description = 'We are a great company',
  charset = 'utf-8',
  viewport = 'width=device-width,initial-scale=1,viewport-fit=cover',
  keywords = 'Web, Mobile, Services, APIs, Games, WebSites',
}: {
  url: string
  image?: string
  title?: string
  description?: string
  keywords?: string,
  charset?: 'utf-8',
  viewport?: string,
}) {
  return {
    charset,
    viewport,
    title,
    description,
    keywords,
    image,
    'og:url': url,
    'og:title': title,
    'og:description': description,
    'twitter:creator': '@jdnichollsc',
    'twitter:title': title,
    'twitter:description': description,
  }
}

// constants.server.ts
declare global {
  interface Window {
    ENV: Record<string, unknown>;
  }
}

export const CDN_URL = typeof document !== 'undefined'
  ? window.ENV?.CDN_URL
  : process.env.CDN_URL;

export const LOGO_ICON = `${CDN_URL}/logo_icon.svg`;

export type LoaderData = {
  ENV: Record<string, unknown>;
};

export const loader = () => {
  return json<LoaderData>({
    ENV: {
      CDN_URL: process.env.CDN_URL,
    },
  });
};

export default function App() {
  const { ENV } = useLoaderData<LoaderData>();

  // window.ENV = ENV using dangerouslySetInnerHTML
}

// Imports Workbox from the CDN. Note that "6.2.0" of the URL
// is the version of the Workbox runtime.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
  initializeWorkbox();
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

function initializeWorkbox() {
  // Automatically adds an activate event listener to service worker
  workbox.core.clientsClaim();

  // registerRoutes here!
}

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

function initializeWorkbox() {
  // registerRoutes here!
  const staticAssetsRoute = new workbox.routing.Route(({request}) => {
    return [
      'image',
      'font',
      'style',
    ].includes(request.destination);
  }, new workbox.strategies.CacheFirst({
    cacheName: 'static-assets'
  }));
  
  workbox.routing.registerRoute(staticAssetsRoute);
}

function initializeWorkbox() {
  // registerRoutes here!
  const mediaAssetsRoute = new workbox.routing.Route(({request}) => {
    return [
      'video',
      'audio',
    ].includes(request.destination);
  }, new workbox.strategies.CacheFirst({
    cacheName: 'media-assets',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [200]
      }),
      new workbox.rangeRequests.RangeRequestsPlugin(),
    ],
  }));
  
  workbox.routing.registerRoute(mediaAssetsRoute);
}

function initializeWorkbox() {
  // registerRoutes here!
  const navigationRoute = new workbox.routing.NavigationRoute(
    new workbox.strategies.NetworkFirst({
      networkTimeoutSeconds: 3,
      cacheName: 'navigations'
    })
  );
  
  workbox.routing.registerRoute(navigationRoute);
}

self.addEventListener('install', event => {
  self.skipWaiting();

  event.waitUntil(
    // caching etc
  );
});

import { createCookie } from "@remix-run/node"; // or cloudflare/deno

const userPrefs = createCookie("user-prefs", {
  expires: new Date("2021-01-01"),
});

import { userPrefs } from '~/cookies';

const getUserPrefsCookie = (request) => userPrefs.parse(
  request.headers.get("Cookie"),
);

// Loading a cookie
export async function loader({ request }) {
  const cookie = (await getUserPrefsCookie(request)) || {};
  return json({ showBanner: cookie.showBanner });
}

// Updating a cookie
export async function action({ request }) {
  const cookie = (await getUserPrefsCookie(request)) || {};
  cookie.showBanner = false;

  return redirect("/", {
    headers: {
      "Set-Cookie": await userPrefs.serialize(cookie),
    },
  });
}

import { createCookieSessionStorage } from '@remix-run/node';

export const globalSession = createCookieSessionStorage({
  cookie: {
    name: '__session',
    secure: true,
    secrets: [process.env.SESSION_SECRET],
    sameSite: 'lax',
    path: '/',
    maxAge: 60 * 60 * 24 * 30, // 30 days
    httpOnly: true,
  },
});

import { globalSession } from '~/cookies';

const ERROR_KEY = 'error';
const MESSAGE_KEY = 'message';

async function getGlobalSession(request: Request) {
  const session = await globalSession.getSession(
    request.headers.get('Cookie')
  );
  return {
    getError: () => session.get(ERROR_KEY) as string | undefined,
    flashError: (error: string) => session.flash(ERROR_KEY, error),
    getMessage: () => session.get(MESSAGE_KEY) as string | undefined,
    flashMessage: (message: string) => session.flash(MESSAGE_KEY, message),
    commitSession: () => globalSession.commitSession(session),
    destroySession: () => globalSession.destroySession(session),
  };
}

export const action = async ({ request }) => {
  const { flashMessage, commitSession } = await getGlobalSession(request);
  flashMessage('Email verification code sent successfully');
  return redirect('/login', {
    headers: {
      'Set-Cookie': await commitSession(),
    },
  });
};