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
|
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: '',
|
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 17:03:44 -03:00
|
|
|
| {
|
|
|
|
type: 'SET_USER_AVATAR'
|
|
|
|
value: string
|
2021-02-12 14:56:03 -05:00
|
|
|
}
|
2020-10-25 18:26:32 -03:00
|
|
|
|
2020-10-26 09:27:21 -03:00
|
|
|
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
|
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,
|
2021-01-29 12:00:16 -03:00
|
|
|
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-22 14:06:34 +02: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' })
|
2020-10-27 00:52:49 -03:00
|
|
|
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-12 14:56:03 -05:00
|
|
|
const setUserAvatar = (value: string) =>
|
|
|
|
dispatch({ type: 'SET_USER_AVATAR', value })
|
2021-02-04 17:03:44 -03:00
|
|
|
|
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,
|
2020-10-27 00:52:49 -03:00
|
|
|
toggleSidebar,
|
|
|
|
closeSidebarIfPresent,
|
2020-10-26 20:13:05 -03:00
|
|
|
openDropdown,
|
|
|
|
closeDropdown,
|
|
|
|
openModal,
|
|
|
|
closeModal,
|
|
|
|
setModalView,
|
|
|
|
openToast,
|
|
|
|
closeToast,
|
2021-02-12 14:56:03 -05: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>
|
|
|
|
)
|