Commit f75fd259 authored by Zac Wood's avatar Zac Wood

Fixed unexpected behavior when clicking on read only sections

parent 257bea38
......@@ -3,70 +3,91 @@ import Cart from 'src/Cart';
import Stars from 'src/Stars';
export default class Section extends React.Component {
constructor(props) {
super(props);
this.state = { inCart: Cart.includesCrn(this.props.crn) };
}
constructor(props) {
super(props);
this.state = { inCart: Cart.includesCrn(this.props.crn) };
}
onClick = e => {
e.stopPropagation();
console.log(e.target.tagName);
if (e.target.tagName === 'A') return; // if we clicked on a link, don't add the section to the cart
onClick = e => {
e.stopPropagation();
Cart.toggleCrn(this.props.crn);
this.setState({ inCart: Cart.includesCrn(this.props.crn) });
if (this.props.readOnly) return;
this.props.onClick && this.props.onClick(this.props.crn);
};
console.log(e.target.tagName);
if (e.target.tagName === 'A') return; // if we clicked on a link, don't add the section to the cart
render() {
const { name, title, crn, readOnly, instructor_name, instructor_url, teaching_rating, location, days, start_time, end_time } = this.props;
const { inCart } = this.state;
Cart.toggleCrn(this.props.crn);
this.setState({ inCart: Cart.includesCrn(this.props.crn) });
const percent = teaching_rating ? <Stars percent={(teaching_rating[0] / 5) * 100} /> : null;
this.props.onClick && this.props.onClick(this.props.crn);
};
const remove = (
<span className="float-right text-center add-remove-btn" style={inCart ? {} : { display: 'none' }}>
<i id="icon" className="fas fa-minus" />
<br />
<span className="text">Remove</span>
</span>
);
const add = (
<span className="float-right text-center add-remove-btn" style={inCart ? { display: 'none' } : {}}>
<i id="icon" className="fas fa-plus" />
<br />
<span className="text">Add</span>
</span>
);
render() {
const {
name,
title,
crn,
readOnly,
instructor_name,
instructor_url,
teaching_rating,
location,
days,
start_time,
end_time,
} = this.props;
const { inCart } = this.state;
return (
<li className="list-group-item section-item" onClick={this.onClick}>
<p>
<b>{name}</b>: {title}{' '}
<em>
(#
{crn})
</em>
</p>
{!readOnly && (
<div>
{remove}
{add}
</div>
)}
<i className="fas fa-chalkboard-teacher" />{' '}
{instructor_name !== 'TBA' ? (
<span>
<a href={instructor_url}>{instructor_name}</a> {percent}
</span>
) : (
<span>{instructor_name}</span>
)}
<br />
<i className="fas fa-map-marker-alt" /> {location} <br />
<i className="fas fa-clock" /> {days}, {start_time} - {end_time} <br />
</li>
);
}
const percent = teaching_rating ? (
<Stars percent={(teaching_rating[0] / 5) * 100} />
) : null;
const remove = (
<span
className="float-right text-center add-remove-btn"
style={inCart ? {} : { display: 'none' }}>
<i id="icon" className="fas fa-minus" />
<br />
<span className="text">Remove</span>
</span>
);
const add = (
<span
className="float-right text-center add-remove-btn"
style={inCart ? { display: 'none' } : {}}>
<i id="icon" className="fas fa-plus" />
<br />
<span className="text">Add</span>
</span>
);
return (
<li className="list-group-item section-item" onClick={this.onClick}>
<p>
<b>{name}</b>: {title}{' '}
<em>
(#
{crn})
</em>
</p>
{!readOnly && (
<div>
{remove}
{add}
</div>
)}
<i className="fas fa-chalkboard-teacher" />{' '}
{instructor_name !== 'TBA' ? (
<span>
<a href={instructor_url}>{instructor_name}</a> {percent}
</span>
) : (
<span>{instructor_name}</span>
)}
<br />
<i className="fas fa-map-marker-alt" /> {location} <br />
<i className="fas fa-clock" /> {days}, {start_time} - {end_time} <br />
</li>
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment