diff options
Diffstat (limited to 'packages/website/ts/pages/wiki/wiki.tsx')
| -rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 96 |
1 files changed, 43 insertions, 53 deletions
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 72da94a20..d065614ba 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -2,18 +2,16 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { - scroller, -} from 'react-scroll'; -import {TopBar} from 'ts/components/top_bar'; -import {MarkdownSection} from 'ts/pages/shared/markdown_section'; -import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; -import {SectionHeader} from 'ts/pages/shared/section_header'; -import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { scroller } from 'react-scroll'; +import { TopBar } from 'ts/components/top_bar'; +import { MarkdownSection } from 'ts/pages/shared/markdown_section'; +import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; +import { SectionHeader } from 'ts/pages/shared/section_header'; +import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; @@ -62,40 +60,37 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } public render() { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) - ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + ? {} + : this._getMenuSubsectionsBySection(this.state.articlesBySection); return ( <div> - <DocumentTitle title="0x Protocol Wiki"/> + <DocumentTitle title="0x Protocol Wiki" /> <TopBar blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} shouldFullWidth={true} /> - {_.isUndefined(this.state.articlesBySection) ? - <div - className="col col-12" - style={styles.mainContainers} - > + {_.isUndefined(this.state.articlesBySection) ? ( + <div className="col col-12" style={styles.mainContainers}> <div className="relative sm-px2 sm-pt2 sm-m1" - style={{height: 122, top: '50%', transform: 'translateY(-50%)'}} + style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} > <div className="center pb2"> <CircularProgress size={40} thickness={5} /> </div> - <div className="center pt2" style={{paddingBottom: 11}}>Loading wiki...</div> + <div className="center pt2" style={{ paddingBottom: 11 }}> + Loading wiki... + </div> </div> - </div> : - <div - className="mx-auto flex" - style={{color: colors.grey800, height: 43}} - > + </div> + ) : ( + <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> <div className="border-right absolute pt2" - style={{...styles.menuContainer, ...styles.mainContainers}} + style={{ ...styles.menuContainer, ...styles.mainContainers }} > <NestedSidebarMenu topLevelMenu={menuSubsectionsBySection} @@ -105,24 +100,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> </div> <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div - id="documentation" - style={styles.mainContainers} - className="absolute" - > + <div id="documentation" style={styles.mainContainers} className="absolute"> <div id="0xProtocolWiki" /> <h1 className="md-pl2 sm-pl3"> <a href={constants.URL_GITHUB_WIKI} target="_blank"> 0x Protocol Wiki </a> </h1> - <div id="wiki"> - {this._renderWikiArticles()} - </div> + <div id="wiki">{this._renderWikiArticles()}</div> </div> </div> </div> - } + )} </div> ); } @@ -143,12 +132,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}> + <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}> See a way to make this article better?{' '} - <a - href={githubLink} - target="_blank" - > + <a href={githubLink} target="_blank"> Edit here → </a> </div> @@ -156,10 +142,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { ); }); return ( - <div - key={`section-${sectionName}`} - className="py2 pr3 md-pl2 sm-pl3" - > + <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> {renderedArticles} </div> @@ -172,7 +155,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> { hash = '0xProtocolWiki'; // scroll to the top } - scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'}); + scroller.scrollTo(hash, { + duration: 0, + offset: 0, + containerId: 'documentation', + }); } private async _fetchArticlesBySectionAsync(): Promise<void> { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; @@ -192,15 +179,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> { return; } const articlesBySection = await response.json(); - this.setState({ - articlesBySection, - }, () => { - this._scrollToHash(); - }); + this.setState( + { + articlesBySection, + }, + () => { + this._scrollToHash(); + }, + ); } private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: {[section: string]: string[]} = {}; + const menuSubsectionsBySection: { [section: string]: string[] } = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; const articleNames = _.map(articles, article => article.title); |