From 2874a3e0f1130853da989dd18a90f6726ff33256 Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Fri, 18 Oct 2019 07:50:10 +0200
Subject: [PATCH] Refactor with-modal example (#9097)

## Changelog

- Use functional components instead of class components
- Use default exports like in all other examples
- Rename `Portal` component to `ClientOnlyPortal`.
---
 .../components/ClientOnlyPortal.js            |  14 +++
 examples/with-portals/components/Modal.js     | 114 ++++++++----------
 examples/with-portals/components/Portal.js    |  17 ---
 examples/with-portals/pages/_document.js      |   2 +-
 examples/with-portals/pages/index.js          |   5 +-
 5 files changed, 68 insertions(+), 84 deletions(-)
 create mode 100644 examples/with-portals/components/ClientOnlyPortal.js
 delete mode 100644 examples/with-portals/components/Portal.js

diff --git a/examples/with-portals/components/ClientOnlyPortal.js b/examples/with-portals/components/ClientOnlyPortal.js
new file mode 100644
index 0000000000..a2379d87ff
--- /dev/null
+++ b/examples/with-portals/components/ClientOnlyPortal.js
@@ -0,0 +1,14 @@
+import { useRef, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+export default function ClientOnlyPortal ({ children, selector }) {
+  const ref = useRef()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    ref.current = document.querySelector(selector)
+    setMounted(true)
+  }, [])
+
+  return mounted ? createPortal(children, ref.current) : null
+}
diff --git a/examples/with-portals/components/Modal.js b/examples/with-portals/components/Modal.js
index b50e84731a..27817fc4ca 100644
--- a/examples/with-portals/components/Modal.js
+++ b/examples/with-portals/components/Modal.js
@@ -1,68 +1,56 @@
-import * as React from 'react'
+import React, { useState } from 'react'
+import ClientOnlyPortal from './ClientOnlyPortal'
 
-import { Portal } from './Portal'
+export default function Modal () {
+  const [open, setOpen] = useState()
 
-export class Modal extends React.Component {
-  constructor () {
-    super(...arguments)
-    this.state = { opened: false }
-  }
-
-  open = () => {
-    this.setState({ opened: true })
-  }
-
-  close = () => {
-    this.setState({ opened: false })
-  }
+  return (
+    <React.Fragment>
+      <button type='button' onClick={event => setOpen(true)}>
+        Open Modal
+      </button>
+      {open && (
+        <ClientOnlyPortal selector='#modal'>
+          <div className='backdrop'>
+            <div className='modal'>
+              <p>
+                This modal is rendered using{' '}
+                <a href='https://reactjs.org/docs/portals.html' target='_blank'>
+                  portals
+                </a>
+                .
+              </p>
+              <button type='button' onClick={event => setOpen(false)}>
+                Close Modal
+              </button>
+            </div>
+            <style jsx>{`
+              :global(body) {
+                overflow: hidden;
+              }
 
-  render () {
-    return (
-      <React.Fragment>
-        <button type='button' onClick={this.open}>
-          Open Modal
-        </button>
-        {this.state.opened && (
-          <Portal selector='#modal'>
-            <div className='overlay'>
-              <div className='modal'>
-                <p>
-                  This modal is rendered using{' '}
-                  <a href='https://reactjs.org/docs/portals.html'>portals</a>.
-                </p>
-                <button type='button' onClick={this.close}>
-                  Close Modal
-                </button>
-              </div>
-              <style jsx global>{`
-                body {
-                  overflow: hidden;
-                }
-              `}</style>
-              <style jsx>{`
-                .overlay {
-                  position: fixed;
-                  background-color: rgba(0, 0, 0, 0.7);
-                  top: 0;
-                  right: 0;
-                  bottom: 0;
-                  left: 0;
-                }
+              .backdrop {
+                position: fixed;
+                background-color: rgba(0, 0, 0, 0.7);
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+              }
 
-                .modal {
-                  background-color: white;
-                  position: absolute;
-                  top: 10%;
-                  right: 10%;
-                  bottom: 10%;
-                  left: 10%;
-                  padding: 1em;
-                }
-              `}</style>
-            </div>
-          </Portal>
-        )}
-      </React.Fragment>
-    )
-  }
+              .modal {
+                background-color: white;
+                position: absolute;
+                top: 10%;
+                right: 10%;
+                bottom: 10%;
+                left: 10%;
+                padding: 1em;
+              }
+            `}</style>
+          </div>
+        </ClientOnlyPortal>
+      )}
+    </React.Fragment>
+  )
 }
diff --git a/examples/with-portals/components/Portal.js b/examples/with-portals/components/Portal.js
deleted file mode 100644
index 4517a55d55..0000000000
--- a/examples/with-portals/components/Portal.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-export class Portal extends React.Component {
-  componentDidMount () {
-    this.element = document.querySelector(this.props.selector)
-    this.forceUpdate()
-  }
-
-  render () {
-    if (this.element === undefined) {
-      return null
-    }
-
-    return ReactDOM.createPortal(this.props.children, this.element)
-  }
-}
diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js
index 258292888e..d20cf0cdd5 100644
--- a/examples/with-portals/pages/_document.js
+++ b/examples/with-portals/pages/_document.js
@@ -7,7 +7,7 @@ export default class extends Document {
         <Head />
         <body>
           <Main />
-          {/* here we will mount our modal portal */}
+          {/* Here we will mount our modal portal */}
           <div id='modal' />
           <NextScript />
         </body>
diff --git a/examples/with-portals/pages/index.js b/examples/with-portals/pages/index.js
index 06053209f9..d2415a89b7 100644
--- a/examples/with-portals/pages/index.js
+++ b/examples/with-portals/pages/index.js
@@ -1,5 +1,4 @@
-import * as React from 'react'
-
-import { Modal } from '../components/Modal'
+import React from 'react'
+import Modal from '../components/Modal'
 
 export default () => <Modal />
-- 
GitLab