root
82 lines
3.5 KiB
TypeScript
82 lines
3.5 KiB
TypeScript
/**
|
|
* 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<WishlistState>()(
|
|
// 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: );
|
|
);
|