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'; ...@@ -3,70 +3,91 @@ import Cart from 'src/Cart';
import Stars from 'src/Stars'; import Stars from 'src/Stars';
export default class Section extends React.Component { export default class Section extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { inCart: Cart.includesCrn(this.props.crn) }; this.state = { inCart: Cart.includesCrn(this.props.crn) };
} }
onClick = e => { onClick = e => {
e.stopPropagation(); 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
Cart.toggleCrn(this.props.crn); if (this.props.readOnly) return;
this.setState({ inCart: Cart.includesCrn(this.props.crn) });
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() { Cart.toggleCrn(this.props.crn);
const { name, title, crn, readOnly, instructor_name, instructor_url, teaching_rating, location, days, start_time, end_time } = this.props; this.setState({ inCart: Cart.includesCrn(this.props.crn) });
const { inCart } = this.state;
const percent = teaching_rating ? <Stars percent={(teaching_rating[0] / 5) * 100} /> : null; this.props.onClick && this.props.onClick(this.props.crn);
};
const remove = ( render() {
<span className="float-right text-center add-remove-btn" style={inCart ? {} : { display: 'none' }}> const {
<i id="icon" className="fas fa-minus" /> name,
<br /> title,
<span className="text">Remove</span> crn,
</span> readOnly,
); instructor_name,
const add = ( instructor_url,
<span className="float-right text-center add-remove-btn" style={inCart ? { display: 'none' } : {}}> teaching_rating,
<i id="icon" className="fas fa-plus" /> location,
<br /> days,
<span className="text">Add</span> start_time,
</span> end_time,
); } = this.props;
const { inCart } = this.state;
return ( const percent = teaching_rating ? (
<li className="list-group-item section-item" onClick={this.onClick}> <Stars percent={(teaching_rating[0] / 5) * 100} />
<p> ) : null;
<b>{name}</b>: {title}{' '}
<em> const remove = (
(# <span
{crn}) className="float-right text-center add-remove-btn"
</em> style={inCart ? {} : { display: 'none' }}>
</p> <i id="icon" className="fas fa-minus" />
{!readOnly && ( <br />
<div> <span className="text">Remove</span>
{remove} </span>
{add} );
</div> const add = (
)} <span
<i className="fas fa-chalkboard-teacher" />{' '} className="float-right text-center add-remove-btn"
{instructor_name !== 'TBA' ? ( style={inCart ? { display: 'none' } : {}}>
<span> <i id="icon" className="fas fa-plus" />
<a href={instructor_url}>{instructor_name}</a> {percent} <br />
</span> <span className="text">Add</span>
) : ( </span>
<span>{instructor_name}</span> );
)}
<br /> return (
<i className="fas fa-map-marker-alt" /> {location} <br /> <li className="list-group-item section-item" onClick={this.onClick}>
<i className="fas fa-clock" /> {days}, {start_time} - {end_time} <br /> <p>
</li> <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