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

208 lines
4.2 KiB
TypeScript
Raw Normal View History

2020-10-26 20:13:05 -03:00
import React, { FC, useMemo } from 'react'
2020-10-15 18:02:49 -03:00
import { ThemeProvider } from 'next-themes'
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-10-22 10:27:11 -03:00
displayDropdown: boolean
2020-10-25 16:32:56 -03:00
displayModal: boolean
2020-10-26 00:12:21 -03:00
displayToast: boolean
2020-10-25 18:26:32 -03:00
modalView: string
2020-10-26 00:12:21 -03:00
toastText: string
2021-02-04 12:29:20 -03:00
userAvatar: string
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-22 10:27:11 -03:00
displayDropdown: false,
2020-10-25 16:32:56 -03:00
displayModal: false,
2020-10-25 18:26:32 -03:00
modalView: 'LOGIN_VIEW',
2020-10-26 00:12:21 -03:00
displayToast: false,
2020-10-26 00:12:51 -03:00
toastText: '',
2021-02-04 12:29:20 -03:00
userAvatar: '',
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'
}
2020-10-26 00:12:21 -03:00
| {
type: 'OPEN_TOAST'
}
| {
type: 'CLOSE_TOAST'
}
| {
type: 'SET_TOAST_TEXT'
text: ToastText
}
2020-10-22 10:27:11 -03:00
| {
type: 'OPEN_DROPDOWN'
}
| {
type: 'CLOSE_DROPDOWN'
}
2020-10-25 16:32:56 -03:00
| {
type: 'OPEN_MODAL'
}
| {
type: 'CLOSE_MODAL'
}
2020-10-25 18:26:32 -03:00
| {
type: 'SET_MODAL_VIEW'
2020-10-26 10:10:34 -03:00
view: MODAL_VIEWS
2020-10-25 18:26:32 -03:00
}
2021-02-04 12:29:20 -03:00
| {
type: 'SET_USER_AVATAR'
value: string
}
2020-10-25 18:26:32 -03:00
2021-02-26 15:52:09 -03:00
type MODAL_VIEWS =
| 'SIGNUP_VIEW'
| 'LOGIN_VIEW'
| 'FORGOT_VIEW'
| 'NEW_SHIPPING_ADDRESS'
| 'NEW_PAYMENT_METHOD'
2020-10-26 00:12:21 -03:00
type ToastText = string
2020-10-02 12:59:50 -03:00
export const UIContext = React.createContext<State | any>(initialState)
2020-10-06 22:16:33 -05:00
2020-10-01 20:40:40 -05:00
UIContext.displayName = 'UIContext'
2020-09-30 13:38:39 -03:00
2020-10-22 10:27:11 -03:00
function uiReducer(state: State, action: Action) {
switch (action.type) {
case 'OPEN_SIDEBAR': {
return {
...state,
displaySidebar: true,
}
}
case 'CLOSE_SIDEBAR': {
return {
...state,
displaySidebar: false,
}
}
case 'OPEN_DROPDOWN': {
return {
...state,
displayDropdown: true,
}
}
case 'CLOSE_DROPDOWN': {
return {
...state,
displayDropdown: false,
}
}
2020-10-25 16:32:56 -03:00
case 'OPEN_MODAL': {
return {
...state,
displayModal: true,
displaySidebar: false,
2020-10-25 16:32:56 -03:00
}
}
case 'CLOSE_MODAL': {
return {
...state,
displayModal: false,
}
}
2020-10-26 00:12:21 -03:00
case 'OPEN_TOAST': {
return {
...state,
displayToast: true,
}
}
case 'CLOSE_TOAST': {
return {
...state,
displayToast: false,
}
}
2020-10-25 18:26:32 -03:00
case 'SET_MODAL_VIEW': {
return {
...state,
modalView: action.view,
}
}
2020-10-26 00:12:21 -03:00
case 'SET_TOAST_TEXT': {
return {
...state,
toastText: action.text,
}
}
2021-02-04 12:29:20 -03:00
case 'SET_USER_AVATAR': {
return {
...state,
userAvatar: action.value,
}
}
2020-10-22 10:27:11 -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' })
const toggleSidebar = () =>
state.displaySidebar
? dispatch({ type: 'CLOSE_SIDEBAR' })
: dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebarIfPresent = () =>
state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' })
2020-10-01 09:26:22 -03:00
2020-10-22 10:27:11 -03:00
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
2020-10-25 16:32:56 -03:00
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
2020-10-26 00:12:21 -03:00
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
2021-02-04 12:29:20 -03:00
const setUserAvatar = (value: string) =>
dispatch({ type: 'SET_USER_AVATAR', value })
2020-10-25 18:26:32 -03:00
const setModalView = (view: MODAL_VIEWS) =>
dispatch({ type: 'SET_MODAL_VIEW', view })
2020-10-26 20:13:05 -03:00
const value = useMemo(
() => ({
...state,
openSidebar,
closeSidebar,
toggleSidebar,
closeSidebarIfPresent,
2020-10-26 20:13:05 -03:00
openDropdown,
closeDropdown,
openModal,
closeModal,
setModalView,
openToast,
closeToast,
2021-02-04 12:29:20 -03:00
setUserAvatar,
2020-10-26 20:13:05 -03:00
}),
[state]
)
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-15 18:02:49 -03:00
export const ManagedUIContext: FC = ({ children }) => (
<UIProvider>
2020-11-26 13:13:30 -03:00
<ThemeProvider>{children}</ThemeProvider>
2020-10-15 18:02:49 -03:00
</UIProvider>
)