aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/Results.js35
-rw-r--r--src/client/react/components/container/Results.tsx26
-rw-r--r--src/client/react/components/container/Search.js (renamed from src/client/react/components/container/Search.tsx)69
-rw-r--r--src/client/react/components/presentational/IconFromUserType.js37
-rw-r--r--src/client/react/components/presentational/IconFromUserType.tsx31
-rw-r--r--src/client/react/components/presentational/Result.js (renamed from src/client/react/components/presentational/Result.tsx)12
6 files changed, 103 insertions, 107 deletions
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.tsx b/src/client/react/components/container/Results.tsx
deleted file mode 100644
index 21d3378..0000000
--- a/src/client/react/components/container/Results.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import * as classnames from 'classnames';
-import Result from '../presentational/Result';
-import { User } from '../../users';
-import { State } from '../../reducers';
-
-const Results: React.StatelessComponent<{ results: string[], isExactMatch: boolean, selectedResult: string }> = (props) => (
- <div
- className={classnames('search__results', {
- 'search__results--has-results': !props.isExactMatch && props.results.length > 0,
- })}
- >
- {!props.isExactMatch && props.results.map(userId => (
- <Result key={userId} userId={userId} isSelected={userId === props.selectedResult} />
- ))}
- </div>
-);
-
-const mapStateToProps = (state: 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.tsx b/src/client/react/components/container/Search.js
index fdd6c83..e49e6a7 100644
--- a/src/client/react/components/container/Search.tsx
+++ b/src/client/react/components/container/Search.js
@@ -1,30 +1,18 @@
-import * as React from 'react';
-import { Dispatch } from 'redux';
+import React from 'react';
+import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
-import SearchIcon = require('react-icons/lib/md/search');
+import SearchIcon from 'react-icons/lib/md/search';
import { inputChange, changeSelectedResult } from '../../actions/search';
-import { Action } from '../../reducers/search';
-import { State } from '../../reducers';
import users from '../../users';
import Results from './Results';
import IconFromUserType from '../presentational/IconFromUserType';
-interface SearchStatehProps {
- selectedResult: string,
- isExactMatch: boolean,
-}
-
-interface SearchDispatchProps {
- changeSelectedResult(relativeChange: 1 | -1): void,
- inputChange(typedValue: string): void,
-}
-
-class Search extends React.Component<SearchStatehProps & SearchDispatchProps, any> {
- constructor(props: SearchStatehProps & SearchDispatchProps) {
+class Search extends React.Component {
+ constructor(props) {
super(props);
this.state = {
@@ -48,15 +36,15 @@ class Search extends React.Component<SearchStatehProps & SearchDispatchProps, an
});
}
- onKeyDown(event: React.KeyboardEvent<any>) {
+ onKeyDown(event) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault();
switch (event.key) {
case 'ArrowUp':
- this.props.changeSelectedResult(-1);
+ this.props.dispatch(changeSelectedResult(-1));
break;
case 'ArrowDown':
- this.props.changeSelectedResult(+1);
+ this.props.dispatch(changeSelectedResult(+1));
break;
default:
throw new Error('This should never happen... pls?');
@@ -68,7 +56,7 @@ class Search extends React.Component<SearchStatehProps & SearchDispatchProps, an
const {
selectedResult,
isExactMatch,
- inputChange,
+ dispatch,
} = this.props;
const {
@@ -86,7 +74,7 @@ class Search extends React.Component<SearchStatehProps & SearchDispatchProps, an
</div>
<input
id="search__input"
- onChange={event => inputChange(event.target.value)}
+ onChange={event => dispatch(inputChange(event.target.value))}
onKeyDown={this.onKeyDown}
placeholder="Zoeken"
onFocus={this.onFocus}
@@ -99,33 +87,20 @@ class Search extends React.Component<SearchStatehProps & SearchDispatchProps, an
}
}
-// Search.propTypes = {
-// selectedResult: PropTypes.string,
-// isExactMatch: PropTypes.bool.isRequired,
-// dispatch: PropTypes.func.isRequired,
-// };
+Search.propTypes = {
+ selectedResult: PropTypes.string,
+ isExactMatch: PropTypes.bool.isRequired,
+ dispatch: PropTypes.func.isRequired,
+};
-// Search.defaultProps = {
-// selectedResult: null,
-// };
+Search.defaultProps = {
+ selectedResult: null,
+};
-const mapStateToProps = (state: State):SearchStatehProps => ({
+const mapStateToProps = state => ({
+ results: state.search.results,
selectedResult: state.search.selectedResult,
isExactMatch: state.search.isExactMatch,
});
-// const mapDispatchToProps = {
-// inputChange,
-// changeSelectedResult,
-// };
-
-const mapDispatchToProps = (dispatch: any): SearchDispatchProps => ({
- inputChange(typedValue) {
- dispatch(inputChange(typedValue));
- },
- changeSelectedResult(relativeChange) {
- dispatch(changeSelectedResult(relativeChange))
- }
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Search);
+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.tsx b/src/client/react/components/presentational/IconFromUserType.tsx
deleted file mode 100644
index d77ea1b..0000000
--- a/src/client/react/components/presentational/IconFromUserType.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import StudentIcon = require('react-icons/lib/md/person');
-import RoomIcon = require('react-icons/lib/md/room');
-import ClassIcon = require('react-icons/lib/md/group');
-import TeacherIcon = require('react-icons/lib/md/account-circle');
-
-// interface IconFromUserTypeProps {
-// userType: string,
-// defaultIcon?: JSX.Element,
-// }
-
-const IconFromUserType: React.StatelessComponent<{ userType: string, defaultIcon?: JSX.Element }> = (props) => {
- switch (props.userType) {
- case 'c':
- return <ClassIcon />;
- case 't':
- return <TeacherIcon />;
- case 's':
- return <StudentIcon />;
- case 'r':
- return <RoomIcon />;
- default:
- if (props.defaultIcon) {
- return props.defaultIcon;
- }
-
- throw new Error('`userType` was invalid or not given, but `defaultIcon` is not defined.');
- }
-};
-
-export default IconFromUserType;
diff --git a/src/client/react/components/presentational/Result.tsx b/src/client/react/components/presentational/Result.js
index b33a365..0b9e024 100644
--- a/src/client/react/components/presentational/Result.tsx
+++ b/src/client/react/components/presentational/Result.js
@@ -1,10 +1,11 @@
-import * as React from 'react';
-import * as classnames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
import users from '../../users';
import IconFromUserType from './IconFromUserType';
-const Result: React.StatelessComponent<{ userId: string, isSelected: boolean }> = ({ userId, isSelected }) => (
+const Result = ({ userId, isSelected }) => (
<div
className={classnames('search__result', {
'search__result--selected': isSelected,
@@ -15,4 +16,9 @@ const Result: React.StatelessComponent<{ userId: string, isSelected: boolean }>
</div>
);
+Result.propTypes = {
+ userId: PropTypes.string.isRequired,
+ isSelected: PropTypes.bool.isRequired,
+};
+
export default Result;