4
0
forked from crowetic/commerce
commerce/components/ui/context.tsx
2020-10-01 21:30:52 -05:00

57 lines
1.1 KiB
TypeScript

import React, { FC } from 'react'
export interface UIState {
displaySidebar: boolean
openSidebar: () => {}
closeSidebar: () => {}
}
const initialState = {
displaySidebar: false,
openSidebar: null,
closeSidebar: null,
}
export const UIContext = React.createContext(initialState)
UIContext.displayName = 'UIContext'
export const UIProvider: FC = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState)
const openSidebar = () => dispatch('OPEN_SIDEBAR')
const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
const value = {
...state,
openSidebar,
closeSidebar,
}
return <UIContext.Provider value={value} {...props} />
}
export const useUI = () => {
const context = React.useContext(UIContext)
if (context === undefined) {
throw new Error(`useUI must be used within a UIProvider`)
}
return context
}
function uiReducer(state, action) {
switch (action) {
case 'OPEN_SIDEBAR': {
return {
...state,
displaySidebar: true,
}
}
case 'CLOSE_SIDEBAR': {
return {
...state,
displaySidebar: false,
}
}
}
}