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

@@ -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 {
+function App() {
-  constructor(props) {
+  const [context, setContext] = useState({});
-    super(props);
-    this.state = {
-      setContext: context => {
-        this.setState(context);
-      },
-    };
-  }
-
-  render() {
   return (
-      <DocusaurusContext.Provider value={{...data, ...this.state}}>
+    <DocusaurusContext.Provider value={{...data, ...context, setContext}}>
       {renderRoutes(routes)}
     </DocusaurusContext.Provider>
   );
 }
-}
 
 export default App;

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
+    <a {...props} href={targetLink} />
+  ) : (
+    <NavLink {...props} to={targetLink} />
+  );
+}
+
+export default Link;

v2/lib/theme/BlogPage/index.js

@@ -6,8 +6,8 @@
  */
 
 import React, {useContext} from 'react';
-import {Link} from 'react-router-dom';
+import Link from '@docusaurus/Link';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 import Layout from '@theme/Layout'; // eslint-disable-line
 import BlogPost from '@theme/BlogPost'; // eslint-disable-line
 

v2/lib/theme/BlogPost/index.js

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import {Link} from 'react-router-dom';
+import Link from '@docusaurus/Link';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 import classnames from 'classnames';
 import Layout from '@theme/Layout'; // eslint-disable-line
 

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

v2/lib/theme/DocBody/index.js

@@ -16,9 +16,7 @@ function DocBody(props) {
   const {children, metadata} = props;
   const context = useContext(DocusaurusContext);
   useEffect(() => {
-    context.setContext({
+    context.setContext({metadata});
-      metadata,
-    });
   }, []);
 
   return (

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';
 

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';
 

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';
 

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 (
         <li key={link.doc} className={styles.navListItem}>
-          <NavLink
+          <Link
             activeClassName={styles.navLinkActive}
             className={styles.navLink}
             to={docsMetadatas[id].permalink}>
             {link.label}
-          </NavLink>
+          </Link>
         </li>
       );
     }
@@ -70,12 +70,12 @@ function Navbar(props) {
       }`;
       return (
         <li key={link.page} className={styles.navListItem}>
-          <NavLink
+          <Link
             activeClassName={styles.navLinkActive}
             className={styles.navLink}
             to={pageHref}>
             {link.label}
-          </NavLink>
+          </Link>
         </li>
       );
     }
@@ -83,9 +83,9 @@ function Navbar(props) {
       // set link to specified href
       return (
         <li key={link.label} className={styles.navListItem}>
-          <a href={link.href} className={styles.navLink}>
+          <Link to={link.href} className={styles.navLink}>
             {link.label}
-          </a>
+          </Link>
         </li>
       );
     }
@@ -94,12 +94,12 @@ function Navbar(props) {
       const blogUrl = `${baseUrl}blog`;
       return (
         <li key="Blog" className={styles.navListItem}>
-          <NavLink
+          <Link
             activeClassName={styles.navLinkActive}
             className={styles.navLink}
             to={blogUrl}>
             Blog
-          </NavLink>
+          </Link>
         </li>
       );
     }
@@ -111,14 +111,14 @@ function Navbar(props) {
       <div className={styles.navbarInner}>
         <ul className={styles.navList}>
           <li key="logo" className={styles.navListItem}>
-            <NavLink className={styles.navBrand} to="/">
+            <Link className={styles.navBrand} to="/">
               <img
                 alt="Docusaurus Logo"
                 className={styles.navLogo}
                 src={baseUrl + headerIcon}
               />
               <strong>Docusaurus</strong>
-            </NavLink>
+            </Link>
           </li>
           {headerLinks.map(makeLinks)}
         </ul>

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';

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}) => <a {...linkProps} href={to} />
-    : NavLink;
-
   return (
     <li className={styles.sidebarListItem}>
       <Link

v2/test/__fixtures__/simple-site/pages/hello/world.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class World extends React.Component {
   render() {

v2/test/__fixtures__/simple-site/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class Home extends React.Component {
   render() {

v2/test/__fixtures__/translated-site/pages/hello/world.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class World extends React.Component {
   render() {

v2/test/__fixtures__/translated-site/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class Home extends React.Component {
   render() {

v2/test/__fixtures__/transversioned-site/pages/hello/world.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class World extends React.Component {
   render() {

v2/test/__fixtures__/transversioned-site/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class Home extends React.Component {
   render() {

v2/test/__fixtures__/versioned-site/pages/hello/world.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class World extends React.Component {
   render() {

v2/test/__fixtures__/versioned-site/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 export default class Home extends React.Component {
   render() {

v2/website/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 
 import classnames from 'classnames';
 

v2/website/pages/youtube.js

@@ -6,7 +6,7 @@
  */
 /* eslint-disable */
 import React from 'react';
-import Head from '@docusaurus/head';
+import Head from '@docusaurus/Head';
 import YouTube from 'react-youtube';
 
 export default class Player extends React.Component {