diff options
Diffstat (limited to 'src/client/react')
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} |