From 0141d1f9f4c7ca1755e0a5da908e9d27cf7aa0e1 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 00:41:32 +0100
Subject: Add presentation search component

---
 .../react/components/presentational/Search.js      | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/client/react/components/presentational/Search.js

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
new file mode 100644
index 0000000..0dde8a6
--- /dev/null
+++ b/src/client/react/components/presentational/Search.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Search = ({ onInput, results }) => (
+  <div>
+    <input
+      onInput={onInput}
+      placeholder="Zoeken"
+    />
+    <ul>
+      {results.map(result => <li key={result.name}>{result.name}</li>)}
+    </ul>
+  </div>
+);
+
+Search.propTypes = {
+  onInput: PropTypes.func.isRequired,
+  results: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.require,
+    type: PropTypes.string.require,
+  })).isRequired,
+};
+
+export default Search;
-- 
cgit v1.1


From 4ce420528dd747021f7fa51483710388f5733724 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 01:01:36 +0100
Subject: Add Search container

---
 src/client/react/components/presentational/Search.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
index 0dde8a6..ce4a09d 100644
--- a/src/client/react/components/presentational/Search.js
+++ b/src/client/react/components/presentational/Search.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Search = ({ onInput, results }) => (
+const Search = ({ onType, results }) => (
   <div>
     <input
-      onInput={onInput}
+      onChange={onType}
       placeholder="Zoeken"
     />
     <ul>
@@ -14,7 +14,7 @@ const Search = ({ onInput, results }) => (
 );
 
 Search.propTypes = {
-  onInput: PropTypes.func.isRequired,
+  onType: PropTypes.func.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.require,
     type: PropTypes.string.require,
-- 
cgit v1.1


From b7fab958633456346d67c9cdd68eef05572882ab Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 01:07:11 +0100
Subject: Add redux devtools support

---
 src/client/react/components/presentational/Search.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
index ce4a09d..f75e612 100644
--- a/src/client/react/components/presentational/Search.js
+++ b/src/client/react/components/presentational/Search.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Search = ({ onType, results }) => (
+const Search = ({ onType, value, results }) => (
   <div>
     <input
       onChange={onType}
+      value={value}
       placeholder="Zoeken"
     />
     <ul>
@@ -15,6 +16,7 @@ const Search = ({ onType, results }) => (
 
 Search.propTypes = {
   onType: PropTypes.func.isRequired,
+  value: PropTypes.func.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.require,
     type: PropTypes.string.require,
-- 
cgit v1.1


From 7bd3b6766536e33146bb55506c79619a1ab7d3b3 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 11:10:05 +0100
Subject: Move reducers and actions into seperate folders

---
 .../react/components/presentational/Search.js      | 26 ----------------------
 .../react/components/presentational/Search.jsx     | 26 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 26 deletions(-)
 delete mode 100644 src/client/react/components/presentational/Search.js
 create mode 100644 src/client/react/components/presentational/Search.jsx

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
deleted file mode 100644
index f75e612..0000000
--- a/src/client/react/components/presentational/Search.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Search = ({ onType, value, results }) => (
-  <div>
-    <input
-      onChange={onType}
-      value={value}
-      placeholder="Zoeken"
-    />
-    <ul>
-      {results.map(result => <li key={result.name}>{result.name}</li>)}
-    </ul>
-  </div>
-);
-
-Search.propTypes = {
-  onType: PropTypes.func.isRequired,
-  value: PropTypes.func.isRequired,
-  results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.require,
-    type: PropTypes.string.require,
-  })).isRequired,
-};
-
-export default Search;
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
new file mode 100644
index 0000000..1e00192
--- /dev/null
+++ b/src/client/react/components/presentational/Search.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Search = ({ onType, value, results }) => (
+  <div>
+    <input
+      onChange={onType}
+      value={value}
+      placeholder="Zoeken"
+    />
+    <ul>
+      {results.map(result => <li key={result.name}>{result.name}</li>)}
+    </ul>
+  </div>
+);
+
+Search.propTypes = {
+  onType: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+  results: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.require,
+    type: PropTypes.string.require,
+  })).isRequired,
+};
+
+export default Search;
-- 
cgit v1.1


From 1286c6556115f80218a4828d29b288f56b3d795f Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 11:13:08 +0100
Subject: Rename onType to onInputChange

---
 src/client/react/components/presentational/Search.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 1e00192..a713db4 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Search = ({ onType, value, results }) => (
+const Search = ({ onInputChange, value, results }) => (
   <div>
     <input
-      onChange={onType}
+      onChange={onInputChange}
       value={value}
       placeholder="Zoeken"
     />
@@ -15,7 +15,7 @@ const Search = ({ onType, value, results }) => (
 );
 
 Search.propTypes = {
-  onType: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.require,
-- 
cgit v1.1


From 9f6a36d1f1a16c1a777a23fcc8c986c45ee0a116 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 13:25:46 +0100
Subject: Add some basic styling

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

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index a713db4..01c6f7d 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SearchIcon from 'react-icons/lib/md/search';
 
-const Search = ({ onInputChange, value, results }) => (
-  <div>
-    <input
-      onChange={onInputChange}
-      value={value}
-      placeholder="Zoeken"
-    />
+const Search = ({
+  onInputChange,
+  onFocus,
+  onBlur,
+  hasFocus,
+  value,
+  results,
+}) => (
+  <div className={classnames('search', { focus: hasFocus })}>
+    <div className="search__input-wrapper">
+      <div className="search__icon-wrapper"><SearchIcon /></div>
+      <input
+        onChange={onInputChange}
+        value={value}
+        placeholder="Zoeken"
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    </div>
     <ul>
       {results.map(result => <li key={result.name}>{result.name}</li>)}
     </ul>
@@ -16,10 +30,13 @@ const Search = ({ onInputChange, value, results }) => (
 
 Search.propTypes = {
   onInputChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.require,
-    type: PropTypes.string.require,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
   })).isRequired,
 };
 
-- 
cgit v1.1


From 7e63aa14ea4298a1511f75e875ca001d2bd61ee8 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 13:53:07 +0100
Subject: Add results

---
 .../react/components/presentational/Search.jsx     | 30 ++++++++++++++++------
 1 file changed, 22 insertions(+), 8 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 01c6f7d..40cd3e8 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -2,6 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SearchIcon from 'react-icons/lib/md/search';
+import PersonIcon from 'react-icons/lib/md/person';
+
+const userShape = {
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+const Result = ({ user }) => (
+  <div className="search__result">
+    <div className="search__icon-wrapper"><PersonIcon /></div>
+    <div className="search__result__text">{user.value}</div>
+  </div>
+);
+
+Result.propTypes = {
+  user: PropTypes.shape(userShape).isRequired,
+};
 
 const Search = ({
   onInputChange,
@@ -11,7 +28,7 @@ const Search = ({
   value,
   results,
 }) => (
-  <div className={classnames('search', { focus: hasFocus })}>
+  <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
     <div className="search__input-wrapper">
       <div className="search__icon-wrapper"><SearchIcon /></div>
       <input
@@ -22,9 +39,9 @@ const Search = ({
         onBlur={onBlur}
       />
     </div>
-    <ul>
-      {results.map(result => <li key={result.name}>{result.name}</li>)}
-    </ul>
+    {results.map(user => (
+      <Result key={user.value} user={user} />
+    ))}
   </div>
 );
 
@@ -34,10 +51,7 @@ Search.propTypes = {
   onBlur: PropTypes.func.isRequired,
   hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
-  results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  })).isRequired,
+  results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
 };
 
 export default Search;
-- 
cgit v1.1


From 29338e66b28daee52f7fe5a5cdab49140b3e5a60 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 14:06:11 +0100
Subject: Show correct icon based on user type

---
 .../react/components/presentational/Search.jsx     | 38 ++++++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 40cd3e8..bdddf06 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -2,19 +2,43 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SearchIcon from 'react-icons/lib/md/search';
-import PersonIcon from 'react-icons/lib/md/person';
+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 userShape = {
   value: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
 };
 
-const Result = ({ user }) => (
-  <div className="search__result">
-    <div className="search__icon-wrapper"><PersonIcon /></div>
-    <div className="search__result__text">{user.value}</div>
-  </div>
-);
+const Result = ({ user }) => {
+  let icon;
+
+  switch (user.type) {
+    case 'c':
+      icon = <ClassIcon />;
+      break;
+    case 't':
+      icon = <TeacherIcon />;
+      break;
+    case 's':
+      icon = <StudentIcon />;
+      break;
+    case 'r':
+      icon = <RoomIcon />;
+      break;
+    default:
+      throw new Error(`Invalid user type: ${user.type}`);
+  }
+
+  return (
+    <div className="search__result">
+      <div className="search__icon-wrapper">{icon}</div>
+      <div className="search__result__text">{user.value}</div>
+    </div>
+  );
+};
 
 Result.propTypes = {
   user: PropTypes.shape(userShape).isRequired,
-- 
cgit v1.1


From 797fb96cd0001d6c739c89507befc73d3d8a6614 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 10 Dec 2017 15:58:25 +0100
Subject: Show user icon instead of search icon on exact match

---
 .../react/components/presentational/Search.jsx     | 51 +++++++++++++---------
 1 file changed, 31 insertions(+), 20 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index bdddf06..78beb56 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -12,34 +12,37 @@ const userShape = {
   type: PropTypes.string.isRequired,
 };
 
-const Result = ({ user }) => {
-  let icon;
-
-  switch (user.type) {
+const IconFromUserType = ({ userType }) => {
+  switch (userType) {
     case 'c':
-      icon = <ClassIcon />;
-      break;
+      return <ClassIcon />;
     case 't':
-      icon = <TeacherIcon />;
-      break;
+      return <TeacherIcon />;
     case 's':
-      icon = <StudentIcon />;
-      break;
+      return <StudentIcon />;
     case 'r':
-      icon = <RoomIcon />;
-      break;
+      return <RoomIcon />;
     default:
-      throw new Error(`Invalid user type: ${user.type}`);
+      return <SearchIcon />;
   }
+};
 
-  return (
-    <div className="search__result">
-      <div className="search__icon-wrapper">{icon}</div>
-      <div className="search__result__text">{user.value}</div>
-    </div>
-  );
+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,
 };
@@ -51,10 +54,12 @@ const Search = ({
   hasFocus,
   value,
   results,
+  exactMatch,
 }) => (
   <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
     <div className="search__input-wrapper">
-      <div className="search__icon-wrapper"><SearchIcon /></div>
+      {/* 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>
       <input
         onChange={onInputChange}
         value={value}
@@ -76,6 +81,12 @@ Search.propTypes = {
   hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
+  exactMatch: PropTypes.shape(userShape),
 };
 
+Search.defaultProps = {
+  exactMatch: null,
+};
+
+
 export default Search;
-- 
cgit v1.1


From 6ef491badd4ac0190ab17cc41ebd27abbf87c896 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 19:26:56 +0100
Subject: Select search input on focus

---
 src/client/react/components/presentational/Search.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index 78beb56..fc8ca98 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -35,7 +35,6 @@ IconFromUserType.defaultProps = {
   userType: null,
 };
 
-
 const Result = ({ user }) => (
   <div className="search__result">
     <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
@@ -61,6 +60,7 @@ const Search = ({
       {/* 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>
       <input
+        id="search__input"
         onChange={onInputChange}
         value={value}
         placeholder="Zoeken"
@@ -88,5 +88,4 @@ Search.defaultProps = {
   exactMatch: null,
 };
 
-
 export default Search;
-- 
cgit v1.1


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

---
 .../components/presentational/IconFromUserType.jsx | 37 +++++++++++++++++
 .../react/components/presentational/Result.jsx     | 18 ++++++++
 .../react/components/presentational/Search.jsx     | 48 ++++------------------
 3 files changed, 64 insertions(+), 39 deletions(-)
 create mode 100644 src/client/react/components/presentational/IconFromUserType.jsx
 create mode 100644 src/client/react/components/presentational/Result.jsx

(limited to 'src/client/react/components/presentational')

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


From 00d4e5241e220f8f1df4f3d5b796bc70d5fcd3fe Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 19:43:23 +0100
Subject: Move PresentationalSearch back to the container

---
 .../react/components/presentational/Search.jsx     | 61 ----------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 src/client/react/components/presentational/Search.jsx

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
deleted file mode 100644
index 096cdf3..0000000
--- a/src/client/react/components/presentational/Search.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import SearchIcon from 'react-icons/lib/md/search';
-
-import IconFromUserType from './IconFromUserType';
-import Result from './Result';
-
-const userShape = {
-  value: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
-const Search = ({
-  onInputChange,
-  onFocus,
-  onBlur,
-  hasFocus,
-  value,
-  results,
-  exactMatch,
-}) => (
-  <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}
-          default={<SearchIcon />}
-        />
-      </div>
-      <input
-        id="search__input"
-        onChange={onInputChange}
-        value={value}
-        placeholder="Zoeken"
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
-    </div>
-    {results.map(user => (
-      <Result key={user.value} user={user} />
-    ))}
-  </div>
-);
-
-Search.propTypes = {
-  onInputChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  hasFocus: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
-  exactMatch: PropTypes.shape(userShape),
-};
-
-Search.defaultProps = {
-  exactMatch: null,
-};
-
-export default Search;
-- 
cgit v1.1


From 2cac093369ecb965ddbef60e6dc2aa6e50f0e937 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 20:36:51 +0100
Subject: Refactor Results out of Search

---
 src/client/react/components/presentational/IconFromUserType.jsx | 2 +-
 src/client/react/components/presentational/Result.jsx           | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/IconFromUserType.jsx b/src/client/react/components/presentational/IconFromUserType.jsx
index 6bd2a21..ee0e04b 100644
--- a/src/client/react/components/presentational/IconFromUserType.jsx
+++ b/src/client/react/components/presentational/IconFromUserType.jsx
@@ -26,7 +26,7 @@ const IconFromUserType = ({ userType, defaultIcon }) => {
 
 IconFromUserType.propTypes = {
   userType: PropTypes.string,
-  defaultIcon: PropTypes.react,
+  defaultIcon: PropTypes.element,
 };
 
 IconFromUserType.defaultProps = {
diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index 4876493..a4a0b8e 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -16,3 +16,5 @@ Result.propTypes = {
     type: PropTypes.string.isRequired,
   }).isRequired,
 };
+
+export default Result;
-- 
cgit v1.1


From 503ab5c66ab524dfe36aed84a01899cd07ed2bc5 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 13 Dec 2017 15:53:19 +0100
Subject: Allow selection of result using keyboard

---
 src/client/react/components/presentational/Result.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index a4a0b8e..80f65d4 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import IconFromUserType from './IconFromUserType';
 
-const Result = ({ user }) => (
-  <div className="search__result">
+const Result = ({ user, selected }) => (
+  <div
+    className={classnames('search__result', {
+      'search__result--selected': selected,
+    })}
+  >
     <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
     <div className="search__result__text">{user.value}</div>
   </div>
@@ -15,6 +20,7 @@ Result.propTypes = {
     value: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
   }).isRequired,
+  selected: PropTypes.bool.isRequired,
 };
 
 export default Result;
-- 
cgit v1.1


From 778dfdc728a101fca9ece3a14e590d3b8e1d43e1 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Thu, 14 Dec 2017 12:32:07 +0100
Subject: Use id's instead of user objects

---
 src/client/react/components/presentational/Result.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index 80f65d4..0b9e024 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -1,26 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import users from '../../users';
 
 import IconFromUserType from './IconFromUserType';
 
-const Result = ({ user, selected }) => (
+const Result = ({ userId, isSelected }) => (
   <div
     className={classnames('search__result', {
-      'search__result--selected': selected,
+      'search__result--selected': isSelected,
     })}
   >
-    <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
-    <div className="search__result__text">{user.value}</div>
+    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+    <div className="search__result__text">{users.byId[userId].value}</div>
   </div>
 );
 
 Result.propTypes = {
-  user: PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  selected: PropTypes.bool.isRequired,
+  userId: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
 };
 
 export default Result;
-- 
cgit v1.1


From 569b2969d530f08e55798c5cb3079948c7c037cd Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Thu, 14 Dec 2017 18:54:00 +0100
Subject: Use .js extention instead of .jsx

---
 .../components/presentational/IconFromUserType.js  | 37 ++++++++++++++++++++++
 .../components/presentational/IconFromUserType.jsx | 37 ----------------------
 .../react/components/presentational/Result.js      | 24 ++++++++++++++
 .../react/components/presentational/Result.jsx     | 24 --------------
 4 files changed, 61 insertions(+), 61 deletions(-)
 create mode 100644 src/client/react/components/presentational/IconFromUserType.js
 delete mode 100644 src/client/react/components/presentational/IconFromUserType.jsx
 create mode 100644 src/client/react/components/presentational/Result.js
 delete mode 100644 src/client/react/components/presentational/Result.jsx

(limited to 'src/client/react/components/presentational')

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.jsx b/src/client/react/components/presentational/IconFromUserType.jsx
deleted file mode 100644
index ee0e04b..0000000
--- a/src/client/react/components/presentational/IconFromUserType.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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/Result.js b/src/client/react/components/presentational/Result.js
new file mode 100644
index 0000000..0b9e024
--- /dev/null
+++ b/src/client/react/components/presentational/Result.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import users from '../../users';
+
+import IconFromUserType from './IconFromUserType';
+
+const Result = ({ userId, isSelected }) => (
+  <div
+    className={classnames('search__result', {
+      'search__result--selected': isSelected,
+    })}
+  >
+    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+    <div className="search__result__text">{users.byId[userId].value}</div>
+  </div>
+);
+
+Result.propTypes = {
+  userId: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+};
+
+export default Result;
diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
deleted file mode 100644
index 0b9e024..0000000
--- a/src/client/react/components/presentational/Result.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import users from '../../users';
-
-import IconFromUserType from './IconFromUserType';
-
-const Result = ({ userId, isSelected }) => (
-  <div
-    className={classnames('search__result', {
-      'search__result--selected': isSelected,
-    })}
-  >
-    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
-    <div className="search__result__text">{users.byId[userId].value}</div>
-  </div>
-);
-
-Result.propTypes = {
-  userId: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-};
-
-export default Result;
-- 
cgit v1.1


From f0c8cf0e79f003514fd65a70def5820205955a77 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Thu, 21 Dec 2017 12:06:41 +0100
Subject: Move to typescript

---
 .../components/presentational/IconFromUserType.js  | 37 ----------------------
 .../components/presentational/IconFromUserType.tsx | 31 ++++++++++++++++++
 .../react/components/presentational/Result.js      | 24 --------------
 .../react/components/presentational/Result.tsx     | 18 +++++++++++
 4 files changed, 49 insertions(+), 61 deletions(-)
 delete mode 100644 src/client/react/components/presentational/IconFromUserType.js
 create mode 100644 src/client/react/components/presentational/IconFromUserType.tsx
 delete mode 100644 src/client/react/components/presentational/Result.js
 create mode 100644 src/client/react/components/presentational/Result.tsx

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/IconFromUserType.js b/src/client/react/components/presentational/IconFromUserType.js
deleted file mode 100644
index ee0e04b..0000000
--- a/src/client/react/components/presentational/IconFromUserType.js
+++ /dev/null
@@ -1,37 +0,0 @@
-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
new file mode 100644
index 0000000..d77ea1b
--- /dev/null
+++ b/src/client/react/components/presentational/IconFromUserType.tsx
@@ -0,0 +1,31 @@
+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.js b/src/client/react/components/presentational/Result.js
deleted file mode 100644
index 0b9e024..0000000
--- a/src/client/react/components/presentational/Result.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import users from '../../users';
-
-import IconFromUserType from './IconFromUserType';
-
-const Result = ({ userId, isSelected }) => (
-  <div
-    className={classnames('search__result', {
-      'search__result--selected': isSelected,
-    })}
-  >
-    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
-    <div className="search__result__text">{users.byId[userId].value}</div>
-  </div>
-);
-
-Result.propTypes = {
-  userId: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-};
-
-export default Result;
diff --git a/src/client/react/components/presentational/Result.tsx b/src/client/react/components/presentational/Result.tsx
new file mode 100644
index 0000000..b33a365
--- /dev/null
+++ b/src/client/react/components/presentational/Result.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as classnames from 'classnames';
+import users from '../../users';
+
+import IconFromUserType from './IconFromUserType';
+
+const Result: React.StatelessComponent<{ userId: string, isSelected: boolean }> = ({ userId, isSelected }) => (
+  <div
+    className={classnames('search__result', {
+      'search__result--selected': isSelected,
+    })}
+  >
+    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+    <div className="search__result__text">{users.byId[userId].value}</div>
+  </div>
+);
+
+export default Result;
-- 
cgit v1.1


From 4ca30295d7d9f3dd7ba2e105952ff627f6b702a4 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Thu, 21 Dec 2017 13:10:05 +0100
Subject: Add strict typing

Except for functions because of https://github.com/reactjs/redux/issues/2709
---
 src/client/react/components/presentational/IconFromUserType.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/IconFromUserType.tsx b/src/client/react/components/presentational/IconFromUserType.tsx
index d77ea1b..83af34c 100644
--- a/src/client/react/components/presentational/IconFromUserType.tsx
+++ b/src/client/react/components/presentational/IconFromUserType.tsx
@@ -9,7 +9,7 @@ import TeacherIcon = require('react-icons/lib/md/account-circle');
 //   defaultIcon?: JSX.Element,
 // }
 
-const IconFromUserType: React.StatelessComponent<{ userType: string, defaultIcon?: JSX.Element }> = (props) => {
+const IconFromUserType: React.StatelessComponent<{ userType?: string, defaultIcon?: JSX.Element }> = (props) => {
   switch (props.userType) {
     case 'c':
       return <ClassIcon />;
-- 
cgit v1.1


From 95041dffbd23fe81802efd5fb25cffe492cdb551 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sat, 6 Jan 2018 12:11:05 +0100
Subject: Revert "Add strict typing"

This reverts commit 4ca30295d7d9f3dd7ba2e105952ff627f6b702a4.
---
 src/client/react/components/presentational/IconFromUserType.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/IconFromUserType.tsx b/src/client/react/components/presentational/IconFromUserType.tsx
index 83af34c..d77ea1b 100644
--- a/src/client/react/components/presentational/IconFromUserType.tsx
+++ b/src/client/react/components/presentational/IconFromUserType.tsx
@@ -9,7 +9,7 @@ import TeacherIcon = require('react-icons/lib/md/account-circle');
 //   defaultIcon?: JSX.Element,
 // }
 
-const IconFromUserType: React.StatelessComponent<{ userType?: string, defaultIcon?: JSX.Element }> = (props) => {
+const IconFromUserType: React.StatelessComponent<{ userType: string, defaultIcon?: JSX.Element }> = (props) => {
   switch (props.userType) {
     case 'c':
       return <ClassIcon />;
-- 
cgit v1.1


From 77dccd31b32ee0a9a53b2186bae231069c5ab152 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sat, 6 Jan 2018 12:11:19 +0100
Subject: Revert "Move to typescript"

This reverts commit f0c8cf0e79f003514fd65a70def5820205955a77.
---
 .../components/presentational/IconFromUserType.js  | 37 ++++++++++++++++++++++
 .../components/presentational/IconFromUserType.tsx | 31 ------------------
 .../react/components/presentational/Result.js      | 24 ++++++++++++++
 .../react/components/presentational/Result.tsx     | 18 -----------
 4 files changed, 61 insertions(+), 49 deletions(-)
 create mode 100644 src/client/react/components/presentational/IconFromUserType.js
 delete mode 100644 src/client/react/components/presentational/IconFromUserType.tsx
 create mode 100644 src/client/react/components/presentational/Result.js
 delete mode 100644 src/client/react/components/presentational/Result.tsx

(limited to 'src/client/react/components/presentational')

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.js b/src/client/react/components/presentational/Result.js
new file mode 100644
index 0000000..0b9e024
--- /dev/null
+++ b/src/client/react/components/presentational/Result.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import users from '../../users';
+
+import IconFromUserType from './IconFromUserType';
+
+const Result = ({ userId, isSelected }) => (
+  <div
+    className={classnames('search__result', {
+      'search__result--selected': isSelected,
+    })}
+  >
+    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+    <div className="search__result__text">{users.byId[userId].value}</div>
+  </div>
+);
+
+Result.propTypes = {
+  userId: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+};
+
+export default Result;
diff --git a/src/client/react/components/presentational/Result.tsx b/src/client/react/components/presentational/Result.tsx
deleted file mode 100644
index b33a365..0000000
--- a/src/client/react/components/presentational/Result.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import * as classnames from 'classnames';
-import users from '../../users';
-
-import IconFromUserType from './IconFromUserType';
-
-const Result: React.StatelessComponent<{ userId: string, isSelected: boolean }> = ({ userId, isSelected }) => (
-  <div
-    className={classnames('search__result', {
-      'search__result--selected': isSelected,
-    })}
-  >
-    <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
-    <div className="search__result__text">{users.byId[userId].value}</div>
-  </div>
-);
-
-export default Result;
-- 
cgit v1.1


From dde583c2fa9b990e1d30f7292f9cf28d9310e570 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sun, 28 Jan 2018 19:59:09 +0100
Subject: Move Schedule and Loading to seperate files

---
 .../react/components/presentational/Loading.js     |  5 +++++
 .../react/components/presentational/Schedule.js    | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/client/react/components/presentational/Loading.js
 create mode 100644 src/client/react/components/presentational/Schedule.js

(limited to 'src/client/react/components/presentational')

diff --git a/src/client/react/components/presentational/Loading.js b/src/client/react/components/presentational/Loading.js
new file mode 100644
index 0000000..84eaac7
--- /dev/null
+++ b/src/client/react/components/presentational/Loading.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Loading = () => <div>Loading...</div>;
+
+export default Loading;
diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js
new file mode 100644
index 0000000..256c1b4
--- /dev/null
+++ b/src/client/react/components/presentational/Schedule.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import createDOMPurify from 'dompurify';
+
+const Schedule = ({ htmlStr }) => {
+  const DOMPurify = createDOMPurify(window);
+
+  const cleanHTML = DOMPurify.sanitize(htmlStr, {
+    ADD_ATTR: ['rules'],
+  });
+
+  return (
+    // eslint-disable-next-line react/no-danger
+    <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
+  );
+};
+
+Schedule.propTypes = {
+  htmlStr: PropTypes.string.isRequired,
+};
+
+export default Schedule;
-- 
cgit v1.1