[WIP] Get data to single character page

src/App.js

@@ -4,6 +4,7 @@ import {Card, Container, FormControl, InputGroup, Row} from 'react-bootstrap';
 import './App.css';
 import Pagination from "./components/Pagination";
 import {withCharacters} from "./context/CharacterContext";
+import CharacterProfile from "./components/characterProfile/CharacterProfile";
 
 const App = ({isLoading, characters, characterPages, fetchCharactersByNamePaginated, fetchCharactersPaginated}) => {
   const [searchQuery, setSearchQuery] = useState('');
@@ -39,6 +40,14 @@ const App = ({isLoading, characters, characterPages, fetchCharactersByNamePagina
     }
   };
 
+  // const searchSelectedCharacter = async () => {
+  //   this.toggleLoader(true);
+  //   const marvelCharacter = await fetchCharacterById(1009664);
+  //   console.log('marvelCharacter', marvelCharacter);
+  //   this.toggleLoader(false);
+  //   this.setState({ marvelCharacter: marvelCharacter.results[0] });
+  // };
+
   return (
     <div className="main">
       <Container>
@@ -56,26 +65,27 @@ const App = ({isLoading, characters, characterPages, fetchCharactersByNamePagina
           </div>
         </Row>
         <Pagination pages={characterPages} onPageChanged={onPageChanged}/>
-        <Row className="Scrollable">
+        {(!isLoading && characters.length > 0)&& <CharacterProfile character={characters[0]} />}
+        {/* <Row className="Scrollable">
           {isLoading ? (
             <div className="Loader">
               <div className="loader"></div>
             </div>
           ) : characters.map(character => (
             <Card key={character.id} style={{width: '18rem', margin: '20px 40px '}}>
-              <Card.Img variant="top"
-                        src={character.thumbnail.path + "/standard_fantastic." + character.thumbnail.extension}
-                        alt="Character"
+              <Card.Img
+                variant="top"
+                src={character.thumbnail.path + "/standard_fantastic." + character.thumbnail.extension}
+                alt="Character"
               />
               <Card.Body>
                 <Card.Title>{character.name}</Card.Title>
                 <Card.Text>
-
                 </Card.Text>
               </Card.Body>
             </Card>
           ))}
-        </Row>
+        </Row> */}
         <div className="footer">
           <p>Made with &hearts;</p>
         </div>

src/api/character.js

@@ -26,7 +26,21 @@ const fetchCharactersByNamePaginated = (name, page) => {
   })
 };
 
+const fetchCharacterById = (id) => {
+  return new Promise((resolve, reject) => {
+    fetch(`https://gateway.marvel.com/v1/public/characters/${id}?ts=${apiConfig.timestamp}&apikey=${apiConfig.marvelapikey}&hash=${apiConfig.marvelapihash}`)
+      .then(res => res.json())
+      .then(res => {
+        resolve(res.data);
+      })
+      .catch(error => {
+        reject(error);
+      });
+  })
+};
+
 export {
   fetchCharactersPaginated,
-  fetchCharactersByNamePaginated
+  fetchCharactersByNamePaginated,
+  fetchCharacterById
 };

src/components/characterProfile/CharacterProfile.js

@@ -0,0 +1,66 @@
+import React, { Component, Fragment } from 'react';
+import { Row, Card } from 'react-bootstrap';
+
+import { fetchCharacterById } from '../../api/character';
+import DisplayCard from '../DisplayCard';
+
+class CharacterProfile extends Component {
+  state = {
+    marvelCharacter: null,
+    loading: true,
+  };
+
+  async componentDidMount() {
+    await this.fetchInit();
+  }
+
+  toggleLoader = active => {
+    this.setState({ loading: active });
+  };
+
+  fetchInit = async () => {
+    this.toggleLoader(true);
+    const marvelCharacter = await fetchCharacterById(1009664);
+    console.log('marvelCharacter', marvelCharacter);
+    this.toggleLoader(false);
+    this.setState({ marvelCharacter: marvelCharacter.results[0] });
+  };
+
+  renderLoader() {
+    const { loading } = this.state;
+
+    if (!loading) return null;
+
+    return (
+      <div className="Loader">
+        <div className="loader"></div>
+      </div>
+    );
+  }
+
+  renderCard() {
+    const { marvelCharacter } = this.state;
+
+    return (
+      <DisplayCard thumbnail={marvelCharacter.thumbnail}
+        title={marvelCharacter.name} />
+    );
+  }
+
+  render() {
+    const { character } = this.props;
+    console.log('marvelCharacter', character);
+    return (
+      <Fragment>
+        <Row className="Scrollable">
+          <DisplayCard
+            thumbnail={character.thumbnail}
+            title={character.name}
+          />
+        </Row>
+      </Fragment>
+    );
+  }
+}
+
+export default CharacterProfile;

src/context/CharacterContext.js

@@ -39,6 +39,22 @@ const CharacterProvider = ({children}) => {
       });
   };
 
+  const fetchCharactersById = (id) => {
+    setIsLoading(true);
+
+    API.fetchCharacterById(id)
+      .then(apiData => {
+        console.log('apiData', apiData);
+        setCharacters(apiData.results);
+        setCharacterPages(Math.ceil(apiData.total / apiConfig.perPage));
+        setIsLoading(false);
+      })
+      .catch(error => {
+        setCharacters([]);
+        setIsLoading(false);
+      });
+  };
+
   return (
     <Provider value={{
       fetchCharactersPaginated,