Additional card cleanup

This commit is contained in:
Franc Camps-Febrer
2018-11-27 12:44:40 -05:00
parent b658356448
commit 20051db90a
20 changed files with 347 additions and 191 deletions

View File

@@ -1,4 +1,3 @@
import '../scss/main.scss';
import React from 'react';
import Card from './Card.jsx';
import copy from '../js/data/copy.json';
@@ -20,17 +19,17 @@ class CardStack extends React.Component {
return (
<Card
event={event}
shouldCardUpdate={shouldCardUpdate}
language={this.props.language}
tools={this.props.tools}
isFetchingEvents={this.props.isFetchingEvents}
getNarrativeLinks={this.props.getNarrativeLinks}
getCategoryGroup={this.props.getCategoryGroup}
getCategoryGroupColor={this.props.getCategoryGroupColor}
getCategoryLabel={this.props.getCategoryLabel}
highlight={this.props.highlight}
select={this.props.select}
event={event}
shouldCardUpdate={shouldCardUpdate}
language={this.props.language}
tools={this.props.tools}
isLoading={this.props.isFetchingEvents}
getNarrativeLinks={this.props.getNarrativeLinks}
getCategoryGroup={this.props.getCategoryGroup}
getCategoryGroupColor={this.props.getCategoryGroupColor}
getCategoryLabel={this.props.getCategoryLabel}
highlight={this.props.highlight}
select={this.props.select}
/>
);
});
@@ -50,30 +49,34 @@ class CardStack extends React.Component {
return '';
}
renderIsLoading() {
return (
<div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
<div
id='card-stack-header'
className='card-stack-header'
onClick={() => this.props.toggle('TOGGLE_CARDSTACK')}
>
<button className="side-menu-burg is-active"><span></span></button>
<p className="header-copy top">{copy[this.props.language].loading}</p>
</div>
<div id="card-stack-content" className="card-stack-content">
<ul>
<Card
language={this.props.language}
isLoading={true}
/>
</ul>
</div>
</div>
)
}
render() {
const header_lang = copy[this.props.language].cardstack.header;
if (this.props.isFetchingEvents) {
return (
<div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
<div
id='card-stack-header'
className='card-stack-header'
onClick={() => this.props.toggle('TOGGLE_CARDSTACK')}
>
<button className="side-menu-burg is-active"><span></span></button>
<p className="header-copy top">{copy[this.props.language].loading}</p>
</div>
<div id="card-stack-content" className="card-stack-content">
<ul>
<Card
language={this.props.language}
isLoading={true}
/>
</ul>
</div>
</div>
);
return this.renderIsLoading();
} else if (this.props.selected.length > 0) {
return (
<div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>