Update bookstore demo session/cart handling

brophdawg11 · brophdawg11 · commit acda0dca8de3 · 2025-10-31T11:34:03.000-04:00
diff --git a/demos/bookstore/app/cart.tsx b/demos/bookstore/app/cart.tsx
@@ -11,13 +11,15 @@ import type { User } from './models/users.ts'
 import { getCurrentUser } from './utils/context.ts'
 import { render } from './utils/render.ts'
 import { RestfulForm } from './components/restful-form.tsx'
+import { ensureCart } from './middleware/cart.ts'
 
 export default {
   use: [loadAuth],
   handlers: {
     index({ session }) {
-      let cart = getCart(session.get('userId'))
-      let total = getCartTotal(cart)
+      let cartId = session.get('cartId')
+      let cart = cartId ? getCart(cartId) : null
+      let total = cart ? getCartTotal(cart) : 0
 
       let user: User | null = null
       try {
@@ -31,7 +33,7 @@ export default {
           <h1>Shopping Cart</h1>
 
           <div class="card">
-            {cart.items.length > 0 ? (
+            {cart && cart.items.length > 0 ? (
               <>
                 <table>
                   <thead>
@@ -135,52 +137,55 @@ export default {
     },
 
     api: {
-      async add({ session, formData }) {
-        // Simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, 1000))
+      use: [ensureCart],
+      handlers: {
+        async add({ session, formData }) {
+          // Simulate network latency
+          await new Promise((resolve) => setTimeout(resolve, 1000))
 
-        let bookId = formData.get('bookId')?.toString() ?? ''
+          let bookId = formData.get('bookId')?.toString() ?? ''
 
-        let book = getBookById(bookId)
-        if (!book) {
-          return new Response('Book not found', { status: 404 })
-        }
+          let book = getBookById(bookId)
+          if (!book) {
+            return new Response('Book not found', { status: 404 })
+          }
 
-        addToCart(session.get('userId'), book.id, book.slug, book.title, book.price, 1)
+          addToCart(session.get('cartId')!, book.id, book.slug, book.title, book.price, 1)
 
-        if (formData.get('redirect') === 'none') {
-          return new Response(null, { status: 204 })
-        }
+          if (formData.get('redirect') === 'none') {
+            return new Response(null, { status: 204 })
+          }
 
-        return redirect(routes.cart.index.href())
-      },
+          return redirect(routes.cart.index.href())
+        },
 
-      async update({ session, formData }) {
-        let bookId = formData.get('bookId')?.toString() ?? ''
-        let quantity = parseInt(formData.get('quantity')?.toString() ?? '1', 10)
+        async update({ session, formData }) {
+          let bookId = formData.get('bookId')?.toString() ?? ''
+          let quantity = parseInt(formData.get('quantity')?.toString() ?? '1', 10)
 
-        updateCartItem(session.get('userId'), bookId, quantity)
+          updateCartItem(session.get('cartId')!, bookId, quantity)
 
-        if (formData.get('redirect') === 'none') {
-          return new Response(null, { status: 204 })
-        }
+          if (formData.get('redirect') === 'none') {
+            return new Response(null, { status: 204 })
+          }
 
-        return redirect(routes.cart.index.href())
-      },
+          return redirect(routes.cart.index.href())
+        },
 
-      async remove({ session, formData }) {
-        // Simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, 1000))
+        async remove({ session, formData }) {
+          // Simulate network latency
+          await new Promise((resolve) => setTimeout(resolve, 1000))
 
-        let bookId = formData.get('bookId')?.toString() ?? ''
+          let bookId = formData.get('bookId')?.toString() ?? ''
 
-        removeFromCart(session.get('userId'), bookId)
+          removeFromCart(session.get('cartId')!, bookId)
 
-        if (formData.get('redirect') === 'none') {
-          return new Response(null, { status: 204 })
-        }
+          if (formData.get('redirect') === 'none') {
+            return new Response(null, { status: 204 })
+          }
 
-        return redirect(routes.cart.index.href())
+          return redirect(routes.cart.index.href())
+        },
       },
     },
   },
diff --git a/demos/bookstore/app/checkout.tsx b/demos/bookstore/app/checkout.tsx
@@ -7,16 +7,17 @@ import { getCart, clearCart, getCartTotal } from './models/cart.ts'
 import { createOrder, getOrderById } from './models/orders.ts'
 import { Layout } from './layout.tsx'
 import { render } from './utils/render.ts'
-import { getCurrentUser, getStorage } from './utils/context.ts'
+import { getCurrentUser } from './utils/context.ts'
 
 export default {
   use: [requireAuth],
   handlers: {
     index({ session }) {
-      let cart = getCart(session.get('userId'))
-      let total = getCartTotal(cart)
+      let cartId = session.get('cartId')
+      let cart = cartId ? getCart(cartId) : null
+      let total = cart ? getCartTotal(cart) : 0
 
-      if (cart.items.length === 0) {
+      if (!cart || cart.items.length === 0) {
         return render(
           <Layout>
             <div class="card">
@@ -109,9 +110,10 @@ export default {
 
     async action({ session, formData }) {
       let user = getCurrentUser()
-      let cart = getCart(session.get('userId'))
+      let cartId = session.get('cartId')
+      let cart = cartId ? getCart(cartId) : null
 
-      if (cart.items.length === 0) {
+      if (!cartId || !cart || cart.items.length === 0) {
         return redirect(routes.cart.index.href())
       }
 
@@ -133,7 +135,7 @@ export default {
         shippingAddress,
       )
 
-      clearCart(session.get('userId'))
+      clearCart(cartId)
 
       return redirect(routes.checkout.confirmation.href({ orderId: order.id }))
     },
diff --git a/demos/bookstore/app/fragments.tsx b/demos/bookstore/app/fragments.tsx
@@ -21,8 +21,9 @@ export default {
         return render(<div>Book not found</div>, { status: 404 })
       }
 
-      let cart = getCart(session.get('userId'))
-      let inCart = cart.items.some((item) => item.slug === params.slug)
+      let cartId = session.get('cartId')
+      let cart = cartId ? getCart(cartId) : null
+      let inCart = cart?.items.some((item) => item.slug === params.slug) === true
 
       return render(<BookCard book={book} inCart={inCart} />)
     },
diff --git a/demos/bookstore/app/middleware/cart.ts b/demos/bookstore/app/middleware/cart.ts
@@ -0,0 +1,10 @@
+import type { Middleware } from '@remix-run/fetch-router'
+import { createCartIfNotExists } from '../models/cart.ts'
+
+/**
+ * Middleware that ensures the user session has an associated cart
+ * To be used on any route that mutates the cart
+ */
+export const ensureCart: Middleware = async ({ session }) => {
+  createCartIfNotExists(session)
+}
diff --git a/demos/bookstore/app/models/cart.ts b/demos/bookstore/app/models/cart.ts
@@ -1,3 +1,5 @@
+import type { Session } from '@remix-run/session'
+
 export interface CartItem {
   bookId: string
   slug: string
@@ -10,27 +12,44 @@ export interface Cart {
   items: CartItem[]
 }
 
-// Store carts by user ID
+// Store carts by cartId, cartId will be stored in the session
+let nextCartId = 1
 const carts = new Map<string, Cart>()
 
-export function getCart(userId: string): Cart {
-  let cart = carts.get(userId)
+export function createCartIfNotExists(session: Session): Cart {
+  let cartId = session.get('cartId')
+  if (cartId) {
+    let cart = carts.get(cartId)
+    if (cart) {
+      return cart
+    }
+  } else {
+    cartId = String(nextCartId++)
+    session.set('cartId', cartId)
+  }
+
+  let cart = { items: [] }
+  carts.set(cartId, cart)
+  return cart
+}
+
+export function getCart(cartId: string): Cart {
+  let cart = carts.get(cartId)
   if (!cart) {
-    cart = { items: [] }
-    carts.set(userId, cart)
+    throw new Error('Cart not found')
   }
   return cart
 }
 
 export function addToCart(
-  userId: string,
+  cartId: string,
   bookId: string,
   slug: string,
   title: string,
   price: number,
   quantity: number = 1,
 ): Cart {
-  let cart = getCart(userId)
+  let cart = getCart(cartId)
 
   let existingItem = cart.items.find((item) => item.bookId === bookId)
   if (existingItem) {
@@ -42,8 +61,8 @@ export function addToCart(
   return cart
 }
 
-export function updateCartItem(userId: string, bookId: string, quantity: number): Cart | undefined {
-  let cart = getCart(userId)
+export function updateCartItem(cartId: string, bookId: string, quantity: number): Cart | undefined {
+  let cart = getCart(cartId)
   let item = cart.items.find((item) => item.bookId === bookId)
 
   if (!item) return undefined
@@ -57,14 +76,14 @@ export function updateCartItem(userId: string, bookId: string, quantity: number)
   return cart
 }
 
-export function removeFromCart(userId: string, bookId: string): Cart {
-  let cart = getCart(userId)
+export function removeFromCart(cartId: string, bookId: string): Cart {
+  let cart = getCart(cartId)
   cart.items = cart.items.filter((item) => item.bookId !== bookId)
   return cart
 }
 
-export function clearCart(userId: string): void {
-  carts.set(userId, { items: [] })
+export function clearCart(cartId: string): void {
+  carts.set(cartId, { items: [] })
 }
 
 export function getCartTotal(cart: Cart): number {
diff --git a/demos/bookstore/app/utils/frame.tsx b/demos/bookstore/app/utils/frame.tsx
@@ -20,8 +20,9 @@ export async function resolveFrame(frameSrc: string) {
       throw new Error(`Book not found: ${slug}`)
     }
 
-    let cart = getCart(getSession().get('userId'))
-    let inCart = cart.items.some((item) => item.slug === slug)
+    let cartId = getSession().get('cartId')
+    let cart = cartId ? getCart(cartId) : null
+    let inCart = cart?.items.some((item) => item.slug === slug) === true
 
     return <BookCard book={book} inCart={inCart} />
   }
diff --git a/demos/bookstore/app/utils/session.ts b/demos/bookstore/app/utils/session.ts
@@ -3,6 +3,7 @@ import type { Session } from '@remix-run/session'
 
 declare module '@remix-run/session' {
   interface SessionData {
+    cartId?: string
     userId?: string
   }
 }
diff --git a/packages/fetch-router/src/lib/router.ts b/packages/fetch-router/src/lib/router.ts
@@ -88,7 +88,7 @@ export class Router {
     this.#uploadHandler = options?.uploadHandler
     this.#methodOverride = options?.methodOverride ?? true
 
-    if (!options || options.sessionStorage == null || options.sessionStorage === true) {
+    if (options?.sessionStorage == null || options?.sessionStorage === true) {
       // Unless they opt-out, we default to an `HttpOnly` cookie-based session that
       // will only be "activated" in a `Set-Cookie` response if they mutate the
       // session

Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,9 @@ export async function resolveFrame(frameSrc: string) {`
`20`	`20`	throw new Error(`Book not found: ${slug}`)
`21`	`21`	`}`
`22`	`22`
`23`		`- let cart = getCart(getSession().get('userId'))`
`24`		`- let inCart = cart.items.some((item) => item.slug === slug)`
	`23`	`+ let cartId = getSession().get('cartId')`
	`24`	`+ let cart = cartId ? getCart(cartId) : null`
	`25`	`+ let inCart = cart?.items.some((item) => item.slug === slug) === true`
`25`	`26`
`26`	`27`	`return <BookCard book={book} inCart={inCart} />`
`27`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import type { Session } from '@remix-run/session'`
`3`	`3`
`4`	`4`	`declare module '@remix-run/session' {`
`5`	`5`	`interface SessionData {`
	`6`	`+ cartId?: string`
`6`	`7`	`userId?: string`
`7`	`8`	`}`
`8`	`9`	`}`