From c1c93435be244a21616529ef62764550b0edf660 Mon Sep 17 00:00:00 2001 From: the-r3aper7 Date: Tue, 2 Jan 2024 14:08:27 +0530 Subject: [PATCH] to loaders --- .../components/package-manager-tabs/index.tsx | 37 +------------------ packages/docs/src/routes/(shop)/layout.tsx | 2 +- packages/docs/src/routes/(shop)/utils.ts | 4 +- packages/docs/src/routes/docs/layout.tsx | 24 +++++++++++- 4 files changed, 27 insertions(+), 40 deletions(-) diff --git a/packages/docs/src/components/package-manager-tabs/index.tsx b/packages/docs/src/components/package-manager-tabs/index.tsx index b64133a164a..7b1e266f927 100644 --- 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 index dae78451dc1..c722368b544 100644 --- 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 index 6339b5538db..3bbdb87ae43 100644 --- 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 index 1c9531f6e34..df9fc32f4ec 100644 --- 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 (