feat(docz): hooks migrations

core/docz/package.json

@@ -32,6 +32,7 @@
     "docz-core": "^0.13.5",
     "fast-deep-equal": "^2.0.1",
     "lodash": "^4.17.11",
+    "match-sorter": "^2.3.0",
     "prop-types": "^15.7.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
@@ -40,6 +41,7 @@
     "react-router-dom": "^4.3.1",
     "react-router-hash-link": "^1.2.1",
     "ulid": "^2.3.0",
+    "use-react-router": "^1.0.3",
     "yargs": "^13.1.0"
   },
   "peerDependencies": {

core/docz/src/components/AsyncComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { ReactNode, ComponentType, Component } from 'react'
+import { SFC, ComponentType } from 'react'
+import { useState, useEffect } from 'react'
 
 import { isFn } from '../utils/helpers'
 
@@ -8,50 +9,30 @@ interface Props {
   getInitialData?: (props: any) => any
 }
 
-interface State {
-  loading: boolean
-  data: any
-  error: any
-}
-
-export class AsyncComponent extends Component<Props, State> {
-  public state = {
-    loading: true,
-    error: null,
-    data: {},
-  }
-
-  public componentDidMount(): void {
-    this.fetch()
-  }
-
-  public render(): ReactNode {
-    const { as: Comp, getInitialData, ...props } = this.props
-    const { data, loading, error } = this.state
+export const AsyncComponent: SFC<Props> = defaultProps => {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [data, setData] = useState({})
 
-    return <Comp {...props} data={{ ...data, loading, error }} />
-  }
-
-  private async fetch(): Promise<void> {
-    const { getInitialData } = this.props
+  useEffect(() => {
+    const { getInitialData } = defaultProps
 
     if (getInitialData && isFn(getInitialData)) {
-      this.setState({ loading: true })
-
-      try {
-        const data = await getInitialData(this.props)
-        this.setState({
-          data,
-          error: null,
-          loading: false,
+      setLoading(true)
+      getInitialData(defaultProps)
+        .then((data: any) => {
+          setLoading(false)
+          setError(null)
+          setData(data)
         })
-      } catch (error) {
-        this.setState({
-          error,
-          data: {},
-          loading: false,
+        .catch((err: any) => {
+          setLoading(false)
+          setError(err)
+          setData({})
         })
-      }
     }
-  }
+  }, [])
+
+  const { as: Comp, getInitialData, ...props } = defaultProps
+  return <Comp {...props} data={{ ...data, loading, error }} />
 }

core/docz/src/components/AsyncRoute.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SFC, Component } from 'react'
+import { useEffect, SFC } from 'react'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
 import importedComponent from 'react-imported-component'
 
@@ -41,40 +41,34 @@ interface AsyncRouteProps {
   entry: Entry
 }
 
-export class AsyncRoute extends Component<AsyncRouteProps> {
-  public componentDidMount(): void {
-    this.scrollToAnchor()
-  }
+export const AsyncRoute: SFC<AsyncRouteProps> = defaultProps => {
+  const {
+    components,
+    asyncComponent,
+    path,
+    entry,
+    ...routeProps
+  } = defaultProps
 
-  public render(): React.ReactNode {
-    const {
-      components,
-      asyncComponent,
-      path,
-      entry,
-      ...routeProps
-    } = this.props
+  const Page: any = components.page
+  const Component: any = asyncComponent
+  const props = { ...routeProps, doc: entry }
 
-    const Page: any = components.page
-    const Component: any = asyncComponent
-    const props = { ...routeProps, doc: entry }
-
-    return Page ? (
-      <Page {...props}>
-        <Component {...props} />
-      </Page>
-    ) : (
-      <Component {...props} />
-    )
-  }
-
-  private scrollToAnchor(): void {
+  useEffect(() => {
     setTimeout(() => {
       if (typeof window !== 'undefined' && location.hash) {
         const id: string = location.hash.substring(1)
         const el: HTMLElement | null = document.getElementById(id)
         if (el) el.scrollIntoView()
       }
     })
-  }
+  }, [])
+
+  return Page ? (
+    <Page {...props}>
+      <Component {...props} />
+    </Page>
+  ) : (
+    <Component {...props} />
+  )
 }