From 569b2969d530f08e55798c5cb3079948c7c037cd Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
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 = () => (
+ <div>
+ <Search />
+ </div>
+);
+
+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 = () => (
- <div>
- <Search />
- </div>
-);
-
-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 }) => (
+ <div
+ className={classnames('search__results', {
+ 'search__results--has-results': !isExactMatch && results.length > 0,
+ })}
+ >
+ {!isExactMatch && results.map(userId => (
+ <Result key={userId} userId={userId} isSelected={userId === selectedResult} />
+ ))}
+ </div>
+));
+
+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 }) => (
- <div
- className={classnames('search__results', {
- 'search__results--has-results': !isExactMatch && results.length > 0,
- })}
- >
- {!isExactMatch && results.map(userId => (
- <Result key={userId} userId={userId} isSelected={userId === selectedResult} />
- ))}
- </div>
-));
-
-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 (
+ <div className={classnames('search', { 'search--has-focus': hasFocus })}>
+ <div className="search__input-wrapper">
+ <div className="search__icon-wrapper">
+ <IconFromUserType
+ userType={isExactMatch ? users.byId[selectedResult].type : null}
+ defaultIcon={<SearchIcon />}
+ />
+ </div>
+ <input
+ id="search__input"
+ onChange={event => dispatch(inputChange(event.target.value))}
+ onKeyDown={this.onKeyDown}
+ placeholder="Zoeken"
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}
+ />
+ </div>
+ <Results />
+ </div>
+ );
+ }
+}
+
+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 (
- <div className={classnames('search', { 'search--has-focus': hasFocus })}>
- <div className="search__input-wrapper">
- <div className="search__icon-wrapper">
- <IconFromUserType
- userType={isExactMatch ? users.byId[selectedResult].type : null}
- defaultIcon={<SearchIcon />}
- />
- </div>
- <input
- id="search__input"
- onChange={event => dispatch(inputChange(event.target.value))}
- onKeyDown={this.onKeyDown}
- placeholder="Zoeken"
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- />
- </div>
- <Results />
- </div>
- );
- }
-}
-
-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 <ClassIcon />;
+ case 't':
+ return <TeacherIcon />;
+ case 's':
+ return <StudentIcon />;
+ case 'r':
+ return <RoomIcon />;
+ 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 <ClassIcon />;
- case 't':
- return <TeacherIcon />;
- case 's':
- return <StudentIcon />;
- case 'r':
- return <RoomIcon />;
- 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 }) => (
+ <div
+ className={classnames('search__result', {
+ 'search__result--selected': isSelected,
+ })}
+ >
+ <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+ <div className="search__result__text">{users.byId[userId].value}</div>
+ </div>
+);
+
+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 }) => (
- <div
- className={classnames('search__result', {
- 'search__result--selected': isSelected,
- })}
- >
- <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
- <div className="search__result__text">{users.byId[userId].value}</div>
- </div>
-);
-
-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(
+ <Provider store={store}>
+ <Router>
+ <div>
+ <Route exact path="/" component={LandingPage} />
+ </div>
+ </Router>
+ </Provider>,
+ 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(
- <Provider store={store}>
- <Router>
- <div>
- <Route exact path="/" component={LandingPage} />
- </div>
- </Router>
- </Provider>,
- 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