aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components/container')
-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.tsx (renamed from src/client/react/components/container/Search.js)69
3 files changed, 73 insertions, 57 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
deleted file mode 100644
index 911ea27..0000000
--- a/src/client/react/components/container/Results.js
+++ /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/Results.tsx b/src/client/react/components/container/Results.tsx
new file mode 100644
index 0000000..21d3378
--- /dev/null
+++ b/src/client/react/components/container/Results.tsx
@@ -0,0 +1,26 @@
+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.js b/src/client/react/components/container/Search.tsx
index e49e6a7..fdd6c83 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.tsx
@@ -1,18 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import { Dispatch } from 'redux';
import { connect } from 'react-redux';
-import classnames from 'classnames';
+import * as classnames from 'classnames';
-import SearchIcon from 'react-icons/lib/md/search';
+import SearchIcon = require('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';
-class Search extends React.Component {
- constructor(props) {
+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) {
super(props);
this.state = {
@@ -36,15 +48,15 @@ class Search extends React.Component {
});
}
- onKeyDown(event) {
+ onKeyDown(event: React.KeyboardEvent<any>) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault();
switch (event.key) {
case 'ArrowUp':
- this.props.dispatch(changeSelectedResult(-1));
+ this.props.changeSelectedResult(-1);
break;
case 'ArrowDown':
- this.props.dispatch(changeSelectedResult(+1));
+ this.props.changeSelectedResult(+1);
break;
default:
throw new Error('This should never happen... pls?');
@@ -56,7 +68,7 @@ class Search extends React.Component {
const {
selectedResult,
isExactMatch,
- dispatch,
+ inputChange,
} = this.props;
const {
@@ -74,7 +86,7 @@ class Search extends React.Component {
</div>
<input
id="search__input"
- onChange={event => dispatch(inputChange(event.target.value))}
+ onChange={event => inputChange(event.target.value)}
onKeyDown={this.onKeyDown}
placeholder="Zoeken"
onFocus={this.onFocus}
@@ -87,20 +99,33 @@ class Search extends React.Component {
}
}
-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 => ({
- results: state.search.results,
+const mapStateToProps = (state: State):SearchStatehProps => ({
selectedResult: state.search.selectedResult,
isExactMatch: state.search.isExactMatch,
});
-export default connect(mapStateToProps)(Search);
+// 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);