tdl-1933-[cra-rxjs-sc]-feat: added no result for filters in prs and i…

…ssues page (#1940) * fix: wip * fix: added no result for filters in issues and prs page
thisdot · Aug 18, 2023 · 3401303 · 3401303
1 parent 694c1c3
commit 3401303
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 26 deletions.
diff --git a/cra-rxjs-styled-components/src/components/empty-result/EmptyResult.styles.ts b/cra-rxjs-styled-components/src/components/empty-result/EmptyResult.styles.ts
@@ -0,0 +1,19 @@
+import colors from '../../constants/colors';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 16px 0;
+	width: 100%;
+`;
+
+export const Header = styled.h3`
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: 600;
+	color: ${colors.gray900};
+	text-align: center;
+	margin: 16px 0;
+`;
diff --git a/cra-rxjs-styled-components/src/components/empty-result/EmptyResult.tsx b/cra-rxjs-styled-components/src/components/empty-result/EmptyResult.tsx
@@ -0,0 +1,22 @@
+import IssueIcon from '../icons/IssueIcon';
+import PullRequestIcon from '../icons/PullRequestIcon';
+import { Container, Header } from './EmptyResult.styles';
+
+interface IssuesEmptyProps {
+	icon?: 'pr' | 'issue';
+	text: string;
+}
+const EmptyResult = ({ icon, text }: IssuesEmptyProps) => {
+	return (
+		<Container data-testid="issues-empty">
+			{icon && icon === 'pr' ? (
+				<PullRequestIcon height={32} width={32} />
+			) : (
+				<IssueIcon height={32} width={32} />
+			)}
+			<Header>{text}</Header>
+		</Container>
+	);
+};
+
+export default EmptyResult;
diff --git a/cra-rxjs-styled-components/src/components/icons/IssueIcon.tsx b/cra-rxjs-styled-components/src/components/icons/IssueIcon.tsx
@@ -1,16 +1,25 @@
-export default function IssueIcon() {
+export default function IssueIcon({
+	height,
+	width,
+}: {
+	height?: number;
+	width?: number;
+}) {
 	return (
 		<svg
 			aria-hidden="true"
-			height="16"
-			viewBox="0 0 16 16"
-			version="1.1"
-			width="16"
+			height={height ? `${height}px` : '1em'}
+			viewBox={`0 0 ${width ? width : 16} ${height ? height : 16}`}
+			width={width ? `${width}px` : '1em'}
 			data-view-component="true"
 			className="icon"
 		>
-			`<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
 			<path
+				transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
+				d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
+			></path>
+			<path
+				transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
 				fill-rule="evenodd"
 				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"
 			></path>

diff --git a/cra-rxjs-styled-components/src/components/icons/PullRequestIcon.tsx b/cra-rxjs-styled-components/src/components/icons/PullRequestIcon.tsx
@@ -1,15 +1,21 @@
-export default function PullRequestIcon() {
+export default function PullRequestIcon({
+	height,
+	width,
+}: {
+	height?: number;
+	width?: number;
+}) {
 	return (
 		<svg
 			aria-hidden="true"
-			height="1em"
-			viewBox="0 0 16 16"
-			version="1.1"
-			width="1em"
+			height={height ? `${height}px` : '16px'}
+			viewBox={`0 0 ${width ? width : '16'} ${height ? height : '16'}`}
+			width={width ? `${width}px` : '16px'}
 			data-view-component="true"
 			className="icon"
 		>
 			<path
+				transform={`scale(${width ? width / 16 : 1}, ${height ? height / 16 : 1})`}
 				fillRule="evenodd"
 				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"
 			></path>

diff --git a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.style.tsx b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.style.tsx
@@ -67,3 +67,8 @@ export const PaginationContainer = styled.div`
 		cursor: default;
 	}
 `;
+
+export const Container = styled.div`
+	display: flex;
+	flex-grow: 1;
+`;
diff --git a/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx b/cra-rxjs-styled-components/src/components/pull-request/pull-request/PullRequest.view.tsx
@@ -1,5 +1,9 @@
-import { Content, PaginationContainer, Wrapper } from './PullRequest.style';
-
+import {
+	Container,
+	Content,
+	PaginationContainer,
+	Wrapper,
+} from './PullRequest.style';
 import type { PRTabValues } from '../types';
 import type { PullRequest } from './PullRequest.type';
 import PullRequestCard from '../pull-request-card/PullRequestCard';
@@ -9,6 +13,7 @@ import { PULLS_PER_PAGE } from '../../../constants/url.constants';
 import IssuePRTabHeader from '../../../components/pr-issue-tab/IssuePRTabHeader';
 import { useRepo } from '../../../context/RepoContext';
 import ClearFilterAndSortButtonText from '../../../components/clear-filter-and-sort-button/ClearFilterAndSortButtonText';
+import EmptyResult from '../../../components/empty-result/EmptyResult';
 
 type PullRequestProps = {
 	pullRequests: PullRequest[];
@@ -41,11 +46,13 @@ export default function PullRequestView({
 		<Wrapper>
 			<Content>
 				{isFilteredOrSorted && (
-					<ClearFilterAndSortButtonText
-						variant="repo"
-						resetFilter={resetFilterValues}
-						text={'Clear Filter & Sort'}
-					/>
+					<Container>
+						<ClearFilterAndSortButtonText
+							variant="repo"
+							resetFilter={resetFilterValues}
+							text={'Clear Filter & Sort'}
+						/>
+					</Container>
 				)}
 				<IssuePRTabHeader
 					closedCount={closedPRCount}
@@ -54,7 +61,17 @@ export default function PullRequestView({
 					type="pr"
 					activeTab={activeTab}
 				/>
-				{(pullRequests || []).map((pr, index) => (
+				{(!pullRequests || pullRequests.length === 0) && (
+					<EmptyResult
+						icon="pr"
+						text={
+							isFilteredOrSorted
+								? 'No results matched your search.'
+								: 'No pull requests found'
+						}
+					/>
+				)}
+				{pullRequests.map((pr, index) => (
 					<PullRequestCard
 						title={pr.title}
 						number={pr.number}

diff --git a/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.styles.tsx b/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.styles.tsx
@@ -12,3 +12,8 @@ export const Content = styled.div`
 	border: 1px solid ${colors.gray300};
 	border-radius: 6px;
 `;
+
+export const Container = styled.div`
+	display: flex;
+	flex-grow: 1;
+`;
diff --git a/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx b/cra-rxjs-styled-components/src/components/repo-issues/Issues/Issues.view.tsx
@@ -1,5 +1,5 @@
 import IssueCard from '../issue-card/IssueCard';
-import { Content, Wrapper } from './Issues.view.styles';
+import { Container, Content, Wrapper } from './Issues.view.styles';
 import type { Issue } from './Issue.type';
 import IssuePRTabHeader, {
 	IssuePRTabValues,
@@ -9,6 +9,7 @@ import ReactPaginate from 'react-paginate';
 import { PULLS_PER_PAGE } from '../../../constants/url.constants';
 import { useRepo } from '../../../context/RepoContext';
 import ClearFilterAndSortButtonText from '../../../components/clear-filter-and-sort-button/ClearFilterAndSortButtonText';
+import EmptyResult from '../../../components/empty-result/EmptyResult';
 
 type IssueProps = {
 	issues: Issue[];
@@ -42,11 +43,13 @@ export default function IssueView({
 		<Wrapper>
 			<Content>
 				{isFilteredOrSorted && (
-					<ClearFilterAndSortButtonText
-						variant="repo"
-						resetFilter={resetFilterValues}
-						text={'Clear Filter & Sort'}
-					/>
+					<Container>
+						<ClearFilterAndSortButtonText
+							variant="repo"
+							resetFilter={resetFilterValues}
+							text={'Clear Filter & Sort'}
+						/>
+					</Container>
 				)}
 				<IssuePRTabHeader
 					toggleTab={changeActiveTab}
@@ -55,7 +58,17 @@ export default function IssueView({
 					activeTab={activeTab}
 					type="issue"
 				/>
-				{(issues || []).map((issue, index) => (
+				{(!issues || issues.length === 0) && (
+					<EmptyResult
+						icon="issue"
+						text={
+							isFilteredOrSorted
+								? 'No results matched your search.'
+								: 'No issues found'
+						}
+					/>
+				)}
+				{issues.map((issue, index) => (
 					<IssueCard issue={issue} key={index} />
 				))}
 			</Content>