Add error message

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

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 (
     <>
       <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)' }} />
+            <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>
-              Przepraszamy, wystąpił błąd. <br /> Spróbuj ponownie.
+            ) : null}
-            </h2>
+            <h3 className="text-xl text-center mt-2">
+              {message ? (
+                message
+              ) : (
+                <>
+                  Przepraszamy, wystąpił błąd. <br /> Spróbuj ponownie.
+                </>
+              )}
+            </h3>
           </div>
         </div>
       </Modal>

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<SetStateAction<boolean>>
+  setModalData: Dispatch<SetStateAction<ModalData | null>>
 }
 
 export const MainContext = React.createContext<ContextProps>({} as ContextProps)

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