Skip to content

Commit d576e9b

Browse files
hdJerryMegio
hdJerry
and
Megio
authored
Qwik graphql milestone fix (#1955)
* chore: fixed types, added milestone filter to issues * chore: filter working now * chore: clean up * fix: remove a ts ignore comment * fix: moved and cleaned some duplicated type definitions --------- Co-authored-by: Mattia Magi <mattia.magi91@gmail.com>
1 parent 98e03a3 commit d576e9b

36 files changed

Lines changed: 605 additions & 672 deletions

‎qwik-graphql-tailwind/src/components/file-viewer/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function updateFile(store: FileStore, response: any) {
7575
store.isLoading = false;
7676
}
7777

78-
export async function fetchFile(payload: FileQueryParams, abortController?: AbortController): Promise<any> {
78+
export async function fetchFile(payload: FileQueryParams, abortController?: AbortController) {
7979
const { executeQuery$ } = useQuery(REPO_FILE_QUERY);
8080

8181
const resp = await executeQuery$({

‎qwik-graphql-tailwind/src/components/gists/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function updateGists(store: GistStore, response: any) {
5757
store.isLoading = false;
5858
}
5959

60-
export async function fetchGIst(abortController?: AbortController): Promise<any> {
60+
export async function fetchGIst(abortController?: AbortController) {
6161
const { executeQuery$ } = useQuery(USER_GISTS_QUERY);
6262

6363
const resp = await executeQuery$({

‎qwik-graphql-tailwind/src/components/issue-pr-card/card.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
MergedPrIcon,
1212
ClosedPrIcon,
1313
} from '../icons';
14-
import { Label } from '../repo-pulls/types';
14+
import { Label } from '~/types';
15+
import { getTextColor } from '~/utils/dynamicColor';
1516

1617
export interface IssuePrCardProps {
1718
data: {
@@ -84,8 +85,11 @@ export const IssuePrCard = component$(({ data, type }: IssuePrCardProps) => {
8485
data.labels.map((label: Label, i) => (
8586
<span
8687
key={i}
87-
class={cn('mt-2 ml-2 py-1 px-2 rounded-full text-sm', `bg-[#${label.color}]`)}
88-
style={{ backgroundColor: `#${label.color}` }}
88+
class={cn('mt-2 ml-2 py-1 px-2 rounded-full text-sm')}
89+
style={{
90+
'background-color': `#${label.color}`,
91+
color: getTextColor(`#${label.color}` || '#ccc'),
92+
}}
8993
>
9094
{label.name}
9195
</span>

‎qwik-graphql-tailwind/src/components/issue-tab-view/data.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import { IssueOrderField, OrderDirection } from './type';
1+
import { OrderDirection, OrderField } from '~/utils/types';
22

33
export const sortOptions = [
44
{
5-
value: `${IssueOrderField.CreatedAt}^${OrderDirection.Desc}`,
5+
value: `${OrderField.CreatedAt}^${OrderDirection.Desc}`,
66
label: 'Newest',
77
},
88
{
9-
value: `${IssueOrderField.CreatedAt}^${OrderDirection.Asc}`,
9+
value: `${OrderField.CreatedAt}^${OrderDirection.Asc}`,
1010
label: 'Oldest',
1111
},
1212
{
13-
value: `${IssueOrderField.Comments}^${OrderDirection.Desc}`,
13+
value: `${OrderField.Comments}^${OrderDirection.Desc}`,
1414
label: 'Most Commented',
1515
},
1616
{
17-
value: `${IssueOrderField.Comments}^${OrderDirection.Asc}`,
17+
value: `${OrderField.Comments}^${OrderDirection.Asc}`,
1818
label: 'Least Commented',
1919
},
2020
{
2121
label: 'Recently updated',
22-
value: `${IssueOrderField.UpdatedAt}^${OrderDirection.Desc}`,
22+
value: `${OrderField.UpdatedAt}^${OrderDirection.Desc}`,
2323
},
2424
{
2525
label: 'Least recently updated',
26-
value: `${IssueOrderField.UpdatedAt}^${OrderDirection.Asc}`,
26+
value: `${OrderField.UpdatedAt}^${OrderDirection.Asc}`,
2727
},
2828
];

‎qwik-graphql-tailwind/src/components/issue-tab-view/index.tsx‎

Lines changed: 39 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { $, component$, useClientEffect$, useContext, useTask$ } from '@builder.io/qwik';
1+
import { $, component$, useContext, useTask$ } from '@builder.io/qwik';
22
import { PullRequestIssueTab } from '../pull-request-issue-tab/pull-request-issue-tab';
33
import { sortOptions } from './data';
44
import { useQuery } from '../../utils';
55
import { ISSUES_QUERY } from '../../utils/queries/issues-query';
66
import { AUTH_TOKEN, DEFAULT_PAGE_SIZE, GITHUB_GRAPHQL } from '../../utils/constants';
77
import IssuesData from './issues-data';
8-
import { IssueOrderField, Milestone, OrderDirection, ParsedIssueQuery } from './type';
8+
import { ParsedIssueQuery } from './type';
99
import { isBrowser } from '@builder.io/qwik/build';
1010
import { parseQuery } from './parseQuery';
11-
import { Label } from '../repo-pulls/types';
1211
import { ClearFilterAndSortBtn } from '../clear-filter-and-sort-button';
1312
import { useLocation, useNavigate } from '@builder.io/qwik-city';
1413
import IssuesPRContext, { IssuesPRContextProps } from '../../context/issue-pr-store';
1514
import DropdownContext from '../../context/issue-tab-header-dropdown';
1615
import { Pagination } from '../pagination/pagination';
16+
import { OrderDirection, OrderField } from '~/utils/types';
1717

1818
export interface IssuesProps {
1919
owner: string;
@@ -29,7 +29,7 @@ interface IssuesQueryParams {
2929
before?: string;
3030
orderBy: string;
3131
direction: string;
32-
filterBy: { milestone?: string; labels: string[] | undefined };
32+
filterBy: { milestone?: string; milestoneNumber?: string; labels: string[] | undefined };
3333
}
3434

3535
export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
@@ -38,9 +38,6 @@ export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
3838
const issuesStore = useContext(IssuesPRContext);
3939
const dropdownStore = useContext(DropdownContext);
4040

41-
const afterCursor = typeof location.query.after === 'string' ? location.query.after : undefined;
42-
const beforeCursor = typeof location.query.before === 'string' ? location.query.before : undefined;
43-
4441
const hasActiveFilter =
4542
dropdownStore.selectedLabel ||
4643
dropdownStore.selectedSort !== sortOptions[0].value ||
@@ -50,65 +47,44 @@ export const IssueTabView = component$(({ owner, name }: IssuesProps) => {
5047
dropdownStore.selectedLabel = undefined;
5148
dropdownStore.selectedMilestones = undefined;
5249
dropdownStore.selectedSort = sortOptions[0].value;
50+
dropdownStore.selectedMilestoneNumber = undefined;
5351
navigate.path = `${location.pathname}?tab=${issuesStore.activeTab}`;
5452
});
5553

56-
useClientEffect$(async () => {
57-
const abortController = new AbortController();
58-
issuesStore.loading = true;
59-
const response = await fetchRepoIssues(
60-
{
61-
owner,
62-
name,
63-
after: afterCursor,
64-
before: beforeCursor,
65-
first: afterCursor || !beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
66-
last: beforeCursor ? DEFAULT_PAGE_SIZE : undefined,
67-
orderBy: IssueOrderField.CreatedAt,
68-
direction: OrderDirection.Desc,
69-
filterBy: {
70-
milestone: dropdownStore.selectedMilestones,
71-
labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
72-
},
73-
},
74-
abortController
75-
);
76-
77-
updateIssueState(issuesStore, parseQuery(response));
78-
});
79-
80-
useTask$(async ({ track }) => {
81-
const abortController = new AbortController();
82-
issuesStore.loading = true;
83-
const after = track(() => location.query.after);
84-
const before = track(() => location.query.before);
85-
track(() => issuesStore.activeTab);
86-
track(() => dropdownStore.selectedSort);
87-
track(() => dropdownStore.selectedMilestones);
88-
track(() => dropdownStore.selectedLabel);
54+
useTask$(
55+
async ({ track }) => {
56+
const abortController = new AbortController();
57+
issuesStore.loading = true;
58+
const after = track(() => location.query.after);
59+
const before = track(() => location.query.before);
60+
track(() => dropdownStore.selectedSort);
61+
track(() => dropdownStore.selectedMilestones);
62+
track(() => dropdownStore.selectedLabel);
8963

90-
if (isBrowser) {
91-
const response = await fetchRepoIssues(
92-
{
93-
owner,
94-
name,
95-
after,
96-
before,
97-
first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
98-
last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
99-
orderBy: dropdownStore.selectedSort.split('^')[0],
100-
direction: dropdownStore.selectedSort.split('^')[1],
101-
filterBy: {
102-
milestone: dropdownStore.selectedMilestones,
103-
labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
64+
if (isBrowser) {
65+
const response = await fetchRepoIssues(
66+
{
67+
owner,
68+
name,
69+
after,
70+
before,
71+
first: location.query.after || !location.query.before ? DEFAULT_PAGE_SIZE : undefined,
72+
last: location.query.before ? DEFAULT_PAGE_SIZE : undefined,
73+
orderBy: dropdownStore.selectedSort.split('^')[0] || OrderField.CreatedAt,
74+
direction: dropdownStore.selectedSort.split('^')[1] || OrderDirection.Desc,
75+
filterBy: {
76+
milestoneNumber: dropdownStore.selectedMilestoneNumber,
77+
labels: dropdownStore.selectedLabel ? [dropdownStore.selectedLabel] : undefined,
78+
},
10479
},
105-
},
106-
abortController
107-
);
80+
abortController
81+
);
10882

109-
updateIssueState(issuesStore, parseQuery(response));
110-
}
111-
});
83+
updateIssueState(issuesStore, parseQuery(response));
84+
}
85+
},
86+
{ eagerness: 'load' }
87+
);
11288

11389
return (
11490
<>
@@ -159,8 +135,8 @@ export function updateIssueState(store: IssuesPRContextProps, response: ParsedIs
159135
store.openIssues = openIssues.issues;
160136
store.closedIssuesCount = closedIssues.totalCount;
161137
store.openIssuesCount = openIssues.totalCount;
162-
store.issuesLabel = labels.map((lab: Label) => ({ label: lab.name, value: lab.name }));
163-
store.milestones = milestones.map((milestone: Milestone) => ({ value: milestone.id, label: milestone.title }));
138+
store.issuesLabel = store.issuesLabel.length ? store.issuesLabel : labels;
139+
store.milestones = store.milestones.length ? store.milestones : milestones;
164140
store.openPageInfo = openIssues.pageInfo;
165141
store.closedPageInfo = closedIssues.pageInfo;
166142
store.loading = false;
@@ -169,7 +145,7 @@ export function updateIssueState(store: IssuesPRContextProps, response: ParsedIs
169145
export async function fetchRepoIssues(
170146
{ owner, name, first, last, after, before, orderBy, direction, filterBy }: IssuesQueryParams,
171147
abortController?: AbortController
172-
): Promise<any> {
148+
) {
173149
const { executeQuery$ } = useQuery(ISSUES_QUERY);
174150
const resp = await executeQuery$({
175151
signal: abortController?.signal,

‎qwik-graphql-tailwind/src/components/issue-tab-view/parseQuery.ts‎

Lines changed: 11 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Issue, IssuesQuery, Milestone, ParsedIssueQuery } from './type';
2-
import { Label } from '../repo-pulls/types';
1+
import { Label } from '~/context/pull-request-store';
2+
import { Issue, IssuesQuery, ParsedIssueQuery } from './type';
3+
import { parseMilestones } from '~/utils/helpers';
34

45
function parseIssues(connection?: any) {
56
if (!connection) {
@@ -20,19 +21,10 @@ function parseIssues(connection?: any) {
2021
}
2122

2223
const labelNodes = issue.labels?.nodes || [];
23-
const labels = labelNodes.reduce(
24-
(labels: Label[], label: any) =>
25-
label
26-
? [
27-
...labels,
28-
{
29-
color: label.color,
30-
name: label.name,
31-
},
32-
]
33-
: labels,
34-
[]
35-
);
24+
const labels = labelNodes.map((label: Label) => ({
25+
color: label.color,
26+
name: label.name,
27+
}));
3628

3729
return [
3830
...issues,
@@ -58,48 +50,18 @@ function parseIssues(connection?: any) {
5850
return { issues, totalCount, pageInfo };
5951
}
6052

61-
function parseMilestones(milestones?: any) {
62-
const nodes = milestones?.nodes || [];
63-
return nodes.reduce((milestones: Milestone[], milestone: Milestone) => {
64-
if (!milestone) {
65-
return milestones;
66-
}
67-
68-
return [
69-
...milestones,
70-
{
71-
id: milestone.id,
72-
closed: milestone.closed,
73-
title: milestone.title,
74-
number: milestone.number,
75-
description: milestone.description,
76-
},
77-
];
78-
}, []);
79-
}
80-
8153
export function parseQuery(data: { data: IssuesQuery }): ParsedIssueQuery {
8254
const openIssues = parseIssues(data.data.repository?.openIssues);
8355
const closedIssues = parseIssues(data.data.repository?.closedIssues);
8456
const milestones = parseMilestones(data.data.repository?.milestones);
57+
const labels = data.data.repository?.labels;
58+
59+
const labelMap = (labels?.nodes || []).map((label: Label) => ({ color: label.color, name: label.name }));
8560

86-
const labelMap = [...closedIssues.issues, ...openIssues.issues].reduce(
87-
(acc: { [key: string]: Label }, issue: Issue) => {
88-
const map: { [key: string]: Label } = {};
89-
issue.labels.forEach((label: Label) => {
90-
map[label.name] = label;
91-
});
92-
return {
93-
...acc,
94-
...map,
95-
};
96-
},
97-
{}
98-
);
9961
return {
10062
openIssues,
10163
closedIssues,
10264
milestones,
103-
labels: Object.values(labelMap) as Label[],
65+
labels: labelMap,
10466
};
10567
}

0 commit comments

Comments
 (0)