Skip to content

Commit 0c656f1

Browse files
hdJerryhdJerry
authored
Cra rxjs issue pr card style fix (#1943)
* chore: in progress * chore: issue PR card styled * chore: fix format * chore: fix Sonar bug * chore: fix Sonar bug * chore: fix Sonar bug * chore: fix Sonar code smells * chore: fix Sonar code duplicate
1 parent 3401303 commit 0c656f1

16 files changed

Lines changed: 228 additions & 330 deletions

File tree

cra-rxjs-styled-components/src/components/repo-issues/issue-card/IssueCard.styles.tsx renamed to cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCard.styles.tsx

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import styled, { css } from 'styled-components';
2-
import colors from '../../../constants/colors';
2+
import colors from '../../constants/colors';
33

44
const flex = css`
55
display: flex;
66
align-items: center;
77
`;
8-
export const IssueCardWrapper = styled.div`
8+
export const IssuePRCardWrapper = styled.div`
99
${flex};
1010
padding: 15px 20px;
1111
border-bottom: 1px solid ${colors.gray300};
1212
justify-content: space-between;
1313
& > .left {
1414
${flex};
15+
flex: 1 1 auto;
1516
& > .icon {
1617
font-size: 1.1rem;
1718
margin-right: 0.8rem;
@@ -25,16 +26,28 @@ export const IssueCardWrapper = styled.div`
2526
${flex};
2627
flex-direction: column;
2728
align-items: start;
28-
& > .heading {
29-
font-weight: 600 !important;
30-
font-size: 16px !important;
31-
vertical-align: middle !important;
32-
color: ${colors.gray800};
29+
& > .card_top {
3330
margin-bottom: 0.8rem;
34-
&:hover {
35-
color: ${colors.blue800};
31+
& > .heading {
32+
font-weight: 600 !important;
33+
font-size: 16px !important;
34+
vertical-align: middle !important;
35+
color: ${colors.gray800};
36+
&:hover {
37+
color: ${colors.blue800};
38+
}
39+
}
40+
& > .card_label {
41+
padding: 0.25rem 0.5rem;
42+
border-radius: 9999px;
43+
font-size: 0.875rem;
44+
line-height: 1.25rem;
45+
margin-top: 0.5rem;
46+
margin-left: 0.5rem;
47+
white-space: nowrap;
3648
}
3749
}
50+
3851
& > .sub_heading {
3952
color: ${colors.gray600};
4053
font-size: 12px !important;
@@ -46,12 +59,16 @@ export const IssueCardWrapper = styled.div`
4659
}
4760
4861
& > .right {
62+
width: 20%;
63+
flex-shrink: 0;
4964
.message {
5065
${flex};
66+
justify-content: flex-end;
67+
align-items: center;
68+
gap: 0.1rem;
5169
& .icon {
5270
font-size: 1.1rem;
5371
}
54-
flex-direction: column;
5572
}
5673
}
5774

‎cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCard.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import ClosedIssueIcon from '../icons/ClosedIssueIcon';
2+
import MessageIcon from '../icons/MessageIcon';
3+
import OpenIssueIcon from '../icons/OpenIssueIcon';
4+
import { IssuePRCardWrapper } from './IssuePRCard.styles';
5+
import { IssuePRData, State } from '../../types/types';
6+
import IssuePRCardInfo from './IssuePRCardInfo';
7+
import { ClosedPRIcon } from '../icons';
8+
import OpenPRIcon from '../icons/OpenPRIcon';
9+
10+
interface Props {
11+
data: IssuePRData;
12+
type: 'pr' | 'issue';
13+
}
14+
15+
export default function IssuePRCard({ data, type }: Props) {
16+
const getIssueIcon = (state: State) => {
17+
switch (state) {
18+
case 'closed':
19+
return type === 'issue' ? <ClosedIssueIcon /> : <ClosedPRIcon />;
20+
case 'open':
21+
default:
22+
return type === 'issue' ? <OpenIssueIcon /> : <OpenPRIcon />;
23+
}
24+
};
25+
return (
26+
<IssuePRCardWrapper>
27+
<div className="left">
28+
{getIssueIcon(data.state)}
29+
<IssuePRCardInfo {...data} />
30+
</div>
31+
<div className="right">
32+
{data.comments > 0 && (
33+
<div className="message">
34+
<MessageIcon />
35+
<span className="count">{data.comments}</span>
36+
</div>
37+
)}
38+
</div>
39+
</IssuePRCardWrapper>
40+
);
41+
}

‎cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCardInfo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { IssuePRData } from '@/types/types';
2+
import { getTextColor } from '../../helpers/dynamicColor';
3+
import { FormatDistance } from '../../helpers/format-distance';
4+
5+
export default function IssuePRCardInfo(data: IssuePRData) {
6+
const baseDate = new Date();
7+
const formatDistance = FormatDistance;
8+
9+
return (
10+
<div className="info">
11+
<div className="card_top">
12+
<a className="heading" href={data.url} target="_blank" rel="noreferrer">
13+
{data.title}
14+
</a>
15+
{(data.labels || []).map((label) => (
16+
<span
17+
key={label.name}
18+
className="card_label"
19+
style={{
20+
backgroundColor: `#${label.color || 'ccc'}`,
21+
color: getTextColor(`#${label.color || 'ccc'}`),
22+
}}
23+
>
24+
{label.name}
25+
</span>
26+
))}
27+
</div>
28+
<div className="sub_heading">
29+
<span className="opened_num">#{data.number}</span>
30+
{data.state === 'open' ? (
31+
<span className="opened_day">
32+
opened{' '}
33+
{formatDistance({
34+
date: data.created_at,
35+
dateToCompare: baseDate,
36+
})}{' '}
37+
ago
38+
</span>
39+
) : (
40+
<span className="opened_day">closed {data.closed_at} ago</span>
41+
)}
42+
{data.user && <span className="opened_by">by {data.user.login}</span>}
43+
</div>
44+
</div>
45+
);
46+
}

‎cra-rxjs-styled-components/src/components/pull-request-issue-info/PullRequestInfo.stories.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎cra-rxjs-styled-components/src/components/pull-request-issue-info/PullRequestIssueInfo.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

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

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,32 +44,35 @@ OpenPullRequests.args = {
4444
created_at: date,
4545
user: { login: 'krtz' },
4646
state: 'open',
47-
messageCount: 0,
4847
merged_at: null,
4948
repository_url: '/',
50-
comments: '',
49+
url: '/1',
50+
comments: 11,
51+
labels: [{ name: 'dependency', color: '633bcc' }],
5152
},
5253
{
5354
title: '[Nuxt - Pinia - Tailwind] Get PRs comments',
5455
number: '2',
5556
created_at: date,
5657
user: { login: 'jesus4497' },
5758
state: 'open',
58-
messageCount: 0,
5959
merged_at: null,
6060
repository_url: '/',
61-
comments: '',
61+
url: '/23',
62+
comments: 30,
63+
labels: [],
6264
},
6365
{
6466
title: '[CRA-RXJS-SC] Fix PR API fetch',
65-
number: '2',
67+
number: '3',
6668
created_at: date,
6769
user: { login: 'kodejuice' },
6870
state: 'open',
69-
messageCount: 0,
7071
merged_at: null,
7172
repository_url: '/',
72-
comments: '',
73+
url: '/12',
74+
comments: 12,
75+
labels: [],
7376
},
7477
],
7578
};
@@ -86,23 +89,25 @@ MergedPullRequests.args = {
8689
created_at: date,
8790
user: { login: 'krtz' },
8891
state: 'closed',
89-
messageCount: 0,
9092
isMerged: true,
91-
merged_at: date,
93+
merged_at: new Date(date),
9294
repository_url: '/',
93-
comments: '',
95+
url: '/x',
96+
comments: 10,
97+
labels: [],
9498
},
9599
{
96100
title: '[Angular-NgRx-SCSS] Click Away Directive',
97101
number: '2',
98102
created_at: date,
99103
user: { login: 'Amdrel' },
100104
state: 'closed',
101-
messageCount: 0,
102105
isMerged: true,
103-
merged_at: date,
106+
merged_at: new Date(date),
104107
repository_url: '/',
105-
comments: '',
108+
url: '/bc',
109+
comments: 0,
110+
labels: [],
106111
},
107112
],
108113
};
@@ -118,21 +123,23 @@ ClosedPullRequests.args = {
118123
created_at: date,
119124
user: { login: 'tyrelchambers' },
120125
state: 'closed',
121-
messageCount: 0,
122126
merged_at: null,
123127
repository_url: '/',
124-
comments: '',
128+
url: '/ab',
129+
comments: 1,
130+
labels: [],
125131
},
126132
{
127133
title: '[remix-gql-tailwind] Feature/restructure components',
128134
number: '2',
129135
created_at: date,
130136
user: { login: 'sheerikie' },
131137
state: 'closed',
132-
messageCount: 0,
133138
merged_at: null,
134139
repository_url: '/',
135-
comments: '',
140+
url: '/a',
141+
comments: 0,
142+
labels: [],
136143
},
137144
],
138145
};

0 commit comments

Comments
 (0)