Merge branch 'canary' into 9202-patternfly-example

examples/active-class-name/components/ActiveLink.js

@@ -6,13 +6,20 @@ import React, { Children } from 'react'
 const ActiveLink = ({ children, activeClassName, ...props }) => {
   const { pathname } = useRouter()
   const child = Children.only(children)
+  const childClassName = child.props.className || ''
 
   const className =
     pathname === props.href
-      ? `${child.props.className} ${activeClassName}`
-      : child.props.className
+      ? `${childClassName} ${activeClassName}`.trim()
+      : childClassName
 
-  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
+  return (
+    <Link {...props}>
+      {React.cloneElement(child, {
+        className: className || null
+      })}
+    </Link>
+  )
 }
 
 ActiveLink.propTypes = {

examples/with-apollo-and-redux/README.md

@@ -39,25 +39,6 @@ now
 
 ## The idea behind the example
 
-This example serves as a conduit if you were using Apollo 1.X with Redux, and are migrating to Apollo 2.x, however, you have chosen not to manage your entire application state within Apollo (`apollo-link-state`).
+This example serves as a conduit if you were using Apollo 1.X with Redux, and are migrating to Apollo 3.x, however, you have chosen not to manage your entire application state within Apollo (`apollo-link-state`).
 
-In 2.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.
-
-Note that you can access the redux store like you normally would using `react-redux`'s `connect`. Here's a quick example:
-
-```js
-const mapStateToProps = state => ({
-  location: state.form.location,
-})
-
-export default withRedux(
-  connect(
-    mapStateToProps,
-    null
-  )(Index)
-)
-```
-
-### Note:
-
-In these _with-apollo_ examples, the `withData()` HOC must wrap a top-level component from within the `pages` directory. Wrapping a child component with the HOC will result in a `Warning: Failed prop type: The prop 'serverState' is marked as required in 'WithData(Apollo(Component))', but its value is 'undefined'` error. Down-tree child components will have access to Apollo, and can be wrapped with any other sort of `graphql()`, `compose()`, etc HOC's.
+In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.

examples/with-apollo-and-redux/components/Clock.js

@@ -1,7 +1,26 @@
-export default ({ lastUpdate, light }) => {
+import React from 'react'
+import { useSelector, shallowEqual } from 'react-redux'
+
+const useClock = () => {
+  return useSelector(
+    state => ({
+      lastUpdate: state.lastUpdate,
+      light: state.light
+    }),
+    shallowEqual
+  )
+}
+
+const formatTime = time => {
+  // cut off except hh:mm:ss
+  return new Date(time).toJSON().slice(11, 19)
+}
+
+const Clock = () => {
+  const { lastUpdate, light } = useClock()
   return (
     <div className={light ? 'light' : ''}>
-      {format(new Date(lastUpdate))}
+      {formatTime(lastUpdate)}
       <style jsx>{`
         div {
           padding: 15px;
@@ -18,7 +37,4 @@ export default ({ lastUpdate, light }) => {
   )
 }
 
-const format = t =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-
-const pad = n => (n < 10 ? `0${n}` : n)
+export default Clock

examples/with-apollo-and-redux/components/Counter.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+const useCounter = () => {
+  const count = useSelector(state => state.count)
+  const dispatch = useDispatch()
+  const increment = () =>
+    dispatch({
+      type: 'INCREMENT'
+    })
+  const decrement = () =>
+    dispatch({
+      type: 'DECREMENT'
+    })
+  const reset = () =>
+    dispatch({
+      type: 'RESET'
+    })
+  return { count, increment, decrement, reset }
+}
+
+const Counter = () => {
+  const { count, increment, decrement, reset } = useCounter()
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={increment}>+1</button>
+      <button onClick={decrement}>-1</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  )
+}
+
+export default Counter

examples/with-apollo-and-redux/components/ErrorMessage.js

@@ -1,4 +1,7 @@
-export default ({ message }) => (
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ErrorMessage = ({ message }) => (
   <aside>
     {message}
     <style jsx>{`
@@ -11,3 +14,9 @@ export default ({ message }) => (
     `}</style>
   </aside>
 )
+
+ErrorMessage.propTypes = {
+  message: PropTypes.string.isRequired
+}
+
+export default ErrorMessage

examples/with-apollo-and-redux/components/App.js → examples/with-apollo-and-redux/components/Layout.js

@@ -1,5 +1,10 @@
-export default ({ children }) => (
+import React from 'react'
+import Nav from './Nav'
+import PropTypes from 'prop-types'
+
+const Layout = ({ children }) => (
   <main>
+    <Nav />
     {children}
     <style jsx global>{`
       * {
@@ -27,8 +32,9 @@ export default ({ children }) => (
         background-color: #22bad9;
         border: 0;
         color: white;
-        display: flex;
+        display: inline-flex;
         padding: 5px 7px;
+        margin-right: 1px;
       }
       button:active {
         background-color: #1b9db7;
@@ -37,6 +43,19 @@ export default ({ children }) => (
       button:focus {
         outline: none;
       }
+
+      hr {
+        height: 1px;
+        border: none;
+        background: #ececec;
+        margin: 20px 0;
+      }
     `}</style>
   </main>
 )
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default Layout

examples/with-apollo-and-redux/components/Header.js → examples/with-apollo-and-redux/components/Nav.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { withRouter } from 'next/router'
 
-const Header = ({ router: { pathname } }) => (
+const Nav = ({ router: { pathname } }) => (
   <header>
     <Link href='/'>
       <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
@@ -28,4 +28,4 @@ const Header = ({ router: { pathname } }) => (
   </header>
 )
 
-export default withRouter(Header)
+export default withRouter(Nav)