first commit

package.json

@@ -6,9 +6,18 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.11.6",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@types/react-router-dom": "^5.3.2",
+    "bootstrap": "^5.1.3",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.scss

@@ -0,0 +1,8 @@
+@import "bootstrap";
+
+
+header { 
+  img { 
+    max-width: 100px; 
+  }
+}

src/App.tsx

@@ -0,0 +1,75 @@
+  import React, {useState} from 'react';
+  import './App.scss';
+
+  import Header from './components/Header';
+  import { Home } from './pages/Home';
+  import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Link
+  } from "react-router-dom";
+
+
+import { Series } from './pages/Series';
+
+  export const LikedComicsContext = React.createContext({}); 
+
+
+  function App() {
+
+
+    const [likedComics, setLikedComics] = useState([])
+
+
+      return (
+      <>
+
+
+      <Router>
+
+        <Header />
+      <div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/about">About</Link>
+            </li>
+            <li>
+              <Link to="/users">Users</Link>
+            </li>
+          </ul>
+        </nav>
+
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/about">
+            test about
+          </Route>
+          <Route path="/users">
+           test
+          </Route>
+          <Route path="/series/:seriesId">
+          <LikedComicsContext.Provider value={[likedComics, setLikedComics]}>
+            <Series />
+          </LikedComicsContext.Provider>
+
+          </Route>
+          <Route path="/">
+            <LikedComicsContext.Provider value={[likedComics, setLikedComics]}>
+              <Home />
+            </LikedComicsContext.Provider>
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+      </>
+      );
+
+  }
+
+  export default App;

src/components/ComicListing.tsx

@@ -0,0 +1,52 @@
+import React, {FC}from 'react'
+import { LikedComicsContext } from '../App'
+
+interface Props { 
+    comic: string[]
+}
+
+export const ComicListing: FC<Props> = ({comic}) => {
+
+
+    const [likedComics, setLikedComics] = React.useContext<object[]>(LikedComicsContext)
+
+    function handleAdd() {
+
+        // const items =  [comic, ...likedComics];
+
+        // const uniqueLikedComics = [...new Set(items.map(a => a.id))]
+        // .map(id => {
+        //      return items.find(a => a.id === id)
+        // })
+
+        // setLikedComics(uniqueLikedComics)
+
+    }
+
+    function handleRemove(id:number) { 
+
+       const newList = likedComics.filter((item:any) => item.id !== id);
+
+       setLikedComics(newList);
+    }
+
+    function toggleShow() { 
+        return likedComics.indexOf(comic) > -1 ? true : false; 
+    }
+
+    return (
+        <>
+          <div className="col-sm-12 col-md-4 col-lg-3 ">
+
+            <div className="card p-2 text-center">
+
+                <img src={comic.thumbnail.path + "/portrait_xlarge.jpg"} alt="" />
+                <span className="my-2">{comic.title} </span>
+                <button className={toggleShow() ? 'd-block btn btn-danger' : 'd-none'  } onClick={() => handleRemove(comic.id)}>&times;</button>
+                 <button className={toggleShow() ? 'd-none'  : 'd-block btn btn-primary'} onClick={handleAdd}>Like!</button>
+            </div>
+        </div>   
+
+        </>
+    )
+}

src/components/ComicsListings.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ComicListing } from './ComicListing'
+
+interface Props { 
+    comics: any[]
+}
+
+export const ComicsListings: React.FC <Props> = ({comics}) => {
+    return (
+        <div className="row">
+         {comics.map((comic) => { 
+            return <ComicListing key={comic.id} comic={comic}/>
+         })}   
+        </div>
+    )
+}

src/components/Header.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import logo from '../Marvel_Logo.svg'
+import { Link } from 'react-router-dom'
+
+export default function Header() {
+    return (
+        <header className="p-3 bg-dark text-white">
+
+      <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+
+        <img src={logo} alt="" />
+        <ul className="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+          <li><a href="/" className="nav-link px-2 text-secondary">Home</a></li>
+       <Link to='/'>Home</Link>
+        </ul>
+
+
+
+        <div className="text-end">
+          <button type="button" className="btn btn-outline-light me-2">Login</button>
+          <button type="button" className="btn btn-warning">Sign-up</button>
+        </div>
+
+    </div>
+  </header>
+    )
+}

src/components/LikedComics.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function LikedComics({likedComics}) {
+    return (
+        <div>
+
+        Liked Comics <br />
+
+            {likedComics.map((comic) => { 
+            return <div key={comic.id}> 
+                {comic.title} <br />
+            </div>
+            })}
+        </div>
+    )
+}

src/components/SeriesListing.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+export default function SeriesListing({ series }) {
+
+
+
+    return (
+        <Link to={'/series/' + series.id} className="col-sm-12 col-md-4 col-lg-3 ">
+
+            <div className="card p-2 text-center">
+
+                <img src={series.thumbnail.path + "/portrait_xlarge.jpg"} alt="" />
+                <span className="my-2">{series.title} </span>
+
+
+            </div>
+        </Link>
+    )
+}

src/components/SeriesListings.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import SeriesListing from './SeriesListing'
+
+export default function SeriesListings({series}) {
+
+    return (
+        <div className="row">
+
+            {series.map(item => (
+                <SeriesListing key={item.id}  series={item}     /> 
+            ))}
+
+        </div>
+    )
+}

src/hooks/useComics.tsx

@@ -0,0 +1,40 @@
+import {useState, useEffect} from 'react'
+
+export const useComics = (seriesId) => {
+
+
+    const [error, setError] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [items, setItems] = useState({});
+
+
+    useEffect(() => {
+
+      setIsLoaded(false)
+
+      fetch(`https://gateway.marvel.com:443/v1/public/series/${seriesId}/comics?apikey=f15ab39bdb06abd02556dd9ba822aecd`)
+      .then(res => res.json())
+      .then(
+        (result) => {
+        setIsLoaded(true);  
+        setItems(result); 
+
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+        (error) => {
+          setIsLoaded(true);
+          setError(error);
+        }
+      )
+    }, [seriesId])
+
+
+    return {
+        isLoaded,
+        error,
+        items
+    }; 
+
+}