{"size": 2964, "ext": "js", "max_stars_repo_path": "src/components/TaskCard/index.js", "max_stars_repo_name": "aquariumbio/cuttlefish", "max_stars_repo_stars_event_min_datetime": "2020-03-25T02:33:55.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-25T02:33:55.000Z", "max_issues_repo_path": "src/components/TaskCard/index.js", "max_issues_repo_name": "aquariumbio/cuttlefish", "max_issues_repo_issues_event_min_datetime": "2020-06-16T18:34:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T02:01:28.000Z", "max_forks_repo_path": "src/components/TaskCard/index.js", "max_forks_repo_name": "aquariumbio/cuttlefish", "max_forks_repo_forks_event_min_datetime": "2020-03-27T01:57:10.000Z", "max_forks_repo_forks_event_max_datetime": "2020-03-27T01:57:10.000Z"}
{"max_stars_count": 1, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 25.5517241379, "max_line_length": 111, "alphanum_fraction": 0.592780027}
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import {
  Card,
  CardContent,
  Divider,
  Grid,
  Typography
} from '@material-ui/core';
import palette from '../../theme/palette';
import Label from 'src/components/Label';
import { useDispatch } from 'react-redux';
import { getProject } from 'src/actions';
import { useHistory } from 'react-router';

const useStyles = makeStyles(theme => ({
  root: {
    marginTop: theme.spacing(1),
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),    
    marginBottom: theme.spacing(2)
  },
  content: {
    paddingTop: theme.spacing(6),
    paddingBottom: theme.spacing(6),
    display: 'flex',
    flexDirection: 'c',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    height: '82px',
    '&:hover': {
      cursor: 'pointer'
    }
  },
  header: {
    color: theme.palette.primary.main
  },
  container: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'space-between'
  },
  cardLabel: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  }
}));

function TaskCard({ task, className, ...rest }) {
  const classes = useStyles();
  const history = useHistory();
  const dispatch = useDispatch();

  const getLabelColor = () => {
    if (task.status === 'pending') {
      return palette.caution.main;
    } else if (task.status === 'completed') {
      return palette.success.main;
    } else {
      return palette.error.main;
    }
  };

  // To simulate pulling from a database, therer is a currenttTask state in redux that is being updated here so
  // the correct task view can be rendered upon clicking
  const handleClick = () => {
    dispatch(getProject(task));
    history.push(`/task/${task.title}`);
  };

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
      onClick={handleClick}
    >
      <CardContent className={classes.content}>
        <Grid container className={classes.container}>
          <Grid item xs>
            <Typography variant="body2" noWrap>
              {task.deadline}
            </Typography>
            <Typography className={classes.header} variant="h4" noWrap>
              {task.title}
            </Typography>
            <Typography
              variant="body2"
              noWrap
            >{`Owned by: ${task.members}`}</Typography>
          </Grid>
          <Grid item xs className={classes.cardLabel}>
            <Typography variant="body2" noWrap>
              {/* {task.type} */}
            </Typography>
            <Label color={getLabelColor()} variant="other">
              Due Soon
            </Label>
          </Grid>
        </Grid>
      </CardContent>
      <Divider />
    </Card>
  );
}

TaskCard.propTypes = {
  className: PropTypes.string
};

export default TaskCard;
