Skip to content

Commit 1f88372

Browse files
hdJerryMegio
hdJerry
and
Megio
authored
chore: extended the API to make milestone work for pull request (#1952)
* chore: extended the API to make milestone work for pull request * chore: removed comments * fix: refactored get pull requests func and fixed clear filter button for issues --------- Co-authored-by: Mattia Magi <mattia.magi91@gmail.com>
1 parent be44519 commit 1f88372

16 files changed

Lines changed: 396 additions & 130 deletions

File tree

‎solidstart-tanstackquery-tailwind-modules/src/components/PRAndIssuesHeader/PRAndIssuesHeader.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import { CheckIcon, PullRequestIcon, IssuesIcon } from '../Icons';
33
import FilterDropdown from '../FilterDropDown/FilterDropdown';
44
import { SORT_OPTIONS } from '../../utils/constants';
55
import { createMemo, Show } from 'solid-js';
6-
import { getSelectedMilestoneId } from './utils';
6+
import { getSelectedMilestoneNumber } from './utils';
77
import { useSearchParams } from 'solid-start';
88
import {
99
setSelectedLabel,
1010
selectedLabel,
1111
setSelectedMilestone,
1212
selectedMilestone,
13-
setMilestoneId,
1413
setActiveTab,
1514
activeTab,
1615
setSortBy,
1716
sortBy,
1817
pullRequests,
1918
issues,
19+
setMilestoneNumber,
2020
} from '~/store';
2121

2222
interface PRAndIssuesHeaderProps {
@@ -45,18 +45,25 @@ const PRAndIssuesHeader = (props: PRAndIssuesHeaderProps) => {
4545
: pullRequests().labels?.map((label) => label.color)) || []
4646
);
4747

48-
const milestoneOptions = createMemo<string[]>(
49-
() => issues().milestones?.map((milestone) => milestone.title) || []
48+
const milestoneOptions = createMemo<string[]>(() =>
49+
props.type === 'issue'
50+
? issues().milestones?.map((milestone) => milestone.title)
51+
: pullRequests().milestones?.map((milestone) => milestone.title)
5052
);
5153

5254
const selectLabel = (value: string) =>
5355
setSelectedLabel(selectedLabel() !== value ? value : undefined);
5456

5557
const selectMilestone = (value: string) => {
5658
setSelectedMilestone(selectedMilestone() !== value ? value : undefined);
57-
setMilestoneId(
58-
getSelectedMilestoneId(issues().milestones || [], selectedMilestone())
59-
);
59+
if (props.type === 'issue') {
60+
setMilestoneNumber(
61+
getSelectedMilestoneNumber(
62+
issues().milestones || [],
63+
selectedMilestone()
64+
)
65+
);
66+
}
6067
};
6168

6269
const toggleTab = (activeTab: 'OPEN' | 'CLOSED') => {
@@ -118,7 +125,7 @@ const PRAndIssuesHeader = (props: PRAndIssuesHeaderProps) => {
118125
/>
119126
</div>
120127
</Show>
121-
<Show when={props.type === 'issue' && milestoneOptions()?.length !== 0}>
128+
<Show when={milestoneOptions()?.length !== 0}>
122129
<div>
123130
<FilterDropdown
124131
name="Milestone"

‎solidstart-tanstackquery-tailwind-modules/src/components/PRAndIssuesHeader/utils.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
export const getSelectedMilestoneId = (
2-
milestoneOptions: { id: string; title: string }[],
1+
export const getSelectedMilestoneNumber = (
2+
milestoneOptions: { number: number; title: string }[],
33
selectedMilestone: string | undefined
44
) =>
55
selectedMilestone
6-
? milestoneOptions.filter((mo) => mo.title === selectedMilestone)[0].id
6+
? milestoneOptions
7+
.filter((mo) => mo.title === selectedMilestone)[0]
8+
.number.toString()
79
: undefined;

‎solidstart-tanstackquery-tailwind-modules/src/components/RepoIssues/RepoIssues.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import { Match, Show, Switch } from 'solid-js';
77
import {
88
activeTab,
99
issues,
10+
milestoneNumber,
1011
selectedLabel,
12+
setMilestoneNumber,
1113
setSelectedLabel,
1214
setSelectedMilestone,
1315
setSortBy,
@@ -21,20 +23,24 @@ const RepoIssues = () => {
2123
setSortBy('Newest');
2224
setSelectedLabel(undefined);
2325
setSelectedMilestone(undefined);
26+
setMilestoneNumber(undefined);
2427
};
2528

2629
return (
2730
<div class="md:py-12 max-w-screen-xl mx-auto">
28-
<Show when={selectedLabel() || sortBy() !== 'Newest'}>
29-
<div
31+
<Show
32+
when={selectedLabel() || sortBy() !== 'Newest' || milestoneNumber()}
33+
>
34+
<a
35+
href={location.pathname}
3036
class="flex items-center gap-2 text-sm my-4 ml-2 cursor-pointer"
3137
onClick={clearSortAndFilter}
3238
>
3339
<span class="text-white rounded-md bg-gray-500 w-4 h-4">
3440
<CloseIcon />
3541
</span>
3642
Clear filter
37-
</div>
43+
</a>
3844
</Show>
3945
<div class="border border-gray-300 rounded-lg">
4046
<PRAndIssuesHeader type="issue" />

‎solidstart-tanstackquery-tailwind-modules/src/components/RepoPullRequests/RepoPullrequests.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
pullRequests,
1010
selectedLabel,
1111
setSelectedLabel,
12+
selectedMilestone,
1213
setSelectedMilestone,
1314
setSortBy,
1415
sortBy,
@@ -25,16 +26,19 @@ const RepoPullRequests = () => {
2526

2627
return (
2728
<div class="md:py-12 max-w-screen-xl mx-auto">
28-
<Show when={selectedLabel() || sortBy() !== 'Newest'}>
29-
<div
29+
<Show
30+
when={selectedLabel() || selectedMilestone() || sortBy() !== 'Newest'}
31+
>
32+
<a
33+
href={location.pathname}
3034
class="flex items-center gap-2 text-sm my-4 ml-2 cursor-pointer"
3135
onClick={clearSortAndFilter}
3236
>
3337
<span class="text-white rounded-md bg-gray-500 w-4 h-4">
3438
<CloseIcon />
3539
</span>
3640
Clear filter
37-
</div>
41+
</a>
3842
</Show>
3943
<div class="border border-gray-300 rounded-lg">
4044
<PRAndIssuesHeader type="pr" />

‎solidstart-tanstackquery-tailwind-modules/src/routes/[owner]/[name]/issues.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { Label } from '~/types/label-type';
1212
import styles from '../style.module.css';
1313
import useGetRepoInfo from '~/hooks/useGetRepoInfo';
1414
import {
15-
milestoneId,
15+
milestoneNumber,
1616
selectedLabel,
1717
selectedMilestone,
1818
setIssues,
@@ -46,7 +46,7 @@ const Issues = () => {
4646
searchParams.before,
4747
sortBy(),
4848
selectedLabel(),
49-
milestoneId(),
49+
milestoneNumber(),
5050
],
5151
() =>
5252
getIssues({
@@ -56,7 +56,7 @@ const Issues = () => {
5656
direction: parseSortParams(SORT_OPTIONS, sortBy(), 1),
5757
filterBy: {
5858
labels: selectedLabel() ? [selectedLabel()] : undefined,
59-
milestone: selectedMilestone() ? milestoneId() : undefined,
59+
milestoneNumber: selectedMilestone() ? milestoneNumber() : undefined,
6060
},
6161
before: searchParams.before,
6262
after: searchParams.after,

‎solidstart-tanstackquery-tailwind-modules/src/routes/[owner]/[name]/pulls.tsx‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Switch, Match, createEffect } from 'solid-js';
1+
import { Switch, Match } from 'solid-js';
22
import { createQuery } from '@tanstack/solid-query';
33
import { useParams, useSearchParams } from 'solid-start';
44
import { LoadingPulseDot } from '../../../components/LoadingPulseDot';
@@ -11,7 +11,15 @@ import { PageInfo, PullRequest } from '~/types/pull-request-type';
1111
import { Label } from '~/types/label-type';
1212
import styles from '../style.module.css';
1313
import useGetRepoInfo from '~/hooks/useGetRepoInfo';
14-
import { selectedLabel, setPullRequests, sortBy } from '~/store';
14+
import {
15+
selectedLabel,
16+
pullRequests,
17+
setPullRequests,
18+
sortBy,
19+
selectedMilestone,
20+
} from '~/store';
21+
import { MilestoneProps } from '~/types/issues-type';
22+
import { useAuth } from '~/auth';
1523

1624
export type PullRequestsSignal = {
1725
openPullRequests: {
@@ -24,13 +32,15 @@ export type PullRequestsSignal = {
2432
totalCount: number;
2533
pageInfo: PageInfo;
2634
};
35+
milestones: MilestoneProps[];
2736
labels: Label[];
2837
};
2938

3039
const PullRequests = () => {
3140
const params = useParams();
3241
const [searchParams] = useSearchParams();
3342
const [info, , repoInfo] = useGetRepoInfo();
43+
const { authStore } = useAuth();
3444

3545
const repoPullrequests = createQuery(
3646
() => [
@@ -39,33 +49,38 @@ const PullRequests = () => {
3949
searchParams.before,
4050
sortBy(),
4151
selectedLabel(),
52+
selectedMilestone(),
4253
],
43-
() =>
44-
getRepoPullRequests({
45-
owner: params.owner,
46-
name: params.name,
47-
orderBy: parseSortParams(SORT_OPTIONS, sortBy(), 0),
48-
direction: parseSortParams(SORT_OPTIONS, sortBy(), 1),
49-
labels: selectedLabel() ? [selectedLabel()] : undefined,
50-
before: searchParams.before,
51-
after: searchParams.after,
52-
first:
53-
searchParams.after || !searchParams.before
54-
? DEFAULT_PAGE_SIZE
55-
: undefined,
56-
last: searchParams.before ? DEFAULT_PAGE_SIZE : undefined,
57-
})
58-
);
59-
60-
createEffect(() => {
61-
if (
62-
repoPullrequests.isSuccess &&
63-
!repoPullrequests.isLoading &&
64-
repoPullrequests.data
65-
) {
66-
setPullRequests(repoPullrequests.data as PullRequestsSignal);
54+
async () => {
55+
if (authStore.token) {
56+
const resp = await getRepoPullRequests({
57+
owner: params.owner,
58+
name: params.name,
59+
orderBy: parseSortParams(SORT_OPTIONS, sortBy(), 0),
60+
direction: parseSortParams(SORT_OPTIONS, sortBy(), 1),
61+
labels: selectedLabel() ? [selectedLabel()] : undefined,
62+
milestone: selectedMilestone(),
63+
before: searchParams.before,
64+
after: searchParams.after,
65+
first:
66+
searchParams.after || !searchParams.before
67+
? DEFAULT_PAGE_SIZE
68+
: undefined,
69+
last: searchParams.before ? DEFAULT_PAGE_SIZE : undefined,
70+
});
71+
const labels = resp.labels || pullRequests().labels;
72+
const milestones = resp.milestones || pullRequests().milestones;
73+
const data = {
74+
...resp,
75+
labels,
76+
milestones,
77+
} as PullRequestsSignal;
78+
setPullRequests(data);
79+
return resp;
80+
}
81+
return null;
6782
}
68-
});
83+
);
6984

7085
return (
7186
<div class={styles.wrapper}>

‎solidstart-tanstackquery-tailwind-modules/src/services/api.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export type ApiProps<VariablesType> = {
22
url: string;
3-
query: string | null;
3+
query?: string | null;
44
variables?: VariablesType;
55
headersOptions: Record<string, string>;
66
};
@@ -13,18 +13,28 @@ const FetchApi = async <VariablesType>({
1313
}: ApiProps<VariablesType>) => {
1414
return (
1515
(await new Promise((resolve, reject) => {
16-
fetch(url, {
17-
method: 'POST',
16+
let fetchObj: {
17+
headers: Record<string, string>;
18+
method?: string;
19+
body?: string;
20+
} = {
1821
headers: {
1922
...headersOptions,
2023
Accept: 'application/vnd.github+json',
2124
'Content-Type': 'application/json',
2225
},
23-
body: JSON.stringify({
24-
query,
25-
variables,
26-
}),
27-
})
26+
};
27+
if (query) {
28+
fetchObj = {
29+
...fetchObj,
30+
method: 'POST',
31+
body: JSON.stringify({
32+
query,
33+
variables,
34+
}),
35+
};
36+
}
37+
fetch(url, fetchObj)
2838
.then((res) => res.json())
2939
.then((result) => {
3040
resolve(result);

‎solidstart-tanstackquery-tailwind-modules/src/services/get-issues.ts‎

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@ import FetchApi from './api';
22
import { useAuth } from '../auth';
33
import { ISSUES_QUERY } from './queries/issue-info';
44
import { GITHUB_GRAPHQL } from '../utils/constants';
5-
import {
6-
MilestoneProps,
7-
Variables,
8-
Response,
9-
IssueProps,
10-
Issue,
11-
} from '~/types/issues-type';
5+
import { Variables, Response, IssueProps, Issue } from '~/types/issues-type';
126
import { Label } from '~/types/label-type';
7+
import { parseLabels, parseMilestones } from '~/utils/parseFunctions';
138

149
function parseIssues(data: IssueProps) {
1510
if (!data) {
@@ -64,43 +59,6 @@ function parseIssues(data: IssueProps) {
6459
return { issues, totalCount, pageInfo };
6560
}
6661

67-
function parseMilestones(milestones: { nodes: MilestoneProps[] }) {
68-
const nodes = milestones?.nodes || [];
69-
return nodes.reduce((milestones: MilestoneProps[], milestone) => {
70-
if (!milestone) {
71-
return milestones;
72-
}
73-
74-
return [
75-
...milestones,
76-
{
77-
id: milestone.id,
78-
closed: milestone.closed,
79-
title: milestone.title,
80-
number: milestone.number,
81-
description: milestone.description,
82-
},
83-
];
84-
}, []);
85-
}
86-
87-
function parseLabels(labels: { nodes: Label[] }) {
88-
const nodes = labels?.nodes || [];
89-
return nodes.reduce((labels: Label[], label) => {
90-
if (!label) {
91-
return labels;
92-
}
93-
94-
return [
95-
...labels,
96-
{
97-
color: label.color,
98-
name: label.name,
99-
},
100-
];
101-
}, []);
102-
}
103-
10462
const getIssues = async ({
10563
owner,
10664
name,

0 commit comments

Comments
 (0)