diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9df700a..85938c0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -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(null) return (
- + @@ -95,7 +97,7 @@ function App() { - +
diff --git a/frontend/src/components/BaseModal.tsx b/frontend/src/components/BaseModal.tsx index fd1a7ac..a6f39b1 100644 --- a/frontend/src/components/BaseModal.tsx +++ b/frontend/src/components/BaseModal.tsx @@ -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 ( <> {
- - -

- Przepraszamy, wystąpił błąd.
Spróbuj ponownie. -

+ + {title ? ( +

{title}

+ ) : null} +

+ {message ? ( + message + ) : ( + <> + Przepraszamy, wystąpił błąd.
Spróbuj ponownie. + + )} +

diff --git a/frontend/src/context/MainContext.tsx b/frontend/src/context/MainContext.tsx index ad334df..43e09ad 100644 --- a/frontend/src/context/MainContext.tsx +++ b/frontend/src/context/MainContext.tsx @@ -1,8 +1,10 @@ import React, { Dispatch, SetStateAction } from 'react' +import { ModalData } from '../components/BaseModal' type ContextProps = { isModalOpen: boolean setIsModalOpen: Dispatch> + setModalData: Dispatch> } export const MainContext = React.createContext({} as ContextProps) diff --git a/frontend/src/context/WithAxios.tsx b/frontend/src/context/WithAxios.tsx index 26b10d7..f4055f3 100644 --- a/frontend/src/context/WithAxios.tsx +++ b/frontend/src/context/WithAxios.tsx @@ -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} }