From 62fa943784167db5a22e386774e7408ff25924b4 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 19:36:50 +0100
Subject: Move IconFromUserType and Result to seperate file

---
 .../react/components/presentational/Search.jsx     | 48 ++++------------------
 1 file changed, 9 insertions(+), 39 deletions(-)

(limited to 'src/client/react/components/presentational/Search.jsx')

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}
-- 
cgit v1.1