mwe-comments/src/App.js

import React from 'react'
import { NavbarView, CommentsView } from './Components'
import axios from 'axios'

const API = 'http://localhost:5555'
console.log('Using API at ' + API)

const comments = [
  { id: 1, text: 'c1', replies: [] },
  {
    id: 2,
    text: 'c2',
    replies: [
      { id: 3, text: 'c3', replies: [] },
      { id: 4, text: 'c4', replies: [] },
      { id: 5, text: 'c5', replies: [] },
    ],
  },
  {
    id: 6,
    text: 'c6',
    replies: [
      { id: 7, text: 'c7', replies: [] },
      { id: 8, text: 'c8', replies: [] },
    ],
  },
]

class App extends React.Component {
  constructor() {
    super()
    this.state = { loading: true }
  }

  componentDidMount() {
    this.fetchData()
  }

  async fetchComments() {
    // try {
    //   const { data } = await axios.get(API + '/api/comments')
    //   return data
    // } catch (error) {
    //   console.log(error)
    //   this.setState({ error })
    // }
    return comments
  }

  async fetchData() {
    try {
      const comments = await this.fetchComments()
      await this.setState({ comments, loading: false })
    } catch (error) {
      this.setState({ error: error.message })
    }
  }

  renderLoading() {
    return <div>loading...</div>
  }

  renderError() {
    return <div>{this.state.error}</div>
  }

  renderApp() {
    return (
      <div>
        <NavbarView {...this.state} />
        <CommentsView {...this.state} />
      </div>
    )
  }
  render() {
    if (this.state.comments) return this.renderApp()
    if (this.state.loading) return this.renderLoading()
    if (this.state.error) return this.renderError()
    return <div />
  }
}
export default App