From 569b2969d530f08e55798c5cb3079948c7c037cd Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Thu, 14 Dec 2017 18:54:00 +0100 Subject: Use .js extention instead of .jsx --- .eslintrc.js | 3 + src/client/react/LandingPage.js | 10 ++ src/client/react/LandingPage.jsx | 10 -- src/client/react/components/container/Results.js | 35 +++++++ src/client/react/components/container/Results.jsx | 35 ------- src/client/react/components/container/Search.js | 106 +++++++++++++++++++++ src/client/react/components/container/Search.jsx | 106 --------------------- .../components/presentational/IconFromUserType.js | 37 +++++++ .../components/presentational/IconFromUserType.jsx | 37 ------- .../react/components/presentational/Result.js | 24 +++++ .../react/components/presentational/Result.jsx | 24 ----- src/client/react/index.js | 27 ++++++ src/client/react/index.jsx | 27 ------ webpack.config.js | 2 +- 14 files changed, 243 insertions(+), 240 deletions(-) create mode 100644 src/client/react/LandingPage.js delete mode 100644 src/client/react/LandingPage.jsx create mode 100644 src/client/react/components/container/Results.js delete mode 100644 src/client/react/components/container/Results.jsx create mode 100644 src/client/react/components/container/Search.js delete mode 100644 src/client/react/components/container/Search.jsx create mode 100644 src/client/react/components/presentational/IconFromUserType.js delete mode 100644 src/client/react/components/presentational/IconFromUserType.jsx create mode 100644 src/client/react/components/presentational/Result.js delete mode 100644 src/client/react/components/presentational/Result.jsx create mode 100644 src/client/react/index.js delete mode 100644 src/client/react/index.jsx diff --git a/.eslintrc.js b/.eslintrc.js index 20a47e0..b418fd4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,4 +5,7 @@ module.exports = { "node": true, "jest": true, }, + "rules": { + "react/jsx-filename-extension": [1, { "extensions": [".js"] }] + } }; diff --git a/src/client/react/LandingPage.js b/src/client/react/LandingPage.js new file mode 100644 index 0000000..d79826e --- /dev/null +++ b/src/client/react/LandingPage.js @@ -0,0 +1,10 @@ +import React from 'react'; +import Search from './components/container/Search'; + +const App = () => ( +
+ +
+); + +export default App; diff --git a/src/client/react/LandingPage.jsx b/src/client/react/LandingPage.jsx deleted file mode 100644 index d79826e..0000000 --- a/src/client/react/LandingPage.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import Search from './components/container/Search'; - -const App = () => ( -
- -
-); - -export default App; diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js new file mode 100644 index 0000000..911ea27 --- /dev/null +++ b/src/client/react/components/container/Results.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import classnames from 'classnames'; +import Result from '../presentational/Result'; + +const Results = (({ results, isExactMatch, selectedResult }) => ( +
0, + })} + > + {!isExactMatch && results.map(userId => ( + + ))} +
+)); + +Results.propTypes = { + results: PropTypes.arrayOf(PropTypes.string).isRequired, + isExactMatch: PropTypes.bool.isRequired, + selectedResult: PropTypes.string, +}; + +Results.defaultProps = { + selectedResult: null, +}; + +const mapStateToProps = state => ({ + results: state.search.results, + isExactMatch: state.search.isExactMatch, + selectedResult: state.search.selectedResult, +}); + +export default connect(mapStateToProps)(Results); diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx deleted file mode 100644 index 911ea27..0000000 --- a/src/client/react/components/container/Results.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import classnames from 'classnames'; -import Result from '../presentational/Result'; - -const Results = (({ results, isExactMatch, selectedResult }) => ( -
0, - })} - > - {!isExactMatch && results.map(userId => ( - - ))} -
-)); - -Results.propTypes = { - results: PropTypes.arrayOf(PropTypes.string).isRequired, - isExactMatch: PropTypes.bool.isRequired, - selectedResult: PropTypes.string, -}; - -Results.defaultProps = { - selectedResult: null, -}; - -const mapStateToProps = state => ({ - results: state.search.results, - isExactMatch: state.search.isExactMatch, - selectedResult: state.search.selectedResult, -}); - -export default connect(mapStateToProps)(Results); diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js new file mode 100644 index 0000000..e49e6a7 --- /dev/null +++ b/src/client/react/components/container/Search.js @@ -0,0 +1,106 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import classnames from 'classnames'; + +import SearchIcon from 'react-icons/lib/md/search'; + +import { inputChange, changeSelectedResult } from '../../actions/search'; + +import users from '../../users'; +import Results from './Results'; +import IconFromUserType from '../presentational/IconFromUserType'; + +class Search extends React.Component { + constructor(props) { + super(props); + + this.state = { + hasFocus: false, + }; + + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); + this.onKeyDown = this.onKeyDown.bind(this); + } + + onFocus() { + this.setState({ + hasFocus: true, + }); + } + + onBlur() { + this.setState({ + hasFocus: false, + }); + } + + onKeyDown(event) { + if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { + event.preventDefault(); + switch (event.key) { + case 'ArrowUp': + this.props.dispatch(changeSelectedResult(-1)); + break; + case 'ArrowDown': + this.props.dispatch(changeSelectedResult(+1)); + break; + default: + throw new Error('This should never happen... pls?'); + } + } + } + + render() { + const { + selectedResult, + isExactMatch, + dispatch, + } = this.props; + + const { + hasFocus, + } = this.state; + + return ( +
+
+
+ } + /> +
+ dispatch(inputChange(event.target.value))} + onKeyDown={this.onKeyDown} + placeholder="Zoeken" + onFocus={this.onFocus} + onBlur={this.onBlur} + /> +
+ +
+ ); + } +} + +Search.propTypes = { + selectedResult: PropTypes.string, + isExactMatch: PropTypes.bool.isRequired, + dispatch: PropTypes.func.isRequired, +}; + +Search.defaultProps = { + selectedResult: null, +}; + +const mapStateToProps = state => ({ + results: state.search.results, + selectedResult: state.search.selectedResult, + isExactMatch: state.search.isExactMatch, +}); + +export default connect(mapStateToProps)(Search); diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx deleted file mode 100644 index e49e6a7..0000000 --- a/src/client/react/components/container/Search.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import classnames from 'classnames'; - -import SearchIcon from 'react-icons/lib/md/search'; - -import { inputChange, changeSelectedResult } from '../../actions/search'; - -import users from '../../users'; -import Results from './Results'; -import IconFromUserType from '../presentational/IconFromUserType'; - -class Search extends React.Component { - constructor(props) { - super(props); - - this.state = { - hasFocus: false, - }; - - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - this.onKeyDown = this.onKeyDown.bind(this); - } - - onFocus() { - this.setState({ - hasFocus: true, - }); - } - - onBlur() { - this.setState({ - hasFocus: false, - }); - } - - onKeyDown(event) { - if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { - event.preventDefault(); - switch (event.key) { - case 'ArrowUp': - this.props.dispatch(changeSelectedResult(-1)); - break; - case 'ArrowDown': - this.props.dispatch(changeSelectedResult(+1)); - break; - default: - throw new Error('This should never happen... pls?'); - } - } - } - - render() { - const { - selectedResult, - isExactMatch, - dispatch, - } = this.props; - - const { - hasFocus, - } = this.state; - - return ( -
-
-
- } - /> -
- dispatch(inputChange(event.target.value))} - onKeyDown={this.onKeyDown} - placeholder="Zoeken" - onFocus={this.onFocus} - onBlur={this.onBlur} - /> -
- -
- ); - } -} - -Search.propTypes = { - selectedResult: PropTypes.string, - isExactMatch: PropTypes.bool.isRequired, - dispatch: PropTypes.func.isRequired, -}; - -Search.defaultProps = { - selectedResult: null, -}; - -const mapStateToProps = state => ({ - results: state.search.results, - selectedResult: state.search.selectedResult, - isExactMatch: state.search.isExactMatch, -}); - -export default connect(mapStateToProps)(Search); diff --git a/src/client/react/components/presentational/IconFromUserType.js b/src/client/react/components/presentational/IconFromUserType.js new file mode 100644 index 0000000..ee0e04b --- /dev/null +++ b/src/client/react/components/presentational/IconFromUserType.js @@ -0,0 +1,37 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import StudentIcon from 'react-icons/lib/md/person'; +import RoomIcon from 'react-icons/lib/md/room'; +import ClassIcon from 'react-icons/lib/md/group'; +import TeacherIcon from 'react-icons/lib/md/account-circle'; + +const IconFromUserType = ({ userType, defaultIcon }) => { + switch (userType) { + case 'c': + return ; + case 't': + return ; + case 's': + return ; + case 'r': + return ; + default: + if (defaultIcon) { + return defaultIcon; + } + + throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.'); + } +}; + +IconFromUserType.propTypes = { + userType: PropTypes.string, + defaultIcon: PropTypes.element, +}; + +IconFromUserType.defaultProps = { + userType: null, + defaultIcon: null, +}; + +export default IconFromUserType; diff --git a/src/client/react/components/presentational/IconFromUserType.jsx b/src/client/react/components/presentational/IconFromUserType.jsx deleted file mode 100644 index ee0e04b..0000000 --- a/src/client/react/components/presentational/IconFromUserType.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import StudentIcon from 'react-icons/lib/md/person'; -import RoomIcon from 'react-icons/lib/md/room'; -import ClassIcon from 'react-icons/lib/md/group'; -import TeacherIcon from 'react-icons/lib/md/account-circle'; - -const IconFromUserType = ({ userType, defaultIcon }) => { - switch (userType) { - case 'c': - return ; - case 't': - return ; - case 's': - return ; - case 'r': - return ; - default: - if (defaultIcon) { - return defaultIcon; - } - - throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.'); - } -}; - -IconFromUserType.propTypes = { - userType: PropTypes.string, - defaultIcon: PropTypes.element, -}; - -IconFromUserType.defaultProps = { - userType: null, - defaultIcon: null, -}; - -export default IconFromUserType; diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js new file mode 100644 index 0000000..0b9e024 --- /dev/null +++ b/src/client/react/components/presentational/Result.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import users from '../../users'; + +import IconFromUserType from './IconFromUserType'; + +const Result = ({ userId, isSelected }) => ( +
+
+
{users.byId[userId].value}
+
+); + +Result.propTypes = { + userId: PropTypes.string.isRequired, + isSelected: PropTypes.bool.isRequired, +}; + +export default Result; diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx deleted file mode 100644 index 0b9e024..0000000 --- a/src/client/react/components/presentational/Result.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import users from '../../users'; - -import IconFromUserType from './IconFromUserType'; - -const Result = ({ userId, isSelected }) => ( -
-
-
{users.byId[userId].value}
-
-); - -Result.propTypes = { - userId: PropTypes.string.isRequired, - isSelected: PropTypes.bool.isRequired, -}; - -export default Result; diff --git a/src/client/react/index.js b/src/client/react/index.js new file mode 100644 index 0000000..5279bf4 --- /dev/null +++ b/src/client/react/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Provider } from 'react-redux'; +import { BrowserRouter as Router, Route } from 'react-router-dom'; +import { createStore, applyMiddleware, compose } from 'redux'; +import logger from 'redux-logger'; +import thunk from 'redux-thunk'; +import reducer from './reducers'; +import LandingPage from './LandingPage'; + +// eslint-disable-next-line no-underscore-dangle +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const store = createStore( + reducer, + composeEnhancers(applyMiddleware(logger, thunk)), +); + +ReactDOM.render( + + +
+ +
+ + , + document.getElementById('root'), +); diff --git a/src/client/react/index.jsx b/src/client/react/index.jsx deleted file mode 100644 index 5279bf4..0000000 --- a/src/client/react/index.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; -import { BrowserRouter as Router, Route } from 'react-router-dom'; -import { createStore, applyMiddleware, compose } from 'redux'; -import logger from 'redux-logger'; -import thunk from 'redux-thunk'; -import reducer from './reducers'; -import LandingPage from './LandingPage'; - -// eslint-disable-next-line no-underscore-dangle -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -const store = createStore( - reducer, - composeEnhancers(applyMiddleware(logger, thunk)), -); - -ReactDOM.render( - - -
- -
- - , - document.getElementById('root'), -); diff --git a/webpack.config.js b/webpack.config.js index 6db6543..061f0d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,7 +2,7 @@ const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const js = { - entry: './src/client/react/index.jsx', + entry: './src/client/react/index.js', output: { path: path.resolve(__dirname, 'src/client/static'), filename: 'bundle.js', -- cgit v1.1