added tostify-react

package.json

@@ -15,6 +15,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.1.0",
     "web-vitals": "^2.1.3"

src/index.js

@@ -5,6 +5,9 @@ import { Provider } from 'react-redux';
 
 import { App } from 'App';
 
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import { persistor, store } from 'redux/store';
 
 import './index.css';
@@ -15,6 +18,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <Provider store={store}>
       <PersistGate persistor={persistor}>
         <App />
+        <ToastContainer />
       </PersistGate>
     </Provider>
   </BrowserRouter>

src/pages/PostDetailsPage.jsx

@@ -13,6 +13,7 @@ import ErrorMessage from 'components/ErrorMessage';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { requestPostDetails } from 'redux/postDetailReducer';
+import { toast } from 'react-toastify';
 
 const PostCommentsPage = lazy(() => import('pages/PostCommentsPage'));
 
@@ -34,7 +35,20 @@ const PostDetailsPage = () => {
     // коли у нас не прийде id поста, ми його просто відхиляємо, виходом з функції
     if (!postId) return;
     // thunk можна діспатчити, і дані які будуть у неї передані, прийдуть першим аргументои у async
-    dispatch(requestPostDetails(postId));
+    dispatch(requestPostDetails(postId))
+      .unwrap()
+      .then(() => {
+        toast.success('Hi! Post details was success fetched', {
+          position: 'top-center',
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: 'dark',
+        });
+      });
   }, [postId, dispatch]);
 
   return (