release/v0.1.0

.env.sample

@@ -0,0 +1 @@
+VITE_PUBLIC_KEY=YOUR_API_KEY

.gitignore

@@ -1,6 +1,3 @@
-
-.env
-
 # Logs
 logs
 *.log

package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^7.1.5"
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",
@@ -29,7 +30,6 @@
     "husky": "^8.0.3",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.5.5",
-    "react-router-dom": "^7.1.5",
     "sass": "^1.83.4",
     "vite": "^4.4.9"
   }

src/app.jsx

@@ -4,10 +4,10 @@ import { Route, Routes } from 'react-router-dom';
 import './app.scss';
 import MarvelCharacters from './components/marvel-characters';
 import Layout from './components/router-layout';
-import ComicDetail from './pages/comics-display';
-import ComicPage from './pages/comics-page';
+import ComicDisplay from './pages/comics-display';
+import ComicsPage from './pages/comics-page';
 import FavoritePage from './pages/favorite-page';
-import NotFound from './pages/not-found-page';
+import NotFoundPage from './pages/not-found-page';
 import ProfilePage from './pages/profile-page';
 
 const getFavoritesFromLocalStorage = () => {
@@ -32,16 +32,23 @@ function App() {
     }
   };
 
+  const removeFromFavorites = (char) => {
+    setFavorites(favorites.filter((fav) => fav.id !== char.id));
+  };
+
   return (
     <>
       <Routes>
         <Route element={<Layout />}>
           <Route path='/' element={<MarvelCharacters addToFavorites={addToFavorites} />} />
-          <Route path='/favorites' element={<FavoritePage favorites={favorites} />} />+
-          <Route path='/comics/:comicId' element={<ComicDetail />} />
+          <Route
+            path='/favorites'
+            element={<FavoritePage favorites={favorites} removeFromFavorites={removeFromFavorites} />}
+          />
+          <Route path='/comics/:comicId' element={<ComicDisplay />} />
           <Route path='/profile' element={<ProfilePage />} />
-          <Route path='/comics' element={<ComicPage />}></Route>
-          <Route path='*' element={<NotFound />} />
+          <Route path='/comics' element={<ComicsPage />} />
+          <Route path='*' element={<NotFoundPage />} />
         </Route>
       </Routes>
     </>

src/components/burger.jsx

@@ -12,7 +12,7 @@ const Burger = () => {
 
   return (
     <>
-      <div className='contenair'>
+      <div className='container'>
         <div className='input'></div>
         <div className='burger' onClick={toggleBurger}>
           <div className={`line ${burger ? 'active' : ''}`}></div>

src/components/card.jsx

@@ -1,6 +1,22 @@
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import '../style/card.scss';
 
-export default function Card({ character, image, onAddToFavorites, onClick }) {
+const notify = () => {
+  toast.success('🎉 Added to Favorites !', {
+    position: 'top-right',
+    autoClose: 3000,
+    hideProgressBar: false,
+
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    theme: 'light',
+  });
+};
+
+export default function Card({ character, image, onAddToFavorites, onClick, onRemove, isFavoritePage }) {
   return (
     <div className='card' onClick={onClick}>
       <img src={image} alt={character} className='heart' />
@@ -10,10 +26,25 @@ export default function Card({ character, image, onAddToFavorites, onClick }) {
           onClick={(e) => {
             e.stopPropagation();
             onAddToFavorites();
+            notify();
           }}
         >
           <img className='heart ' src='/pictures/heart-cards.png' alt='' />
         </button>
+
+        <ToastContainer />
+
+        {isFavoritePage && (
+          <button
+            className='delete-fav'
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+          >
+            <img className='remove-fav' src='/pictures/remove-fave.svg' alt='' />
+          </button>
+        )}
       </div>
       <div className='character-title'>
         <h2>{character}</h2>

src/components/characters.jsx

@@ -1,32 +1,15 @@
-import { useEffect, useState } from 'react';
-
+import useVisibleStatus from '../hooks/use-visible-status';
 import '../style/characters.scss';
+import Loader from './loader';
 
 export default function Characters({ data, onClick }) {
-  const [isVisible, setIsVisible] = useState(true);
-
-  const hideCharacters = () => {
-    setIsVisible(false);
-  };
-
-  const handleClickOutside = (event) => {
-    if (isVisible && !event.target.closest('.search-container')) {
-      hideCharacters();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
+  const [isVisible, hideComicsCharacters] = useVisibleStatus();
 
   return (
     <>
       <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
-        <div className='search-result' onClick={hideCharacters}>
-          <button className='close-search' onClick={hideCharacters}>
+        <div className='search-result' onClick={() => hideComicsCharacters()}>
+          <button className='close-search' onClick={() => hideComicsCharacters()}>
             X
           </button>
           <div className='characters'>

src/components/comics.jsx

@@ -1,39 +1,22 @@
-import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import useVisibleStatus from '../hooks/use-visible-status';
 import '../style/comics.scss';
 
 export default function Comics({ data, onClick }) {
-  const [isVisible, setIsVisible] = useState(true);
-
-  const hideComics = () => {
-    setIsVisible(false);
-  };
-
-  const handleClickOutside = (event) => {
-    if (isVisible && !event.target.closest('.search-container')) {
-      hideComics();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
+  const [isVisible, hideComicsCharacters] = useVisibleStatus();
 
   return (
     <div className='search-container' style={{ display: isVisible ? '' : 'none' }}>
-      <div className='search-result' onClick={hideComics}>
-        <button className='close-search' onClick={hideComics}>
+      <div className='search-result' onClick={hideComicsCharacters}>
+        <button className='close-search' onClick={hideComicsCharacters}>
           X
         </button>
         <div className='comics'>
           {data.map((dataItem) => {
-            const detailsUrl = dataItem.urls.find((element) => element['type'] === 'detail').url;
             return (
               <Link
+                to={`/comics/${dataItem.id}`}
                 key={dataItem.id}
                 className='comic-card'
                 style={{
@@ -43,10 +26,8 @@ export default function Comics({ data, onClick }) {
                 onClick={(e) => {
                   e.stopPropagation();
                   onClick(dataItem.id);
+                  hideComicsCharacters();
                 }}
-                href={detailsUrl}
-                target='_blank'
-                rel='noreferrer'
               >
                 <div className='comics-title'>
                   <h3>{dataItem.title}</h3>

src/components/footer.jsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
 import '../style/footer.scss';
-import Socials from './socials.jsx';
+import Socials from './socials';
 
 function Footer() {
   return (
@@ -14,12 +14,8 @@ function Footer() {
 
           <div className='footer-nav'>
             <div>
-              <a href='https://marvelofficial.com/shop/?srsltid=AfmBOorVehT8ELdv9CSRuSbn2YBFn_1tngBPVsIlMT4j70lF8KhpRGsb'>
-                Shops
-              </a>
-              <a href='https://www.disneyplus.com/brand/marvel?cid=DTCI-Synergy-Marvel-Site-Acquisition-Library-US-Marvel-NA-EN-NavFooter-Marvel_DisneyPlus_NavFooter_Evergreen-NA'>
-                Disney+
-              </a>
+              <a href='https://marvelofficial.com/shop/'>Shops</a>
+              <a href='https://www.disneyplus.com/brand/'>Disney+</a>
             </div>
 
             <div>

src/components/loader.jsx

@@ -3,7 +3,7 @@ import '../style/loader.scss';
 export default function Loader() {
   return (
     <div className='load'>
-      <img src='/pictures/hammer.png' alt='' /> <p> Loading..... </p>
+      <img src='/pictures/hammer.png' alt='' />
     </div>
   );
 }