Feature member search list

__tests__/shared/components/__snapshots__/Content.jsx.snap

@@ -325,6 +325,35 @@ exports[`Matches shallow shapshot 1`] = `
         Track Home Page - Development
       </Link>
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/search/members?q=upbeat"
+      >
+        Member Search 1
+      </Link>
+      , 
+      <Link
+        replace={false}
+        to="/search/members?q=github"
+      >
+        Member Search 2
+      </Link>
+      , 
+      <Link
+        replace={false}
+        to="/search/members?q=not-found"
+      >
+        Member Search 3
+      </Link>
+      , 
+      <Link
+        replace={false}
+        to="/search/members?q=Siebel"
+      >
+        Member Search 4
+      </Link>
+    </li>
   </ul>
   <h3>
     TCO Assets

package.json

@@ -86,12 +86,14 @@
     "raf": "^3.4.0",
     "rc-tooltip": "^3.4.9",
     "react": "^16.4.1",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-anchor-link-smooth-scroll": "^1.0.11",
     "react-color": "^2.13.8",
     "react-css-super-themr": "^2.2.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dates": "^18.2.2",
     "react-dom": "^16.4.1",
+    "react-dotdotdot": "^1.3.1",
     "react-helmet": "^5.2.0",
     "react-html-parser": "^2.0.2",
     "react-image-fallback": "^7.1.0",
@@ -124,7 +126,8 @@
     "supertest": "^3.1.0",
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
-    "topcoder-react-lib": "0.11.1",
+    "tc-ui": "^1.0.12",
+    "topcoder-react-lib": "0.12.0",
     "topcoder-react-ui-kit": "^1.0.11",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/shared/components/Content/index.jsx

@@ -297,6 +297,23 @@ export default function Content() {
             Track Home Page - Development
           </Link>
         </li>
+        <li>
+          <Link to="/search/members?q=upbeat">
+            Member Search 1
+          </Link>
+          {', '}
+          <Link to="/search/members?q=github">
+            Member Search 2
+          </Link>
+          {', '}
+          <Link to="/search/members?q=not-found">
+            Member Search 3
+          </Link>
+          {', '}
+          <Link to="/search/members?q=Siebel">
+            Member Search 4
+          </Link>
+        </li>
       </ul>
 
       <h3>

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './style.scss';
+
+const EndOfResults = ({ endOfResultsText }) => (
+  <div styleName="end-of-results">{endOfResultsText}</div>
+);
+
+EndOfResults.propTypes = {
+  endOfResultsText: PropTypes.string,
+};
+
+EndOfResults.defaultProps = {
+  endOfResultsText: 'End of results',
+};
+
+export default EndOfResults;

src/shared/components/MemberSearch/EndOfResults/style.scss

@@ -0,0 +1,8 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.end-of-results {
+  margin: 20px auto;
+  text-align: center;
+  font-size: 12px;
+  color: $tc-gray-50;
+}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { singlePluralFormatter } from '../helpers';
+
+import './style.scss';
+
+const ListContainer = ({
+  headerText,
+  headerHighlightedText,
+  children,
+  numListItems,
+}) => {
+  function renderListCount(numItems) {
+    if (numItems) {
+      const listCountMessage = singlePluralFormatter(numItems, 'result');
+
+      return <span styleName="list-count">{` - ${listCountMessage}`}</span>;
+    }
+
+    return null;
+  }
+
+  const listCount = renderListCount(numListItems);
+
+  return (
+    <div styleName="list-container">
+      <div styleName="list-header">
+        <span styleName="header-text">{headerText}
+          <span styleName="highlighted">{headerHighlightedText}</span>
+        </span>
+
+        {listCount}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+ListContainer.propTypes = {
+  headerText: PropTypes.string.isRequired,
+  headerHighlightedText: PropTypes.string,
+  children: PropTypes.shape({}).isRequired,
+  numListItems: PropTypes.number,
+};
+
+ListContainer.defaultProps = {
+  headerHighlightedText: '',
+  numListItems: 0,
+};
+
+export default ListContainer;

src/shared/components/MemberSearch/ListContainer/style.scss

@@ -0,0 +1,47 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.list-container {
+  max-width: 960px;
+  margin: 20px auto;
+  border: 1px solid $tc-gray-30;
+  box-shadow: 0 1px 2px 0 $tc-gray-30;
+}
+
+.list-header {
+  padding: 11px 15px;
+  background-color: $tc-gray-20;
+
+  @include tc-label;
+
+  .header-text {
+    color: $tc-gray-70;
+  }
+
+  .highlighted {
+    font-weight: bold;
+  }
+
+  .list-count {
+    color: $tc-gray-70;
+    opacity: 0.5;
+  }
+}
+
+// ReactCSSTransitionGroup transitions
+.list-container-appear {
+  opacity: 0.01;
+
+  &.list-container-appear-active {
+    opacity: 1;
+    transition: opacity 0.25s ease-in;
+  }
+}
+
+.list-container-leave {
+  opacity: 1;
+
+  &.list-container-leave-active {
+    opacity: 0;
+    transition: opacity 0.25s ease-out;
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './style.scss';
+
+const LoadMoreButton = ({ callback, loading }) => (
+  <button type="button" styleName="load-more" onClick={callback}>
+    {loading ? 'Loading...' : 'Load More'}
+  </button>
+);
+
+
+LoadMoreButton.propTypes = {
+  callback: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+};
+
+LoadMoreButton.defaultProps = {
+  loading: false,
+};
+
+export default LoadMoreButton;

src/shared/components/MemberSearch/LoadMoreButton/style.scss

@@ -0,0 +1,15 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.load-more {
+  display: block;
+  height: 40px;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto 20px;
+  background-color: $tc-gray-40;
+  border: 1px solid $tc-gray-50;
+  border-radius: 2px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  color: $tc-gray-neutral-light;
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './style.scss';
+
+const LoadingListItem = ({ type }) => {
+  switch (type) {
+    case 'MEMBER':
+      return (
+        <div styleName="loading-list-item">
+          <div styleName="user-info">
+            <div styleName="user-profile">
+              <div styleName="user-avatar" />
+
+              <div styleName="username-and-details">
+                <div styleName="username" />
+
+                <div styleName="user-details">
+                  <div styleName="country-and-wins" />
+
+                  <div styleName="member-since" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div styleName="user-stats">
+            <div className="aligner">
+              <div styleName="tag-list" />
+              <div styleName="track-list">
+                <div styleName="track-item" />
+                <div styleName="track-item" />
+                <div styleName="track-item" />
+                <div styleName="track-item" />
+                <div styleName="track-item" />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+LoadingListItem.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default LoadingListItem;