fix(examples): use hooks in with-cookie-auth example (#8729)

examples/with-cookie-auth/utils/auth.js

@@ -1,67 +1,14 @@
-import { Component } from 'react'
+import { useEffect } from 'react'
 import Router from 'next/router'
 import nextCookie from 'next-cookies'
 import cookie from 'js-cookie'
 
-function login ({ token }) {
+export const login = ({ token }) => {
   cookie.set('token', token, { expires: 1 })
   Router.push('/profile')
 }
 
-function logout () {
-  cookie.remove('token')
-  // to support logging out from all windows
-  window.localStorage.setItem('logout', Date.now())
-  Router.push('/login')
-}
-
-// Gets the display name of a JSX component for dev tools
-const getDisplayName = Component =>
-  Component.displayName || Component.name || 'Component'
-
-function withAuthSync (WrappedComponent) {
-  return class extends Component {
-    static displayName = `withAuthSync(${getDisplayName(WrappedComponent)})`
-
-    static async getInitialProps (ctx) {
-      const token = auth(ctx)
-
-      const componentProps =
-        WrappedComponent.getInitialProps &&
-        (await WrappedComponent.getInitialProps(ctx))
-
-      return { ...componentProps, token }
-    }
-
-    constructor (props) {
-      super(props)
-
-      this.syncLogout = this.syncLogout.bind(this)
-    }
-
-    componentDidMount () {
-      window.addEventListener('storage', this.syncLogout)
-    }
-
-    componentWillUnmount () {
-      window.removeEventListener('storage', this.syncLogout)
-      window.localStorage.removeItem('logout')
-    }
-
-    syncLogout (event) {
-      if (event.key === 'logout') {
-        console.log('logged out from storage!')
-        Router.push('/login')
-      }
-    }
-
-    render () {
-      return <WrappedComponent {...this.props} />
-    }
-  }
-}
-
-function auth (ctx) {
+export const auth = ctx => {
   const { token } = nextCookie(ctx)
 
   /*
@@ -81,4 +28,43 @@ function auth (ctx) {
   return token
 }
 
-export { login, logout, withAuthSync, auth }
+export const logout = () => {
+  cookie.remove('token')
+  // to support logging out from all windows
+  window.localStorage.setItem('logout', Date.now())
+  Router.push('/login')
+}
+
+export const withAuthSync = WrappedComponent => {
+  const Wrapper = props => {
+    const syncLogout = event => {
+      if (event.key === 'logout') {
+        console.log('logged out from storage!')
+        Router.push('/login')
+      }
+    }
+
+    useEffect(() => {
+      window.addEventListener('storage', syncLogout)
+
+      return () => {
+        window.removeEventListener('storage', syncLogout)
+        window.localStorage.removeItem('logout')
+      }
+    }, [null])
+
+    return <WrappedComponent {...props} />
+  }
+
+  Wrapper.getInitialProps = async ctx => {
+    const token = auth(ctx)
+
+    const componentProps =
+      WrappedComponent.getInitialProps &&
+      (await WrappedComponent.getInitialProps(ctx))
+
+    return { ...componentProps, token }
+  }
+
+  return Wrapper
+}