4
0
forked from crowetic/commerce
commerce/components/ui/context.tsx

62 lines
1.2 KiB
TypeScript
Raw Normal View History

2020-10-01 21:35:35 -05:00
import React, { FC } from 'react'
2020-09-30 13:38:39 -03:00
2020-10-02 12:59:50 -03:00
export interface State {
2020-10-01 20:40:40 -05:00
displaySidebar: boolean
2020-09-30 15:56:32 -03:00
}
2020-09-30 13:38:39 -03:00
2020-10-01 09:39:31 -03:00
const initialState = {
displaySidebar: false,
2020-10-01 20:40:40 -05:00
}
2020-10-01 09:39:31 -03:00
2020-10-02 12:59:50 -03:00
type Action =
| {
type: 'OPEN_SIDEBAR'
}
| {
type: 'CLOSE_SIDEBAR'
}
export const UIContext = React.createContext<State | any>(initialState)
2020-10-01 20:40:40 -05:00
UIContext.displayName = 'UIContext'
2020-09-30 13:38:39 -03:00
2020-10-01 21:30:52 -05:00
export const UIProvider: FC = (props) => {
2020-10-01 20:40:40 -05:00
const [state, dispatch] = React.useReducer(uiReducer, initialState)
2020-10-01 09:26:22 -03:00
2020-10-02 12:59:50 -03:00
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
2020-10-01 09:26:22 -03:00
2020-09-30 13:38:39 -03:00
const value = {
...state,
2020-10-01 09:26:22 -03:00
openSidebar,
closeSidebar,
2020-10-01 20:40:40 -05:00
}
2020-10-01 09:26:22 -03:00
2020-10-01 20:40:40 -05:00
return <UIContext.Provider value={value} {...props} />
}
2020-09-30 13:38:39 -03:00
export const useUI = () => {
2020-10-01 20:40:40 -05:00
const context = React.useContext(UIContext)
2020-09-30 13:38:39 -03:00
if (context === undefined) {
2020-10-01 20:40:40 -05:00
throw new Error(`useUI must be used within a UIProvider`)
2020-09-30 13:38:39 -03:00
}
2020-10-01 20:40:40 -05:00
return context
}
2020-10-01 09:26:22 -03:00
2020-10-02 12:59:50 -03:00
function uiReducer(state: State, action: Action) {
2020-10-02 13:08:19 -03:00
console.log(action)
2020-10-02 12:59:50 -03:00
switch (action.type) {
2020-10-01 20:40:40 -05:00
case 'OPEN_SIDEBAR': {
2020-10-01 09:26:22 -03:00
return {
...state,
displaySidebar: true,
2020-10-01 20:40:40 -05:00
}
2020-10-01 09:26:22 -03:00
}
2020-10-01 20:40:40 -05:00
case 'CLOSE_SIDEBAR': {
2020-10-01 09:26:22 -03:00
return {
...state,
displaySidebar: false,
2020-10-01 20:40:40 -05:00
}
2020-10-01 09:26:22 -03:00
}
}
}