code fixes refactor

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({

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

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 = () => (

src/components/Repositories/Repository.module.scss

@@ -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;
-}

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 }) => (

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 (
+        <ul className={styles.links}>
+            <li>
+                <a href={url}>GitHub</a>
+            </li>
+            {links &&
+                links.map(link => (
+                    <li key={link.url}>
+                        <a href={link.url}>{link.name}</a>
+                    </li>
+                ))}
+        </ul>
+    )
+}
+
+Links.propTypes = {
+    links: PropTypes.array,
+    url: PropTypes.string.isRequired
+}

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;
+    }
+}

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 (
+            <aside className={styles.repositorynumbers}>
+                <a href={`${url}/stargazers`} title="Show Stargazers">
+                    <Star /> <span>{stars}</span>
+                </a>
+                {forks > 0 && (
+                    <a href={`${url}/network`} title="Show Forks">
+                        <Forks /> <span>{forks}</span>
+                    </a>
+                )}
+            </aside>
+        )
+    }
+}

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;
+    }
+}

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 && (
+            <aside className={styles.readme}>
+                <h3 className={styles.title}>README.md</h3>
+                {readmeHtml}
+            </aside>
+        )
+    )
+}

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;
+}

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 (
+        <h1 className={styles.title}>
+            <a href={url}>
+                {isFork && <Forks />}
+                {name}
+                {isFork && (
+                    <span className={styles.forkLine}>
+                        {parent.nameWithOwner}
+                    </span>
+                )}
+            </a>
+            {releases.edges[0] && (
+                <a
+                    href={`${url}/releases`}
+                    className={styles.repositoryRelease}
+                    title="Latest release"
+                >
+                    {releases.edges[0].node.tag.name}
+                </a>
+            )}
+        </h1>
+    )
+}
+
+Title.propTypes = {
+    name: PropTypes.string.isRequired,
+    isFork: PropTypes.bool,
+    parent: PropTypes.shape({
+        nameWithOwner: PropTypes.string
+    }),
+    releases: PropTypes.object.isRequired,
+    url: PropTypes.string.isRequired
+}

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;
+}

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 Numbers from './Numbers'
-import remarkReact from 'remark-react'
+import Readme from './Readme'
-import axios from 'axios'
+import styles from './index.module.scss'
-import { ReactComponent as Star } from '../../images/star.svg'
+import Title from './Title'
-import { ReactComponent as Forks } from '../../images/forks.svg'
+import Links from './Links'
-import styles from './Repository.module.scss'
 
 const queryGithub = graphql`
     query GitHubReposInfo {
@@ -66,155 +65,6 @@ const queryGithub = graphql`
     }
 `
 
-const Title = ({ name, isFork, parent, releases, url }) => (
-    <h1 className={styles.repositoryName}>
-        <a href={url}>
-            {isFork && <Forks />}
-            {name}
-            {isFork && (
-                <span className={styles.forkLine}>{parent.nameWithOwner}</span>
-            )}
-        </a>
-        {releases.edges[0] && (
-            <a
-                href={`${url}/releases`}
-                className={styles.repositoryRelease}
-                title="Latest release"
-            >
-                {releases.edges[0].node.tag.name}
-            </a>
-        )}
-    </h1>
-)
-
-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 }) => (
-    <ul className={styles.repositoryLinks}>
-        <li>
-            <a href={url}>GitHub</a>
-        </li>
-        {links &&
-            links.map(link => (
-                <li key={link.url}>
-                    <a href={link.url}>{link.name}</a>
-                </li>
-            ))}
-    </ul>
-)
-
-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 (
-            <aside className={styles.repositorynumbers}>
-                <a href={`${url}/stargazers`} title="Show Stargazers">
-                    <Star /> <span>{stars}</span>
-                </a>
-                {forks > 0 && (
-                    <a href={`${url}/network`} title="Show Forks">
-                        <Forks /> <span>{forks}</span>
-                    </a>
-                )}
-            </aside>
-        )
-    }
-}
-
-const Readme = ({ object }) => {
-    const readmeHtml =
-        object &&
-        remark()
-            .use(remarkReact)
-            .processSync(object.text).contents
-
-    return (
-        object && (
-            <aside className={styles.repositoryReadme}>
-                <h3 className={styles.repositoryReadmeTitle}>README.md</h3>
-                {readmeHtml}
-            </aside>
-        )
-    )
-}
-
 const Repository = ({ name, links, readme }) => (
     <StaticQuery
         query={queryGithub}

src/components/Repository/index.module.scss

@@ -0,0 +1,25 @@
+@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;
+    }
+}
+
+.repositoryMeta {
+    display: flex;
+    align-items: flex-end;
+    align-self: flex-end;
+    width: 100%;
+}