Update example/with-dynamic-import (#9667)

* Migrate to functional components

* Remove deprecated modules syntax

* Remove description

* Remove Counter

examples/with-dynamic-import/components/Counter.js

-import React from 'react'
-
-let count = 0
-
-export default class Counter extends React.Component {
-  add() {
-    count += 1
-    this.forceUpdate()
-  }
-
-  render() {
-    return (
-      <div>
-        <p>Count is: {count}</p>
-        <button onClick={() => this.add()}>Add</button>
-      </div>
-    )
-  }
-}

examples/with-dynamic-import/components/hello6.js

-export default () => <p>Hello World 6 (imported dynamiclly) </p>

examples/with-dynamic-import/components/hello7.js

-export default () => <p>Hello World 7 (imported dynamiclly) </p>

examples/with-dynamic-import/package.json

 {
   "name": "with-dynamic-import",
   "version": "1.0.0",
-  "description": "This example features:",
-  "main": "index.js",
   "scripts": {
     "dev": "next",
     "build": "next build",

examples/with-dynamic-import/pages/about.js

 import Header from '../components/Header'
-import Counter from '../components/Counter'
 
 const About = () => (
   <div>
     <Header />
     <p>This is the about page.</p>
-    <Counter />
   </div>
 )
 

examples/with-dynamic-import/pages/index.js

 import React from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import Header from '../components/Header'
-import Counter from '../components/Counter'
 import dynamic from 'next/dynamic'
 
 const DynamicComponent1 = dynamic(import('../components/hello1'))
@@ -25,66 +24,42 @@ const DynamicComponent5 = dynamic({
   loader: () => import('../components/hello5'),
 })
 
-const DynamicBundle = dynamic({
-  modules: () => {
-    const components = {
-      Hello6: import('../components/hello6'),
-      Hello7: import('../components/hello7'),
-    }
-    return components
-  },
-  render: (props, { Hello6, Hello7 }) => (
-    <div style={{ padding: 10, border: '1px solid #888' }}>
-      <Hello6 />
-      <Hello7 />
-    </div>
-  ),
-})
-
-export default class Index extends React.Component {
-  static getInitialProps({ query }) {
-    return { showMore: Boolean(query.showMore) }
-  }
-
-  toggleShowMore = () => {
-    const { showMore } = this.props
+const IndexPage = ({ showMore }) => {
+  const router = useRouter()
+  const handleToggle = () => {
     if (showMore) {
-      Router.push('/')
+      router.push('/')
       return
     }
 
-    Router.push('/?showMore=1')
+    router.push('/?showMore=1')
   }
 
-  render() {
-    const { showMore } = this.props
+  return (
+    <div>
+      <Header />
 
-    return (
-      <div>
-        <Header />
+      {/* Load immediately, but in a separate bundle */}
+      <DynamicComponent1 />
 
-        {/* Load immediately, but in a separate bundle */}
-        <DynamicComponent1 />
+      {/* Show a progress indicator while loading */}
+      <DynamicComponent2WithCustomLoading />
 
-        {/* Show a progress indicator while loading */}
-        <DynamicComponent2WithCustomLoading />
+      {/* Load only on the client side */}
+      <DynamicComponent3WithNoSSR />
 
-        {/* Load only on the client side */}
-        <DynamicComponent3WithNoSSR />
+      {/* This component will never be loaded */}
+      {React.noSuchField && <DynamicComponent4 />}
 
-        {/* This component will never be loaded */}
-        {React.noSuchField && <DynamicComponent4 />}
-
-        {/* Load on demand */}
-        {showMore && <DynamicComponent5 />}
-        <button onClick={this.toggleShowMore}>Toggle Show More</button>
-
-        {/* Load multiple components in one bundle */}
-        <DynamicBundle />
+      {/* Load on demand */}
+      {showMore && <DynamicComponent5 />}
+      <button onClick={handleToggle}>Toggle Show More</button>
+    </div>
+  )
+}
 
-        <p>HOME PAGE is here!</p>
-        <Counter />
-      </div>
-    )
-  }
+IndexPage.getInitialProps = ({ query }) => {
+  return { showMore: Boolean(query.showMore) }
 }
+
+export default IndexPage