add series page and refactor

sudipt1999 · Oct 9, 2019 · f86c972 · f86c972
1 parent 13b0b7e
commit f86c972
Show file tree

Hide file tree

Showing 14 changed files with 579 additions and 330 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,8 +5,9 @@
   "dependencies": {
     "bootstrap": "^4.3.1",
     "react": "^16.8.6",
-    "react-bootstrap": "^1.0.0-beta.8",
+    "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.0.1"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -10,12 +10,6 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link
-  rel="stylesheet"
-  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-  crossorigin="anonymous"
-/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -41,17 +35,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-  <script src="https://unpkg.com/react/umd/react.production.js" crossorigin />
-
-<script
-  src="https://unpkg.com/react-dom/umd/react-dom.production.js"
-  crossorigin
-/>
-
-<script
-  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
-  crossorigin
-/>
-
-<script>var Alert = ReactBootstrap.Alert;</script>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -2,6 +2,10 @@
   text-align: center;
 }
 
+.nav {
+  background-color: #fff;
+}
+
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
@@ -70,11 +74,6 @@
 .Scrollable::-webkit-scrollbar { 
   display: none;  
 }
-.searchBar{
-  margin-top: 20px;
-  width:100%;
-  text-align: center;
-}
 
 .Loader{
   width:300px;

diff --git a/src/App.js b/src/App.js
@@ -1,175 +1,57 @@
-import React, { Component} from 'react';
-import { Button, Card, Col, Row, Container, InputGroup, FormControl } from 'react-bootstrap';
-import './App.css';
-
-
-class App extends Component{
-
-  state = {
-    marvelapikey : "3a6bbe839d07c15e01996061acd6a121",
-    marvelapihash : "ac4ce3232a11197ececb965dcc3799d1",
-    timestamp : 1,
-    marvelCharacters : [],
-    loading : true,
-    searchValue: "",
-    list: []
-  }
-
-
-  componentDidMount(){
-    let list = []
-
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-          list = [...res.data.results]
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=200`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=300`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=400`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=500`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=600`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=700`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=800`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=900`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=1000`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log(this.state.marvelCharacters)
-    });
-    fetch(`https://gateway.marvel.com/v1/public/characters?ts=${this.state.timestamp}&apikey=${this.state.marvelapikey}&hash=${this.state.marvelapihash}&limit=100&offset=1100`)
-    .then(response => response.json())
-    .then(res => {
-      //console.log(res.data.results)
-        list = list.concat(res.data.results)
-        console.log("LIST>>>",list)
-        this.setState({
-          marvelCharacters : list,
-          list : list ,
-          loading : false
-        })
-        console.log(this.state.marvelCharacters)
-    });
-  }
-
-  searchNameHandler = (e) => {
-    if(e.value < 1)
-      return
-    let searchString = e.target.value
-    let list = this.state.marvelCharacters.filter((ch)=>ch.name.includes(searchString))
+import React, { Component } from 'react';
+import { Navbar, Nav, NavItem, Container } from 'react-bootstrap';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 
+import CharactersPage from './components/CharactersPage';
+import SeriesPage from './components/SeriesPage';
+import './App.css';
 
-    this.setState({
-      searchValue: e.target.value,
-      list : list
-    })
-
-  }
-
-  render(){
-    let content = [];
-    if(this.state.loading){
-      content = <div className="Loader"><div className="loader"></div></div>
-    }else if(this.state.list.length > 0){
-      content = this.state.list.map((character)=>{
-        return (
-          <Card style={{ width: '18rem', margin: '20px 40px ' }}>
-          <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>
-      )
-      })
-    }    
-
-    return(
-      <div className="main">
-        <Container>
-            <Row className="row">
-                <div className="searchBar">
-                <InputGroup size="lg" className="mb-3">
-                  <InputGroup.Prepend>
-                    <InputGroup.Text id="inputGroup-sizing-lg">Search</InputGroup.Text>
-                  </InputGroup.Prepend>
-                  <FormControl aria-label="Large" 
-                               onChange={(e)=>this.searchNameHandler(e)} 
-                               value={this.state.searchValue}
-                               placeholder="Search Your Fav Character"
-                               aria-describedby="inputGroup-sizing-sm" />
-                </InputGroup>
-               </div>
-            </Row>
-            <Row className="Scrollable">
-                    {content}
-            </Row>
-            <div class="footer">
-                <p>Made with &hearts;</p>
+class App extends Component {
+  state = {};
+
+  componentDidMount() {}
+
+  render() {
+    return (
+      <div className="App">
+        <Router>
+          <Container>
+            <Navbar className="nav">
+              <Navbar.Brand as={Link} to="/">
+                Marvel Universe
+              </Navbar.Brand>
+              <Nav className="mr-auto">
+                <NavItem eventkey={2} href="/characters">
+                  <Nav.Link as={Link} to="/characters">
+                    Characters
+                  </Nav.Link>
+                </NavItem>
+                <NavItem eventkey={3} href="/characters">
+                  <Nav.Link as={Link} to="/series">
+                    Series
+                  </Nav.Link>
+                </NavItem>
+              </Nav>
+            </Navbar>
+            <Switch>
+              <Route exact path="/">
+                <h1 style={{ color: 'white', margin: '20px 40px ' }}>Welcome to Marvel Universe!</h1>
+              </Route>
+              <Route path="/characters">
+                <CharactersPage />
+              </Route>
+              <Route path="/series">
+                <SeriesPage />
+              </Route>
+            </Switch>
+            <div className="footer">
+              <p>Made with &hearts;</p>
             </div>
           </Container>
+        </Router>
       </div>
-    )
+    );
   }
-
-
-
-
-
 }
 
 export default App;
diff --git a/src/components/CharactersPage.css b/src/components/CharactersPage.css
@@ -0,0 +1,18 @@
+.searchBar {
+  margin-top: 20px;
+  width: 100%;
+  text-align: center;
+}
+
+.Scrollable {
+  max-height: 80vh !important;
+  text-align: center;
+  overflow-y: auto;
+}
+.Scrollable {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.Scrollable::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/components/CharactersPage.js b/src/components/CharactersPage.js
@@ -0,0 +1,90 @@
+import React, { Component, Fragment } from 'react';
+import { Row, InputGroup, FormControl } from 'react-bootstrap';
+
+import getCharacters from '../utils/getCharacters';
+import DisplayCard from './DisplayCard';
+import './CharactersPage.css';
+
+class CharactersPage extends Component {
+  state = {
+    marvelCharacters: [],
+    loading: true,
+    searchValue: ''
+  };
+
+  async componentDidMount() {
+    this.toggleLoader(true);
+    await this.fetchInit();
+    this.toggleLoader(false);
+  }
+
+  toggleLoader = active => {
+    this.setState({ loading: active });
+  };
+
+  fetchInit = async () => {
+    this.toggleLoader(true);
+    const characterList = await getCharacters();
+    this.toggleLoader(false);
+    this.setState({ marvelCharacters: characterList });
+  };
+
+  handleSearchValueChange = e => {
+    this.setState({ searchValue: e.target.value });
+  };
+
+  filter = () => {
+    const { marvelCharacters, searchValue } = this.state;
+    return searchValue.length === 0
+      ? marvelCharacters
+      : marvelCharacters.filter(char => char && char.name && char.name.toLowerCase().includes(this.state.searchValue.toLowerCase()));
+  };
+
+  renderCards() {
+    const { marvelCharacters } = this.state;
+    if (marvelCharacters.length === 0) return [];
+    const filteredList = this.filter();
+    return filteredList.map((character, i) => {
+      return <DisplayCard key={i} item={character} />;
+    });
+  }
+
+  renderLoader() {
+    const { loading } = this.state;
+    if (!loading) return null;
+    return (
+      <div className="Loader">
+        <div className="loader"></div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <Row className="row">
+          <div className="searchBar">
+            <InputGroup size="lg" className="mb-3">
+              <InputGroup.Prepend>
+                <InputGroup.Text id="inputGroup-sizing-lg">Search</InputGroup.Text>
+              </InputGroup.Prepend>
+              <FormControl
+                aria-label="Large"
+                onChange={e => this.handleSearchValueChange(e)}
+                value={this.state.searchValue}
+                placeholder="Search Your Fav Character"
+                aria-describedby="inputGroup-sizing-sm"
+              />
+            </InputGroup>
+          </div>
+        </Row>
+        <Row className="Scrollable">
+          {this.renderLoader()}
+          {this.state.marvelCharacters.length > 0 && this.renderCards()}
+        </Row>
+      </Fragment>
+    );
+  }
+}
+
+export default CharactersPage;