From bc1bbe0801f9e8de0f326bffb70ccd913d580ae3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 18 Sep 2019 11:21:18 +0200 Subject: [PATCH] code fixes refactor --- src/components/DocContent.jsx | 2 +- src/components/DocFooter.jsx | 4 +- src/components/QuickRun.jsx | 2 +- .../Repositories/Repository.module.scss | 162 ------------------ .../Repositories/RepositoryList.jsx | 2 +- src/components/Repository/Links.jsx | 24 +++ src/components/Repository/Links.module.scss | 23 +++ src/components/Repository/Numbers.jsx | 88 ++++++++++ src/components/Repository/Numbers.module.scss | 35 ++++ src/components/Repository/Readme.jsx | 21 +++ src/components/Repository/Readme.module.scss | 30 ++++ src/components/Repository/Title.jsx | 40 +++++ src/components/Repository/Title.module.scss | 53 ++++++ .../Repository.jsx => Repository/index.jsx} | 162 +----------------- src/components/Repository/index.module.scss | 25 +++ 15 files changed, 349 insertions(+), 324 deletions(-) delete mode 100644 src/components/Repositories/Repository.module.scss create mode 100644 src/components/Repository/Links.jsx create mode 100644 src/components/Repository/Links.module.scss create mode 100644 src/components/Repository/Numbers.jsx create mode 100644 src/components/Repository/Numbers.module.scss create mode 100644 src/components/Repository/Readme.jsx create mode 100644 src/components/Repository/Readme.module.scss create mode 100644 src/components/Repository/Title.jsx create mode 100644 src/components/Repository/Title.module.scss rename src/components/{Repositories/Repository.jsx => Repository/index.jsx} (52%) create mode 100644 src/components/Repository/index.module.scss diff --git a/src/components/DocContent.jsx b/src/components/DocContent.jsx index e639bc02..32dc08ae 100644 --- a/src/components/DocContent.jsx +++ b/src/components/DocContent.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import RehypeReact from 'rehype-react' -import Repository from './Repositories/Repository' +import Repository from './Repository' import styles from './DocContent.module.scss' const renderAst = new RehypeReact({ diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx index 1c9a321a..893881a9 100644 --- a/src/components/DocFooter.jsx +++ b/src/components/DocFooter.jsx @@ -4,7 +4,7 @@ import { ReactComponent as Pencil } from '../images/pencil.svg' import styles from './DocFooter.module.scss' import { social, githubContentPath, githubDevOceanPath } from '../../config' -const DocFooter = ({ post, url, externalName }) => { +export default function DocFooter({ post, url, externalName }) { let path if (post) { @@ -42,5 +42,3 @@ DocFooter.propTypes = { url: PropTypes.string, externalName: PropTypes.string } - -export default DocFooter diff --git a/src/components/QuickRun.jsx b/src/components/QuickRun.jsx index ffc18015..a874cef7 100644 --- a/src/components/QuickRun.jsx +++ b/src/components/QuickRun.jsx @@ -1,6 +1,6 @@ import React from 'react' import { Link, StaticQuery, graphql } from 'gatsby' -import Repository from './Repositories/Repository' +import Repository from './Repository' import styles from './QuickRun.module.scss' const QuickRun = () => ( diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss deleted file mode 100644 index b2966208..00000000 --- a/src/components/Repositories/Repository.module.scss +++ /dev/null @@ -1,162 +0,0 @@ -@import 'variables'; - -.repository { - padding: $spacer / $line-height; - border: 1px solid $brand-grey-lighter; - background: $brand-white; - border-radius: $border-radius; - font-size: $font-size-small; - text-align: left; - width: 100%; - margin-bottom: $spacer; - display: flex; - flex-wrap: wrap; - - p { - align-self: flex-start; - } -} - -.repositoryName { - font-size: $font-size-h4; - margin-top: 0; - margin-bottom: $spacer / 2; - border: 0; - padding: 0; - width: 100%; - position: relative; - - a:first-of-type { - color: $brand-black; - - &:hover, - &:focus { - color: $brand-pink; - } - } - - svg { - width: 1em; - height: 1em; - display: inline-block; - fill: $brand-grey-light; - margin-right: $spacer / 8; - margin-left: -.2rem; - margin-bottom: -.2rem; - } -} - -.forkLine { - display: inline; - margin-left: $spacer / 4; - font-size: $font-size-mini; - font-family: $font-family-monospace; - font-weight: $font-weight-base; - color: $brand-grey-light; -} - -.repositoryRelease { - font-family: $font-family-base; - font-weight: $font-weight-base; - font-size: $font-size-small; - color: $brand-grey-light; - display: inline-block; - margin-left: $spacer / 4; - - &:hover, - &:focus { - transform: none; - } -} - -.repositoryMeta { - display: flex; - align-items: flex-end; - align-self: flex-end; - width: 100%; -} - -.repositoryLinks { - margin: 0; - padding: 0; - margin-left: -($spacer / $line-height); - width: 80%; - - li { - display: inline-block; - padding: 0; - margin-left: $spacer / $line-height; - - &:before { - display: none; - } - } - - a { - font-family: $font-family-button; - font-weight: $font-weight-bold; - } -} - -.repositorynumbers { - font-size: $font-size-small; - margin-left: -($spacer / 4); - flex: 1; - text-align: right; - width: 20%; - - a { - color: $brand-grey-light; - margin-left: $spacer / 4; - display: inline-block; - - &:hover, - &:focus { - color: $brand-pink; - transform: none; - - svg { - fill: $brand-pink; - } - } - - span { - margin-left: -.15rem; - } - } - - svg { - display: inline-block; - fill: $brand-grey-light; - margin-bottom: -.1rem; - } -} - -.repositoryReadme { - margin-top: $spacer / $line-height; - padding: $spacer / 2; - background: darken($brand-white, 2%); - - h1, - h2 { - font-size: $font-size-large; - } - - h3, - h4 { - font-size: $font-size-base; - } - - img { - display: inline-block; - } -} - -.repositoryReadmeTitle { - font-size: $font-size-small !important; // stylelint-disable-line - font-family: $font-family-monospace; - font-weight: $font-weight-base; - margin: 0; - color: $brand-grey-light; - margin-bottom: $spacer / 2; -} diff --git a/src/components/Repositories/RepositoryList.jsx b/src/components/Repositories/RepositoryList.jsx index 06e83f00..5d392af2 100644 --- a/src/components/Repositories/RepositoryList.jsx +++ b/src/components/Repositories/RepositoryList.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import Repository from './Repository' +import Repository from '../Repository' import styles from './RepositoryList.module.scss' const RepositoryList = ({ repositories }) => ( diff --git a/src/components/Repository/Links.jsx b/src/components/Repository/Links.jsx new file mode 100644 index 00000000..74df2146 --- /dev/null +++ b/src/components/Repository/Links.jsx @@ -0,0 +1,24 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './Links.module.scss' + +export default function Links({ links, url }) { + return ( + + ) +} + +Links.propTypes = { + links: PropTypes.array, + url: PropTypes.string.isRequired +} diff --git a/src/components/Repository/Links.module.scss b/src/components/Repository/Links.module.scss new file mode 100644 index 00000000..93674faa --- /dev/null +++ b/src/components/Repository/Links.module.scss @@ -0,0 +1,23 @@ +@import 'variables'; + +.links { + margin: 0; + padding: 0; + margin-left: -($spacer / $line-height); + width: 80%; + + li { + display: inline-block; + padding: 0; + margin-left: $spacer / $line-height; + + &:before { + display: none; + } + } + + a { + font-family: $font-family-button; + font-weight: $font-weight-bold; + } +} diff --git a/src/components/Repository/Numbers.jsx b/src/components/Repository/Numbers.jsx new file mode 100644 index 00000000..60cea958 --- /dev/null +++ b/src/components/Repository/Numbers.jsx @@ -0,0 +1,88 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import axios from 'axios' +import { ReactComponent as Star } from '../../images/star.svg' +import { ReactComponent as Forks } from '../../images/forks.svg' +import styles from './Numbers.module.scss' + +export default class Numbers extends PureComponent { + static propTypes = { + stargazers: PropTypes.object.isRequired, + forkCount: PropTypes.number.isRequired, + url: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + } + + state = { + forks: this.props.forkCount, + stars: this.props.stargazers.totalCount + } + + url = 'https://oceanprotocol-github.now.sh' + + signal = axios.CancelToken.source() + + componentDidMount() { + this.fetchNumbers() + } + + componentWillUnmount() { + this.signal.cancel() + } + + fetchNumbers = async () => { + try { + const response = await axios({ + method: 'get', + url: this.url, + timeout: 10000, // 10 sec. + headers: { + 'Content-Type': 'application/json' + } + }) + + const repo = response.data + .map(item => { + if (item.name === this.props.name) { + return item + } + }) + .filter(n => n) + + const { forks, stars } = repo + + // update state only when numbers have changed + if (forks && forks !== this.props.forkCount) { + this.setState({ forks }) + } + + if (stars && stars !== this.props.stargazers.totalCount) { + this.setState({ stars }) + } + } catch (error) { + if (axios.isCancel(error)) { + return null + } else { + console.log(error.message) // eslint-disable-line no-console + } + } + } + + render() { + const { url } = this.props + const { forks, stars } = this.state + + return ( + + ) + } +} diff --git a/src/components/Repository/Numbers.module.scss b/src/components/Repository/Numbers.module.scss new file mode 100644 index 00000000..48bf096e --- /dev/null +++ b/src/components/Repository/Numbers.module.scss @@ -0,0 +1,35 @@ +@import 'variables'; + +.repositorynumbers { + font-size: $font-size-small; + margin-left: -($spacer / 4); + flex: 1; + text-align: right; + width: 20%; + + a { + color: $brand-grey-light; + margin-left: $spacer / 4; + display: inline-block; + + &:hover, + &:focus { + color: $brand-pink; + transform: none; + + svg { + fill: $brand-pink; + } + } + + span { + margin-left: -.15rem; + } + } + + svg { + display: inline-block; + fill: $brand-grey-light; + margin-bottom: -.1rem; + } +} diff --git a/src/components/Repository/Readme.jsx b/src/components/Repository/Readme.jsx new file mode 100644 index 00000000..d7395a5d --- /dev/null +++ b/src/components/Repository/Readme.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import remark from 'remark' +import remarkReact from 'remark-react' +import styles from './Readme.module.scss' + +export default function Readme({ object }) { + const readmeHtml = + object && + remark() + .use(remarkReact) + .processSync(object.text).contents + + return ( + object && ( + + ) + ) +} diff --git a/src/components/Repository/Readme.module.scss b/src/components/Repository/Readme.module.scss new file mode 100644 index 00000000..86a1a47b --- /dev/null +++ b/src/components/Repository/Readme.module.scss @@ -0,0 +1,30 @@ +@import 'variables'; + +.readme { + margin-top: $spacer / $line-height; + padding: $spacer / 2; + background: darken($brand-white, 2%); + + h1, + h2 { + font-size: $font-size-large; + } + + h3, + h4 { + font-size: $font-size-base; + } + + img { + display: inline-block; + } +} + +.title { + font-size: $font-size-small !important; // stylelint-disable-line + font-family: $font-family-monospace; + font-weight: $font-weight-base; + margin: 0; + color: $brand-grey-light; + margin-bottom: $spacer / 2; +} diff --git a/src/components/Repository/Title.jsx b/src/components/Repository/Title.jsx new file mode 100644 index 00000000..c86f9014 --- /dev/null +++ b/src/components/Repository/Title.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './Title.module.scss' + +import { ReactComponent as Forks } from '../../images/forks.svg' + +export default function Title({ name, isFork, parent, releases, url }) { + return ( +

+ + {isFork && } + {name} + {isFork && ( + + {parent.nameWithOwner} + + )} + + {releases.edges[0] && ( + + {releases.edges[0].node.tag.name} + + )} +

+ ) +} + +Title.propTypes = { + name: PropTypes.string.isRequired, + isFork: PropTypes.bool, + parent: PropTypes.shape({ + nameWithOwner: PropTypes.string + }), + releases: PropTypes.object.isRequired, + url: PropTypes.string.isRequired +} diff --git a/src/components/Repository/Title.module.scss b/src/components/Repository/Title.module.scss new file mode 100644 index 00000000..f4d6dabd --- /dev/null +++ b/src/components/Repository/Title.module.scss @@ -0,0 +1,53 @@ +@import 'variables'; + +.title { + font-size: $font-size-h4; + margin-top: 0; + margin-bottom: $spacer / 2; + border: 0; + padding: 0; + width: 100%; + position: relative; + + a:first-of-type { + color: $brand-black; + + &:hover, + &:focus { + color: $brand-pink; + } + } + + svg { + width: 1em; + height: 1em; + display: inline-block; + fill: $brand-grey-light; + margin-right: $spacer / 8; + margin-left: -.2rem; + margin-bottom: -.2rem; + } +} + +.repositoryRelease { + font-family: $font-family-base; + font-weight: $font-weight-base; + font-size: $font-size-small; + color: $brand-grey-light; + display: inline-block; + margin-left: $spacer / 4; + + &:hover, + &:focus { + transform: none; + } +} + +.forkLine { + display: inline; + margin-left: $spacer / 4; + font-size: $font-size-mini; + font-family: $font-family-monospace; + font-weight: $font-weight-base; + color: $brand-grey-light; +} diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repository/index.jsx similarity index 52% rename from src/components/Repositories/Repository.jsx rename to src/components/Repository/index.jsx index feeabfae..9ddc489c 100644 --- a/src/components/Repositories/Repository.jsx +++ b/src/components/Repository/index.jsx @@ -1,12 +1,11 @@ -import React, { PureComponent } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' -import remark from 'remark' -import remarkReact from 'remark-react' -import axios from 'axios' -import { ReactComponent as Star } from '../../images/star.svg' -import { ReactComponent as Forks } from '../../images/forks.svg' -import styles from './Repository.module.scss' +import Numbers from './Numbers' +import Readme from './Readme' +import styles from './index.module.scss' +import Title from './Title' +import Links from './Links' const queryGithub = graphql` query GitHubReposInfo { @@ -66,155 +65,6 @@ const queryGithub = graphql` } ` -const Title = ({ name, isFork, parent, releases, url }) => ( -

- - {isFork && } - {name} - {isFork && ( - {parent.nameWithOwner} - )} - - {releases.edges[0] && ( - - {releases.edges[0].node.tag.name} - - )} -

-) - -Title.propTypes = { - name: PropTypes.string.isRequired, - isFork: PropTypes.bool, - parent: PropTypes.shape({ - nameWithOwner: PropTypes.string - }), - releases: PropTypes.object.isRequired, - url: PropTypes.string.isRequired -} - -const Links = ({ links, url }) => ( - -) - -Links.propTypes = { - links: PropTypes.array, - url: PropTypes.string.isRequired -} - -class Numbers extends PureComponent { - static propTypes = { - stargazers: PropTypes.object.isRequired, - forkCount: PropTypes.number.isRequired, - url: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - } - - state = { - forks: this.props.forkCount, - stars: this.props.stargazers.totalCount - } - - url = 'https://oceanprotocol-github.now.sh' - - signal = axios.CancelToken.source() - - componentDidMount() { - this.fetchNumbers() - } - - componentWillUnmount() { - this.signal.cancel() - } - - fetchNumbers = async () => { - try { - const response = await axios({ - method: 'get', - url: this.url, - timeout: 10000, // 10 sec. - headers: { - 'Content-Type': 'application/json' - } - }) - - const repo = response.data - .map(item => { - if (item.name === this.props.name) { - return item - } - }) - .filter(n => n) - - const { forks, stars } = repo - - // update state only when numbers have changed - if (forks && forks !== this.props.forkCount) { - this.setState({ forks }) - } - - if (stars && stars !== this.props.stargazers.totalCount) { - this.setState({ stars }) - } - } catch (error) { - if (axios.isCancel(error)) { - return null - } else { - console.log(error.message) // eslint-disable-line no-console - } - } - } - - render() { - const { url } = this.props - const { forks, stars } = this.state - - return ( - - ) - } -} - -const Readme = ({ object }) => { - const readmeHtml = - object && - remark() - .use(remarkReact) - .processSync(object.text).contents - - return ( - object && ( - - ) - ) -} - const Repository = ({ name, links, readme }) => (