Skip to content

Commit 5466516

Browse files
anbratenanbraten
committed
improve code
1 parent 7371f26 commit 5466516

File tree

6 files changed

+90
-107
lines changed

6 files changed

+90
-107
lines changed

‎package-lock.json‎

Lines changed: 15 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@citation-js/plugin-software-formats": "0.6.1",
1111
"@github/markdown-toolbar-element": "2.2.3",
1212
"@github/relative-time-element": "4.4.3",
13-
"@github/text-expander-element": "2.7.1",
13+
"@github/text-expander-element": "2.8.0",
1414
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
1515
"@primer/octicons": "19.11.0",
1616
"@silverwind/vue3-calendar-heatmap": "2.0.6",
@@ -39,6 +39,7 @@
3939
"monaco-editor": "0.51.0",
4040
"monaco-editor-webpack-plugin": "7.1.0",
4141
"pdfobject": "2.3.0",
42+
"perfect-debounce": "1.0.0",
4243
"postcss": "8.4.41",
4344
"postcss-loader": "8.1.1",
4445
"postcss-nesting": "13.0.0",

‎web_src/js/components/ContextPopup.vue‎

Lines changed: 5 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import {SvgIcon} from '../svg.ts';
33
import {GET} from '../modules/fetch.ts';
4+
import {getIssueColor, getIssueIcon} from '../features/issue.ts';
45
56
const {appSubUrl, i18n} = window.config;
67
@@ -25,37 +26,6 @@ export default {
2526
}
2627
return body;
2728
},
28-
29-
icon() {
30-
if (this.issue.pull_request !== null) {
31-
if (this.issue.state === 'open') {
32-
if (this.issue.pull_request.draft === true) {
33-
return 'octicon-git-pull-request-draft'; // WIP PR
34-
}
35-
return 'octicon-git-pull-request'; // Open PR
36-
} else if (this.issue.pull_request.merged === true) {
37-
return 'octicon-git-merge'; // Merged PR
38-
}
39-
return 'octicon-git-pull-request'; // Closed PR
40-
} else if (this.issue.state === 'open') {
41-
return 'octicon-issue-opened'; // Open Issue
42-
}
43-
return 'octicon-issue-closed'; // Closed Issue
44-
},
45-
46-
color() {
47-
if (this.issue.pull_request !== null) {
48-
if (this.issue.pull_request.draft === true) {
49-
return 'grey'; // WIP PR
50-
} else if (this.issue.pull_request.merged === true) {
51-
return 'purple'; // Merged PR
52-
}
53-
}
54-
if (this.issue.state === 'open') {
55-
return 'green'; // Open Issue
56-
}
57-
return 'red'; // Closed Issue
58-
},
5929
},
6030
mounted() {
6131
this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
@@ -85,16 +55,19 @@ export default {
8555
this.loading = false;
8656
}
8757
},
58+
getIssueColor,
59+
getIssueIcon,
8860
},
8961
};
9062
</script>
63+
9164
<template>
9265
<div ref="root">
9366
<div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
9467
<div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2">
9568
<div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
9669
<div class="flex-text-block">
97-
<svg-icon :name="icon" :class="['text', color]"/>
70+
<svg-icon :name="getIssueColor(issue)" :class="['text', getIssueColor(issue)]"/>
9871
<span class="issue-title tw-font-semibold tw-break-anywhere">
9972
{{ issue.title }}
10073
<span class="index">#{{ issue.number }}</span>

‎web_src/js/features/comp/TextExpander.ts‎

