Skip to content

Commit 0cc226f

Browse files
nielskrijgernielskrijger
committed
feat: exclude commits by hash #4 
1 parent 1334aa4 commit 0cc226f

29 files changed

+307
-243
lines changed

Diff for: ‎src/components/Author.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Name = styled.div`
1313
`;
1414

1515
const Author: FC<Props> = ({ signature }): ReactElement => (
16-
<Name title={`${signature.name} <${signature.email}>`}>{signature.name}</Name>
16+
<Name title={`${signature.name}`}>{signature.name}</Name>
1717
);
1818

1919
export default Author;

Diff for: ‎src/components/H3.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import styled from 'styled-components';
33
export default styled.h3`
44
font-size: 1.2em;
55
font-weight: bold;
6-
margin: 1.5rem 0 1rem 0;
6+
margin: 1.5rem 0 0 0;
77
`;

Diff for: ‎src/components/buttons/DefaultButton.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { ButtonHTMLAttributes, FC, ReactElement } from 'react';
22
import styled from 'styled-components';
33
import { colors } from '../../styles/colors';
4-
import { borderRadius } from '../../styles/styles';
4+
import { borderRadius, transitionDelay } from '../../styles/styles';
55
import LoadingDots from '../LoadingDots';
66

77
interface Props {
@@ -10,16 +10,17 @@ interface Props {
1010
}
1111

1212
const StyledButton = styled.button`
13-
border: 0;
13+
border: 1px;
1414
border-radius: ${borderRadius};
15-
color: ${colors.textSecondary};
15+
color: ${colors.text};
1616
padding: 0.5rem 1.2rem 0.6rem 1.2rem;
1717
font-weight: 400;
18-
background-color: ${colors.button};
18+
background-color: ${colors.primary};
1919
outline: none;
20+
transition: all ${transitionDelay}ms ease-in-out;
2021
2122
:hover {
22-
background-color: ${colors.buttonHover};
23+
background-color: ${colors.linkHover};
2324
cursor: pointer;
2425
}
2526
`;

Diff for: ‎src/components/form/DatePicker.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,18 @@ const DatePickerStyle = createGlobalStyle`
5959
}
6060
.react-datepicker-ignore-onclickoutside {
6161
&:focus {
62-
box-shadow: 0 0 0 1px ${colors.secondary};
62+
box-shadow: 0 0 0 1px ${colors.primary};
6363
}
6464
}
6565
.react-datepicker__day--selected,
6666
.react-datepicker__month-text--selected,
6767
.react-datepicker__quarter-text--selected {
68-
background-color: ${colors.secondary};
68+
background-color: ${colors.primary};
6969
border-radius: ${borderRadius};
7070
font-weight: bold;
7171
7272
&:hover {
73-
background-color: ${colors.secondary};
73+
background-color: ${colors.primary};
7474
}
7575
}
7676
.react-datepicker__today-button {

Diff for: ‎src/components/form/Select.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ const defaultStyles: StylesConfig = {
3535
...provided,
3636
backgroundColor: colors.inputBackground,
3737
borderColor: colors.inputBorder,
38-
boxShadow: state.isFocused || state.isSelected ? `0 0 0 1px ${colors.secondary}` : '',
38+
boxShadow: state.isFocused || state.isSelected ? `0 0 0 1px ${colors.primary}` : '',
3939
border: state.isFocused ? `1px solid ${colors.inputBorder}` : '',
4040
'&:hover': {
41-
borderColor: state.isFocused ? colors.secondary : colors.inputBorderHover,
41+
borderColor: state.isFocused ? colors.primary : colors.inputBorderHover,
4242
},
4343
}),
4444
input: (provided: CSSProperties): CSSProperties => ({

Diff for: ‎src/components/form/StyledInput.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const StyledInput = styled.input`
5050
outline: 0;
5151
5252
&:hover {
53-
border: 1px solid ${colors.secondary};
53+
border: 1px solid ${colors.primary};
5454
}
5555
}
5656

