tannerlinsley

import React, { useReducer, useEffect, useState, useRef } from 'react'
import PropTypes from 'prop-types'
import { createSelector } from 'reselect'
import { connect } from 'react-redux'
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import includes from 'ramda/src/includes'
import { DEBOUNCE_DELAY } from '../../../reference/constants'
import { loadContacts } from '../../../actions/v2/contactsActions'
import { useDebounce } from '../../../reference/hooks'

tannerlinsley

const useLogout = () => {
  // Use any store you want!
  const [_, setStore] = Store.useStore()

  // Have a localStorage hook?
  const [_, setUserToken] = useLocalStorage('userToken')

  // Have a router hook?
  const { navigate } = useLocation()

tannerlinsley

const useMyTodos = () => {
  const [{ todos, myUserID }] = useStore()

  // Only update when todos or myUserID updates
  return useMemo(
    () => todos.filter(todo => 
      todo.userID === myUserID
    ),
    [todos, myUserID]
  ) 

tannerlinsley

const useMyTodos = () => {
  const [{ todos, myUserID }] = useStore()

  // Only update when todos or myUserID updates
  return useMemo(
    () => todos.filter(todo => 
      todo.userID === myUserID
    ),
    [todos, myUserID]
  ) 

tannerlinsley

const useCount = () => {
  const [{ count }, setState] = useStore();

  const increment = () => {
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
  }

tannerlinsley

 const useAsyncIncrement = () => {
  const increment = useIncrement()

  return async () => {
    await new Promise(resolve => setTimeout(resolve, 1000))
    increment()
  }
}

tannerlinsley

const useIncrement = () => {
  const [state, setState] = useStore();

  return () =>
    setState(old => ({
      ...old,
      count: old.count + 1
    }));
}

tannerlinsley

const [Provider, useStore] = makeStore({
  // Create actions that get the store as
  // the first parameter
  actions: {
    increment: (state, amount = 1) => state.count + amount,
    decrement: (state, amount = 1) => state.count - amount
  }
})

// ...

tannerlinsley

function makeStore({ actions }) {
  // Make a context for the store
  const context = React.createContext();

  // Make a provider that takes an initialValue
  const Provider = ({ initialValue = {}, children }) => {
    // Make a new state instance
    const [state, setState] = useState(initialValue);

    // Bind the actions with the old state and args

tannerlinsley

const [StoreProvider, useStore] = makeStore();

export {
  StoreProvider,
  useStore,
}