feat: add more opps

Author: mdjastrzebski

examples/cookbook/app/state/zustand/TaskList.tsx

@@ -6,12 +6,14 @@ import { useTasksStore } from './state';
 export default function TaskList() {
   const tasks = useTasksStore((state) => state.tasks);
   const addTask = useTasksStore((state) => state.addTask);
+
   const [newTaskTitle, setNewTaskTitle] = React.useState('');
 
   const handleAddTask = () => {
     addTask({
       id: generateId(),
       title: newTaskTitle,
+      completed: false,
     });
     setNewTaskTitle('');
   };

examples/cookbook/app/state/zustand/__tests__/TaskList.test.tsx

@@ -1,23 +1,23 @@
 import * as React from 'react';
-import { render, screen, userEvent } from '@testing-library/react-native';
+import { screen, userEvent } from '@testing-library/react-native';
 import TaskList from '../TaskList';
-import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../state';
+import { renderWithState } from '../test-utils';
+import { Task } from '../types';
 
 jest.useFakeTimers();
 
 test('renders an empty task list', () => {
-  render(<TaskList />);
+  renderWithState(<TaskList />);
   expect(screen.getByText(/no tasks, start by adding one/i)).toBeOnTheScreen();
 });
 
-const INITIAL_TASKS: Task[] = [{ id: '1', title: 'Buy bread' }];
+const INITIAL_TASKS: Task[] = [{ id: '1', title: 'Buy bread', completed: false }];
 
 test('renders a to do list with 1 items initially, and adds a new item', async () => {
-  renderWithAtoms(<TaskList />, {
-    initialValues: [
-      [tasksAtom, INITIAL_TASKS],
-      [newTaskTitleAtom, ''],
-    ],
+  renderWithState(<TaskList />, {
+    initialState: {
+      tasks: INITIAL_TASKS,
+    },
   });
 
   expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();
@@ -30,13 +30,3 @@ test('renders a to do list with 1 items initially, and adds a new item', async (
   expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();
   expect(screen.getAllByTestId('task-item')).toHaveLength(2);
 });
-
-test('modify store outside of components', () => {
-  // Set the initial to do items in the store
-  store.set(tasksAtom, INITIAL_TASKS);
-  expect(getAllTasks()).toEqual(INITIAL_TASKS);
-
-  const NEW_TASK = { id: '2', title: 'Buy almond milk' };
-  addTask(NEW_TASK);
-  expect(getAllTasks()).toEqual([...INITIAL_TASKS, NEW_TASK]);
-});

examples/cookbook/app/state/zustand/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createStore } from 'zustand';
+import { tasksStoreCreator, TasksStoreProvider } from './state';
+import TaskList from './TaskList';
+
+const store = createStore(tasksStoreCreator);
+
+export default function App() {
+  return (
+    <TasksStoreProvider store={store}>
+      <TaskList />
+    </TasksStoreProvider>
+  );
+}

examples/cookbook/app/state/zustand/state.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { createContext, useContext, useRef } from 'react';
+import { createStore, StateCreator, StoreApi, useStore } from 'zustand';
+import { Task } from './types';
+
+export interface TasksState {
+  tasks: Task[];
+  addTask: (task: Task) => void;
+  deleteTask: (id: string) => void;
+  toggleTask: (id: string) => void;
+  clearCompleted: () => void;
+}
+
+export const tasksStoreCreator: StateCreator<TasksState> = (set) => ({
+  tasks: [],
+  addTask: (task: Task) => {
+    set((state) => ({ tasks: [...state.tasks, task] }));
+  },
+  deleteTask: (id: string) => {
+    set((state) => ({ tasks: state.tasks.filter((todo) => todo.id !== id) }));
+  },
+  toggleTask: (id: string) => {
+    set((state) => ({
+      tasks: state.tasks.map((task) =>
+        task.id === id ? { ...task, completed: !task.completed } : task,
+      ),
+    }));
+  },
+  clearCompleted: () => {
+    set((state) => ({ tasks: state.tasks.filter((task) => !task.completed) }));
+  },
+});
+
+// Use store with context
+// See: https://docs.pmnd.rs/zustand/guides/testing#testing-components
+
+export type TasksStoreApi = StoreApi<TasksState>;
+
+const TasksStoreContext = createContext<TasksStoreApi | undefined>(undefined);
+
+export interface TasksStoreProviderProps extends React.PropsWithChildren {
+  // Optionally pass a pre-created store (for testing)
+  store?: TasksStoreApi;
+}
+
+export function TasksStoreProvider({ store, children }: TasksStoreProviderProps) {
+  const storeRef = useRef<TasksStoreApi>();
+  if (!storeRef.current) {
+    // Inject passed store or create a new one
+    storeRef.current = store ?? createStore(tasksStoreCreator);
+  }
+
+  return (
+    <TasksStoreContext.Provider value={storeRef.current}>{children}</TasksStoreContext.Provider>
+  );
+}
+
+export type UseTasksStoreContextSelector<T> = (store: TasksState) => T;
+
+export function useTasksStore<T>(selector: UseTasksStoreContextSelector<T>) {
+  const store = useContext(TasksStoreContext);
+  if (!store) {
+    throw new Error('useTasksStore must be used within TasksStoreProvider');
+  }
+
+  return useStore(store, selector);
+}

examples/cookbook/app/state/zustand/state.tsx

@@ -1,20 +1,24 @@
 import * as React from 'react';
 import { render } from '@testing-library/react-native';
-import { TasksState } from './state';
+import { createStore } from 'zustand';
+import { TasksState, tasksStoreCreator, TasksStoreProvider } from './state';
 
 export interface RenderWithState {
-  initialState: Partial<TasksState>;
+  initialState?: Partial<TasksState>;
 }
 
 /**
- * Renders a React component with Jotai atoms for testing purposes.
+ * Renders a React component with Zustand state for testing purposes.
  *
  * @param component - The React component to render.
- * @param options - The render options including the initial atom values.
+ * @param options - The render options including the initial state.
  * @returns The render result from `@testing-library/react-native`.
  */
-export const renderWithState = <T,>(component: React.ReactElement, options: RenderWithState) => {
-  return render(
-    <HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
-  );
+export const renderWithState = (component: React.ReactElement, options?: RenderWithState) => {
+  const store = createStore(tasksStoreCreator);
+  if (options?.initialState) {
+    store.setState(options.initialState);
+  }
+
+  return render(<TasksStoreProvider store={store}>{component}</TasksStoreProvider>);
 };

examples/cookbook/app/state/zustand/test-utils.tsx

@@ -1,4 +1,5 @@
 export type Task = {
   id: string;
   title: string;
+  completed: boolean;
 };