final fix

Author: LieutenantRoger

src/shared/components/MemberSearch/ListContainer/index.jsx

@@ -46,7 +46,7 @@ ListContainer.propTypes = {
 
 ListContainer.defaultProps = {
   headerHighlightedText: '',
-  numListItems: [],
+  numListItems: 0,
 };
 
 export default ListContainer;

src/shared/components/MemberSearch/MemberItem/UserInfo/index.jsx

@@ -51,12 +51,17 @@ UserInfo.propTypes = {
     photoURL: PropTypes.string,
     handle: PropTypes.string,
     competitionCountryCode: PropTypes.string,
-    wins: PropTypes.oneOf([PropTypes.number, null, undefined]),
-    createdAt: PropTypes.string,
+    wins: PropTypes.number,
+    createdAt: PropTypes.number,
     description: PropTypes.string,
   }).isRequired,
-  userPlace: PropTypes.number.isRequired,
-  withBio: PropTypes.bool.isRequired,
+  userPlace: PropTypes.number,
+  withBio: PropTypes.bool,
+};
+
+UserInfo.defaultProps = {
+  userPlace: null,
+  withBio: false,
 };
 
 export default UserInfo;

src/shared/components/MemberSearch/MemberItem/UserStats/index.jsx

@@ -39,15 +39,16 @@ const UserStats = ({ member, userPlace, searchTermTag }) => {
 
 UserStats.propTypes = {
   member: PropTypes.shape({
-    skills: PropTypes.arrayOf({}),
+    skills: PropTypes.arrayOf(PropTypes.shape({})),
     tracks: PropTypes.arrayOf(PropTypes.string),
-    stats: PropTypes.shape({}),
+    stats: PropTypes.arrayOf(PropTypes.shape({})),
   }).isRequired,
-  userPlace: PropTypes.number.isRequired,
+  userPlace: PropTypes.number,
   searchTermTag: PropTypes.shape({}),
 };
 
 UserStats.defaultProps = {
+  userPlace: null,
   searchTermTag: null,
 };
 

src/shared/components/MemberSearch/MemberList/index.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shortId from 'shortid';
 import MemberItem from '../MemberItem';
 
 import './style.scss';
 
 const MemberList = (({ members }) => (
   <div styleName="member-list">
     {
-      members.map(member => <MemberItem key={member} member={member} />)
+      members.map(member => <MemberItem key={shortId()} member={member} />)
     }
   </div>
 ));

src/shared/components/MemberSearch/MemberSearchView/index.jsx

@@ -212,15 +212,22 @@ MemberSearchView.propTypes = {
   loadingMore: PropTypes.bool.isRequired,
   error: PropTypes.bool.isRequired,
 
-  usernameMatches: PropTypes.arrayOf({}).isRequired,
+  usernameMatches: PropTypes.arrayOf(PropTypes.shape({
+    handle: PropTypes.string,
+  })).isRequired,
   moreMatchesAvailable: PropTypes.bool.isRequired,
   totalCount: PropTypes.number.isRequired,
-  topMembers: PropTypes.shape([]).isRequired,
+  topMembers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 
-  previousSearchTerm: PropTypes.string.isRequired,
-  searchTermTag: PropTypes.shape({}).isRequired,
+  previousSearchTerm: PropTypes.string,
+  searchTermTag: PropTypes.shape({}),
 
   loadMemberSearch: PropTypes.func.isRequired,
 };
 
+MemberSearchView.defaultProps = {
+  previousSearchTerm: null,
+  searchTermTag: null,
+};
+
 export default MemberSearchView;

src/shared/components/MemberSearch/SubtrackList/index.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shortId from 'shortid';
 import SubtrackItem from './SubtrackItem';
 
 import './style.scss';
 
 const SubtrackList = ({ subtracks }) => (
   <div styleName="subtracks-list">
-    {subtracks.map(s => <SubtrackItem key={s} subtrack={s} />)}
+    {subtracks.map(s => <SubtrackItem key={shortId()} subtrack={s} />)}
   </div>
 );
 
 SubtrackList.propTypes = {
-  subtracks: PropTypes.shape([]).isRequired,
+  subtracks: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 export default SubtrackList;

src/shared/components/MemberSearch/TagList/TagItem/index.jsx

@@ -20,8 +20,8 @@ const TagItem = ({ tag }) => {
 
 TagItem.propTypes = {
   tag: PropTypes.shape({
-    searchedTag: PropTypes.string,
-    specialTag: PropTypes.string,
+    searchedTag: PropTypes.bool,
+    specialTag: PropTypes.bool,
     name: PropTypes.string,
   }).isRequired,
 };

src/shared/components/MemberSearch/TagList/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import shortId from 'shortid';
 import TagItem from './TagItem';
 
 import './style.scss';
@@ -17,7 +18,7 @@ const TagList = ({ tags, label, emptyMessage = '' }) => {
 
   const noTagsMessage = !tags.length && emptyMessage ? emptyMessage : null;
 
-  const tagItems = tags.map(t => <TagItem key={t} tag={t} />);
+  const tagItems = tags.map(t => <TagItem key={shortId()} tag={t} />);
 
   return (
     <div styleName={tagListStyles}>
@@ -31,7 +32,7 @@ const TagList = ({ tags, label, emptyMessage = '' }) => {
 };
 
 TagList.propTypes = {
-  tags: PropTypes.shape([]).isRequired,
+  tags: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   label: PropTypes.string,
   emptyMessage: PropTypes.string.isRequired,
 };

src/shared/components/MemberSearch/TopMemberList/index.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
+import shortId from 'shortid';
 import MemberItem from '../MemberItem';
 
 const TopMemberList = ({ topMembers }) => {
   const sortedTopMembers = _.orderBy(topMembers, 'wins', 'desc');
 
   const topMemberItems = sortedTopMembers.map((member, i) => (
-    <MemberItem key={member} member={member} userPlace={i} />
+    <MemberItem key={shortId()} member={member} userPlace={i} />
   ));
 
   return (

src/shared/components/MemberSearch/TrackList/index.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import shortId from 'shortid';
 import TrackItem from './TrackItem';
 
 import './style.scss';
 
 const TrackList = ({ tracks }) => {
   let trackItems;
   if (tracks.length) {
-    trackItems = tracks.map(t => <TrackItem key={t} track={t} />);
+    trackItems = tracks.map(t => <TrackItem key={shortId()} track={t} />);
   } else {
     trackItems = <TrackItem track="" />;
   }
@@ -20,7 +21,7 @@ const TrackList = ({ tracks }) => {
 };
 
 TrackList.propTypes = {
-  tracks: PropTypes.shape([]).isRequired,
+  tracks: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default TrackList;

src/shared/components/MemberSearch/User/UserAvatar/index.jsx

@@ -9,7 +9,11 @@ const UserAvatar = ({ showLevel, rating, photoURL }) => {
   let levelIcon;
 
   if (showLevel) {
-    levelIcon = <LevelDesignatorIcon level={memberLevelByRating(rating)} height="17px" width="17px" />;
+    levelIcon = (
+      <span styleName="user-rank">
+        <LevelDesignatorIcon level={memberLevelByRating(rating)} height="17px" width="17px" />
+      </span>
+    );
   }
 
   /* eslint-disable global-require */

src/shared/components/MemberSearch/icons/LevelDesignatorIcon.jsx

@@ -6,7 +6,7 @@ const LevelDesignatorIcon = ({ width, height, level }) => {
   const fill = memberColorByLevel(level);
 
   return (
-    <svg className="user-rank" width={width || '20px'} height={height || '20px'} viewBox="0 0 20 20" version="1.1">
+    <svg width={width || '20px'} height={height || '20px'} viewBox="0 0 20 20" version="1.1">
       <g id="Member-List" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
         <g id="List-cards-members-desktop" transform="translate(-1787.000000, -747.000000)">
           <g id="level-designator-big" transform="translate(1788.000000, 748.000000)">
@@ -20,14 +20,14 @@ const LevelDesignatorIcon = ({ width, height, level }) => {
 };
 
 LevelDesignatorIcon.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string,
   level: PropTypes.number.isRequired,
 };
 
 LevelDesignatorIcon.defaultProps = {
-  width: 0,
-  height: 0,
+  width: '',
+  height: '',
 };
 
 export default LevelDesignatorIcon;

src/shared/components/MemberSearch/icons/RobotIcon.jsx

@@ -26,13 +26,13 @@ const RobotIcon = ({ width, height }) => (
 );
 
 RobotIcon.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 RobotIcon.defaultProps = {
-  width: 0,
-  height: 0,
+  width: '',
+  height: '',
 };
 
 export default RobotIcon;

src/shared/components/MemberSearch/index.jsx

@@ -14,12 +14,15 @@ export default class MemberSearch extends Component {
 
   componentWillMount() {
     const { location, loadMemberSearch } = this.props;
-    window.addEventListener('scroll', this.handleScroll);
 
     this.searchTermFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true }).q || '';
     loadMemberSearch(this.searchTermFromQuery);
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll);
   }
@@ -58,13 +61,18 @@ MemberSearch.propTypes = {
   loadingMore: PropTypes.bool.isRequired,
   error: PropTypes.bool.isRequired,
 
-  usernameMatches: PropTypes.arrayOf({}).isRequired,
+  usernameMatches: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   moreMatchesAvailable: PropTypes.bool.isRequired,
   totalCount: PropTypes.number.isRequired,
-  topMembers: PropTypes.shape([]).isRequired,
+  topMembers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 
-  previousSearchTerm: PropTypes.string.isRequired,
-  searchTermTag: PropTypes.shape({}).isRequired,
+  previousSearchTerm: PropTypes.string,
+  searchTermTag: PropTypes.shape({}),
 
   loadMemberSearch: PropTypes.func.isRequired,
 };
+
+MemberSearch.defaultProps = {
+  previousSearchTerm: null,
+  searchTermTag: null,
+};