@graphcommerce/next-ui 9.1.0-canary.35 → 9.1.0-canary.37

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.1.0-canary.37
+
+## 9.1.0-canary.36
+
+### Patch Changes
+
+- [`90f8dd8`](https://github.com/graphcommerce-org/graphcommerce/commit/90f8dd89efd62e2b5a13e9c2bf265840d99e2473) - Create useCookies hook and simplify the useCookie query ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.35
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.35",
+  "version": "9.1.0-canary.37",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.35",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.35",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.35",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.35",
-    "@graphcommerce/image": "^9.1.0-canary.35",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.35",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.35",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.37",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.37",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.37",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.37",
+    "@graphcommerce/image": "^9.1.0-canary.37",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.37",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.37",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/cookie.ts

@@ -1,22 +1,25 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import type { SerializeOptions } from 'cookie'
 import { parse, serialize } from 'cookie'
 import { motionValue } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { useIsSSR } from '../hooks'
 
 // We need this motionValue to be synced with the actual cookie store.
 const cookieNotify = motionValue<number>(0)
 
+export function cookie(): Record<string, string | undefined>
 /** Read a cookie */
-export function cookie(name: string): string | undefined
+export function cookie<T extends string>(name: string): T | undefined
 /** Set a cookie */
 export function cookie(name: string, value: string, options?: SerializeOptions): void
 /** Delete a cookie */
 export function cookie(name: string, value: null): void
 /** Function to handle the three different cases */
-export function cookie(name: string, value?: string | null, options?: SerializeOptions) {
-  if (typeof window === 'undefined') {
-    return undefined
-  }
+export function cookie(name?: string, value?: string | null, options?: SerializeOptions) {
+  if (typeof window === 'undefined') return undefined
+
+  // Read all cookies
+  if (typeof name === 'undefined') return parse(document.cookie)
 
   // Read a cookie
   if (typeof value === 'undefined') return parse(document.cookie)[name]
@@ -40,17 +43,31 @@ export function cookie(name: string, value?: string | null, options?: SerializeO
   return undefined
 }
 
-export function useCookie(name: string) {
-  const [value, setValue] = useState<string | null | undefined>(undefined)
+/**
+ * This makes sure this hook is rerendered when the cookie changes, we do not actually use the
+ * value.
+ */
+export function useCookies(): Record<string, string | undefined> {
+  // Initial render it should always be empty since the server renders cookie-less.
+  // Whenever the server can handle cookies, we can remove this and directly return the cookie value.
+  const isSsr = useIsSSR()
 
-  useEffect(() => setValue(cookie(name)), [name])
-  useEffect(() => cookieNotify.on('change', () => setValue(cookie(name))))
+  useMotionValueValue(cookieNotify, (v) => v)
 
-  const update = (val: string | null) => {
-    if (val) cookie(name, val, { sameSite: true })
+  return isSsr ? {} : cookie()
+}
+
+export function useCookie<T extends string>(
+  name: string,
+  options: SerializeOptions = { sameSite: true },
+  defaultValue?: T | null,
+): [T | undefined | null, (value: T | null) => void] {
+  const update = (val: T | null) => {
+    if (val) cookie(name, val, options)
     else cookie(name, null)
-    cookieNotify.set(cookieNotify.get() + 1)
   }
 
+  const cookies = useCookies()
+  const value = (cookies[name] as T | undefined | null) ?? defaultValue
   return [value, update] as const
 }