stream.jsx

import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios';

import LoadingStream from './loading-stream'
import ProjectStory from './stories/project-story'
import PhotosStory from './stories/photos-story'
import ArticleStory from './stories/article-story'
import FolderStory from './stories/folder-story'
import BookmarksStory from './stories/bookmarks-story'
import ProductStory from './stories/product-story'

class Stream extends React.Component {
  state = {
    stories: [],
    ready: false,
    pending: true,
    error: null,
  }

  fetchStories() {
    this.setState({
      pending: true,
    });

    axios.get('http://www.mocky.io/v2/5ad64fb02e00005400c93b01').then((res) => {
      this.setStories(res.data.stories);
    });
  }

  setStories(stories) {
    this.setState({
      ready: true,
      pending: false,
      stories
    });
  }

  componentDidMount() {
    this.fetchStories();
  }

  getStream() {
    return this.state.stories.map(story => {
      switch (story.type) {
        case 'project':
          return <ProjectStory story={story}/>
        case 'photos':
          return <PhotosStory story={story}/>
        case 'article':
          return <ArticleStory story={story}/>
        case 'folder':
          return <FolderStory story={story}/>
        case 'bookmarks':
          return <BookmarksStory story={story}/>
        case 'product':
          return <ProductStory story={story}/>
      }
    })
  }

  render() {
    const {ready} = this.state;
    if (ready) {
      const stream = this.getStream();
      console.log({ stream });

      return (
        <div>{stream}</div>
      )
    } else {
      return (
        <LoadingStream items="10"/>
      )
    }
  }
}

export default Stream;