tasks-mockup/src/App.js

import React from 'react'
import axios from 'axios'

import {
  createArticle,
  updateArticle,
  deleteArticle,
  selectArticle,
} from './controllers/articles'

import { addTag, selectTag, removeTag } from './controllers/tags'

import {
  createTask,
  updateTask,
  deleteTask,
  selectTask,
  completeTask,
} from './controllers/tasks'

import {
  createProject,
  //updateProject,
  deleteProject,
  selectProject,
} from './controllers/projects'

import { updateProfile } from './controllers/profile'

import {
  About,
  Articles,
  Article,
  UpdateArticle,
  Tasks,
  UpdateTask,
  Profile,
  Projects,
  Project,
  Navbar,
} from './components'

const API = process.env.REACT_APP_API || 'http://localhost:1337'
console.log('Using API at ' + API)

const defaultState = {
  loading: true,
  user: { name: 'Scott' },
  tasks: [],
  projects: [],
  component: 'projects',
  search: '',
  newArticle: '',
  newTask: '',
  newProject: '',
  project: {},
  newTag: '',
}

class App extends React.Component {
  constructor() {
    super()
    this.state = defaultState
    this.navigate = this.navigate.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)

    this.createArticle = createArticle.bind(this)
    this.updateArticle = updateArticle.bind(this)
    this.deleteArticle = deleteArticle.bind(this)

    this.addTag = addTag.bind(this)
    this.removeTag = removeTag.bind(this)

    this.createTask = createTask.bind(this)
    this.updateTask = updateTask.bind(this)
    this.deleteTask = deleteTask.bind(this)
    this.completeTask = completeTask.bind(this)

    this.createProject = createProject.bind(this)
    this.deleteProject = deleteProject.bind(this)

    this.updateProfile = updateProfile.bind(this)

    this.selectArticle = selectArticle.bind(this)
    this.selectTag = selectTag.bind(this)
    this.selectTask = selectTask.bind(this)
    this.selectProject = selectProject.bind(this)
  }

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

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

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

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

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

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

  async fetchData() {
    const articles = await this.fetchArticles()
    const tags = await this.fetchTags()
    const tasks = await this.fetchTasks()
    const projects = await this.fetchProjects()
    const comments = await this.fetchComments()
    const votes = await this.fetchVotes()
    await this.setState({
      loading: false,
      articles,
      tags,
      tasks,
      projects,
      comments,
      votes,
    })
  }

  componentDidMount() {
    this.fetchData()
  }

  navigate(component) {
    this.setState({ component })
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }
  handleSubmit(e) {
    e.preventDefault()
    this.setState({ search: '' })
  }

  renderLoading() {
    return <div>Loading...</div>
  }
  renderError() {
    if (!this.state.error) {
      return <div>There was an error.</div>
    } else if (this.state.error.message === 'Network Error') {
      alert(`Failed to reach backend at\n${this.state.error.config.url}.`)
    } else {
      return (
        <div>
          There was an error: {this.state.error.message}
          <ul>
            {Object.keys(this.state.error.config).map(key => (
              <li>
                {key}: {JSON.stringify(this.state.error.config[key])}
              </li>
            ))}
          </ul>
        </div>
      )
    }
  }
  renderProfile() {
    return (
      <Profile
        handleChange={this.handleChange}
        selectProject={this.selectProject}
        updateProfile={this.updateProfile}
        {...this.state}
      />
    )
  }
  renderArticles() {
    return (
      <Articles
        navigate={this.navigate}
        handleChange={this.handleChange}
        createArticle={this.createArticle}
        selectArticle={this.selectArticle}
        deleteArticle={this.deleteArticle}
        selectTag={this.selectTag}
        {...this.state}
      />
    )
  }
  renderArticle() {
    return (
      <Article
        navigate={this.navigate}
        addTag={this.addTag}
        removeTag={this.removeTag}
        deleteArticle={this.deleteArticle}
        selectTag={this.selectTag}
        handleChange={this.handleChange}
        {...this.state}
      />
    )
  }
  renderUpdateArticle() {
    return (
      <UpdateArticle
        handleChange={this.handleChange}
        updateArticle={this.updateArticle}
        navigate={this.navigate}
        selectTag={this.selectTag}
        {...this.state}
      />
    )
  }
  renderProjects() {
    return (
      <Projects
        navigate={this.navigate}
        handleChange={this.handleChange}
        createProject={this.createProject}
        selectProject={this.selectProject}
        deleteProject={this.deleteProject}
        {...this.state}
      />
    )
  }
  renderProject() {
    return (
      <Project
        handleChange={this.handleChange}
        createProject={this.createProject}
        selectProject={this.selectProject}
        selectTask={this.selectTask}
        deleteProject={this.deleteProject}
        createTask={this.createTask}
        completeTask={this.completeTask}
        deleteTask={this.deleteTask}
        navigate={this.navigate}
        {...this.state}
      />
    )
  }
  renderAbout() {
    return <About {...this.state} />
  }
  renderTasks(filtered, completed) {
    return (
      <Tasks
        handleChange={this.handleChange}
        handleSubmit={this.handleSubmit}
        createTask={this.createTask}
        completeTask={this.completeTask}
        deleteTask={this.deleteTask}
        filtered={filtered}
        completed={completed}
        selectTask={this.selectTask}
        selectProject={this.selectProject}
        {...this.state}
      />
    )
  }
  renderUpdateTask() {
    return (
      <UpdateTask
        handleChange={this.handleChange}
        updateTask={this.updateTask}
        navigate={this.navigate}
        {...this.state}
      />
    )
  }
  render() {
    //console.log(this.state)
    // TODO refactor task filtering
    const completed =
      (this.state.tasks &&
        this.state.tasks.filter(task => task.completed === true)) ||
      []
    const filtered =
      (this.state.tasks &&
        this.state.tasks.filter(
          task =>
            task.completed !== true &&
            this.state.search === task.desc.slice(0, this.state.search.length),
        )) ||
      []

    const renderComponent = () =>
      this.state.loading
        ? this.renderLoading()
        : this.state.error
        ? this.renderError()
        : this.state.component === 'articles'
        ? this.renderArticles()
        : this.state.component === 'article'
        ? this.renderArticle()
        : this.state.component === 'update-article'
        ? this.renderUpdateArticle()
        : this.state.component === 'tasks'
        ? this.renderTasks(filtered, completed)
        : this.state.component === 'task'
        ? this.renderUpdateTask()
        : this.state.component === 'about'
        ? this.renderAbout()
        : this.state.component === 'profile'
        ? this.renderProfile()
        : this.state.component === 'projects'
        ? this.renderProjects()
        : this.state.component === 'project'
        ? this.renderProject()
        : this.renderError()

    return (
      <div>
        <Navbar
          handleChange={this.handleChange}
          navigate={this.navigate}
          {...this.state}
        />
        {renderComponent()}
      </div>
    )
  }
}

export default App