// 1. Selecting state from the store (inside a component)
const recipients = useStoreState(store, 'email.recipients');

// 2. Reading state from the store
const recipients = store.getStateAt('email.recipients');

// 3. Creating store actions
appender('email.recipients');

// 4. Updating values in the store
store.setStateAt('email.recipients', recipients);

// Select the value of a single field
const todos = useStoreSelector(myStore, state => state.todos);
const todos = useStoreSelector(myStore, 'todos');

// Select a deeper value
const userId = useStoreSelector(myStore, state => state.user.id);
const userId = useStoreSelector(myStore, 'user.id');

// Select a list of deeper values
const bookIds = useStoreSelector(myStore, state => state.books.map(b => b.id));
const bookIds = useStoreSelector(myStore, 'books[*].id');

// Select multiple fields using an array
const [sender, recipients] = useStoreSelector(myStore, [
  state => state.sender,
  state => state.recipients,
]);
const [sender, recipients] = useStoreSelector(myStore, [
  'sender',
  'recipients',
]);

// Select multiple deeper values using an array
const [senderEmail, recipientsEmails] = useStoreSelector(myStore, [
  state => state.sender.email,
  state => state.recipients.map(r => r.email),
]);
const [senderEmail, recipientsEmails] = useStoreSelector(myStore, [
  'sender.email',
  'recipients[*].email',
]);

// Use a mix of selector types
const [subject, sender, recipientsEmails] = useStoreSelector(myStore, [
  'subject',
  state => state.sender,
  'recipients[*].email',
]);

describe('updatePath', () => {
  it('should only update relevant parts of state', () => {
    const state = {
      email: {
        subject: 'hello',
        sender: { id: 3, name: 'Otto' },
        recipients: [
          { id: 1, name: 'John' },
          { id: 2, name: 'Josh' },
        ],
      },
    };
    const addRecipient = updatePath(
      'email.recipients',
      (recipients, newRecipient) => {
        return [...recipients, newRecipient];
      }
    );
    const updated = addRecipient(state, { id: 4, name: 'Lili' });
    expect(updated).not.toBe(state);
    expect(updated.email).not.toBe(state.email);
    expect(updated.email.subject).toBe(state.email.subject);
    expect(updated.email.sender).toBe(state.email.sender);
    expect(updated.email.recipients).not.toBe(state.email.recipients);
    expect(updated.email.recipients[0]).toBe(state.email.recipients[0]);
    expect(updated.email.recipients[1]).toBe(state.email.recipients[1]);
  });
});

const myPersistingStore = new Store({
  // ...
  autoReset: true,
});

import { Store, useStoreSelector } from 'react-thermals';
const globalStore = new Store();

export default globalStore;

export function useGlobalStore(selector) {
  return useStoreSelector(globalStore, selector);
}

import globalStore, { useGlobalStore } from '../globalStore';
import { persistState, appender, merger, remover } from 'react-thermals';

// extend the state at any time
globalStore.extendState({ todos: [] });

// add actions at any time
export const todoActions = globalStore.addActions({
  addTodo: appender('todos'),
  toggleTodoComplete: merger('todos', todo => ({
    isComplete: !todo.isComplete,
  })),
  removeTodo: remover('todos'),
});

// you can provide a hook for conveniently selecting this state
export function useTodos() {
  // "todos" is equivalent to state => state.todos
  return useGlobalStore('todos');
}
// ...or a hook to select parts of the state
export function useTodoIncompleteCount() {
  return useGlobalStore(state => {
    return state.todos.filter(todo => !todo.isComplete).length;
  });
}

// add plugins to the root store at any time
globalStore.plugin(
  persistState({
    storage: localStorage,
    key: 'myTodos',
    fields: ['todos'],
  })
);

import React from 'react';
import { useTodoIncompleteCount } from '../stores/globalStore/slices/todos';

export default function Header() {
  const incompleteCount = useTodoIncompleteCount();
  return (
    <header>
      <h1>My TODO App</h1>
      <div>Tasks remaining: {incompleteCount}</div>
    </header>
  );
}

import React from 'react';
import useTodos, { todoActions } from '../stores/globalStore/slices/todos';
import NewTodoForm from './NewTodoForm.jsx';
const { toggleTodoComplete, removeTodo } = todoActions;

export default function TodoList() {
  const todos = useTodos();
  return (
    <ul>
      {todos.map((todo, i) => (
        <li key={i}>
          <input
            type="checkbox"
            checked={todo.isComplete}
            onClick={() => toggleTodoComplete(todo)}
          />
          <span className="text">{todo.text}</span>
          <span onClick={() => removeTodo(todo)}>Delete</span>
        </li>
      ))}
      <li>
        <NewTodoForm />
      </li>
    </ul>
  );
}

import React, { useCallback } from 'react';
import { todoActions } from '../stores/globalStore/slices/todos';

export default function NewTodoForm() {
  const addTodoAndClear = useCallback(evt => {
    evt.preventDefault();
    const form = evt.target;
    const data = new FormData(form);
    const newTodo = Object.fromEntries(data);
    newTodo.isComplete = false;
    form.reset();
    todoActions.add(newTodo);
  }, []);
  return (
    <form onSubmit={addTodoAndClear}>
      <input name="text" placeholder="Enter todo..." />
      <button type="submit">Add</button>
    </form>
  );
}

import axios from 'axios';
import globalStore, { useGlobalStore } from '../../globalStore/globalStore';
import { setterInput } from 'react-thermals';

export function useAuth() {
  return useGlobalStore('user');
}

