Deprecate Container usage (vercel#8327)

* Remove Container from examples * Update readme to reflect Container removal
tacomanator · Aug 11, 2019 · a90a555 · a90a555
1 parent 6d25390
commit a90a555
Show file tree

Hide file tree

Showing 48 changed files with 186 additions and 283 deletions.
diff --git a/examples/form-handler/pages/_app.js b/examples/form-handler/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { Provider } from 'react-redux'
 import withRedux from 'next-redux-wrapper'
@@ -18,11 +18,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, store } = this.props
     return (
-      <Container>
-        <Provider store={store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }

diff --git a/examples/with-antd-mobile/pages/_app.js b/examples/with-antd-mobile/pages/_app.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import Head from 'next/head'
 
 export default class CustomApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
+      <>
         <Head>
           <meta
             name='viewport'
@@ -22,7 +22,7 @@ export default class CustomApp extends App {
           `}</style>
         </Head>
         <Component {...pageProps} />
-      </Container>
+      </>
     )
   }
 }
diff --git a/examples/with-apollo-and-redux-saga/pages/_app.js b/examples/with-apollo-and-redux-saga/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { Provider } from 'react-redux'
 import withRedux from 'next-redux-wrapper'
@@ -20,11 +20,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, store } = this.props
     return (
-      <Container>
-        <Provider store={store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }

diff --git a/examples/with-apollo-and-redux/pages/_app.js b/examples/with-apollo-and-redux/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { Provider } from 'react-redux'
 import withRedux from 'next-redux-wrapper'
@@ -18,11 +18,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, store } = this.props
     return (
-      <Container>
-        <Provider store={store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }

diff --git a/examples/with-apollo-auth/pages/_app.js b/examples/with-apollo-auth/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { ApolloProvider } from 'react-apollo'
 import withApollo from '../lib/withApollo'
@@ -7,11 +7,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, apolloClient } = this.props
     return (
-      <Container>
-        <ApolloProvider client={apolloClient}>
-          <Component {...pageProps} />
-        </ApolloProvider>
-      </Container>
+      <ApolloProvider client={apolloClient}>
+        <Component {...pageProps} />
+      </ApolloProvider>
     )
   }
 }

diff --git a/examples/with-apollo/pages/_app.js b/examples/with-apollo/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import withApolloClient from '../lib/with-apollo-client'
 import { ApolloProvider } from 'react-apollo'
@@ -7,11 +7,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, apolloClient } = this.props
     return (
-      <Container>
-        <ApolloProvider client={apolloClient}>
-          <Component {...pageProps} />
-        </ApolloProvider>
-      </Container>
+      <ApolloProvider client={apolloClient}>
+        <Component {...pageProps} />
+      </ApolloProvider>
     )
   }
 }

diff --git a/examples/with-app-layout/pages/_app.js b/examples/with-app-layout/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 
 class Layout extends React.Component {
   render () {
@@ -12,11 +12,9 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </Container>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     )
   }
 }
diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.js
@@ -1,17 +1,15 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 /* First we import our provider */
 import CounterProvider from '../components/CounterProvider'
 
 class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
-        {/* Then we wrap our components with the provider */}
-        <CounterProvider>
-          <Component {...pageProps} />
-        </CounterProvider>
-      </Container>
+      /* Then we wrap our components with the provider */
+      <CounterProvider>
+        <Component {...pageProps} />
+      </CounterProvider>
     )
   }
 }

diff --git a/examples/with-fela/pages/_app.js b/examples/with-fela/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import FelaProvider from '../FelaProvider'
 
@@ -16,11 +16,9 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps, renderer } = this.props
     return (
-      <Container>
-        <FelaProvider renderer={renderer}>
-          <Component {...pageProps} />
-        </FelaProvider>
-      </Container>
+      <FelaProvider renderer={renderer}>
+        <Component {...pageProps} />
+      </FelaProvider>
     )
   }
 }
diff --git a/examples/with-flow/pages/_app.js b/examples/with-flow/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import Link from 'next/link'
 import React from 'react'
 
@@ -16,7 +16,7 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
+      <>
         <header>
           <nav>
             <Link href='/'>
@@ -36,7 +36,7 @@ export default class MyApp extends App {
         <Component {...pageProps} />
 
         <footer>I`m here to stay</footer>
-      </Container>
+      </>
     )
   }
 }
diff --git a/examples/with-graphql-hooks/pages/_app.js b/examples/with-graphql-hooks/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import withGraphQLClient from '../lib/with-graphql-client'
 import { ClientContext } from 'graphql-hooks'
