React 16

didierfranc · Sep 26, 2017 · 974e322 · 974e322
1 parent f2a3e4a
commit 974e322
Show file tree

Hide file tree

Showing 7 changed files with 963 additions and 668 deletions.
diff --git a/package.json b/package.json
@@ -49,22 +49,22 @@
     "eslint-plugin-react": "^7.1.0",
     "html-webpack-plugin": "^2.29.0",
     "husky": "^0.14.3",
-    "jest": "^20.0.4",
+    "jest": "^21.1.0",
     "lint-staged": "^4.0.1",
     "preload-webpack-plugin": "^1.2.2",
     "prettier": "^1.5.2",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.0.0",
     "serve": "^6.0.2",
     "webpack": "^3.1.0",
     "webpack-dev-server": "^2.5.1"
   },
   "dependencies": {
-    "emotion": "^6.0.3",
+    "emotion": "^7.3.2",
     "lodash": "^4.17.4",
     "offline-plugin": "^4.8.3",
-    "react": "^15.6.1",
+    "react": "^16.0.0",
     "react-code-splitting": "^1.1.1",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.0.0",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.1",
     "redux": "^3.7.1",

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Route, Redirect, withRouter } from 'react-router-dom'
+import { Route, Redirect, withRouter, Switch } from 'react-router-dom'
 import Async from 'react-code-splitting'
 
 import Login from './Auth/Login'
@@ -14,11 +14,12 @@ const Home = () => <Async load={import('./Home')} />
 const App = ({ user }) => (
   <Body>
     <Header />
-    {user.token
-      ? <Route path="/" component={Home} />
-      : <Redirect to="/login" />}
-    <Route path="/signup" component={Signup} />
-    <Route path="/login" component={Login} />
+    <Switch>
+      {user.token && <Route path="/" component={Home} />}
+      <Route path="/signup" component={Signup} />
+      <Route path="/login" component={Login} />
+      <Redirect to="/login" />
+    </Switch>
   </Body>
 )
 

diff --git a/src/components/Header/Github.js b/src/components/Header/Github.js
@@ -19,7 +19,9 @@ class Github extends React.Component {
       target="_blank"
       rel="noopener"
     >
-      <GithubButton><Star /> Star</GithubButton>
+      <GithubButton>
+        <Star /> Star
+      </GithubButton>
       <GithubCount>{this.state.count}</GithubCount>
     </GithubLink>
   )

diff --git a/src/components/Header/__test__/__snapshots__/Github.test.js.snap b/src/components/Header/__test__/__snapshots__/Github.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Properly render Github component 1`] = `
 <a
-  className="css-GithubLink-1lpdutp-qkdrtp css-GithubLink-1lpdutp"
+  className="css-GithubLink-kq2wbt5 css-11mxlk"
   href="http://github.com/didierfranc/redux-react-starter"
   rel="noopener"
   target="_blank"
 >
   <span
-    className="css-Github-10s59s4-1w9fjgc css-Github-10s59s4 css-GithubButton-g8y01v-1nq7cqd css-GithubButton-g8y01v"
+    className="css-Github-kq2wbt2 css-GithubButton-kq2wbt3 css-126ym8f"
   >
     <svg
       height="16"
@@ -27,7 +27,7 @@ exports[`Properly render Github component 1`] = `
      Star
   </span>
   <span
-    className="css-Github-10s59s4-1w9fjgc css-Github-10s59s4 css-GithubCount-lcp6b7-1tsdg4m css-GithubCount-lcp6b7"
+    className="css-Github-kq2wbt2 css-GithubCount-kq2wbt4 css-fz6qm9"
   >
     0
   </span>

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -6,9 +6,14 @@ import { Redirect } from 'react-router-dom'
 import { Message, Blue } from './Styled'
 
 const Home = ({ user }) =>
-  (user.token
-    ? <Message>{"You're logged in as "}<Blue>{user.email}</Blue></Message>
-    : <Redirect to="/login" />)
+  user.token ? (
+    <Message>
+      {"You're logged in as "}
+      <Blue>{user.email}</Blue>
+    </Message>
+  ) : (
+    <Redirect to="/login" />
+  )
 
 Home.propTypes = {
   user: PropTypes.shape({}).isRequired,

diff --git a/src/components/Styled.js b/src/components/Styled.js
@@ -33,7 +33,7 @@ export const GithubButton = styled(Github)`
 export const GithubCount = styled(Github)`
   margin-left: -1px;
   border-radius: 0 3px 3px 0;
-  width: 100px
+  width: 100px;
 `
 
 export const GithubLink = styled.a`