From 8695ed89a6e07f8aca43bcb9c3db73abce2f1998 Mon Sep 17 00:00:00 2001 From: Endilie Yacop Sucipto Date: Thu, 8 Nov 2018 10:23:07 +0800 Subject: [PATCH] refactor(v2): use react hooks on root app (#1095) * refactor(v2): use functional component + react hooks for App * docusaurus/link * nits * review --- v2/lib/core/App.js | 26 ++++++------------- v2/lib/docusaurus/{head.js => Head.js} | 0 v2/lib/docusaurus/Link.js | 25 ++++++++++++++++++ v2/lib/theme/BlogPage/index.js | 4 +-- v2/lib/theme/BlogPost/index.js | 4 +-- v2/lib/theme/Doc/index.js | 2 +- v2/lib/theme/DocBody/index.js | 4 +-- v2/lib/theme/DocsPaginator/index.js | 2 +- v2/lib/theme/Footer/index.js | 2 +- v2/lib/theme/Markdown/index.js | 2 +- v2/lib/theme/Navbar/index.js | 22 ++++++++-------- v2/lib/theme/Pages/index.js | 2 +- v2/lib/theme/Sidebar/SidebarLink.js | 8 +----- .../simple-site/pages/hello/world.js | 2 +- .../__fixtures__/simple-site/pages/index.js | 2 +- .../translated-site/pages/hello/world.js | 2 +- .../translated-site/pages/index.js | 2 +- .../transversioned-site/pages/hello/world.js | 2 +- .../transversioned-site/pages/index.js | 2 +- .../versioned-site/pages/hello/world.js | 2 +- .../versioned-site/pages/index.js | 2 +- v2/website/pages/index.js | 2 +- v2/website/pages/youtube.js | 2 +- 23 files changed, 65 insertions(+), 58 deletions(-) rename v2/lib/docusaurus/{head.js => Head.js} (100%) create mode 100644 v2/lib/docusaurus/Link.js diff --git a/v2/lib/core/App.js b/v2/lib/core/App.js index eeb4b66667..0d2c1817e8 100644 --- a/v2/lib/core/App.js +++ b/v2/lib/core/App.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, {useState} from 'react'; import {renderRoutes} from 'react-router-config'; import routes from '@generated/routes'; // eslint-disable-line @@ -27,23 +27,13 @@ const data = { siteConfig, }; -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - setContext: context => { - this.setState(context); - }, - }; - } - - render() { - return ( - - {renderRoutes(routes)} - - ); - } +function App() { + const [context, setContext] = useState({}); + return ( + + {renderRoutes(routes)} + + ); } export default App; diff --git a/v2/lib/docusaurus/head.js b/v2/lib/docusaurus/Head.js similarity index 100% rename from v2/lib/docusaurus/head.js rename to v2/lib/docusaurus/Head.js diff --git a/v2/lib/docusaurus/Link.js b/v2/lib/docusaurus/Link.js new file mode 100644 index 0000000000..ddc411cda4 --- /dev/null +++ b/v2/lib/docusaurus/Link.js @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import {NavLink} from 'react-router-dom'; + +const externalRegex = /^(https?:|\/\/)/; + +function Link(props) { + const {to, href} = props; + const targetLink = to || href; + const isExternal = externalRegex.test(targetLink); + return !targetLink || isExternal ? ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ) : ( + + ); +} + +export default Link; diff --git a/v2/lib/theme/BlogPage/index.js b/v2/lib/theme/BlogPage/index.js index 898f7ee25e..ee370e4c14 100644 --- a/v2/lib/theme/BlogPage/index.js +++ b/v2/lib/theme/BlogPage/index.js @@ -6,8 +6,8 @@ */ import React, {useContext} from 'react'; -import {Link} from 'react-router-dom'; -import Head from '@docusaurus/head'; +import Link from '@docusaurus/Link'; +import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; // eslint-disable-line import BlogPost from '@theme/BlogPost'; // eslint-disable-line diff --git a/v2/lib/theme/BlogPost/index.js b/v2/lib/theme/BlogPost/index.js index 89531e99cd..6337111291 100644 --- a/v2/lib/theme/BlogPost/index.js +++ b/v2/lib/theme/BlogPost/index.js @@ -6,8 +6,8 @@ */ import React from 'react'; -import {Link} from 'react-router-dom'; -import Head from '@docusaurus/head'; +import Link from '@docusaurus/Link'; +import Head from '@docusaurus/Head'; import classnames from 'classnames'; import Layout from '@theme/Layout'; // eslint-disable-line diff --git a/v2/lib/theme/Doc/index.js b/v2/lib/theme/Doc/index.js index 5d1146af28..625f6f22e8 100644 --- a/v2/lib/theme/Doc/index.js +++ b/v2/lib/theme/Doc/index.js @@ -7,7 +7,7 @@ import React, {useContext} from 'react'; import {renderRoutes} from 'react-router-config'; -import Head from '@docusaurus/head'; +import Head from '@docusaurus/Head'; import Footer from '@theme/Footer'; // eslint-disable-line import Navbar from '@theme/Navbar'; // eslint-disable-line diff --git a/v2/lib/theme/DocBody/index.js b/v2/lib/theme/DocBody/index.js index bceb04a1d8..d91ef8bafb 100644 --- a/v2/lib/theme/DocBody/index.js +++ b/v2/lib/theme/DocBody/index.js @@ -16,9 +16,7 @@ function DocBody(props) { const {children, metadata} = props; const context = useContext(DocusaurusContext); useEffect(() => { - context.setContext({ - metadata, - }); + context.setContext({metadata}); }, []); return ( diff --git a/v2/lib/theme/DocsPaginator/index.js b/v2/lib/theme/DocsPaginator/index.js index 0b9cef0286..25fcd224cc 100644 --- a/v2/lib/theme/DocsPaginator/index.js +++ b/v2/lib/theme/DocsPaginator/index.js @@ -6,7 +6,7 @@ */ import React, {useContext} from 'react'; -import {Link} from 'react-router-dom'; +import Link from '@docusaurus/Link'; import DocusaurusContext from '@docusaurus/context'; diff --git a/v2/lib/theme/Footer/index.js b/v2/lib/theme/Footer/index.js index c70908c7d8..ccf4d3f64e 100644 --- a/v2/lib/theme/Footer/index.js +++ b/v2/lib/theme/Footer/index.js @@ -6,7 +6,7 @@ */ import React, {useContext} from 'react'; -import {Link} from 'react-router-dom'; +import Link from '@docusaurus/Link'; import DocusaurusContext from '@docusaurus/context'; diff --git a/v2/lib/theme/Markdown/index.js b/v2/lib/theme/Markdown/index.js index b7f09ce42e..bf4720bde9 100644 --- a/v2/lib/theme/Markdown/index.js +++ b/v2/lib/theme/Markdown/index.js @@ -6,7 +6,7 @@ */ import React, {useContext} from 'react'; -import Head from '@docusaurus/head'; +import Head from '@docusaurus/Head'; import DocusaurusContext from '@docusaurus/context'; diff --git a/v2/lib/theme/Navbar/index.js b/v2/lib/theme/Navbar/index.js index 5ba4be6aaa..ea2a8fdf09 100644 --- a/v2/lib/theme/Navbar/index.js +++ b/v2/lib/theme/Navbar/index.js @@ -6,8 +6,8 @@ */ import React, {useContext} from 'react'; -import {NavLink} from 'react-router-dom'; +import Link from '@docusaurus/Link'; import Search from '@theme/Search'; import DocusaurusContext from '@docusaurus/context'; import styles from './styles.module.css'; @@ -54,12 +54,12 @@ function Navbar(props) { } return (
  • - {link.label} - +
    • ); } @@ -70,12 +70,12 @@ function Navbar(props) { }`; return (
  • - {link.label} - +
    • ); } @@ -83,9 +83,9 @@ function Navbar(props) { // set link to specified href return (
  • - + {link.label} - +
    • ); } @@ -94,12 +94,12 @@ function Navbar(props) { const blogUrl = `${baseUrl}blog`; return (
  • - Blog - +
    • ); } @@ -111,14 +111,14 @@ function Navbar(props) {
    diff --git a/v2/lib/theme/Pages/index.js b/v2/lib/theme/Pages/index.js index b5fb0281a5..b8253b6c39 100644 --- a/v2/lib/theme/Pages/index.js +++ b/v2/lib/theme/Pages/index.js @@ -6,7 +6,7 @@ */ import React, {useContext} from 'react'; -import Head from '@docusaurus/head'; +import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; // eslint-disable-line import DocusaurusContext from '@docusaurus/context'; diff --git a/v2/lib/theme/Sidebar/SidebarLink.js b/v2/lib/theme/Sidebar/SidebarLink.js index 75a05c4d85..4ae0935fdb 100644 --- a/v2/lib/theme/Sidebar/SidebarLink.js +++ b/v2/lib/theme/Sidebar/SidebarLink.js @@ -6,18 +6,12 @@ */ import React from 'react'; -import {NavLink} from 'react-router-dom'; +import Link from '@docusaurus/Link'; import classnames from 'classnames'; import styles from './styles.module.css'; export default function SidebarLink({href, label}) { - const isExternal = /^(https?:|\/\/)/.test(href); - const Link = isExternal - ? // eslint-disable-next-line jsx-a11y/anchor-has-content - ({to, activeClassName, ...linkProps}) => - : NavLink; - return (