Skip to content

Commit 3401303

Browse files
MegioMegio
authored
tdl-1933-[cra-rxjs-sc]-feat: added no result for filters in prs and issues page (#1940)
* fix: wip * fix: added no result for filters in issues and prs page
1 parent 694c1c3 commit 3401303

8 files changed

Lines changed: 122 additions & 26 deletions

File tree

‎cra-rxjs-styled-components/src/components/empty-result/EmptyResult.styles.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import colors from '../../constants/colors';
2+
import styled from 'styled-components';
3+
4+
export const Container = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
padding: 16px 0;
9+
width: 100%;
10+
`;
11+
12+
export const Header = styled.h3`
13+
font-size: 24px;
14+
line-height: 32px;
15+
font-weight: 600;
16+
color: ${colors.gray900};
17+
text-align: center;
18+
margin: 16px 0;
19+
`;

‎cra-rxjs-styled-components/src/components/empty-result/EmptyResult.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import IssueIcon from '../icons/IssueIcon';
2+
import PullRequestIcon from '../icons/PullRequestIcon';
3+
import { Container, Header } from './EmptyResult.styles';
4+
5+
interface IssuesEmptyProps {
6+
icon?: 'pr' | 'issue';
7+
text: string;
8+
}
9+
const EmptyResult = ({ icon, text }: IssuesEmptyProps) => {
10+
return (
11+
<Container data-testid="issues-empty">
12+
{icon && icon === 'pr' ? (
13+
<PullRequestIcon height={32} width={32} />
14+
) : (
15+
<IssueIcon height={32} width={32} />
16+
)}
17+
<Header>{text}</Header>
18+
</Container>
19+
);
20+
};
21+
22+
export default EmptyResult;

‎cra-rxjs-styled-components/src/components/icons/IssueIcon.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1-
export default function IssueIcon() {
1+
export default function IssueIcon({
2+
height,
3+
width,
4+
}: {
5+
height?: number;
6+
width?: number;
7+
}) {
28
return (
39
<svg
410
aria-hidden="true"
5-
height="16"
6-
viewBox="0 0 16 16"
7-
version="1.1"
8-
width="16"
11+
height={height ? `${height}px` : '1em'}
12+
viewBox={`0 0 ${width ? width : 16} ${height ? height : 16}`}
13+
width={width ? `${width}px` : '1em'}
914
data-view-component="true"
1015
className="icon"
1116
>
12-
`<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
1317
<path
18+
transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
19+
d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
20+
></path>
21+
<path
22+
transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
1423
fill-rule="evenodd"
1524
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
1625
></path>

‎cra-rxjs-styled-components/src/components/icons/PullRequestIcon.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
export default function PullRequestIcon() {
1+
export default function PullRequestIcon({
2+
height,
3+
width,
4+
}: {
5+
height?: number;
6+
width?: number;
7+
}) {
28
return (
39
<svg
410
aria-hidden="true"
5-
height="1em"
6-
viewBox="0 0 16 16"
7-
version="1.1"
8-
width="1em"
11+
height={height ? `${height}px` : '16px'}
12+
viewBox={`0 0 ${width ? width : '16'} ${height ? height : '16'}`}
13+
width={width ? `${width}px` : '16px'}
914
data-view-component="true"
1015
className="icon"
1116
>
1217
<path
18+
transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
1319
fillRule="evenodd"
1420
d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"
1521
></path>

‎cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.style.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,8 @@ export const PaginationContainer = styled.div`
6767
cursor: default;
6868
}
6969
`;
70+
71+
export const Container = styled.div`
72+
display: flex;
73+
flex-grow: 1;
74+
`;

‎cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import { Content, PaginationContainer, Wrapper } from './PullRequest.style';
2-
1+
import {
2+
Container,
3+
Content,
4+
PaginationContainer,
5+
Wrapper,
6+
} from './PullRequest.style';
37
import type { PRTabValues } from '../types';
48
import type { PullRequest } from './PullRequest.type';
59
import PullRequestCard from '../pull-request-card/PullRequestCard';
@@ -9,6 +13,7 @@ import { PULLS_PER_PAGE } from '../../../constants/url.constants';
913
import IssuePRTabHeader from '../../../components/pr-issue-tab/IssuePRTabHeader';
1014
import { useRepo } from '../../../context/RepoContext';
1115
import ClearFilterAndSortButtonText from '../../../components/clear-filter-and-sort-button/ClearFilterAndSortButtonText';
16+
import EmptyResult from '../../../components/empty-result/EmptyResult';
1217

1318
type PullRequestProps = {
1419
pullRequests: PullRequest[];
@@ -41,11 +46,13 @@ export default function PullRequestView({
4146
<Wrapper>
4247
<Content>
4348
{isFilteredOrSorted && (
44-
<ClearFilterAndSortButtonText
45-
variant="repo"
46-
resetFilter={resetFilterValues}
47-
text={'Clear Filter & Sort'}
48-
/>
49+
<Container>
50+
<ClearFilterAndSortButtonText
51+
variant="repo"
52+
resetFilter={resetFilterValues}
53+
text={'Clear Filter & Sort'}
54+
/>
55+
</Container>
4956
)}
5057
<IssuePRTabHeader
5158
closedCount={closedPRCount}
@@ -54,7 +61,17 @@ export default function PullRequestView({
5461
type="pr"
5562
activeTab={activeTab}
5663
/>
57-
{(pullRequests || []).map((pr, index) => (
64+
{(!pullRequests || pullRequests.length === 0) && (
65+
<EmptyResult
66+
icon="pr"
67+
text={
68+
isFilteredOrSorted
69+
? 'No results matched your search.'
70+
: 'No pull requests found'
71+
}
72+
/>
73+
)}
74+
{pullRequests.map((pr, index) => (
5875
<PullRequestCard
5976
title={pr.title}
6077
number={pr.number}

‎cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.styles.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,8 @@ export const Content = styled.div`
1212
border: 1px solid ${colors.gray300};
1313
border-radius: 6px;
1414
`;
15+
16+
export const Container = styled.div`
17+
display: flex;
18+
flex-grow: 1;
19+
`;

‎cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import IssueCard from '../issue-card/IssueCard';
2-
import { Content, Wrapper } from './Issues.view.styles';
2+
import { Container, Content, Wrapper } from './Issues.view.styles';
33
import type { Issue } from './Issue.type';
44
import IssuePRTabHeader, {
55
IssuePRTabValues,
@@ -9,6 +9,7 @@ import ReactPaginate from 'react-paginate';
99
import { PULLS_PER_PAGE } from '../../../constants/url.constants';
1010
import { useRepo } from '../../../context/RepoContext';
1111
import ClearFilterAndSortButtonText from '../../../components/clear-filter-and-sort-button/ClearFilterAndSortButtonText';
12+
import EmptyResult from '../../../components/empty-result/EmptyResult';
1213

1314
type IssueProps = {
1415
issues: Issue[];
@@ -42,11 +43,13 @@ export default function IssueView({
4243
<Wrapper>
4344
<Content>
4445
{isFilteredOrSorted && (
45-
<ClearFilterAndSortButtonText
46-
variant="repo"
47-
resetFilter={resetFilterValues}
48-
text={'Clear Filter & Sort'}
49-
/>
46+
<Container>
47+
<ClearFilterAndSortButtonText
48+
variant="repo"
49+
resetFilter={resetFilterValues}
50+
text={'Clear Filter & Sort'}
51+
/>
52+
</Container>
5053
)}
5154
<IssuePRTabHeader
5255
toggleTab={changeActiveTab}
@@ -55,7 +58,17 @@ export default function IssueView({
5558
activeTab={activeTab}
5659
type="issue"
5760
/>
58-
{(issues || []).map((issue, index) => (
61+
{(!issues || issues.length === 0) && (
62+
<EmptyResult
63+
icon="issue"
64+
text={
65+
isFilteredOrSorted
66+
? 'No results matched your search.'
67+
: 'No issues found'
68+
}
69+
/>
70+
)}
71+
{issues.map((issue, index) => (
5972
<IssueCard issue={issue} key={index} />
6073
))}
6174
</Content>

0 commit comments

Comments
 (0)