{"size": 892, "ext": "js", "max_stars_repo_path": "testing/tasks/frontend/src/components/Tasks.js", "max_stars_repo_name": "makeitrealcamp/top-v9", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "testing/tasks/frontend/src/components/Tasks.js", "max_issues_repo_name": "makeitrealcamp/top-v9", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "testing/tasks/frontend/src/components/Tasks.js", "max_forks_repo_name": "makeitrealcamp/top-v9", "max_forks_repo_forks_event_min_datetime": "2021-05-27T22:42:44.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-01T04:16:44.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 22.8717948718, "max_line_length": 78, "alphanum_fraction": 0.5627802691}
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getTasks } from '../store/tasksReducer/actions';
import Task from "./Task";

function Tasks({ tasks, getTasks }) {
  useEffect(() => {
    getTasks();
  }, [getTasks]);

  return (
    <div className="tasks">
      <h1>Tasks</h1>
      {(!tasks || tasks.length <= 0) && (
        <p>No tasks created yet. Create one <Link to="/create">here</Link></p>
      )}
      {tasks && tasks.length > 0 && tasks.map(({ _id, name, done }) => (
        <Task
          key={_id}
          id={_id}
          name={name}
          done={done}
        />
      ))}
    </div>
  )
}

function mapStateToProps({ tasksReducer: { tasks } }) {
  return { tasks };
}

const mapDispatchToProps = {
  getTasks,
};

export default connect(mapStateToProps, mapDispatchToProps)(Tasks);