Lines changed: 33 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,40 @@ import {emojiString} from '../emoji.ts';
33
import {svg} from '../../svg.ts';
44
import {parseIssueHref} from '../../utils.ts';
55
import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
6-
7-
type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
8-
function getIssueIcon(issue: Issue) {
9-
if (issue.pull_request) {
10-
if (issue.state === 'open') {
11-
if (issue.pull_request.draft === true) {
12-
return 'octicon-git-pull-request-draft'; // WIP PR
13-
}
14-
return 'octicon-git-pull-request'; // Open PR
15-
} else if (issue.pull_request.merged === true) {
16-
return 'octicon-git-merge'; // Merged PR
17-
}
18-
return 'octicon-git-pull-request'; // Closed PR
19-
} else if (issue.state === 'open') {
20-
return 'octicon-issue-opened'; // Open Issue
6+
import {getIssueColor, getIssueIcon} from '../issue.ts';
7+
import {debounce} from 'perfect-debounce';
8+
9+
const debouncedSuggestIssues = debounce((key: string, text: string) => new Promise<{matched:boolean; fragment?: HTMLElement}>(async (resolve) => {
10+
const {owner, repo, index} = parseIssueHref(window.location.href);
11+
const matches = await matchIssue(owner, repo, index, text);
12+
if (!matches.length) return resolve({matched: false});
13+
14+
const ul = document.createElement('ul');
15+
ul.classList.add('suggestions');
16+
for (const issue of matches) {
17+
const li = createElementFromAttrs('li', {
18+
role: 'option',
19+
'data-value': `${key}${issue.id}`,
20+
});
21+
li.classList.add('tw-flex', 'tw-gap-2');
22+
23+
const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
24+
li.append(createElementFromHTML(icon));
25+
26+
const id = document.createElement('span');
27+
id.classList.add('id');
28+
id.textContent = issue.id.toString();
29+
li.append(id);
30+
31+
const nameSpan = document.createElement('span');
32+
nameSpan.textContent = issue.title;
33+
li.append(nameSpan);
34+
35+
ul.append(li);
2136
}
22-
return 'octicon-issue-closed'; // Closed Issue
23-
}
2437

25-
function getIssueColor(issue: Issue) {
26-
if (issue.pull_request) {
27-
if (issue.pull_request.draft === true) {
28-
return 'grey'; // WIP PR
29-
} else if (issue.pull_request.merged === true) {
30-
return 'purple'; // Merged PR
31-
}
32-
}
33-
if (issue.state === 'open') {
34-
return 'green'; // Open Issue
35-
}
36-
return 'red'; // Closed Issue
37-
}
38+
resolve({matched: true, fragment: ul});
39+
}), 100);
3840

3941
export function initTextExpander(expander) {
4042
expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
@@ -85,37 +87,7 @@ export function initTextExpander(expander) {
8587

8688
provide({matched: true, fragment: ul});
8789
} else if (key === '#') {
88-
provide(new Promise(async (resolve) => {
89-
const {owner, repo, index} = parseIssueHref(window.location.href);
90-
const matches = await matchIssue(owner, repo, index, text);
91-
if (!matches.length) return resolve({matched: false});
92-
93-
const ul = document.createElement('ul');
94-
ul.classList.add('suggestions');
95-
for (const issue of matches) {
96-
const li = createElementFromAttrs('li', {
97-
role: 'option',
98-
'data-value': `${key}${issue.id}`,
99-
});
100-
li.classList.add('tw-flex', 'tw-gap-2');
101-
102-
const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
103-
li.append(createElementFromHTML(icon));
104-
105-
const id = document.createElement('span');
106-
id.classList.add('id');
107-
id.textContent = issue.id.toString();
108-
li.append(id);
109-
110-
const nameSpan = document.createElement('span');
111-
nameSpan.textContent = issue.title;
112-
li.append(nameSpan);
113-
114-
ul.append(li);
115-
}
116-
117-
resolve({matched: true, fragment: ul});
118-
}));
90+
provide(debouncedSuggestIssues(key, text));
11991
}
12092
});
12193
expander?.addEventListener('text-expander-value', ({detail}) => {

‎web_src/js/features/issue.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
2+
3+
export function getIssueIcon(issue: Issue) {
4+
if (issue.pull_request) {
5+
if (issue.state === 'open') {
6+
if (issue.pull_request.draft === true) {
7+
return 'octicon-git-pull-request-draft'; // WIP PR
8+
}
9+
return 'octicon-git-pull-request'; // Open PR
10+
} else if (issue.pull_request.merged === true) {
11+
return 'octicon-git-merge'; // Merged PR
12+
}
13+
return 'octicon-git-pull-request'; // Closed PR
14+
} else if (issue.state === 'open') {
15+
return 'octicon-issue-opened'; // Open Issue
16+
}
17+
return 'octicon-issue-closed'; // Closed Issue
18+
}
19+
20+
export function getIssueColor(issue: Issue) {
21+
if (issue.pull_request) {
22+
if (issue.pull_request.draft === true) {
23+
return 'grey'; // WIP PR
24+
} else if (issue.pull_request.merged === true) {
25+
return 'purple'; // Merged PR
26+
}
27+
}
28+
if (issue.state === 'open') {
29+
return 'green'; // Open Issue
30+
}
31+
return 'red'; // Closed Issue
32+
}

‎web_src/js/utils/match.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import emojis from '../../../assets/emoji.json';
2-
import {request} from '../modules/fetch.ts';
2+
import type {Issue} from '../features/issue.ts';
3+
import {GET} from '../modules/fetch.ts';
34

45
const maxMatches = 6;
56

@@ -44,13 +45,10 @@ export function matchMention(queryText: string): MentionSuggestion[] {
4445
return sortAndReduce(results);
4546
}
4647

47-
type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
4848
export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
4949
const query = queryText.toLowerCase();
5050

51-
const res = await request(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`, {
52-
method: 'GET',
53-
});
51+
const res = await GET(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`);
5452

5553
const issues: Issue[] = await res.json();
5654
const issueIndex = parseInt(_issueIndex);

0 commit comments

Comments
 (0)