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 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>

View File

@ -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>

View File

@ -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)

View File

@ -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}</>
} }