@@ -7,11 +7,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, graphQLClient } = this.props
     return (
-      <Container>
-        <ClientContext.Provider value={graphQLClient}>
-          <Component {...pageProps} />
-        </ClientContext.Provider>
-      </Container>
+      <ClientContext.Provider value={graphQLClient}>
+        <Component {...pageProps} />
+      </ClientContext.Provider>
     )
   }
 }

diff --git a/examples/with-graphql-react/pages/_app.js b/examples/with-graphql-react/pages/_app.js
@@ -1,17 +1,15 @@
 import 'cross-fetch/polyfill'
 import { GraphQLProvider } from 'graphql-react'
 import { withGraphQLApp } from 'next-graphql-react'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 
 class CustomApp extends App {
   render () {
     const { Component, pageProps, graphql } = this.props
     return (
-      <Container>
-        <GraphQLProvider graphql={graphql}>
-          <Component {...pageProps} />
-        </GraphQLProvider>
-      </Container>
+      <GraphQLProvider graphql={graphql}>
+        <Component {...pageProps} />
+      </GraphQLProvider>
     )
   }
 }

diff --git a/examples/with-grommet/pages/_app.js b/examples/with-grommet/pages/_app.js
@@ -1,16 +1,14 @@
 import React from 'react'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import { Grommet, grommet as grommetTheme } from 'grommet'
 
 export default class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
-        <Grommet theme={grommetTheme}>
-          <Component {...pageProps} />
-        </Grommet>
-      </Container>
+      <Grommet theme={grommetTheme}>
+        <Component {...pageProps} />
+      </Grommet>
     )
   }
 }
diff --git a/examples/with-immutable-redux-wrapper/pages/_app.js b/examples/with-immutable-redux-wrapper/pages/_app.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Provider } from 'react-redux'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import withRedux from 'next-redux-wrapper'
 import { makeStore } from '../store'
 import { fromJS } from 'immutable'
@@ -17,11 +17,9 @@ class MyApp extends App {
   render () {
     const { Component, pageProps, store } = this.props
     return (
-      <Container>
-        <Provider store={store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }

diff --git a/examples/with-kea/pages/_app.js b/examples/with-kea/pages/_app.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Provider } from 'react-redux'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import withRedux from 'next-redux-wrapper'
 import { initStore } from '../store'
 
@@ -16,11 +16,9 @@ export default class MyApp extends App {
   render() {
     const { Component, pageProps, store } = this.props
     return (
-      <Container>
-        <Provider store={store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }
diff --git a/examples/with-loading/pages/_app.js b/examples/with-loading/pages/_app.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import Link from 'next/link'
 import NProgress from 'nprogress'
 import Router from 'next/router'
@@ -29,7 +29,7 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      <Container>
+      <>
         <div style={{ marginBottom: 20 }}>
           <Link href='/'>
             <a style={linkStyle}>Home</a>
@@ -46,7 +46,7 @@ export default class MyApp extends App {
         </div>
 
         <Component {...pageProps} />
-      </Container>
+      </>
     )
   }
 }
diff --git a/examples/with-mobx-react-lite/pages/_app.js b/examples/with-mobx-react-lite/pages/_app.js
@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { InjectStoreContext, initializeData } from '../store'
 
@@ -21,11 +21,9 @@ class MyMobxApp extends App {
   render () {
     const { Component, pageProps, initialStoreData } = this.props
     return (
-      <Container>
-        <InjectStoreContext initialData={initialStoreData}>
-          <Component {...pageProps} />
-        </InjectStoreContext>
-      </Container>
+      <InjectStoreContext initialData={initialStoreData}>
+        <Component {...pageProps} />
+      </InjectStoreContext>
     )
   }
 }

diff --git a/examples/with-mobx-state-tree-typescript/pages/_app.tsx b/examples/with-mobx-state-tree-typescript/pages/_app.tsx
@@ -1,6 +1,6 @@
 import { Provider } from 'mobx-react'
 import { getSnapshot } from 'mobx-state-tree'
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import React from 'react'
 import { initializeStore, IStore } from '../stores/store'
 
@@ -42,11 +42,9 @@ class MyApp extends App {
   public render() {
     const { Component, pageProps } = this.props
     return (
-      <Container>
-        <Provider store={this.store}>
-          <Component {...pageProps} />
-        </Provider>
-      </Container>
+      <Provider store={this.store}>
+        <Component {...pageProps} />
+      </Provider>
     )
   }
 }