/** * ANNOTATED COPY — every line explained * Source: src/store/wishlist.ts * NOT used by the app — read this to learn how the real file works */ // Zustand — simple global state store (cart, auth, locale) import { create } from 'zustand'; // Zustand — simple global state store (cart, auth, locale) import { persist } from 'zustand/middleware'; // Import project module (@/ alias = src/ folder in tsconfig) import { Product } from '@/types'; // (blank line — separates logical blocks for readability) // TypeScript interface — contract for object properties and methods interface WishlistState { // Line 6: items: Product[]; items: Product[]; // Line 7: addItem: (product: Product) => void; addItem: (product: Product) => void; // Line 8: removeItem: (productId: string) => void; removeItem: (productId: string) => void; // Line 9: isInWishlist: (productId: string) => boolean; isInWishlist: (productId: string) => boolean; // Line 10: toggleItem: (product: Product) => void; toggleItem: (product: Product) => void; // Closing brace — end of block (function, if, object, JSX) } // (blank line — separates logical blocks for readability) // Named export constant — shared config/data imported elsewhere export const useWishlistStore = create()( // Zustand persist — save store to localStorage between visits persist( // Line 15: (set, get) => ({ (set, get) => ({ // Property or array item — trailing comma allowed in TypeScript items: [], // (blank line — separates logical blocks for readability) // Line 18: addItem: (product) => { addItem: (product) => { // Conditional branch — different behavior based on runtime value if (!get().isInWishlist(product.id)) { // Line 20: set({ items: [...get().items, product] }); set({ items: [...get().items, product] }); // Closing brace — end of block (function, if, object, JSX) } // Closing brace — end of block (function, if, object, JSX) }, // (blank line — separates logical blocks for readability) // Line 24: removeItem: (productId) => { removeItem: (productId) => { // Array.filter — keep items matching condition (search, category) set({ items: get().items.filter((p) => p.id !== productId) }); // Closing brace — end of block (function, if, object, JSX) }, // (blank line — separates logical blocks for readability) // Line 28: isInWishlist: (productId) => isInWishlist: (productId) => // Property or array item — trailing comma allowed in TypeScript get().items.some((p) => p.id === productId), // (blank line — separates logical blocks for readability) // Line 31: toggleItem: (product) => { toggleItem: (product) => { // Conditional branch — different behavior based on runtime value if (get().isInWishlist(product.id)) { // Line 33: get().removeItem(product.id); get().removeItem(product.id); // Closing brace — end of block (function, if, object, JSX) } else { // Line 35: get().addItem(product); get().addItem(product); // Closing brace — end of block (function, if, object, JSX) } // Closing brace — end of block (function, if, object, JSX) }, // Closing brace — end of block (function, if, object, JSX) }), // Line 39: { name: 'kott-gard-wishlist' } { name: 'kott-gard-wishlist' } // Line 40: ) ) // Line 41: ); );