added react toastify

package.json

@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.1",
     "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.12.0",

src/components/Icons/FavoriteIcon/FavoriteIcon.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { setUser } from '../../../state/user/userSlice';
+import { toast } from 'react-toastify';
 
 import { moviePropTypes } from '../../../propTypes';
 
@@ -25,13 +26,14 @@ export const FavoriteIcon = ({ movie, className = '' }) => {
         if (data.success) {
           const updatedUser = data.data;
           dispatch(setUser(updatedUser));
+          toast.success(isFavorite ? 'Movie removed' : 'Movie added');
         } else {
-          alert(`Operation failed: ${data.error.message}`);
+          toast.error(`${data.error.message}`);
         }
       })
       .catch((error) => {
+        toast.error('Something went wrong!');
         console.log(error);
-        alert('Something went wrong');
       });
   };
 

src/components/Icons/ToWatchIcon/ToWatchIcon.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import { setUser } from '../../../state/user/userSlice';
+import { toast } from 'react-toastify';
 
 import { moviePropTypes } from '../../../propTypes';
 
@@ -25,13 +26,14 @@ export const ToWatchIcon = ({ movie, className = '' }) => {
         if (data.success) {
           const updatedUser = data.data;
           dispatch(setUser(updatedUser));
+          toast.success(isAdded ? 'Movie removed' : 'Movie added');
         } else {
-          alert(`Operation failed: ${data.error.message}`);
+          toast.error(`${data.error.message}`);
         }
       })
       .catch((error) => {
+        toast.error('Something went wrong!');
         console.log(error);
-        alert('Something went wrong');
       });
   };
 

src/index.jsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { store } from './state/store';
 import { HomePage } from './pages';
 
+import 'react-toastify/dist/ReactToastify.min.css';
 import './index.scss';
 
 const App = () => {

src/layouts/AppLayout/AppLayout.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import { Container, Row, Col } from 'react-bootstrap';
+import { ToastContainer } from 'react-toastify';
 import { NavigationBar, FooterBar } from '../../layouts';
 
 export const AppLayout = () => {
@@ -15,6 +16,7 @@ export const AppLayout = () => {
           </main>
 
           <FooterBar />
+          <ToastContainer theme="colored" />
         </Col>
       </Row>
     </Container>

src/pages/LoginPage/LoginPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, Form, Spinner } from 'react-bootstrap';
 import { Navigate, Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
 import { setUser, setToken } from '../../state/user/userSlice';
 
 export const LoginPage = () => {
@@ -42,15 +43,16 @@ export const LoginPage = () => {
           const { user, token } = data.data;
           dispatch(setUser(user));
           dispatch(setToken(token));
+          toast.success(`Welcome back, ${user.Name}`);
         } else {
-          alert(`Login failed: ${data.error.message}`);
+          toast.error(`Login failed: ${data.error.message}`);
         }
         setLoading(false);
       })
       .catch((error) => {
         setLoading(false);
-        alert('Something went wrong');
-        console.log(error);
+        toast.error('Something went wrong!');
+        console.error(error);
       });
   };
 

src/pages/ProfilePage/ProfilePage.jsx

@@ -3,6 +3,7 @@ import { Row, Col, Button, Form, Spinner } from 'react-bootstrap';
 import { MoviesSlider } from '../../components/MoviesSlider';
 import { useSelector, useDispatch } from 'react-redux';
 import { setUser, onLoggedOut } from '../../state/user/userSlice';
+import { toast } from 'react-toastify';
 
 export const ProfilePage = () => {
   // TODO: Fix the bug with timezone
@@ -26,6 +27,7 @@ export const ProfilePage = () => {
   const [name, setName] = useState(user.Name);
   const [password, setPassword] = useState('');
   const [birthday, setBirthday] = useState(formattedDate(user.Birthday));
+  const [errors, setErrors] = useState([]);
 
   const movies = useSelector((state) => state.movies.list);
 
@@ -64,15 +66,21 @@ export const ProfilePage = () => {
       .then((data) => {
         if (data.success) {
           dispatch(setUser({ ...user, ...data.data }));
-          alert('Update successful');
+          setErrors([]);
+          toast.success('Update successful');
         } else {
-          alert(`Update failed: ${data.error.message}`);
+          const errors = data.error.message;
+          if (Array.isArray(errors)) {
+            setErrors(errors.reduce((acc, cur) => ({ ...acc, [cur.path]: cur.msg }), {}));
+          } else {
+            toast.error(errors);
+          }
         }
         setLoading(false);
       })
       .catch((error) => {
         setLoading(false);
-        alert('Something went wrong');
+        toast.error('Something went wrong!');
         console.log(error);
       });
   };
@@ -124,9 +132,11 @@ export const ProfilePage = () => {
                 placeholder="Name"
                 defaultValue={user.Name}
                 onChange={(e) => setName(e.target.value)}
+                isInvalid={!!errors.Name}
                 required
                 minLength={5}
               />
+              <Form.Control.Feedback type="invalid">{errors.Name}</Form.Control.Feedback>
             </Form.Group>
 
             <Form.Group className="mb-3" controlId="formBirthday">

src/pages/SignUpPage/SignUpPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, Form, Spinner } from 'react-bootstrap';
 import { Navigate, Link, useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
 
 export const SignUpPage = () => {
   const navigate = useNavigate();
@@ -12,10 +13,9 @@ export const SignUpPage = () => {
   const [email, setEmail] = useState('');
   const [birthday, setBirthday] = useState('');
   const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState([]);
 
   const handleSubmit = (event) => {
-    // this prevents the default behavior of the form which is to
-    // reload the entire page
     event.preventDefault();
 
     const data = {
@@ -41,16 +41,21 @@ export const SignUpPage = () => {
         // Please review the response format of the API here
         // https://cf-2-movie-api.onrender.com/docs/#/User/post_users
         if (data.success) {
-          alert('Signup successful');
+          toast.success('Signup successful');
           navigate('/', { replace: true });
         } else {
-          alert(`Signup failed: ${data.error.message}`);
+          const errors = data.error.message;
+          if (Array.isArray(errors)) {
+            setErrors(errors.reduce((acc, cur) => ({ ...acc, [cur.path]: cur.msg }), {}));
+          } else {
+            setErrors({ Email: errors });
+          }
         }
         setLoading(false);
       })
       .catch((error) => {
         setLoading(false);
-        alert('Something went wrong');
+        toast.error('Something went wrong!');
         console.log(error);
       });
   };
@@ -75,8 +80,10 @@ export const SignUpPage = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Email"
-              required
+              isInvalid={!!errors.Email}
+              // required
             />
+            <Form.Control.Feedback type="invalid">{errors.Email}</Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group className="mb-3" controlId="formPassword">
@@ -85,8 +92,10 @@ export const SignUpPage = () => {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="Password"
+              isInvalid={!!errors.Password}
               required
             />
+            <Form.Control.Feedback type="invalid">{errors.Password}</Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group className="mb-3" controlId="formName">
@@ -95,9 +104,11 @@ export const SignUpPage = () => {
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Name"
+              isInvalid={!!errors.Name}
               required
               minLength="5"
             />
+            <Form.Control.Feedback type="invalid">{errors.Name}</Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group className="mb-3" controlId="formBirthday">