Adding a list of comics; Ability to choose a certain comic;

Author: StetsenkoBohdan2002

package-lock.json

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import noImage from '../../resources/img/no-image.jpg';
+
+import useMarvelService from '../../services/MarvelService';
+import Spinner from '../spinner/Spinner';
+import ErrorMessage from '../errorMessage/ErrorMessage';
+
+import './ComicsList.scss';
+
+const ComicsList = () => {
+  const [comicsList, setComicsList] = useState([]);
+  const [newItemLoading, setnewItemLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [comicsEnded, setComicsEnded] = useState(false);
+
+  const { loading, error, getAllComics } = useMarvelService();
+
+  useEffect(() => {
+    onRequest(offset, true);
+  }, []);
+
+  const onRequest = (offset, initial) => {
+    initial ? setnewItemLoading(false) : setnewItemLoading(true);
+    getAllComics(offset).then(onComicsListLoaded);
+  };
+
+  const onComicsListLoaded = (newComicsList) => {
+    let ended = false;
+    if (newComicsList.length < 8) {
+      ended = true;
+    }
+    setComicsList([...comicsList, ...newComicsList]);
+    setnewItemLoading(false);
+    setOffset(offset + 8);
+    setComicsEnded(ended);
+  };
+
+  function renderItems(arr) {
+    const items = arr.map((item, i) => {
+      return (
+        <li className='comics__item' key={i}>
+          <Link to={`/comics/${item.id}`}>
+            <img
+              src={
+                item.thumbnail !==
+                'http://i.annihil.us/u/prod/marvel/i/mg/b/40/image_not_available.jpg'
+                  ? item.thumbnail
+                  : noImage
+              }
+              alt={item.title}
+              className='comics__item-img'
+            />
+            <div className='comics__item-name'>{item.title}</div>
+            <div className='comics__item-price'>{item.price}</div>
+          </Link>
+        </li>
+      );
+    });
+
+    return <ul className='comics__flex'>{items}</ul>;
+  }
+
+  const items = renderItems(comicsList);
+  console.log(comicsList)
+
+  const errorMessage = error ? <ErrorMessage /> : null;
+  const spinner = loading && !newItemLoading ? <Spinner /> : null;
+
+  return (
+    <div className='comics__list'>
+      {errorMessage}
+      {spinner}
+      {items}
+      <button
+        disabled={newItemLoading}
+        style={{ display: comicsEnded ? 'none' : 'block' }}
+        className='button button__main'
+        onClick={() => onRequest(offset)}
+      >
+        <div className='inner'>load more</div>
+      </button>
+    </div>
+  );
+};
+
+export default ComicsList;

package.json

@@ -0,0 +1,46 @@
+.comics {
+    &__list {
+        margin-top: 45px;
+        padding-bottom: 50px;
+    }
+
+    &__flex {
+        display: flex;
+        flex-wrap: wrap;
+        max-width: 100%;
+        justify-content:space-between;
+    }
+
+    &__item {
+        transition: 0.3s transform;
+        width: 20%;
+        margin: 20px;
+
+        &-img {
+            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
+            width: 300px;
+            height: 345px;
+            object-fit: cover;
+        }
+
+        &-name {
+            margin-top: 10px;
+            font-weight: bold;
+            font-size: 14px;
+            line-height: 18px;
+        }
+
+        &-price {
+            margin-top: 5px;
+            font-weight: bold;
+            font-size: 14px;
+            line-height: 18px;
+            color: rgba(0, 0, 0, 0.6);
+            text-transform: uppercase;
+        }
+
+        &:hover {
+            transform: translateY(-5px);
+        }
+    }
+}

project/src/components/ComicsList/ComicsList.js

@@ -2,7 +2,9 @@ import { useState, React } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import AppHeader from '../appHeader/AppHeader';
 import MainPage from '../pages/MainPage';
-import ComicPage from '../pages/ComicPage';
+import NoMatch from '../pages/404';
+import ComicsList from '../ComicsList/ComicsList';
+import SinglePageComic from '../pages/SinglePageComic';
 const App = () => {
   return (
     <Router>
@@ -14,8 +16,10 @@ const App = () => {
         </div>
         <main>
           <Routes>
-            <Route path='/' element={<MainPage/>}></Route>
-            <Route path='/comics' element={<ComicPage/>}></Route>
+            <Route path='/' element={<MainPage />}></Route>
+            <Route path='/comics' element={<ComicsList />}></Route>
+            <Route path='/comics/:comicId' element={<SinglePageComic />}></Route>
+            <Route path='*' element={<NoMatch/>}></Route>
           </Routes>
         </main>
       </div>

project/src/components/ComicsList/ComicsList.scss

@@ -1,7 +1,6 @@
 @import '../../style/variables.scss';
 
 .app {
-   height: 2000px;
 
    &-wrapper {
       background-color: $dark;

project/src/components/SingleComic/SingleComic.js

@@ -5,17 +5,22 @@ import ErrorMessage from '../errorMessage/ErrorMessage';
 import Skelet from '../skelet/Skelet';
 import noImage from '../../resources/img/no-image.jpg';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 const CharInfo = (props) => {
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(false);
 
-  const onCharInfoLoaded = () => setLoading(true);
   const onComicsloaded = (comics) => {
     const items = [];
     for (let item in comics) {
+
+      let link = `/comics/${comics[item].resourceURI.replace(
+        'http://gateway.marvel.com/v1/public/comics/',
+        ''
+      )}`;
+      console.log(link)
       items.push(
         <li className='char__comics-item' key={comics[item].name}>
-          <a href={comics[item].resourceURL}>{comics[item].name}</a>
+          <Link to={link}>{comics[item].name}</Link>
         </li>
       );
     }
@@ -26,6 +31,7 @@ const CharInfo = (props) => {
   }, []);
 
   const { name, description, thumbnail, wiki, homepage, comics } = props.char;
+  console.log(comics);
   const skelet = loading ? <Skelet /> : null;
   return (
     <>

project/src/components/app/App.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import NoPage from '../../resources/img/404.png';
+const NoMatch = () => {
+  return <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
+     <h1 style={{fontSize:'300px',fontWeight:'300'}}>404</h1>
+     <h3 style={{fontSize:'50px',fontWeight:'300'}}>Not Found</h3>
+  </div>;
+};
+export default NoMatch;

project/src/components/appHeader/AppHeader.scss

@@ -1,12 +1,15 @@
 import { React } from 'react';
-import SingleComic from '../SingleComic/SingleComic';
+import SingleCSinglePageComicomicPage from './SinglePageComic';
 import AppBanner from '../AppBanner/AppBanner';
+import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
 
 const ComicPage = () => {
   return (
     <>
-      <AppBanner />
-      <SingleComic />
+      <ErrorBoundary>
+        <AppBanner />
+        <SinglePageComic />
+      </ErrorBoundary>
     </>
   );
 };