diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 9aa861b35..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["standard", "standard-react"] -} \ No newline at end of file diff --git a/app.js b/app.js deleted file mode 100644 index 6bec40980..000000000 --- a/app.js +++ /dev/null @@ -1,45 +0,0 @@ -require('babel-register') - -const express = require('express') -const React = require('react') -const ReactDOMServer = require('react-dom/server') -const ReactRouter = require('react-router') -const match = ReactRouter.match -const RouterContext = ReactRouter.RouterContext -const ReactRedux = require('react-redux') -const Provider = ReactRedux.Provider -const Store = require('./js/Store.jsx') -const store = Store.store -const _ = require('lodash') -const fs = require('fs') -const port = 5050 -const baseTemplate = fs.readFileSync('./index.html') -const template = _.template(baseTemplate) -const ClientApp = require('./js/ClientApp.jsx') -const routes = ClientApp.Routes - -const app = express() - -app.use('/public', express.static('./public')) - -app.use((req, res) => { - match({ routes: routes(), location: req.url }, (error, redirectLocation, renderProps) => { - if (error) { - res.status(500).send(error.message) - } else if (redirectLocation) { - res.redirect(302, redirectLocation.pathname + redirectLocation.search) - } else if (renderProps) { - const body = ReactDOMServer.renderToString( - React.createElement(Provider, {store}, - React.createElement(RouterContext, renderProps) - ) - ) - res.status(200).send(template({body})) - } else { - res.status(404).send('Not found') - } - }) -}) - -console.log('listening on ' + port) -app.listen(port) diff --git a/index.html b/index.html index 8057314b8..07338a496 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - svideo - - + + svideo + + -
<%= body %>
- +
+ diff --git a/js/BrowserEntry.jsx b/js/BrowserEntry.jsx deleted file mode 100644 index ad6d30aba..000000000 --- a/js/BrowserEntry.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const React = require('react') -const ReactDOM = require('react-dom') -const App = require('./ClientApp') - -ReactDOM.render(, document.getElementById('app')) diff --git a/js/ClientApp.jsx b/js/ClientApp.jsx index 89df8b5de..95b0a0707 100644 --- a/js/ClientApp.jsx +++ b/js/ClientApp.jsx @@ -1,35 +1,15 @@ -const React = require('react') -const Landing = require('./Landing') -const Search = require('./Search') -const Layout = require('./Layout') -const Details = require('./Details') -const ReactRouter = require('react-router') -const { Router, Route, IndexRoute, browserHistory } = ReactRouter -const Store = require('./Store') -const { store } = Store -const reactRedux = require('react-redux') -const { Provider } = reactRedux - -const myRoutes = (props) => ( - - - - - -) - -class App extends React.Component { - render () { - return ( - - - {myRoutes()} - - - ) - } +var React = require('react') +var ReactDOM = require('react-dom') +var MyTitle = require('./MyTitle') + +var MyFirstComponent = function () { + return ( +
+ + + +
+ ) } -App.Routes = myRoutes - -module.exports = App +ReactDOM.render(, document.getElementById('app')) diff --git a/js/Details.jsx b/js/Details.jsx deleted file mode 100644 index f86ddbe7e..000000000 --- a/js/Details.jsx +++ /dev/null @@ -1,54 +0,0 @@ -const React = require('react') -const Header = require('./Header') -const Store = require('./Store') -const { connector } = Store -const axios = require('axios') - -class Details extends React.Component { - constructor (props) { - super(props) - - this.state = { - omdbData: {} - } - } - componentDidMount () { - console.log('here', this.props.shows[this.props.params.id].imdbID) - axios.get(`http://www.omdbapi.com/?i=${this.props.shows[this.props.params.id].imdbID}`) - .then((response) => { - this.setState({omdbData: response.data}) - }) - .catch((error) => { - console.error('axios error', error) - }) - } - render () { - const { title, description, year, poster, trailer } = this.props.shows[this.props.params.id] - let rating - if (this.state.omdbData.imdbRating) { - rating =

{this.state.omdbData.imdbRating}

- } - return ( -
-
-
-

{title}

-

({year})

- {rating} - -

{description}

-
-
- -
-
- ) - } -} - -Details.propTypes = { - params: React.PropTypes.object, - shows: React.PropTypes.arrayOf(React.PropTypes.object) -} - -module.exports = connector(Details) diff --git a/js/Header.jsx b/js/Header.jsx deleted file mode 100644 index 0be466444..000000000 --- a/js/Header.jsx +++ /dev/null @@ -1,48 +0,0 @@ -const React = require('react') -const ReactRouter = require('react-router') -const Store = require('./Store') -const { connector } = Store -const { Link } = ReactRouter - -class Header extends React.Component { - constructor (props) { - super(props) - - this.handleSearchTermChange = this.handleSearchTermChange.bind(this) - } - handleSearchTermChange (e) { - this.props.setSearchTerm(e.target.value) - } - render () { - let utilSpace - if (this.props.showSearch) { - utilSpace = - } else { - utilSpace = ( -

- - Back - -

- ) - } - return ( -
-

- - svideo - -

- {utilSpace} -
- ) - } -} - -Header.propTypes = { - setSearchTerm: React.PropTypes.func, - showSearch: React.PropTypes.bool, - searchTerm: React.PropTypes.string -} - -module.exports = connector(Header) diff --git a/js/Landing.jsx b/js/Landing.jsx deleted file mode 100644 index c75634184..000000000 --- a/js/Landing.jsx +++ /dev/null @@ -1,39 +0,0 @@ -const React = require('react') -const ReactRouter = require('react-router') -const { Link, browserHistory } = ReactRouter -const Store = require('./Store') -const { connector } = Store - -class Landing extends React.Component { - constructor (props) { - super(props) - - this.handleTermEvent = this.handleTermEvent.bind(this) - this.goToSearch = this.goToSearch.bind(this) - } - handleTermEvent (e) { - this.props.setSearchTerm(e.target.value) - } - goToSearch (e) { - browserHistory.push('search') - e.preventDefault() - } - render () { - return ( -
-

svideo

-
- -
- or Browse All -
- ) - } -} - -Landing.propTypes = { - setSearchTerm: React.PropTypes.func, - searchTerm: React.PropTypes.string -} - -module.exports = connector(Landing) diff --git a/js/Layout.jsx b/js/Layout.jsx deleted file mode 100644 index 496332372..000000000 --- a/js/Layout.jsx +++ /dev/null @@ -1,13 +0,0 @@ -const React = require('react') - -const Layout = (props) => ( -
- {props.children} -
-) - -Layout.propTypes = { - children: React.PropTypes.element -} - -module.exports = Layout diff --git a/js/MyTitle.jsx b/js/MyTitle.jsx index 453b7a69e..d833147ce 100644 --- a/js/MyTitle.jsx +++ b/js/MyTitle.jsx @@ -1,11 +1,18 @@ const React = require('react') +const div = React.DOM.div +const h1 = React.DOM.h1 -const MyTitle = (props) => ( -
-

- {props.title} -

-
-) +const MyTitle = React.createClass({ + render () { + const style = {color: this.props.color} + return ( +
+

+ {this.props.title} +

+
+ ) + } +}) module.exports = MyTitle diff --git a/js/Search.jsx b/js/Search.jsx deleted file mode 100644 index dc639609b..000000000 --- a/js/Search.jsx +++ /dev/null @@ -1,30 +0,0 @@ -const React = require('react') -const ShowCard = require('./ShowCard') -const Header = require('./Header') -const Store = require('./Store') -const { connector } = Store - -class Search extends React.Component { - render () { - const searchTerm = this.props.searchTerm || '' - return ( -
-
-
- {this.props.shows - .filter((show) => `${show.title} ${show.description}`.toUpperCase().indexOf(searchTerm.toUpperCase()) >= 0) - .map((show, index) => ( - - ))} -
-
- ) - } -} - -Search.propTypes = { - shows: React.PropTypes.arrayOf(React.PropTypes.object), - searchTerm: React.PropTypes.string -} - -module.exports = connector(Search) diff --git a/js/ShowCard.jsx b/js/ShowCard.jsx deleted file mode 100644 index 78bc94ea6..000000000 --- a/js/ShowCard.jsx +++ /dev/null @@ -1,26 +0,0 @@ -const React = require('react') -const ReactRouter = require('react-router') -const { Link } = ReactRouter - -const ShowCard = (props) => ( - -
- -
-

{props.title}

-

({props.year})

-

{props.description}

-
-
- -) - -ShowCard.propTypes = { - year: React.PropTypes.string.isRequired, - poster: React.PropTypes.string.isRequired, - description: React.PropTypes.string.isRequired, - title: React.PropTypes.string.isRequired, - id: React.PropTypes.number.isRequired -} - -module.exports = ShowCard diff --git a/js/Store.jsx b/js/Store.jsx deleted file mode 100644 index 0d197e465..000000000 --- a/js/Store.jsx +++ /dev/null @@ -1,36 +0,0 @@ -const redux = require('redux') -const reactRedux = require('react-redux') -const data = require('../public/data') - -const SET_SEARCH_TERM = 'setSearchTerm' -const initialState = { - searchTerm: '', - shows: data.shows -} - -const reducer = (state = initialState, action) => { - switch (action.type) { - case SET_SEARCH_TERM: - const newState = {} - Object.assign(newState, state, {searchTerm: action.value}) - return newState - default: - return state - } -} - -const store = redux.createStore(reducer, initialState, redux.compose( - typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f -)) -const mapStateToProps = (state) => ({ searchTerm: state.searchTerm, shows: data.shows }) -const mapDispatchToProps = (dispatch) => { - return { - setSearchTerm: (term) => { - dispatch({type: SET_SEARCH_TERM, value: term}) - } - } -} - -const connector = reactRedux.connect(mapStateToProps, mapDispatchToProps) - -module.exports = { connector, store, reducer } diff --git a/package.json b/package.json index c8702db9e..e17b08c72 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,8 @@ "description": "A two day workshop on a complete intro to React", "main": "index.js", "scripts": { - "build": "webpack", - "watch": "webpack --watch", - "test": "mocha --require test/helpers/setup.js", - "lint": "eslint --ignore-path .gitignore --cache ./", - "cover": "nyc --reporter=lcov --reporter=text --reporter=html --require babel-register --extension .jsx npm test" + "test": "standard", + "build": "webpack" }, "author": "Brian Holt ", "license": "MIT", diff --git a/test/App.spec.js b/test/App.spec.js deleted file mode 100644 index 908201738..000000000 --- a/test/App.spec.js +++ /dev/null @@ -1,50 +0,0 @@ -/* eslint-env mocha */ -const React = require('react') -const chai = require('chai') -const { expect } = chai -const Search = require('../js/Search') -const enzyme = require('enzyme') -const { render } = enzyme -const data = require('../public/data') -const ReactRedux = require('react-redux') -const { Provider } = ReactRedux -const Header = require('../js/Header') -const Store = require('../js/Store') -const { store, reducer } = Store - -describe('
', () => { - it('should render the brand', () => { - const wrapper = render(
) - expect(wrapper.find('h1.brand').text()).to.equal('svideo') - }) -}) - -describe('', () => { - - const mockRoute = { - shows: data.shows - } - - it('should render as many shows as there are data for', () => { - const wrapper = render() - expect(wrapper.find('div.show-card').length).to.equal(data.shows.length) - }) - - it('should filter correctly given new state', () => { - store.dispatch({ type: 'setSearchTerm', value: 'house'}) - const wrapper = render() - expect(wrapper.find('div.show-card').length).to.equal(2) - }) -}) - -describe('Store', () => { - it('should bootstrap', () => { - const state = reducer(undefined, { type: '@@redux/INIT' }) - expect(state).to.deep.equal({ searchTerm: '', shows: data.shows }) - }) - - it('should handle setSearchTerm actions', () => { - const state = reducer({ searchTerm: 'some random string' }, { type: 'setSearchTerm', value: 'correct string'}) - expect(state).to.deep.equal({ searchTerm: 'correct string' }) - }) -}) diff --git a/test/helpers/setup.js b/test/helpers/setup.js deleted file mode 100644 index cc03f1b37..000000000 --- a/test/helpers/setup.js +++ /dev/null @@ -1,6 +0,0 @@ -require('babel-register') -require('babel-polyfill') - -global.document = require('jsdom').jsdom('
') -global.window = document.defaultView -global.navigator = window.navigator diff --git a/webpack.config.js b/webpack.config.js index 68f2fd8f5..e53121b81 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,7 +2,7 @@ const path = require('path') module.exports = { context: __dirname, - entry: './js/BrowserEntry.jsx', + entry: './js/ClientApp.jsx', output: { path: path.join(__dirname, '/public'), filename: 'bundle.js' @@ -16,21 +16,10 @@ module.exports = { chunks: false }, module: { - preLoaders: [ - { - test: /\.jsx?$/, - loader: 'eslint-loader' - } - ], loaders: [ { test: /\.jsx?$/, - loader: 'babel-loader', - include: path.join(__dirname, '/js') - }, - { - test: /\.json$/, - loader: 'json-loader' + loader: 'babel-loader' } ] }