* fix: eslint operator-linebreak issue * fix: eslint quotes issue * fix: react jsx indent and props issues * fix: eslint trailing spaces issues * fix: eslint line around directives issue * fix: eslint semi rule * fix: eslint newline per chain rule * fix: eslint space infix ops rule * fix: eslint space-in-parens issue * fix: eslint space before function paren issue * fix: eslint space before blocks issue * fix: eslint arrow body style issue * fix: eslint dot-location issue * fix: eslint quotes issue * fix: eslint quote props issue * fix: eslint operator assignment issue * fix: eslint new line after import issue * fix: indent issues * fix: operator assignment issue * fix: all autofixable eslint issues * fix: all react related fixable issues * fix: autofixable eslint issues * chore: remove all template literals * fix: remaining autofixable issues * fix: failing js test
77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
|
|
class DueDates extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
getDate(str) {
|
|
const date = new Date(str);
|
|
const day = days[date.getDay()];
|
|
const month = months[date.getMonth()];
|
|
const number = date.getDate();
|
|
const year = date.getFullYear();
|
|
|
|
return `${day} ${month} ${number}, ${year}`;
|
|
}
|
|
|
|
getLabel(type) {
|
|
const {assignmentCounts} = this.props;
|
|
if (assignmentCounts[type] < 2) {
|
|
return type;
|
|
} else {
|
|
this.renderLabels[type] += 1;
|
|
return type + ' ' + this.renderLabels[type];
|
|
}
|
|
}
|
|
|
|
getList() {
|
|
const {dates, assignmentCounts} = this.props;
|
|
this.renderLabels = this.initLabelTracker(assignmentCounts);
|
|
|
|
return dates.sort((a, b) => new Date(a.due) > new Date(b.due))
|
|
.map(({format, due}, index) => (
|
|
<li className="date-item" key={index}>
|
|
<div className="label">{this.getLabel(format)}</div>
|
|
<div className="data">{this.getDate(due)}</div>
|
|
</li>
|
|
));
|
|
}
|
|
|
|
initLabelTracker(list) {
|
|
let labels = Object.keys(list);
|
|
|
|
return labels.reduce((accumulator, key) => {
|
|
accumulator[key] = 0;
|
|
return accumulator;
|
|
}, {});
|
|
}
|
|
|
|
renderList() {
|
|
return (
|
|
<ul className="date-list">
|
|
{this.getList()}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="due-dates">
|
|
{this.renderList()}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
DueDates.propTypes = {
|
|
dates: PropTypes.array.isRequired
|
|
};
|
|
|
|
export default DueDates;
|