Refactor class components to functional @ examples (vercel#13398)

**Affected examples**

with-segment-analytics
with-slate
with-portals-ssr ( _with-portals-ssr is based on a package not being updated in the last year_)
with-videojs
with-next-page-transitions
with-firebase-cloud-messaging
with-dynamic-app-layout
with-dynamic-import
with-next-transition
with-carbon-components
with-cerebral
with-custom-babel-config

Here and there I have removed some redundant imports as well. I believe with this PR, there are only 1 or 2 examples left using class-based components. If by any chance you find any, let me know and I'll refactor them too.

If you don't like anything or you want me to change something, please let me know.

**If there is anything else you'd like me to help with, I would be honored to assist.**

Author: todortotev

examples/with-carbon-components/pages/index.js

@@ -1,12 +1,11 @@
-import { Component, Fragment } from 'react'
 import { Button } from 'carbon-components-react'
 
-export default class DemoApp extends Component {
-  render() {
-    return (
-      <Fragment>
-        <Button>Hello, world!</Button>
-      </Fragment>
-    )
-  }
+const Home = () => {
+  return (
+    <>
+      <Button>Hello, world!</Button>
+    </>
+  )
 }
+
+export default Home

examples/with-cerebral/pages/index.js

@@ -1,29 +1,26 @@
-import { Component } from 'react'
 import { Controller } from 'cerebral'
 import Devtools from 'cerebral/devtools'
 import { Container } from '@cerebral/react'
 import Page from '../components/Page'
 import clock from '../modules/clock'
 
-export default class Counter extends Component {
-  constructor(props) {
-    super(props)
-    // The controller will be instantiated for every page change and we only
-    // add the devtools if we indeed are running in the browser
-    this.controller = Controller({
-      devtools:
-        process.env.NODE_ENV === 'production' || typeof window === 'undefined'
-          ? null
-          : Devtools({ host: 'localhost:8787' }),
-      modules: { clock },
-      stateChanges: props.stateChanges,
-    })
-  }
-  render() {
-    return (
-      <Container controller={this.controller}>
-        <Page title="Index Page" linkTo="/other" />
-      </Container>
-    )
-  }
+const Home = (props) => {
+  const { stateChanges } = props
+
+  const controller = Controller({
+    devtools:
+      process.env.NODE_ENV === 'production' || typeof window === 'undefined'
+        ? null
+        : Devtools({ host: 'localhost:8787' }),
+    modules: { clock },
+    stateChanges: stateChanges,
+  })
+
+  return (
+    <Container controller={controller}>
+      <Page title="Index Page" linkTo="/other" />
+    </Container>
+  )
 }
+
+export default Home

examples/with-cerebral/pages/other.js

@@ -1,29 +1,26 @@
-import { Component } from 'react'
 import { Controller } from 'cerebral'
 import Devtools from 'cerebral/devtools'
 import { Container } from '@cerebral/react'
 import Page from '../components/Page'
 import clock from '../modules/clock'
 
-export default class Counter extends Component {
-  constructor(props) {
-    super(props)
-    // The controller will be instantiated for every page change and we only
-    // add the devtools if we indeed are running in the browser
-    this.controller = Controller({
-      devtools:
-        process.env.NODE_ENV === 'production' || typeof window === 'undefined'
-          ? null
-          : Devtools({ host: 'localhost:8787' }),
-      modules: { clock },
-      stateChanges: props.stateChanges,
-    })
-  }
-  render() {
-    return (
-      <Container controller={this.controller}>
-        <Page title="Other Page" linkTo="/" />
-      </Container>
-    )
-  }
+const Other = (props) => {
+  const { stateChanges } = props
+
+  const controller = Controller({
+    devtools:
+      process.env.NODE_ENV === 'production' || typeof window === 'undefined'
+        ? null
+        : Devtools({ host: 'localhost:8787' }),
+    modules: { clock },
+    stateChanges: stateChanges,
+  })
+
+  return (
+    <Container controller={controller}>
+      <Page title="Index Page" linkTo="/other" />
+    </Container>
+  )
 }
+
+export default Other

examples/with-custom-babel-config/pages/index.js

@@ -1,48 +1,37 @@
-import { Component } from 'react'
-export default class MyLuckNo extends Component {
-  constructor(...args) {
-    super(...args)
-    this.state = { randomNo: null }
-  }
+import { useState, useEffect } from 'react'
 
-  componentDidMount() {
-    this.recalculate()
-  }
+const MyLuckNo = () => {
+  const [randomNumber, setRandomNumber] = useState(null)
 
-  recalculate() {
-    this.setState({
-      randomNo: Math.ceil(Math.random() * 100),
-    })
+  const recalculate = () => {
+    setRandomNumber(Math.ceil(Math.random() * 100))
   }
 
-  render() {
-    const { randomNo } = this.state
-
-    if (randomNo === null) {
-      return <p>Please wait..</p>
-    }
+  useEffect(() => {
+    recalculate()
+  }, [])
 
-    // This is an experimental JavaScript feature where we can get with
-    // using babel-preset-stage-0
-    const message = do {
-      if (randomNo < 30) {
-        // eslint-disable-next-line no-unused-expressions
-        ;('Do not give up. Try again.')
-      } else if (randomNo < 60) {
-        // eslint-disable-next-line no-unused-expressions
-        ;('You are a lucky guy')
-      } else {
-        // eslint-disable-next-line no-unused-expressions
-        ;('You are soooo lucky!')
-      }
+  const message = do {
+    if (randomNumber < 30) {
+      // eslint-disable-next-line no-unused-expressions
+      ;('Do not give up. Try again.')
+    } else if (randomNumber < 60) {
+      // eslint-disable-next-line no-unused-expressions
+      ;('You are a lucky guy')
+    } else {
+      // eslint-disable-next-line no-unused-expressions
+      ;('You are soooo lucky!')
     }
-
-    return (
-      <div>
-        <h3>Your Lucky number is: "{randomNo}"</h3>
-        <p>{message}</p>
-        <button onClick={() => this.recalculate()}>Try Again</button>
-      </div>
-    )
   }
+
+  if (randomNumber === null) return <p>Please wait..</p>
+  return (
+    <div>
+      <h3>Your Lucky number is: "{randomNumber}"</h3>
+      <p>{message}</p>
+      <button onClick={() => recalculate()}>Try Again</button>
+    </div>
+  )
 }
+
+export default MyLuckNo

examples/with-dynamic-app-layout/pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import App from 'next/app'
 
 const Noop = ({ children }) => children

examples/with-firebase-cloud-messaging/pages/index.js

@@ -1,13 +1,12 @@
-import { Component } from 'react'
+import { useEffect } from 'react'
 import { firebaseCloudMessaging } from '../utils/webPush'
 
-class Index extends Component {
-  componentDidMount() {
+const Index = () => {
+  useEffect(() => {
     firebaseCloudMessaging.init()
-  }
-  render() {
-    return <div>Next.js with firebase cloud messaging.</div>
-  }
+  }, [])
+
+  return <div>Next.js with firebase cloud messaging.</div>
 }
 
 export default Index

examples/with-next-page-transitions/pages/about.js

@@ -1,43 +1,35 @@
-import React from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 
-class About extends React.Component {
-  static pageTransitionDelayEnter = true
+const About = (props) => {
+  const [loaded, setLoaded] = useState(false)
+  const { pageTransitionReadyToEnter } = props
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      loaded: false,
-    }
-  }
-
-  componentDidMount() {
-    this.timeoutId = setTimeout(() => {
-      this.props.pageTransitionReadyToEnter()
-      this.setState({ loaded: true })
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      pageTransitionReadyToEnter()
+      setLoaded(true)
     }, 2000)
-  }
-
-  componentWillUnmount() {
-    if (this.timeoutId) clearTimeout(this.timeoutId)
-  }
-
-  render() {
-    if (!this.state.loaded) return null
-    return (
-      <div className="container bg-success page">
-        <h1>About us</h1>
-        <p>
-          Notice how a loading spinner showed up while my content was "loading"?
-          Pretty neat, huh?
-        </p>
-        <Link href="/">
-          <a className="btn btn-light">Go back home</a>
-        </Link>
-      </div>
-    )
-  }
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [pageTransitionReadyToEnter])
+
+  if (!loaded) return null
+
+  return (
+    <div className="container bg-success page">
+      <h1>About us</h1>
+      <p>
+        Notice how a loading spinner showed up while my content was "loading"?
+        Pretty neat, huh?
+      </p>
+      <Link href="/">
+        <a className="btn btn-light">Go back home</a>
+      </Link>
+    </div>
+  )
 }
 
 About.propTypes = {

examples/with-portals-ssr/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@jesstelford/react-portal-universal": "1.0.0",
     "next": "latest",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
   }
 }