content: import React, { Component } from 'react';
  import { withRouter } from 'react-router-dom';
  
  import MainNavgation from '../../component/navgation/main';
  
  import marvelApi from '../../api';
  
  import Carousel from './carousel';
  import ComicCard from '../../component/vomic/comic.card';
  import ComicCardCol2 from '../../component/vomic/comic.card.col2';
  import ComicCardCol3 from '../../component/vomic/comic.card.col3';
  import SplashLoader from '../../component/vomic/splash.loader';
  
  import { serialComic, call } from './utils';
  
  import { withComicData } from './section';
  
  class Home extends Component {
    state = {
      sectionList: [],
      loading: true,
    }
  
    componentDidMount() {
      const characters = marvelApi.characters.findAll()
        .then(res => marvelApi.characters.comics(res.data[0].id));
  
      const events = marvelApi.events.findAll();
      const series = marvelApi.series.findAll();
      const stories = marvelApi.comics.findAll();
  
      const flashPromise = Promise.all([characters, events, series, stories]);
  
      flashPromise.then(call('map', x => serialComic(x.data)))
        .then(data => this.setState({
          loading: false,
          sectionList: data,
        }))
        .catch(console.error);
    }
  
    renderMainSection = () => {
      const { sectionList } = this.state;
      const uiList = [Carousel, ComicCard, ComicCardCol2, ComicCardCol3];
      const uiTitle = ['characters', 'events', 'series', 'stories'];
      return uiList.map((com, idx) => {
        const Section = withComicData(com, {
          data: sectionList[idx],
          title: uiTitle[idx],
        });
        return <Section key={uiTitle[idx]} />;
      });
    }
  
    render() {
      const { loading } = this.state;
  
      return (
        <div className="app">
          <MainNavgation />
          <div className="nav-blank" />
          {loading ? (
            <SplashLoader />
          ) : (
            <main>
              {this.renderMainSection()}
            </main>
            )}
        </div>
      );
    }
  }
  
  export default withRouter(Home);
  
  