From 993df14915393f06fdc7241702f9fd5d22c9a787 Mon Sep 17 00:00:00 2001 From: Lucas Lentz Date: Thu, 19 Oct 2017 15:04:55 -0200 Subject: [PATCH 1/4] Wrap Algolia search into a React component --- src/components/DocSearch/DocSearch.js | 110 ++++++++++++++++++++++++++ src/components/DocSearch/index.js | 11 +++ src/components/LayoutHeader/Header.js | 74 +---------------- src/layouts/index.js | 11 --- 4 files changed, 123 insertions(+), 83 deletions(-) create mode 100644 src/components/DocSearch/DocSearch.js create mode 100644 src/components/DocSearch/index.js diff --git a/src/components/DocSearch/DocSearch.js b/src/components/DocSearch/DocSearch.js new file mode 100644 index 00000000000..4f3b8ca2889 --- /dev/null +++ b/src/components/DocSearch/DocSearch.js @@ -0,0 +1,110 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * @emails react-core + */ + +import React, {Component} from 'react'; +import {colors, media} from 'theme'; + +class DocSearch extends Component { + state = { + disabled: false + } + componentDidMount() { + // Initialize Algolia search. + // TODO Is this expensive? Should it be deferred until a user is about to search? + // eslint-disable-next-line no-undef + if(window.docsearch) { + docsearch({ + apiKey: '36221914cce388c46d0420343e0bb32e', + indexName: 'react', + inputSelector: '#algolia-doc-search', + }); + } else { + this.setState({ disabled: true}) + } + } + + render() { + const {disabled} = this.state + + return ( +
+ +
+ ); + } +} + +export default DocSearch; \ No newline at end of file diff --git a/src/components/DocSearch/index.js b/src/components/DocSearch/index.js new file mode 100644 index 00000000000..8e2a0ad3793 --- /dev/null +++ b/src/components/DocSearch/index.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * @emails react-core + */ + +'use strict'; + +import DocSearch from './DocSearch'; + +export default DocSearch; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index d3bc48fa7f2..8327a612df4 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -13,6 +13,7 @@ import React from 'react'; import {colors, fonts, media} from 'theme'; import {version} from 'site-constants'; import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; +import DocSearch from 'components/DocSearch'; import logoSvg from 'icons/logo.svg'; @@ -135,78 +136,7 @@ const Header = ({location}) => ( /> -
- -
+
Date: Thu, 19 Oct 2017 15:17:52 -0200 Subject: [PATCH 2/4] Do the yarn prettier --- src/components/DocSearch/DocSearch.js | 182 +++++++++++++------------- 1 file changed, 91 insertions(+), 91 deletions(-) diff --git a/src/components/DocSearch/DocSearch.js b/src/components/DocSearch/DocSearch.js index 4f3b8ca2889..c5b7337f075 100644 --- a/src/components/DocSearch/DocSearch.js +++ b/src/components/DocSearch/DocSearch.js @@ -8,103 +8,103 @@ import React, {Component} from 'react'; import {colors, media} from 'theme'; class DocSearch extends Component { - state = { - disabled: false - } - componentDidMount() { - // Initialize Algolia search. - // TODO Is this expensive? Should it be deferred until a user is about to search? - // eslint-disable-next-line no-undef - if(window.docsearch) { - docsearch({ - apiKey: '36221914cce388c46d0420343e0bb32e', - indexName: 'react', - inputSelector: '#algolia-doc-search', - }); - } else { - this.setState({ disabled: true}) - } + state = { + disabled: false, + }; + componentDidMount() { + // Initialize Algolia search. + // TODO Is this expensive? Should it be deferred until a user is about to search? + // eslint-disable-next-line no-undef + if (window.docsearch) { + docsearch({ + apiKey: '36221914cce388c46d0420343e0bb32e', + indexName: 'react', + inputSelector: '#algolia-doc-search', + }); + } else { + this.setState({disabled: true}); } + } - render() { - const {disabled} = this.state + render() { + const {disabled} = this.state; - return ( -
- + -
- ); - } + ':focus': { + paddingLeft: '29px', + width: '8rem', + outline: 'none', + }, + }, + }} + id="algolia-doc-search" + type="search" + placeholder="Search docs" + aria-label="Search docs" + /> + + ); + } } -export default DocSearch; \ No newline at end of file +export default DocSearch; From b19ea6b39b1a24ccdb3db84b0ee029371a17a036 Mon Sep 17 00:00:00 2001 From: Lucas Lentz Date: Thu, 19 Oct 2017 15:23:47 -0200 Subject: [PATCH 3/4] Add window parent to docsearch in order to pass CI --- src/components/DocSearch/DocSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DocSearch/DocSearch.js b/src/components/DocSearch/DocSearch.js index c5b7337f075..fc1475ab671 100644 --- a/src/components/DocSearch/DocSearch.js +++ b/src/components/DocSearch/DocSearch.js @@ -16,7 +16,7 @@ class DocSearch extends Component { // TODO Is this expensive? Should it be deferred until a user is about to search? // eslint-disable-next-line no-undef if (window.docsearch) { - docsearch({ + window.docsearch({ apiKey: '36221914cce388c46d0420343e0bb32e', indexName: 'react', inputSelector: '#algolia-doc-search', From 1d1656c906ea673dcdef11e1cbc24918f0dcfd84 Mon Sep 17 00:00:00 2001 From: Lucas Lentz Date: Thu, 19 Oct 2017 15:51:13 -0200 Subject: [PATCH 4/4] Add console.warn and move DocSearch component to LayoutHeader --- src/components/DocSearch/index.js | 11 ----------- .../{DocSearch => LayoutHeader}/DocSearch.js | 12 ++++++------ src/components/LayoutHeader/Header.js | 2 +- 3 files changed, 7 insertions(+), 18 deletions(-) delete mode 100644 src/components/DocSearch/index.js rename src/components/{DocSearch => LayoutHeader}/DocSearch.js (92%) diff --git a/src/components/DocSearch/index.js b/src/components/DocSearch/index.js deleted file mode 100644 index 8e2a0ad3793..00000000000 --- a/src/components/DocSearch/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * @emails react-core - */ - -'use strict'; - -import DocSearch from './DocSearch'; - -export default DocSearch; diff --git a/src/components/DocSearch/DocSearch.js b/src/components/LayoutHeader/DocSearch.js similarity index 92% rename from src/components/DocSearch/DocSearch.js rename to src/components/LayoutHeader/DocSearch.js index fc1475ab671..8619e314364 100644 --- a/src/components/DocSearch/DocSearch.js +++ b/src/components/LayoutHeader/DocSearch.js @@ -9,7 +9,7 @@ import {colors, media} from 'theme'; class DocSearch extends Component { state = { - disabled: false, + enabled: true, }; componentDidMount() { // Initialize Algolia search. @@ -22,14 +22,15 @@ class DocSearch extends Component { inputSelector: '#algolia-doc-search', }); } else { - this.setState({disabled: true}); + console.warn('Search has failed to load and now is being disabled'); + this.setState({enabled: false}); } } render() { - const {disabled} = this.state; + const {enabled} = this.state; - return ( + return enabled ? (
- ); + ) : null; } } diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 8327a612df4..9b2d95606d4 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -13,7 +13,7 @@ import React from 'react'; import {colors, fonts, media} from 'theme'; import {version} from 'site-constants'; import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; -import DocSearch from 'components/DocSearch'; +import DocSearch from './DocSearch'; import logoSvg from 'icons/logo.svg';