aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/react/components/presentational/IconFromUserType.jsx37
-rw-r--r--src/client/react/components/presentational/Result.jsx18
-rw-r--r--src/client/react/components/presentational/Search.jsx48
3 files changed, 64 insertions, 39 deletions
diff --git a/src/client/react/components/presentational/IconFromUserType.jsx b/src/client/react/components/presentational/IconFromUserType.jsx
new file mode 100644
index 0000000..6bd2a21
--- /dev/null
+++ b/src/client/react/components/presentational/IconFromUserType.jsx
@@ -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.react,
+};
+
+IconFromUserType.defaultProps = {
+ userType: null,
+ defaultIcon: null,
+};
+
+export default IconFromUserType;
diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
new file mode 100644
index 0000000..4876493
--- /dev/null
+++ b/src/client/react/components/presentational/Result.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import IconFromUserType from './IconFromUserType';
+
+const Result = ({ user }) => (
+ <div className="search__result">
+ <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
+ <div className="search__result__text">{user.value}</div>
+ </div>
+);
+
+Result.propTypes = {
+ user: PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ }).isRequired,
+};
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index fc8ca98..096cdf3 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -2,50 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SearchIcon from 'react-icons/lib/md/search';
-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';
+
+import IconFromUserType from './IconFromUserType';
+import Result from './Result';
const userShape = {
value: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
};
-const IconFromUserType = ({ userType }) => {
- switch (userType) {
- case 'c':
- return <ClassIcon />;
- case 't':
- return <TeacherIcon />;
- case 's':
- return <StudentIcon />;
- case 'r':
- return <RoomIcon />;
- default:
- return <SearchIcon />;
- }
-};
-
-IconFromUserType.propTypes = {
- userType: PropTypes.string,
-};
-
-IconFromUserType.defaultProps = {
- userType: null,
-};
-
-const Result = ({ user }) => (
- <div className="search__result">
- <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
- <div className="search__result__text">{user.value}</div>
- </div>
-);
-
-Result.propTypes = {
- user: PropTypes.shape(userShape).isRequired,
-};
-
const Search = ({
onInputChange,
onFocus,
@@ -58,7 +23,12 @@ const Search = ({
<div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
<div className="search__input-wrapper">
{/* Show the icon from the exact match if there is an exact match, otherwise show the search icon. */}
- <div className="search__icon-wrapper"><IconFromUserType userType={exactMatch ? exactMatch.type : null} /></div>
+ <div className="search__icon-wrapper">
+ <IconFromUserType
+ userType={exactMatch ? exactMatch.type : null}
+ default={<SearchIcon />}
+ />
+ </div>
<input
id="search__input"
onChange={onInputChange}