glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

simplify Attachments props

Browse source
This commit is contained in:
Devin Howard 2017-02-23 21:28:15 -08:00
parent 6b7613a4d3
commit c9d664336e
2 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/TopicCard/Attachments.js
View file

@ -14,9 +14,8 @@ class Attachments extends Component {
} }
componentDidMount = () => { componentDidMount = () => {
const { topic } = this.props
embedly('on', 'card.rendered', this.embedlyCardRendered) embedly('on', 'card.rendered', this.embedlyCardRendered)
topic.get('link') && topic.get('link') !== '' && this.loadLink() if (this.props.link) this.loadLink()
} }
componentWillUnmount = () => { componentWillUnmount = () => {
@ -24,9 +23,8 @@ class Attachments extends Component {
} }
componentDidUpdate = () => { componentDidUpdate = () => {
const { topic } = this.props
const { embedlyLinkStarted } = this.state const { embedlyLinkStarted } = this.state
!embedlyLinkStarted && topic.get('link') && topic.get('link') !== '' && this.loadLink() !embedlyLinkStarted && this.props.link && this.loadLink()
} }
embedlyCardRendered = (iframe, test) => { embedlyCardRendered = (iframe, test) => {
@ -59,7 +57,8 @@ class Attachments extends Component {
} }
loadLink = () => { loadLink = () => {
this.setState({embedlyLinkStarted: true}) debugger
this.setState({ embedlyLinkStarted: true })
var e = embedly('card', document.getElementById('embedlyLink')) var e = embedly('card', document.getElementById('embedlyLink'))
if (e && e.type === 'error') this.setState({embedlyLinkError: true}) if (e && e.type === 'error') this.setState({embedlyLinkError: true})
} }
@ -71,15 +70,14 @@ class Attachments extends Component {
embedlyLinkError: false embedlyLinkError: false
}) })
this.props.updateTopic({ link: null }) this.props.updateTopic({ link: null })
$('.embedly-card').remove() // failsafe $('div.embedly-card').after(`<a href="" id="embedlyLink" target="_blank" data-card-description="0"></a>`)
$('.embedly-card').remove()
} }
render = () => { render = () => {
const { topic, ActiveMapper } = this.props const { link, authorizedToEdit } = this.props
const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
const hasAttachment = !!link
const authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
const hasAttachment = topic.get('link') && topic.get('link') !== ''
if (!hasAttachment && !authorizedToEdit) return null if (!hasAttachment && !authorizedToEdit) return null
@ -103,12 +101,12 @@ class Attachments extends Component {
</div> </div>
</div> </div>
<a style={{ display: hasAttachment ? 'block' : 'none' }} <a style={{ display: hasAttachment ? 'block' : 'none' }}
href={topic.get('link')} href={link}
id="embedlyLink" id="embedlyLink"
target="_blank" target="_blank"
data-card-description="0" data-card-description="0"
> >
{topic.get('link')} {link}
</a> </a>
{embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError && <div id="embedlyLinkLoader">loading...</div>} {embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError && <div id="embedlyLinkLoader">loading...</div>}
{authorizedToEdit && ( {authorizedToEdit && (
@ -123,8 +121,8 @@ class Attachments extends Component {
} }
Attachments.propTypes = { Attachments.propTypes = {
topic: PropTypes.object, link: PropTypes.string,
ActiveMapper: PropTypes.object, authorizedToEdit: PropTypes.bool,
updateTopic: PropTypes.func updateTopic: PropTypes.func
} }

4
frontend/src/components/TopicCard/index.js
View file

@ -36,8 +36,8 @@ class ReactTopicCard extends Component {
authorizedToEdit={authorizedToEdit} authorizedToEdit={authorizedToEdit}
onChange={this.props.updateTopic} onChange={this.props.updateTopic}
/> />
<Attachments topic={this.props.topic} <Attachments link={this.props.topic.get('link')}
ActiveMapper={this.props.ActiveMapper} authorizedToEdit={authorizedToEdit}
updateTopic={this.props.updateTopic} updateTopic={this.props.updateTopic}
/> />
<div className="clearfloat"></div> <div className="clearfloat"></div>