Add error message
This commit is contained in:
parent
38a6c6a6be
commit
e0f2711b21
@ -30,7 +30,7 @@ import dayjs from 'dayjs'
|
|||||||
import WorkloadStatistics from './views/coordinator/WorkloadStatistics'
|
import WorkloadStatistics from './views/coordinator/WorkloadStatistics'
|
||||||
import { MainContext } from './context/MainContext'
|
import { MainContext } from './context/MainContext'
|
||||||
import WithAxios from './context/WithAxios'
|
import WithAxios from './context/WithAxios'
|
||||||
import BaseModal from './components/BaseModal'
|
import BaseModal, { ModalData } from './components/BaseModal'
|
||||||
|
|
||||||
require('dayjs/locale/pl')
|
require('dayjs/locale/pl')
|
||||||
dayjs.locale('pl')
|
dayjs.locale('pl')
|
||||||
@ -45,10 +45,12 @@ const queryClient = new QueryClient({
|
|||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
const [modalData, setModalData] = useState<ModalData | null>(null)
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<MainContext.Provider value={{ isModalOpen, setIsModalOpen }}>
|
<MainContext.Provider
|
||||||
|
value={{ isModalOpen, setIsModalOpen, setModalData }}
|
||||||
|
>
|
||||||
<WithAxios>
|
<WithAxios>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<Routes>
|
<Routes>
|
||||||
@ -95,7 +97,7 @@ function App() {
|
|||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
<BaseModal isOpen={isModalOpen} />
|
<BaseModal isOpen={isModalOpen} modalData={modalData} />
|
||||||
</WithAxios>
|
</WithAxios>
|
||||||
</MainContext.Provider>
|
</MainContext.Provider>
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,7 +38,7 @@ const customStyles = {
|
|||||||
const BaseModal = ({ isOpen, modalData }: BaseModalProps) => {
|
const BaseModal = ({ isOpen, modalData }: BaseModalProps) => {
|
||||||
Modal.setAppElement('#root')
|
Modal.setAppElement('#root')
|
||||||
const { setIsModalOpen } = useContext(MainContext)
|
const { setIsModalOpen } = useContext(MainContext)
|
||||||
const { icon, message, title } = modalData ?? {}
|
const { message, title } = modalData ?? {}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
@ -57,11 +57,19 @@ const BaseModal = ({ isOpen, modalData }: BaseModalProps) => {
|
|||||||
<IconRemove />
|
<IconRemove />
|
||||||
</button>
|
</button>
|
||||||
<div className="flex justify-center align-center items-center mt-8 flex-col">
|
<div className="flex justify-center align-center items-center mt-8 flex-col">
|
||||||
<IconError style={{ transform: 'scale(2)' }} />
|
<IconError className="mb-5" style={{ transform: 'scale(2)' }} />
|
||||||
|
{title ? (
|
||||||
<h2 className="font-bold text-xl text-center mt-5">
|
<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.
|
Przepraszamy, wystąpił błąd. <br /> Spróbuj ponownie.
|
||||||
</h2>
|
</>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import React, { Dispatch, SetStateAction } from 'react'
|
import React, { Dispatch, SetStateAction } from 'react'
|
||||||
|
import { ModalData } from '../components/BaseModal'
|
||||||
|
|
||||||
type ContextProps = {
|
type ContextProps = {
|
||||||
isModalOpen: boolean
|
isModalOpen: boolean
|
||||||
setIsModalOpen: Dispatch<SetStateAction<boolean>>
|
setIsModalOpen: Dispatch<SetStateAction<boolean>>
|
||||||
|
setModalData: Dispatch<SetStateAction<ModalData | null>>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const MainContext = React.createContext<ContextProps>({} as ContextProps)
|
export const MainContext = React.createContext<ContextProps>({} as ContextProps)
|
||||||
|
@ -5,7 +5,7 @@ import { MainContext } from './MainContext'
|
|||||||
const WithAxios: FunctionComponent<{ children: React.ReactNode }> = ({
|
const WithAxios: FunctionComponent<{ children: React.ReactNode }> = ({
|
||||||
children,
|
children,
|
||||||
}) => {
|
}) => {
|
||||||
const { setIsModalOpen } = useContext(MainContext)
|
const { setIsModalOpen, setModalData } = useContext(MainContext)
|
||||||
useMemo(() => {
|
useMemo(() => {
|
||||||
axiosInstance.interceptors.request.use(async (request) => {
|
axiosInstance.interceptors.request.use(async (request) => {
|
||||||
return request
|
return request
|
||||||
@ -18,11 +18,16 @@ const WithAxios: FunctionComponent<{ children: React.ReactNode }> = ({
|
|||||||
setIsModalOpen(false)
|
setIsModalOpen(false)
|
||||||
if (error.response?.status) {
|
if (error.response?.status) {
|
||||||
setIsModalOpen(true)
|
setIsModalOpen(true)
|
||||||
|
if (error.response.data?.message)
|
||||||
|
setModalData({
|
||||||
|
title: 'Błąd',
|
||||||
|
message: error.response.data.message,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
}, [setIsModalOpen])
|
}, [setIsModalOpen, setModalData])
|
||||||
return <>{children}</>
|
return <>{children}</>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user