globalStore.extendState({
  user: {
    isLoggedIn: false,
    isCheckingLogin: false,
  },
});

export const authActions = globalStore.addActions({
  // actions can be async
  async login(form) {
    const formData = Object.fromEntries(new FormData(form));
    globalStore.mergeState({
      user: {
        isLoggedIn: false,
        isCheckingLogin: true,
      },
    });
    const { data } = await axios.post('/api/users/login', formData);
    localStorage.setItem('jwt', data.jwt);
    globalStore.mergeState({
      user: {
        ...data.user,
        isLoggedIn: true,
        isCheckingLogin: false,
      },
    });
  },
});

import { useAuth, authActions } from '../../stores/slices/auth';
import Loader from '../Loader/Loader.jsx';
const { login } = authActions;

export default function Login() {
  const { isCheckingLogin } = useAuth();
  return (
    <div className="LoginComponent">
      {isCheckingLogin ? (
        <Loader />
      ) : (
        <form
          onSubmit={evt => {
            evt.preventDefault();
            login(evt.target);
          }}
        >
          <input name="email" type="input" placeholder="Email" />
          <input name="password" type="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
      )}
    </div>
  );
}

import React from 'react';
import { useAuth, authActions } from '../stores/slices/auth';

export default function SubHeader() {
  const user = useAuth();
  return (
    <header>
      <h2>My App</h2>
      {user.isLoggedIn ? (
        <span>Hello {user.name}</span>
      ) : (
        <a href="/login">Login</a>
      )}
    </header>
  );
}

import {
  Store,
  useStoreSelector,
  appender,
  remover,
  setter,
  composeActions,
} from 'react-thermals';

export const cartStore = new Store({
  state: { items: [], discount: 0 },
  actions: {
    add: composeActions([
      appender('items'),
      newItem => {
        axios.post('/api/v1/carts/item', newItem);
      },
    ]),
    remove: composeActions([
      remover('items'),
      oldItem => {
        axios.delete(`/api/v1/carts/items/${oldItem.id}`);
      },
    ]),
    setDiscount: setter('discount'),
  },
});

export const cartActions = store.actions;

export function useCartItems() {
  return useStoreSelector(cartStore, 'items');
}

export function useCartItemCount() {
  return useStoreSelector(cartStore, state => state.items.length);
}

export function useCartTotal() {
  return useStoreSelector(cartStore, state => {
    let total = 0;
    state.items.forEach(item => {
      total += item.quantity * item.price * (1 - state.discount);
    });
    return total;
  });
}

import React from 'react';
import { useCartItemCount } from '../stores/cartStore';

export default function Header() {
  // only re-render when cart item count changes
  const itemCount = useCartItemCount();
  return (
    <header>
      <h1>My App</h1>
      <a href="/cart">
        Shopping Cart: {itemCount} {itemCount === 1 ? 'item' : 'items'}
      </a>
    </header>
  );
}

import React from 'react';
import { useCartItems, useCartTotal, cartActions } from '../stores/cartStore';

export default function CartDetails() {
  // only re-render when list or total changes
  const items = useCartItems();
  const total = useCartTotal();
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}: ${item.price.toFixed(2)}{' '}
          <button onClick={() => cartActions.remove(item)}>Delete</button>
        </li>
      ))}
      <li>Total: ${total.toFixed(2)}</li>
    </ul>
  );
}

import React from 'react';
import { cartActions } from '../stores/cartStore';

export default function Product({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p>${product.price.toFixed(2)}</p>
      <button onClick={() => cartActions.add(product)}>Add to cart</button>
    </div>
  );
}

import axios from 'axios';
import { cartStore } from './cartStore';

jest.mock('axios');

describe('cartStore', () => {
  let store;
  beforeEach(() => {
    store = cartStore.clone();
  });
  it('should add item', () => {
    const item = { id: 123, name: 'Pencil', price: 2.99 };
    store.actions.add(item);
    store.flushSync();
    expect(store.getState().items[0]).toBe(item);
    expect(axios.post).toHaveBeenCalledWith('/api/v1/carts/item', item);
  });
  it('should remove item', () => {
    const item = { id: 123, name: 'Pencil', price: 2.99 };
    store.setStateAt('items', [item]);
    store.actions.remove(item);
    store.flushSync();
    expect(store.getState().items).toEqual([]);
    expect(axios.delete).toHaveBeenCalledWith(`/api/v1/carts/items/${item.id}`);
  });
});

import myStore from './myStore';

describe('myStore', () => {
  it('should add to cart with addToCart(item)', () => {
    myStore.setSync({ cart: [], total: 0 });
    myStore.actions.addToCart({
      id: 101,
      name: 'White Shoe',
      cost: 123,
    });
    myStore.flushSync();
    expect(myStore.getState()).toEqual({
      cart: [
        {
          id: 101,
          name: 'White Shoe',
          cost: 123,
        },
      ],
      total: 123,
    });
  });
});

store.on('BeforeFirstUse', () => {
  store.setSync({ my: 'external', initial: 'state' });
});
store.on('BeforeUpdate', evt => {
  if (evt.data.name.length < 4) {
    alert('name must be at least 4 characters');
    evt.preventDefault();
  }
});

// observe the state but do not alter
myStore.use((context, next) => {
  context.prev; // the old state value
  context.next; // the new state value
  context.isAsync; // true if middleware is expected to call next right away
  logToServer(context.next);
  next();
});

// alter the state
myStore.use((context, next) => {
  context.next = mockStore.nextState();
  next();
});

// call next asynchronously
myStore.use((context, next) => {
  debounceState(context.next, next);
});