Diff for: ‎src/components/form/checkbox/Checkbox.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC } from 'react';
1+
import React, { FC, ReactNode } from 'react';
22
import styled from 'styled-components';
33
import CheckIcon from './CheckIcon';
44
import HiddenCheckbox from './HiddenCheckbox';
@@ -7,23 +7,24 @@ import StyledCheckbox from './StyledCheckbox';
77
const CheckboxContainer = styled.label`
88
display: flex;
99
align-items: center;
10+
cursor: pointer;
1011
`;
1112

1213
interface Props {
1314
checked: boolean;
1415
onChange: (checked: boolean) => void;
15-
label: string;
16+
children: ReactNode;
1617
}
1718

18-
const Checkbox: FC<Props> = ({ checked, label, onChange }) => (
19+
const Checkbox: FC<Props> = ({ checked, onChange, children }) => (
1920
<CheckboxContainer>
2021
<HiddenCheckbox checked={checked} onChange={(ev): void => onChange(ev.target.checked)} />
2122
<StyledCheckbox checked={checked}>
2223
<CheckIcon viewBox="0 0 24 24">
2324
<polyline points="20 6 9 17 4 12" />
2425
</CheckIcon>
2526
</StyledCheckbox>
26-
{label}
27+
{children}
2728
</CheckboxContainer>
2829
);
2930

Diff for: ‎src/components/form/checkbox/StyledCheckbox.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components';
22
import { colors } from '../../../styles/colors';
3-
import { transitionDelay } from '../../../styles/styles';
43
import CheckIcon from './CheckIcon';
54

65
interface Props {
@@ -14,7 +13,6 @@ export default styled.div<Props>`
1413
background: ${({ checked }): string => (checked ? colors.primary : colors.inputBackground)};
1514
border-radius: 3px;
1615
border: 1px solid ${colors.inputBorder};
17-
transition: all ${transitionDelay}ms;
1816
cursor: pointer;
1917
margin-right: 0.5rem;
2018

Diff for: ‎src/components/icons/PlusIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import MergeSVG from '../../../assets/icons/plus.svg';
33
import Icon from './Icon';
44

55
const PlusIcon: FC = (): ReactElement => (
6-
<Icon>
6+
<Icon style={{ marginRight: '0.3rem' }}>
77
<MergeSVG />
88
</Icon>
99
);

Diff for: ‎src/components/side-menu/MenuItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const MenuItem: FC<Props> = ({
3838
exact={exact}
3939
activeStyle={{
4040
fontWeight: 'bold',
41-
color: colors.link,
41+
color: colors.primary,
4242
}}
4343
iconOnly={iconOnly}
4444
title={title}

Diff for: ‎src/components/side-menu/MenuItemLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ export default styled(NavLink)<Props>`
1818
padding: ${({ iconOnly }): string => (iconOnly ? '0.6rem' : '0.4rem 1.1rem')};
1919
2020
&:hover {
21-
color: ${colors.link};
21+
color: ${colors.primary};
2222
}
2323
`;

Diff for: ‎src/hooks/useExtendedCommits.ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ import { useGitData } from '../stores/data/GitDataProvider';
77
import { ExtendedCommit } from '../types/commits';
88
import { Commit, Project } from '../types/gitStatData';
99

10+
/**
11+
* Splits string a number of times and returns the remainder as a the last element of the array.
12+
*/
13+
function splitRemainder(str: string, separator: string, limit: number): string[] {
14+
const pieces = str.split(separator);
15+
if (pieces.length > limit) {
16+
const rest = pieces.splice(0, limit);
17+
rest.push(pieces.join(separator));
18+
return rest;
19+
}
20+
return pieces;
21+
}
22+
1023
/**
1124
* Adds additional properties to the default gitstat dataset.
1225
* Returns an array of extended commits ordered by their commit timestamp.
@@ -25,12 +38,19 @@ export function useExtendedCommits(): ExtendedCommit[] {
2538
return;
2639
}
2740

28-
const excluded = !config.includeMergeCommits && commit.isMerge;
41+
let excluded = config.excludeCommits.includes(commit.hash);
42+
if (!excluded) {
43+
excluded = !config.includeMergeCommits && commit.isMerge;
44+
}
45+
2946
const extendedFiles = getExtendedFiles(commit, excluded, config);
3047
const commitMutations = calculateTotalMutations(extendedFiles, excluded);
48+
const [title, description] = splitRemainder(commit.message, '\n', 1);
3149
extendedCommits.push({
3250
...commit,
3351
project: project.name,
52+
title: title?.trim() || '',
53+
description: description?.trim() || '',
3454
author,
3555
committer: findRealName(commit.committer, config),
3656
extendedFiles: extendedFiles,

Diff for: ‎src/hooks/useSlices.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function useSlices(
1212
}
1313

1414
return commits.reduce((acc: Slice[], group: ColoredCommitGroup): Slice[] => {
15-
let slice = acc.find(elm => elm.label === group.name);
15+
let slice = acc.find((elm) => elm.label === group.name);
1616
if (!slice) {
1717
slice = {
1818
label: group.name,

Diff for: ‎src/screens/commits/CollapseAllButton.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@ const Icon = styled(IconLink)`
1818
&:hover {
1919
border-color: ${colors.inputBorderHover};
2020
}
21-
22-
&:active {
23-
border-color: ${colors.link};
24-
box-shadow: 0 0 0 1px ${colors.link};
25-
}
2621
`;
2722

2823
interface Props {

Diff for: ‎src/screens/commits/CommitDetails.tsx

+65-75
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, ReactElement } from 'react';
1+
import React, { ReactElement } from 'react';
22
import styled from 'styled-components';
33
import Addition from '../../components/Addition';
44
import Deletion from '../../components/Deletion';
@@ -11,25 +11,14 @@ import { colors } from '../../styles/colors';
1111
import { ExtendedCommit } from '../../types/commits';
1212
import { CommitFile } from '../../types/gitStatData';
1313
import markdown from '../../utils/markdown';
14+
import ExcludeCommit from './ExcludeCommit';
1415

1516
const Container = styled.div`
16-
padding: 1rem;
17+
margin: 1rem;
1718
white-space: normal;
19+
width: fit-content;
1820
`;
1921

20-
/**
21-
* Splits string a number of times and returns the remainder as a the last element of the array.
22-
*/
23-
function splitRemainder(str: string, separator: string, limit: number): string[] {
24-
const pieces = str.split(separator);
25-
if (pieces.length > limit) {
26-
const rest = pieces.splice(0, limit);
27-
rest.push(pieces.join(separator));
28-
return rest;
29-
}
30-
return pieces;
31-
}
32-
3322
const filenameCopy = (file: CommitFile): string => {
3423
if (file.renameOf) {
3524
const similarity = Math.round(file.similarity!);
@@ -39,67 +28,68 @@ const filenameCopy = (file: CommitFile): string => {
3928
};
4029

4130
interface Props {
42-
commit: ExtendedCommit;
31+
readonly commit: ExtendedCommit;
4332
}
4433

45-
const CommitDetails: FC<Props> = ({ commit }): ReactElement => {
46-
const [title, description] = splitRemainder(commit.message, '\n', 1);
34+
export default ({ commit }: Props): ReactElement => (
35+
<Container>
36+
<H3>
37+
{commit.isMerge && <MergeIcon />} {commit.title}
38+
</H3>
4739

48-
return (
49-
<Container>
50-
<H3>
51-
{commit.isMerge && <MergeIcon />} {title.trim()}
52-
</H3>
53-
<SubHeader>
54-
{commit.project} - {commit.author.name} - <ShortDateTime time={commit.committer.time} /> -{' '}
55-
{commit.hash}
56-
</SubHeader>
57-
{description && <p dangerouslySetInnerHTML={{ __html: markdown(description) }} />}
58-
<table className="plain">
59-
<thead>
60-
<tr>
61-
<TH style={{ textAlign: 'left' }}>File</TH>
62-
<TH style={{ textAlign: 'right' }}>
63-
<Addition>+</Addition>
64-
</TH>
65-
<TH style={{ textAlign: 'right' }}>
66-
<Deletion>-</Deletion>
67-
</TH>
68-
</tr>
69-
</thead>
70-
<tbody>
71-
{commit.extendedFiles.map(
72-
(file): ReactElement => (
73-
<tr key={file.filepath}>
74-
<td style={{ color: commit.excluded ? colors.textDisabled : colors.text }}>
75-
<code>{filenameCopy(file)}</code>
76-
</td>
77-
<td style={{ textAlign: 'right' }}>
78-
<Addition excluded={file.excluded}>{file.additions}</Addition>
79-
</td>
80-
<td style={{ textAlign: 'right' }}>
81-
<Deletion excluded={file.excluded}>{file.deletions}</Deletion>
82-
</td>
83-
</tr>
84-
),
85-
)}
86-
<tr>
87-
<td />
88-
<td style={{ textAlign: 'right' }}>
89-
<Addition excluded={commit.excluded}>
90-
<strong>{commit.additions}</strong>
91-
</Addition>
92-
</td>
93-
<td style={{ textAlign: 'right' }}>
94-
<Deletion excluded={commit.excluded}>
95-
<strong>{commit.deletions}</strong>
96-
</Deletion>
97-
</td>
98-
</tr>
99-
</tbody>
100-
</table>
101-
</Container>
102-
);
103-
};
40+
<SubHeader>
41+
{commit.project} - {commit.author.name} - <ShortDateTime time={commit.committer.time} /> -{' '}
42+
{commit.hash}
43+
</SubHeader>
44+
45+
<ExcludeCommit value={commit.hash} />
46+
47+
{commit.description && (
48+
<blockquote dangerouslySetInnerHTML={{ __html: markdown(commit.description) }} />
49+
)}
10450

105-
export default CommitDetails;
51+
<table className="plain">
52+
<thead>
53+
<tr>
54+
<TH style={{ textAlign: 'left' }}>File</TH>
55+
<TH style={{ textAlign: 'right' }}>
56+
<Addition>+</Addition>
57+
</TH>
58+
<TH style={{ textAlign: 'right' }}>
59+
<Deletion>-</Deletion>
60+
</TH>
61+
</tr>
62+
</thead>
63+
<tbody>
64+
{commit.extendedFiles.map(
65+
(file): ReactElement => (
66+
<tr key={file.filepath}>
67+
<td style={{ color: commit.excluded ? colors.textDisabled : colors.text }}>
68+
<code>{filenameCopy(file)}</code>
69+
</td>
70+
<td style={{ textAlign: 'right' }}>
71+
<Addition excluded={file.excluded}>{file.additions}</Addition>
72+
</td>
73+
<td style={{ textAlign: 'right' }}>
74+
<Deletion excluded={file.excluded}>{file.deletions}</Deletion>
75+
</td>
76+
</tr>
77+
),
78+
)}
79+
<tr>
80+
<td />
81+
<td style={{ textAlign: 'right' }}>
82+
<Addition excluded={commit.excluded}>
83+
<strong>{commit.additions}</strong>
84+
</Addition>
85+
</td>
86+
<td style={{ textAlign: 'right' }}>
87+
<Deletion excluded={commit.excluded}>
88+
<strong>{commit.deletions}</strong>
89+
</Deletion>
90+
</td>
91+
</tr>
92+
</tbody>
93+
</table>
94+
</Container>
95+
);

0 commit comments

Comments
 (0)