{"size": 738, "ext": "js", "max_stars_repo_path": "udemy/15-realistic-example-custom-hook/src/components/Tasks/Tasks.js", "max_stars_repo_name": "bogdan-ivan/react-portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "udemy/15-realistic-example-custom-hook/src/components/Tasks/Tasks.js", "max_issues_repo_name": "bogdan-ivan/react-portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "udemy/15-realistic-example-custom-hook/src/components/Tasks/Tasks.js", "max_forks_repo_name": "bogdan-ivan/react-portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.5, "max_line_length": 99, "alphanum_fraction": 0.5840108401}
import Section from '../UI/Section';
import TaskItem from './TaskItem';
import classes from './Tasks.module.css';

const Tasks = (props) => {
  let taskList = <h2>No tasks found. Start adding some!</h2>;

  if (props.items.length > 0) {
    taskList = (
      <ul>
        {props.items.map((task) => (
          <TaskItem key={task.id}>{task.text}</TaskItem>
        ))}
      </ul>
    );
  }

  let content = taskList;

  if (props.error) {
    content = <button onClick={props.onFetch.bind(null, props.obj, props.func)}>Try again</button>;
  }

  if (props.loading) {
    content = 'Loading tasks...';
  }

  return (
    <Section>
      <div className={classes.container}>{content}</div>
    </Section>
  );
};

export default Tasks;
