Import Fragment and Component from React package (#299)

Author: SaraVieira

advanced/src/components/CreatePage.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
 
-class CreatePage extends React.Component {
+class CreatePage extends Component {
   state = {
     title: '',
     text: '',

advanced/src/components/DetailPage.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import { graphql, compose } from 'react-apollo'
 import { withRouter } from 'react-router-dom'
 import gql from 'graphql-tag'
 
-class DetailPage extends React.Component {
+class DetailPage extends Component {
   render() {
     if (this.props.postQuery.loading) {
       return (
@@ -18,18 +18,18 @@ class DetailPage extends React.Component {
     let action = this._renderAction(post)
 
     return (
-      <React.Fragment>
+      <Fragment>
         <h1 className="f3 black-80 fw4 lh-solid">{post.title}</h1>
         <p className="black-80 fw3">{post.text}</p>
         {action}
-      </React.Fragment>
+      </Fragment>
     )
   }
 
   _renderAction = ({ id, isPublished }) => {
     if (!isPublished) {
       return (
-        <React.Fragment>
+        <Fragment>
           <a
             className="f6 dim br1 ba ph3 pv2 mb2 dib black pointer"
             onClick={() => this.publishDraft(id)}
@@ -42,7 +42,7 @@ class DetailPage extends React.Component {
           >
             Delete
           </a>
-        </React.Fragment>
+        </Fragment>
       )
     }
     return (

advanced/src/components/DraftsPage.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import Post from '../components/Post'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
 
-class DraftsPage extends React.Component {
+class DraftsPage extends Component {
   componentWillReceiveProps(nextProps) {
     if (this.props.location.key !== nextProps.location.key) {
       this.props.draftsQuery.refetch()
@@ -20,7 +20,7 @@ class DraftsPage extends React.Component {
     }
 
     return (
-      <React.Fragment>
+      <Fragment>
         <div className="flex justify-between items-center">
           <h1>Drafts</h1>
         </div>
@@ -34,7 +34,7 @@ class DraftsPage extends React.Component {
             />
           ))}
         {this.props.children}
-      </React.Fragment>
+      </Fragment>
     )
   }
 }

advanced/src/components/FeedPage.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import Post from '../components/Post'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
 
-class FeedPage extends React.Component {
+class FeedPage extends Component {
   componentWillReceiveProps(nextProps) {
     if (this.props.location.key !== nextProps.location.key) {
       this.props.feedQuery.refetch()
@@ -24,7 +24,7 @@ class FeedPage extends React.Component {
     }
 
     return (
-      <React.Fragment>
+      <Fragment>
         <h1>Feed</h1>
         {this.props.feedQuery.feed &&
           this.props.feedQuery.feed.map(post => (
@@ -36,7 +36,7 @@ class FeedPage extends React.Component {
             />
           ))}
         {this.props.children}
-      </React.Fragment>
+      </Fragment>
     )
   }
 }

advanced/src/components/LoginPage.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
 import { AUTH_TOKEN } from '../constant'
 
-class LoginPage extends React.Component {
+class LoginPage extends Component {
   state = {
     email: '',
     password: '',

advanced/src/components/LogoutPage.js

@@ -1,16 +1,12 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 
-class LogoutPage extends React.Component {
-  render() {
-    return (
-      <div className="pa4 flex justify-center bg-white">
-        <form>
-          <h1>You are currently logged out. To see the drafts, please login.</h1>
-        </form>
-      </div>
-    )
-  }
-}
+const LogoutPage = () => (
+  <div className="pa4 flex justify-center bg-white">
+    <form>
+      <h1>You are currently logged out. To see the drafts, please login.</h1>
+    </form>
+  </div>
+)
 
 export default withRouter(LogoutPage)

advanced/src/components/Post.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-export default class Post extends React.Component {
+export default class Post extends Component {
   render() {
     let title = this.props.post.title
     if (this.props.isDraft) {

advanced/src/components/RootContainer.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import {
   NavLink,
   Link,
@@ -28,7 +28,7 @@ const ProtectedRoute = ({ component: Component, token, ...rest }) => {
   )
 }
 
-class RootContainer extends React.Component {
+class RootContainer extends Component {
   constructor(props) {
     super(props)
     this.refreshTokenFn = this.refreshTokenFn.bind(this)
@@ -77,10 +77,10 @@ class RootContainer extends React.Component {
   render() {
     return (
       <Router>
-        <React.Fragment>
+        <Fragment>
           {this.renderNavBar()}
           {this.renderRoute()}
-        </React.Fragment>
+        </Fragment>
       </Router>
     )
   }

advanced/src/components/SignupPage.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { graphql } from 'react-apollo'
 import gql from 'graphql-tag'
 import { AUTH_TOKEN } from '../constant'
 
-class SignupPage extends React.Component {
+class SignupPage extends Component {
   state = {
     email: '',
     password: '',