to loaders

the-r3aper7 · Jan 2, 2024 · c1c9343 · c1c9343
1 parent 215eb2b
commit c1c9343
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 40 deletions.
diff --git a/packages/docs/src/components/package-manager-tabs/index.tsx b/packages/docs/src/components/package-manager-tabs/index.tsx
@@ -1,5 +1,5 @@
-import { $, Slot, component$, useContext, useTask$ } from '@builder.io/qwik';
-import { isBrowser, isServer } from '@builder.io/qwik/build';
+import { $, Slot, component$, useContext } from '@builder.io/qwik';
+import { isBrowser } from '@builder.io/qwik/build';
 import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
 import type { CookieOptions } from 'express';
 import { GlobalStore } from '../../context';
@@ -15,21 +15,6 @@ export interface IconProps {
   height?: number;
 }
 
-const getCookie = (name: string) => {
-  const cookieName = name + '=';
-  const cookies = decodeURIComponent(document.cookie).split(';');
-  for (let i = 0; i < cookies.length; i++) {
-    let cookie = cookies[i];
-    while (cookie.charAt(0) == ' ') {
-      cookie = cookie.substring(1, cookie.length);
-    }
-    if (cookie.indexOf(cookieName) == 0) {
-      return cookie.substring(cookieName.length, cookie.length);
-    }
-  }
-  return null;
-};
-
 const setCookie = (name: string, value: string, options: CookieOptions = {}) => {
   let cookieString = `${name}=${encodeURIComponent(value)}`;
   const expires = options.expires ? `; expires=${options.expires.toUTCString()}` : '';
@@ -46,24 +31,6 @@ const setCookie = (name: string, value: string, options: CookieOptions = {}) =>
 export default component$(() => {
   const globalStore = useContext(GlobalStore);
 
-  useTask$(({ track }) => {
-    if (isServer) {
-      return;
-    }
-    track(() => globalStore.pkgManager);
-    const packageManager = getCookie('packageManager') as PackageManagers;
-    if (!packageManager) {
-      setCookie('packageManager', 'npm', {
-        maxAge: 60 * 60 * 24 * 30,
-        sameSite: 'strict',
-        path: '/',
-        secure: true,
-      });
-      return;
-    }
-    globalStore.pkgManager = packageManager;
-  });
-
   const handleTabChange = $((manager: string) => {
     if (isBrowser) {
       globalStore.pkgManager = manager as PackageManagers;

diff --git a/packages/docs/src/routes/(shop)/layout.tsx b/packages/docs/src/routes/(shop)/layout.tsx
@@ -35,7 +35,7 @@ export const useCartLoader = routeLoader$(async ({ cookie }) => {
   const cart = 'node' in data ? data.node : data.checkoutCreate.checkout;
 
   if (!cartId && cart.id) {
-    setCookie(cookie, cart.id);
+    setCookie(cookie, COOKIE_CART_ID_KEY, cart.id);
   }
   return cart;
 });

diff --git a/packages/docs/src/routes/(shop)/utils.ts b/packages/docs/src/routes/(shop)/utils.ts
@@ -30,10 +30,10 @@ export const mapProducts = (data: { node: Product }[]) =>
       variants: node.variants.edges.map(({ node }) => node),
     }));
 
-export const setCookie = (cookie: Cookie, value: string) => {
+export const setCookie = (cookie: Cookie, name: string, value: string) => {
   const maxAge = 60 * 60 * 24 * 30;
   const options: CookieOptions = { maxAge, sameSite: 'strict', path: '/', secure: true };
-  cookie.set(COOKIE_CART_ID_KEY, value, options);
+  cookie.set(name, value, options);
 };
 
 export const deleteCookie = (name: string) => {

diff --git a/packages/docs/src/routes/docs/layout.tsx b/packages/docs/src/routes/docs/layout.tsx
@@ -1,5 +1,5 @@
-import { component$, Slot, useContext, useStyles$ } from '@builder.io/qwik';
-import { useContent, useLocation } from '@builder.io/qwik-city';
+import { component$, Slot, useContext, useStyles$, useTask$ } from '@builder.io/qwik';
+import { useContent, useLocation, routeLoader$ } from '@builder.io/qwik-city';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
@@ -8,10 +8,25 @@ import { createBreadcrumbs, SideBar } from '../../components/sidebar/sidebar';
 import { GlobalStore } from '../../context';
 import styles from './docs.css?inline';
 import Contributors from '../../components/contributors';
+import type { PackageManagers } from 'src/components/package-manager-tabs';
+import { setCookie } from '../(shop)/utils';
 
 // eslint-disable-next-line
 export { useMarkdownItems } from '../../components/sidebar/sidebar';
 
+export const usePkgManager = routeLoader$(async (req) => {
+  const pkgManager = req.cookie.get('packageManager');
+  if (!pkgManager) {
+    setCookie(req.cookie, 'packageManager', 'npm');
+    return {
+      manager: 'npm',
+    };
+  }
+  return {
+    manager: pkgManager.value,
+  };
+});
+
 export default component$(() => {
   const loc = useLocation();
   const noRightMenu = ['/docs/'].includes(loc.url.pathname);
@@ -20,6 +35,11 @@ export default component$(() => {
   const globalStore = useContext(GlobalStore);
   const { url } = useLocation();
   const breadcrumbs = createBreadcrumbs(menu, url.pathname);
+  const pkgManager = usePkgManager();
+
+  useTask$(() => {
+    globalStore.pkgManager = pkgManager.value.manager as PackageManagers;
+  });
 
   return (
     <div class="docs fixed-header">