Skip to content

Commit 7dd2892

Browse files
sushilshindesushilshinde
authored
Merge pull request #4092 from topcoder-platform/feature-member-search-list
Feature member search list
2 parents 2fd8ae3 + a08845a commit 7dd2892

File tree

54 files changed

+2958
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+2958
-1
lines changed

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

+29
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,35 @@ exports[`Matches shallow shapshot 1`] = `
325325
Track Home Page - Development
326326
</Link>
327327
</li>
328+
<li>
329+
<Link
330+
replace={false}
331+
to="/search/members?q=upbeat"
332+
>
333+
Member Search 1
334+
</Link>
335+
,
336+
<Link
337+
replace={false}
338+
to="/search/members?q=github"
339+
>
340+
Member Search 2
341+
</Link>
342+
,
343+
<Link
344+
replace={false}
345+
to="/search/members?q=not-found"
346+
>
347+
Member Search 3
348+
</Link>
349+
,
350+
<Link
351+
replace={false}
352+
to="/search/members?q=Siebel"
353+
>
354+
Member Search 4
355+
</Link>
356+
</li>
328357
</ul>
329358
<h3>
330359
TCO Assets

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,14 @@
8686
"raf": "^3.4.0",
8787
"rc-tooltip": "^3.4.9",
8888
"react": "^16.4.1",
89+
"react-addons-css-transition-group": "^15.6.2",
8990
"react-anchor-link-smooth-scroll": "^1.0.11",
9091
"react-color": "^2.13.8",
9192
"react-css-super-themr": "^2.2.0",
9293
"react-custom-scrollbars": "^4.2.1",
9394
"react-dates": "^18.2.2",
9495
"react-dom": "^16.4.1",
96+
"react-dotdotdot": "^1.3.1",
9597
"react-helmet": "^5.2.0",
9698
"react-html-parser": "^2.0.2",
9799
"react-image-fallback": "^7.1.0",
@@ -124,7 +126,8 @@
124126
"supertest": "^3.1.0",
125127
"tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
126128
"tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
127-
"topcoder-react-lib": "0.11.1",
129+
"tc-ui": "^1.0.12",
130+
"topcoder-react-lib": "0.12.0",
128131
"topcoder-react-ui-kit": "^1.0.11",
129132
"topcoder-react-utils": "0.7.8",
130133
"turndown": "^4.0.2",

‎src/shared/components/Content/index.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,23 @@ export default function Content() {
297297
Track Home Page - Development
298298
</Link>
299299
</li>
300+
<li>
301+
<Link to="/search/members?q=upbeat">
302+
Member Search 1
303+
</Link>
304+
{', '}
305+
<Link to="/search/members?q=github">
306+
Member Search 2
307+
</Link>
308+
{', '}
309+
<Link to="/search/members?q=not-found">
310+
Member Search 3
311+
</Link>
312+
{', '}
313+
<Link to="/search/members?q=Siebel">
314+
Member Search 4
315+
</Link>
316+
</li>
300317
</ul>
301318

302319
<h3>

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './style.scss';
5+
6+
const EndOfResults = ({ endOfResultsText }) => (
7+
<div styleName="end-of-results">{endOfResultsText}</div>
8+
);
9+
10+
EndOfResults.propTypes = {
11+
endOfResultsText: PropTypes.string,
12+
};
13+
14+
EndOfResults.defaultProps = {
15+
endOfResultsText: 'End of results',
16+
};
17+
18+
export default EndOfResults;

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import '~tc-ui/src/styles/tc-includes';
2+
3+
.end-of-results {
4+
margin: 20px auto;
5+
text-align: center;
6+
font-size: 12px;
7+
color: $tc-gray-50;
8+
}

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

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { singlePluralFormatter } from '../helpers';
4+
5+
import './style.scss';
6+
7+
const ListContainer = ({
8+
headerText,
9+
headerHighlightedText,
10+
children,
11+
numListItems,
12+
}) => {
13+
function renderListCount(numItems) {
14+
if (numItems) {
15+
const listCountMessage = singlePluralFormatter(numItems, 'result');
16+
17+
return <span styleName="list-count">{` - ${listCountMessage}`}</span>;
18+
}
19+
20+
return null;
21+
}
22+
23+
const listCount = renderListCount(numListItems);
24+
25+
return (
26+
<div styleName="list-container">
27+
<div styleName="list-header">
28+
<span styleName="header-text">{headerText}
29+
<span styleName="highlighted">{headerHighlightedText}</span>
30+
</span>
31+
32+
{listCount}
33+
</div>
34+
35+
{children}
36+
</div>
37+
);
38+
};
39+
40+
ListContainer.propTypes = {
41+
headerText: PropTypes.string.isRequired,
42+
headerHighlightedText: PropTypes.string,
43+
children: PropTypes.shape({}).isRequired,
44+
numListItems: PropTypes.number,
45+
};
46+
47+
ListContainer.defaultProps = {
48+
headerHighlightedText: '',
49+
numListItems: 0,
50+
};
51+
52+
export default ListContainer;

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import '~tc-ui/src/styles/tc-includes';
2+
3+
.list-container {
4+
max-width: 960px;
5+
margin: 20px auto;
6+
border: 1px solid $tc-gray-30;
7+
box-shadow: 0 1px 2px 0 $tc-gray-30;
8+
}
9+
10+
.list-header {
11+
padding: 11px 15px;
12+
background-color: $tc-gray-20;
13+
14+
@include tc-label;
15+
16+
.header-text {
17+
color: $tc-gray-70;
18+
}
19+
20+
.highlighted {
21+
font-weight: bold;
22+
}
23+
24+
.list-count {
25+
color: $tc-gray-70;
26+
opacity: 0.5;
27+
}
28+
}
29+
30+
// ReactCSSTransitionGroup transitions
31+
.list-container-appear {
32+
opacity: 0.01;
33+
34+
&.list-container-appear-active {
35+
opacity: 1;
36+
transition: opacity 0.25s ease-in;
37+
}
38+
}
39+
40+
.list-container-leave {
41+
opacity: 1;
42+
43+
&.list-container-leave-active {
44+
opacity: 0;
45+
transition: opacity 0.25s ease-out;
46+
}
47+
}

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './style.scss';
5+
6+
const LoadMoreButton = ({ callback, loading }) => (
7+
<button type="button" styleName="load-more" onClick={callback}>
8+
{loading ? 'Loading...' : 'Load More'}
9+
</button>
10+
);
11+
12+
13+
LoadMoreButton.propTypes = {
14+
callback: PropTypes.func.isRequired,
15+
loading: PropTypes.bool,
16+
};
17+
18+
LoadMoreButton.defaultProps = {
19+
loading: false,
20+
};
21+
22+
export default LoadMoreButton;

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import '~tc-ui/src/styles/tc-includes';
2+
3+
.load-more {
4+
display: block;
5+
height: 40px;
6+
width: 100%;
7+
max-width: 960px;
8+
margin: 0 auto 20px;
9+
background-color: $tc-gray-40;
10+
border: 1px solid $tc-gray-50;
11+
border-radius: 2px;
12+
font-family: "Roboto", Helvetica, Arial, sans-serif;
13+
font-size: 12px;
14+
color: $tc-gray-neutral-light;
15+
}

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

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './style.scss';
5+
6+
const LoadingListItem = ({ type }) => {
7+
switch (type) {
8+
case 'MEMBER':
9+
return (
10+
<div styleName="loading-list-item">
11+
<div styleName="user-info">
12+
<div styleName="user-profile">
13+
<div styleName="user-avatar" />
14+
15+
<div styleName="username-and-details">
16+
<div styleName="username" />
17+
18+
<div styleName="user-details">
19+
<div styleName="country-and-wins" />
20+
21+
<div styleName="member-since" />
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div styleName="user-stats">
28+
<div className="aligner">
29+
<div styleName="tag-list" />
30+
<div styleName="track-list">
31+
<div styleName="track-item" />
32+
<div styleName="track-item" />
33+
<div styleName="track-item" />
34+
<div styleName="track-item" />
35+
<div styleName="track-item" />
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
);
41+
default:
42+
return null;
43+
}
44+
};
45+
46+
LoadingListItem.propTypes = {
47+
type: PropTypes.string.isRequired,
48+
};
49+
50+
export default LoadingListItem;

0 commit comments

Comments
 (0)