diff --git a/frontend/components/badge-examples.js b/frontend/components/badge-examples.js index e8c9f78a47..3b7cca205d 100644 --- a/frontend/components/badge-examples.js +++ b/frontend/components/badge-examples.js @@ -1,8 +1,8 @@ -import React from 'react'; -import { Link } from "react-router-dom"; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import resolveBadgeUrl from '../lib/badge-url'; +import React from 'react' +import { Link } from 'react-router-dom' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import resolveBadgeUrl from '../lib/badge-url' const Badge = ({ title, @@ -14,39 +14,49 @@ const Badge = ({ shouldDisplay = () => true, onClick, }) => { - const handleClick = onClick ? - () => onClick({ title, previewUri, exampleUri, documentation }) - : undefined; + const handleClick = onClick + ? () => onClick({ title, previewUri, exampleUri, documentation }) + : undefined - const previewImage = previewUri - ? ( - ) : '\u00a0'; // non-breaking space + src={resolveBadgeUrl(previewUri, baseUri, { longCache })} + alt="" + /> + ) : ( + '\u00a0' + ) // non-breaking space const resolvedExampleUri = resolveBadgeUrl( exampleUri || previewUri, baseUri, - { longCache: false }); + { longCache: false } + ) if (shouldDisplay()) { return ( - - { title }: + + {title}: - { previewImage } + {previewImage} - - { resolvedExampleUri } + + {resolvedExampleUri} - ); + ) } - return null; -}; + return null +} Badge.propTypes = { title: PropTypes.string.isRequired, previewUri: PropTypes.string, @@ -56,75 +66,74 @@ Badge.propTypes = { longCache: PropTypes.bool.isRequired, shouldDisplay: PropTypes.func, onClick: PropTypes.func.isRequired, -}; +} const Category = ({ category, examples, baseUri, longCache, onClick }) => { - if (examples.filter(example => example.shouldDisplay()).length === 0){ - return null; + if (examples.filter(example => example.shouldDisplay()).length === 0) { + return null } return (
-

{ category.name }

+

{category.name}

- { - examples.map(badgeData => ( - - )) - } + {examples.map(badgeData => ( + + ))}
- ); -}; + ) +} Category.propTypes = { category: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, }).isRequired, - examples: PropTypes.arrayOf(PropTypes.shape({ - title: PropTypes.string.isRequired, - previewUri: PropTypes.string, - exampleUri: PropTypes.string, - documentation: PropTypes.string, - })).isRequired, + examples: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string.isRequired, + previewUri: PropTypes.string, + exampleUri: PropTypes.string, + documentation: PropTypes.string, + }) + ).isRequired, baseUri: PropTypes.string, longCache: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, -}; +} const BadgeExamples = ({ categories, baseUri, longCache, onClick }) => (
- { - categories.map((categoryData, i) => ( - - )) - } + {categories.map((categoryData, i) => ( + + ))}
-); +) BadgeExamples.propTypes = { - categories: PropTypes.arrayOf(PropTypes.shape({ - category: Category.propTypes.category, - examples: Category.propTypes.examples, - })), + categories: PropTypes.arrayOf( + PropTypes.shape({ + category: Category.propTypes.category, + examples: Category.propTypes.examples, + }) + ), baseUri: PropTypes.string, longCache: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, -}; +} -export { - Badge, - BadgeExamples, -}; +export { Badge, BadgeExamples } diff --git a/frontend/components/dynamic-badge-maker.js b/frontend/components/dynamic-badge-maker.js index e6ac8a6bee..a8eb0f1957 100644 --- a/frontend/components/dynamic-badge-maker.js +++ b/frontend/components/dynamic-badge-maker.js @@ -1,11 +1,11 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { dynamicBadgeUrl } from '../lib/badge-url'; +import React from 'react' +import PropTypes from 'prop-types' +import { dynamicBadgeUrl } from '../lib/badge-url' export default class DynamicBadgeMaker extends React.Component { static propTypes = { baseUri: PropTypes.string, - }; + } state = { datatype: '', @@ -15,22 +15,26 @@ export default class DynamicBadgeMaker extends React.Component { color: '', prefix: '', suffix: '', - }; + } - makeBadgeUri () { - const { datatype, label, url, query, color, prefix, suffix } = this.state; - const { baseUri: baseUrl = document.location.href } = this.props; - return dynamicBadgeUrl(baseUrl, datatype, label, url, query, { color, prefix, suffix }); + makeBadgeUri() { + const { datatype, label, url, query, color, prefix, suffix } = this.state + const { baseUri: baseUrl = document.location.href } = this.props + return dynamicBadgeUrl(baseUrl, datatype, label, url, query, { + color, + prefix, + suffix, + }) } handleSubmit(e) { - e.preventDefault(); - document.location = this.makeBadgeUri(); + e.preventDefault() + document.location = this.makeBadgeUri() } get isValid() { - const { datatype, label, url, query } = this.state; - return datatype && label && url && query; + const { datatype, label, url, query } = this.state + return datatype && label && url && query } render() { @@ -39,44 +43,60 @@ export default class DynamicBadgeMaker extends React.Component { {} + {' '} + {} this.setState({ label: event.target.value })} - placeholder="label" /> {} + placeholder="label" + />{' '} + {} this.setState({ url: event.target.value })} - placeholder="url" /> {} + placeholder="url" + />{' '} + {} this.setState({ query: event.target.value })} - placeholder="query" /> {} + placeholder="query" + />{' '} + {} this.setState({ color: event.target.value })} - placeholder="color" /> {} + placeholder="color" + />{' '} + {} this.setState({ prefix: event.target.value })} - placeholder="prefix" /> {} + placeholder="prefix" + />{' '} + {} this.setState({ suffix: event.target.value })} - placeholder="suffix" /> {} - + placeholder="suffix" + />{' '} + {} + - ); + ) } } diff --git a/frontend/components/examples-page.js b/frontend/components/examples-page.js index 6a41794db2..f60b512e61 100644 --- a/frontend/components/examples-page.js +++ b/frontend/components/examples-page.js @@ -1,27 +1,26 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Meta from './meta'; -import Header from './header'; -import SuggestionAndSearch from './suggestion-and-search'; -import SearchResults from './search-results'; -import MarkupModal from './markup-modal'; -import Usage from './usage'; -import Footer from './footer'; -import { baseUri, longCache } from '../constants'; +import React from 'react' +import PropTypes from 'prop-types' +import Meta from './meta' +import Header from './header' +import SuggestionAndSearch from './suggestion-and-search' +import SearchResults from './search-results' +import MarkupModal from './markup-modal' +import Usage from './usage' +import Footer from './footer' +import { baseUri, longCache } from '../constants' export default class ExamplesPage extends React.Component { - constructor(props) { - super(props); + super(props) this.state = { category: props.match.params.id, query: null, example: null, searchReady: true, - }; - this.searchTimeout = 0; - this.renderSearchResults = this.renderSearchResults.bind(this); - this.searchQueryChanged = this.searchQueryChanged.bind(this); + } + this.searchTimeout = 0 + this.renderSearchResults = this.renderSearchResults.bind(this) + this.searchQueryChanged = this.searchQueryChanged.bind(this) } static propTypes = { @@ -29,7 +28,7 @@ export default class ExamplesPage extends React.Component { } searchQueryChanged(query) { - this.setState({searchReady: false}); + this.setState({ searchReady: false }) /* Add a small delay before showing search results so that we wait until the user has stipped typing @@ -40,29 +39,32 @@ export default class ExamplesPage extends React.Component { b) stops the page from 'flashing' as the user types, like this: https://user-images.githubusercontent.com/7288322/42600206-9b278470-85b5-11e8-9f63-eb4a0c31cb4a.gif */ - window.clearTimeout(this.searchTimeout); + window.clearTimeout(this.searchTimeout) this.searchTimeout = window.setTimeout(() => { this.setState({ searchReady: true, - query: query - }); - }, 500); + query: query, + }) + }, 500) } renderSearchResults() { if (this.state.searchReady) { - if ((this.state.query != null) && (this.state.query.length === 1)) { - return (
Search term must have 2 or more characters
); + if (this.state.query != null && this.state.query.length === 1) { + return
Search term must have 2 or more characters
} else { return ( { this.setState({ example }); }} /> - ); + clickHandler={example => { + this.setState({ example }) + }} + /> + ) } } else { - return (
searching...
); + return
searching...
} } @@ -73,32 +75,34 @@ export default class ExamplesPage extends React.Component {
{ this.setState({ example: null }); }} - baseUri={baseUri} /> + onRequestClose={() => { + this.setState({ example: null }) + }} + baseUri={baseUri} + />
{ this.setState({ example }); }} + onBadgeClick={example => { + this.setState({ example }) + }} baseUri={baseUri} - longCache={longCache} /> - + longCache={longCache} + /> + donate
- { this.renderSearchResults() } - + {this.renderSearchResults()} +