Merge pull request #121 from xsnippet/react-update

[React-update] Upgrade react to 16.8.6

Author: lotrien

package-lock.json

@@ -34,10 +34,10 @@
     "joi": "^13.2.0",
     "parse-link-header": "^1.0.1",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0",
+    "react": "^16.8.6",
     "react-ace": "^5.9.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.8.6",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-tag-input": "^5.0.2",

package.json

@@ -1,8 +1,14 @@
-import React from 'react'
+import React, { Fragment } from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
 
 import Header from './Header'
-import Main from './Main'
 import Sidebar from './Sidebar'
+import NewSnippet from './NewSnippet'
+import RecentSnippets from './RecentSnippets'
+import Snippet from './Snippet'
+import About from './About'
+import SignIn from './SignIn'
+
 import Spinner from './common/Spinner'
 import conf from '../conf'
 
@@ -38,13 +44,23 @@ class App extends React.Component {
       return <Spinner />
     }
 
-    return [
-      <Header key="header" />,
-      <div className="content" key="content">
-        <Sidebar />
-        <Main />
-      </div>,
-    ]
+    return (
+      <Router>
+        <Fragment>
+          <Header key="header" />
+          <div className="content" key="content">
+            <Sidebar />
+            <main className="main">
+              <Route exact path="/" component={NewSnippet} />
+              <Route exact path="/recent" component={RecentSnippets} />
+              <Route exact path="/:id(\d+)" component={Snippet} />
+              <Route exact path="/about" component={About} />
+              <Route exact path="/sign-in" component={SignIn} />
+            </main>
+          </div>
+        </Fragment>
+      </Router>
+    )
   }
 }
 

src/components/App.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 
 import App from './components/App'
@@ -11,9 +10,7 @@ const store = createStore()
 ReactDOM.render(
   (
     <Provider store={store}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
+      <App />
     </Provider>
   ), document.getElementById('root'),
 )

src/components/Main.jsx

@@ -8,3 +8,14 @@ html, body, body > div
 .content
   display: flex
   min-height: 100%
+
+.main
+  padding: 27px 20px;
+  width: "calc(100% - %s)" % offset
+  min-width: 480px
+  min-height: 100%
+  margin-top: offset
+  margin-left: offset
+  overflow-y: auto
+  background-color: site-bg
+  font-family: font-quicksand

src/index.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import { shallow, mount } from 'enzyme'
+import { shallow } from 'enzyme'
 import { Map } from 'immutable'
 
 import { Snippet } from '../../src/components/Snippet'
 import Spinner from '../../src/components/common/Spinner'
-import * as misc from '../../src/misc'
 
 describe('Snippet', () => {
   const match = { params: { id: 1 } }
@@ -98,20 +97,4 @@ describe('Snippet', () => {
 
     expect(spy).toHaveBeenCalled()
   })
-
-  it('should trigger copy handler on Copy button click', () => {
-    misc.copyToClipboard = jest.fn()
-
-    const wrapper = mount(<Snippet snippet={snippet} match={match} dispatch={jest.fn()} />)
-    const instance = wrapper.instance()
-    const spy = jest.spyOn(instance, 'copyClipboard')
-
-    instance.forceUpdate()
-
-    const copyButton = wrapper.find('.snippet-embed-content .snippet-button')
-
-    copyButton.simulate('click')
-
-    expect(spy).toHaveBeenCalled()
-  })
 })