Add error message

This commit is contained in:
adam-skowronek 2023-01-16 18:13:24 +01:00
parent 38a6c6a6be
commit e0f2711b21
4 changed files with 29 additions and 12 deletions

View File

@ -30,7 +30,7 @@ import dayjs from 'dayjs'
import WorkloadStatistics from './views/coordinator/WorkloadStatistics'
import { MainContext } from './context/MainContext'
import WithAxios from './context/WithAxios'
import BaseModal from './components/BaseModal'
import BaseModal, { ModalData } from './components/BaseModal'
require('dayjs/locale/pl')
dayjs.locale('pl')
@ -45,10 +45,12 @@ const queryClient = new QueryClient({
function App() {
const [isModalOpen, setIsModalOpen] = useState(false)
const [modalData, setModalData] = useState<ModalData | null>(null)
return (
<div>
<MainContext.Provider value={{ isModalOpen, setIsModalOpen }}>
<MainContext.Provider
value={{ isModalOpen, setIsModalOpen, setModalData }}
>
<WithAxios>
<QueryClientProvider client={queryClient}>
<Routes>
@ -95,7 +97,7 @@ function App() {
</Route>
</Routes>
</QueryClientProvider>
<BaseModal isOpen={isModalOpen} />
<BaseModal isOpen={isModalOpen} modalData={modalData} />
</WithAxios>
</MainContext.Provider>
</div>

View File

@ -38,7 +38,7 @@ const customStyles = {
const BaseModal = ({ isOpen, modalData }: BaseModalProps) => {
Modal.setAppElement('#root')
const { setIsModalOpen } = useContext(MainContext)
const { icon, message, title } = modalData ?? {}
const { message, title } = modalData ?? {}
return (
<>
<Modal
@ -57,11 +57,19 @@ const BaseModal = ({ isOpen, modalData }: BaseModalProps) => {
<IconRemove />
</button>
<div className="flex justify-center align-center items-center mt-8 flex-col">
<IconError style={{ transform: 'scale(2)' }} />
<h2 className="font-bold text-xl text-center mt-5">
Przepraszamy, wystąpił błąd. <br /> Spróbuj ponownie.
</h2>
<IconError className="mb-5" style={{ transform: 'scale(2)' }} />
{title ? (
<h2 className="font-bold text-xl text-center">{title}</h2>
) : null}
<h3 className="text-xl text-center mt-2">
{message ? (
message
) : (
<>
Przepraszamy, wystąpił błąd. <br /> Spróbuj ponownie.
</>
)}
</h3>
</div>
</div>
</Modal>

View File

@ -1,8 +1,10 @@
import React, { Dispatch, SetStateAction } from 'react'
import { ModalData } from '../components/BaseModal'
type ContextProps = {
isModalOpen: boolean
setIsModalOpen: Dispatch<SetStateAction<boolean>>
setModalData: Dispatch<SetStateAction<ModalData | null>>
}
export const MainContext = React.createContext<ContextProps>({} as ContextProps)

View File

@ -5,7 +5,7 @@ import { MainContext } from './MainContext'
const WithAxios: FunctionComponent<{ children: React.ReactNode }> = ({
children,
}) => {
const { setIsModalOpen } = useContext(MainContext)
const { setIsModalOpen, setModalData } = useContext(MainContext)
useMemo(() => {
axiosInstance.interceptors.request.use(async (request) => {
return request
@ -18,11 +18,16 @@ const WithAxios: FunctionComponent<{ children: React.ReactNode }> = ({
setIsModalOpen(false)
if (error.response?.status) {
setIsModalOpen(true)
if (error.response.data?.message)
setModalData({
title: 'Błąd',
message: error.response.data.message,
})
}
return Promise.reject(error)
},
)
}, [setIsModalOpen])
}, [setIsModalOpen, setModalData])
return <>{children}</>
}