Use process.browser; inline props

adamsoffer · Jan 22, 2017 · e6d777a · e6d777a
1 parent e2efe97
commit e6d777a
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 27 deletions.
diff --git a/examples/with-apollo/components/App.js b/examples/with-apollo/components/App.js
@@ -1,6 +1,6 @@
-export default (props) => (
+export default ({ children }) => (
   <main>
-    {props.children}
+    {children}
     <style jsx global>{`
       * {
         font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;

diff --git a/examples/with-apollo/components/Header.js b/examples/with-apollo/components/Header.js
@@ -1,13 +1,13 @@
 import Link from 'next/prefetch'
 
-export default (props) => (
+export default ({ pathname }) => (
   <header>
     <Link href='/'>
-      <a className={props.pathname === '/' && 'is-active'}>Home</a>
+      <a className={pathname === '/' && 'is-active'}>Home</a>
     </Link>
 
     <Link href='/about'>
-      <a className={props.pathname === '/about' && 'is-active'}>About</a>
+      <a className={pathname === '/about' && 'is-active'}>About</a>
     </Link>
 
     <style jsx>{`

diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js
@@ -4,17 +4,17 @@ import PostUpvoter from './PostUpvoter'
 
 const POSTS_PER_PAGE = 10
 
-function PostList (props) {
-  if (props.data.loading) {
+function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
+  if (loading) {
     return <div>Loading</div>
   }
 
-  const areMorePosts = props.data.allPosts.length < props.data._allPostsMeta.count
+  const areMorePosts = allPosts.length < _allPostsMeta.count
 
   return (
     <section>
       <ul>
-        {props.data.allPosts
+        {allPosts
         .sort((x, y) => new Date(y.createdAt) - new Date(x.createdAt))
         .map((post, index) =>
           <li key={post.id}>
@@ -26,7 +26,7 @@ function PostList (props) {
           </li>
         )}
       </ul>
-      {areMorePosts ? <button onClick={() => props.loadMorePosts()}><span />Show More</button> : ''}
+      {areMorePosts ? <button onClick={() => loadMorePosts()}><span />Show More</button> : ''}
       <style jsx>{`
         section {
           padding-bottom: 20px;

diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js
@@ -2,10 +2,10 @@ import React from 'react'
 import gql from 'graphql-tag'
 import { graphql } from 'react-apollo'
 
-function PostUpvoter (props) {
+function PostUpvoter ({ upvote, votes, id }) {
   return (
-    <button onClick={() => props.upvote(props.id, props.votes + 1)}>
-      {props.votes}
+    <button onClick={() => upvote(id, votes + 1)}>
+      {votes}
       <style jsx>{`
         button {
           background-color: transparent;

diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js
@@ -1,11 +1,13 @@
 import gql from 'graphql-tag'
 import { graphql } from 'react-apollo'
 
-function Submit (props) {
+function Submit ({ createPost }) {
   function handleSubmit (e) {
     e.preventDefault()
+
     let title = e.target.elements.title.value
     let url = e.target.elements.url.value
+
     if (title === '' || url === '') {
       window.alert('Both fields are required.')
       return false
@@ -15,7 +17,8 @@ function Submit (props) {
     if (!url.match(/^[a-zA-Z]+:\/\//)) {
       url = `http://${url}`
     }
-    props.createPost(title, url)
+
+    createPost(title, url)
 
     // reset form
     e.target.elements.title.value = ''

diff --git a/examples/with-apollo/lib/exenv.js b/examples/with-apollo/lib/exenv.js
diff --git a/examples/with-apollo/lib/initClient.js b/examples/with-apollo/lib/initClient.js
@@ -1,9 +1,8 @@
 import ApolloClient, { createNetworkInterface } from 'apollo-client'
-import { IS_SERVER } from './exenv'
 
 export const initClient = (headers) => {
   const client = new ApolloClient({
-    ssrMode: IS_SERVER,
+    ssrMode: !process.browser,
     headers,
     dataIdFromObject: result => result.id || null,
     networkInterface: createNetworkInterface({
@@ -13,7 +12,7 @@ export const initClient = (headers) => {
       }
     })
   })
-  if (IS_SERVER) {
+  if (!process.browser) {
     return client
   }
   if (!window.APOLLO_CLIENT) {

diff --git a/examples/with-apollo/lib/initStore.js b/examples/with-apollo/lib/initStore.js
@@ -1,14 +1,13 @@
 import { createStore } from 'redux'
-import { IS_SERVER } from './exenv'
 import getReducer from './reducer'
 import createMiddleware from './middleware'
 
 export const initStore = (client, initialState) => {
   let store
-  if (IS_SERVER || !window.REDUX_STORE) {
+  if (!process.browser || !window.REDUX_STORE) {
     const middleware = createMiddleware(client.middleware())
     store = createStore(getReducer(client), initialState, middleware)
-    if (IS_SERVER) {
+    if (!process.browser) {
       return store
     }
     window.REDUX_STORE = store

diff --git a/examples/with-apollo/lib/middleware.js b/examples/with-apollo/lib/middleware.js
@@ -1,9 +1,8 @@
 import { applyMiddleware, compose } from 'redux'
-import { IS_BROWSER } from './exenv'
 
 export default function createMiddleware (clientMiddleware) {
   const middleware = applyMiddleware(clientMiddleware)
-  if (IS_BROWSER && window.devToolsExtension) {
+  if (process.browser && window.devToolsExtension) {
     return compose(middleware, window.devToolsExtension())
   }
   return middleware

diff --git a/examples/with-apollo/lib/withData.js b/examples/with-apollo/lib/withData.js
@@ -1,7 +1,6 @@
 import { ApolloProvider, getDataFromTree } from 'react-apollo'
 import React from 'react'
 import 'isomorphic-fetch'
-import { IS_SERVER } from './exenv'
 import { initClient } from './initClient'
 import { initStore } from './initStore'
 
@@ -12,7 +11,7 @@ export default (Component) => (
       const client = initClient(headers)
       const store = initStore(client, client.initialState)
 
-      if (IS_SERVER) {
+      if (!process.browser) {
         const app = (
           <ApolloProvider client={client} store={store}>
             <Component url={{ query: ctx.query, pathname: ctx.pathname }} />