Implementation of a CRUD that consumes the Superheroes API , is wrapp…

…ed with Redux and connected to Mongodb.

components/admin/AllUsers.jsx

@@ -103,7 +103,7 @@ const AllUsers = () => {
                         </Link>
 
                         <button className="btn btn-danger ms-3 btn-sm" onClick={() => deleteUserHandler(user._id)}>
-                            <i class="ri-delete-bin-line"></i>
+                            <i className="ri-delete-bin-line"></i>
                         </button>
 
                     </div>

components/content/Home.jsx

@@ -6,6 +6,7 @@ import { herosDefault } from "../../db/hero";
 import HeroItem from "../../components/hero/HeroItem";
 import { submitSearch } from "../../redux/actions/heroActions";
 import { submitDetails } from "../../redux/actions/heroActions";
+import { getHeros } from "../../redux/actions/heroActions";
 import { useSelector, useDispatch, connect } from "react-redux";
 import { useRouter } from "next/router";
 import { toast } from "react-toastify";
@@ -32,17 +33,19 @@ const Home = (props) => {
 
     /* TODO: Test load wiht intial state from SSR */
     const handleViewDetails = (id) => {
-        if (dispatch && dispatch !== null && dispatch !== undefined)
+        if (dispatch && dispatch !== null && dispatch !== undefined) {
+            dispatch(getHeros());
             dispatch(submitDetails(id));
-        router.push(`/details/${id}`);
+            router.push(`/details/${id}`);
+        }
     };
 
 
 
     return (
         <div className="sectionTwo container">
             <h1 className={styles.title}>
-                Welcome to <a href="#">Superheroes</a>
+                Welcome to <a href="https://superheroapi.com/ids.html">Superheroes</a>
             </h1>
             <p className={styles.description}>
                 Get started by searching you favorite Superheroes

components/hero/AddTeam.jsx

@@ -1,19 +1,59 @@
 import { useSelector, useDispatch } from "react-redux";
 import { newHero } from "../../redux/actions/heroActions";
+import { getHeros } from "../../redux/actions/heroActions";
 import { useRouter } from "next/router";
+import { toast } from "react-toastify";
+import { ExternalLinkIcon } from "@heroicons/react/outline";
 
 const AddTeam = ({ hero }) => {
-
     const router = useRouter();
     const dispatch = useDispatch();
 
+    const { user, isAuthenticated } = useSelector(state => state.loadedUser);
+    const herosTeam = useSelector((state) => state.allHeros.herosTeam);
+    const heroeDetails = useSelector((state) => state.detailsHero.hero);
+
 
-    // Add Superheroe to Team
+    // Add Superheroe to Team   
     const handleNewHero = (id) => {
-        let heroData = hero;
-        if (dispatch && dispatch !== null && dispatch !== undefined)
-            dispatch(newHero(heroData));
-        router.push(`/details/${id}`); // refresh page for look message success or error
+        if (isAuthenticated) {
+            const hero_Id = herosTeam.filter((heroId) => heroId.id == id);//filter the hero with the id in the team
+            if (hero_Id.length === 0) {
+                //console.log(hero_Id.length)
+                // This const is for select if the hero view details is good or bad.
+                const heroe = heroeDetails.filter((heroDetails) => heroDetails.biography.alignment === "good");
+                if (heroe.length === 0) {
+                    //console.log("villain")
+                    // This cicle is for Villain
+                    const villain = herosTeam.filter((hero) => hero.biography[0].alignment === "bad");
+                    if (villain.length >= 3) {
+                        //console.log(villain.length)
+                        toast.error("You can't add more than 3 Villains to your Team");
+                    } else {
+                        const heroData = { ...hero, user: user._id }
+                        dispatch(newHero(heroData));
+                        dispatch(getHeros());// update state of the Team
+                        router.push(`/details/${id}`) // refresh page for look message success or error   
+                    }
+                } else {
+                    // This cicle is for Superheroe
+                    const superheroes = herosTeam.filter((hero) => hero.biography[0].alignment === "good");
+                    console.log("superhero")
+                    if (superheroes.length >= 3) {
+                        toast.error("You can't add more than 3 superheroes to your team");
+                    } else {
+                        const heroData = { ...hero, user: user._id }
+                        dispatch(newHero(heroData));
+                        dispatch(getHeros());// update state of the Team
+                        router.push(`/details/${id}`); // refresh page for look message success or error
+                    }
+                }
+            } else {
+                toast.error("This Hero already in team")
+            }
+        } else {
+            (toast.error("You need to be logged in to add a hero to your team"))
+        }
     };
 
 
@@ -29,3 +69,26 @@ const AddTeam = ({ hero }) => {
 }
 
 export default AddTeam
+
+
+
+/* const heroe = heroeDetails.filter((heroDetails) => heroDetails.biography.alignment === "good");
+                if (heroe.length === 0) {
+                    const villain = herosTeam.filter((hero) => hero.biography[0].alignment === "bad");
+                    if (villain.length >= 3) {
+                        toast.error("You can't add more than 3 Villains to your Team");
+                    } else {
+                        const heroData = { ...hero, user: user._id }
+                        dispatch(newHero(heroData));
+                        router.push(`/details/${id}`); // refresh page for look message success or error
+                    }
+                } else {
+                    const superheroes = herosTeam.filter((hero) => hero.biography[0].alignment === "good");
+                    if (superheroes >= 3) {
+                        toast.error("You can't add more than 3 superheroes to your team");
+                    } else {
+                        const heroData = { ...hero, user: user._id }
+                        dispatch(newHero(heroData));
+                        router.push(`/details/${id}`); // refresh page for look message success or error
+                    }
+                } */