feat: added known issues list in feedback button

src/components/Forms/GenericIssueFormDialog.tsx

@@ -10,6 +10,9 @@ import { DialogDescription } from '@radix-ui/react-dialog';
 import { useFormStatus } from 'react-dom';
 import { useState } from 'react';
 import { toast } from '../ui/use-toast';
+import { useQuery } from '@tanstack/react-query';
+import { listIssuesWithTag } from '@/lib/github';
+import { ScrollArea } from '../ui/scroll-area';
 
 const placeholderIssueDescription = 
 `   **Describe the issue**
@@ -46,29 +49,47 @@ const GenericIssueForm = () => {
             description: 'Thank you for your feedback!',
         })
     }
+
+    const { data: issues, isLoading, error } = useQuery({
+        queryKey: ['issues'],
+        queryFn: () => listIssuesWithTag('display'),
+        enabled: open,
+    })
 
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
                 <Button size="sm" variant="outline">
-                    <MessageCircle size="16" />
+                    <MessageCircle className='mr-2 w-4 h-4' />
                     <span className="hidden md:inline-block">Feedback</span>
                 </Button>
             </DialogTrigger>
-            <DialogContent>
+            <DialogContent className='max-h-[90vh]'>
                 <DialogHeader>
-                    <DialogTitle>What's the issue?</DialogTitle>
-                    <DialogDescription>Don't worry~ It's somewhat anonymous</DialogDescription>
+                    <DialogTitle>問題回報 Bug Reporting</DialogTitle>
+                    <DialogDescription>匿名的哦~ It's Anonymous!</DialogDescription>
                 </DialogHeader>
                 <form action={action} className="flex flex-col max-w-2xl gap-4">
                     <div className='flex flex-col gap-2'>
                         <Label htmlFor='title'>{"標題 Title"}</Label>
                         <Input id="title" name="title" placeholder="Whats the feature/bug you're facing" disabled={pending}/>
                     </div>
+                    {issues && issues.length > 0 && (
+                        <div className='flex flex-col gap-2 max-h-[30vh]'>
+                            <h3 className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'>{"在解決的問題 Known Issues"}</h3>
+                            <ScrollArea>
+                                <ul className='list-disc list-inside text-sm'>
+                                    {issues.map((issue) => (
+                                        <li key={issue.id}>{issue.title}</li>
+                                    ))}
+                                </ul>
+                            </ScrollArea>
+                        </div>
+                    )}
                     <div className='flex flex-col gap-2'>
                         <Label htmlFor='description'>{"詳情 Describe your issue"}</Label>
                         <Textarea id="description" name="description" placeholder={placeholderIssueDescription} disabled={pending}/>
-                        <p className="text-xs">{"Be as detailed as you can, and leave a contact if you'd like a follow up"}</p>
+                        <p className="text-xs">{"盡量寫越詳細越好，盡可能留下可聯絡的方式。 Be as detailed as you can, and leave a contact if you'd like a follow up"}</p>
                         <p className="text-xs">{"Markdown GFM enabled!"}</p>
                     </div>
                     <div className='flex flex-row gap-2 justify-end'>

src/lib/github.ts

@@ -7,6 +7,75 @@ const privateKey = Buffer.from(process.env.GITHUB_APP_PRIVATE_KEY!, 'base64').to
 const INSTALLATION_ID = process.env.GITHUB_INSTALLATION_ID;
 const CLIENT_ID = process.env.GITHUB_CLIENT_ID;
 
+type GithubIssue = {
+    url: string;
+    repository_url: string;
+    labels_url: string;
+    comments_url: string;
+    events_url: string;
+    html_url: string;
+    id: number;
+    node_id: string;
+    number: number;
+    title: string;
+    user: {
+        login: string;
+        id: number;
+        node_id: string;
+        avatar_url: string;
+        gravatar_id: string;
+        url: string;
+        html_url: string;
+        followers_url: string;
+        following_url: string;
+        gists_url: string;
+        starred_url: string;
+        subscriptions_url: string;
+        organizations_url: string;
+        repos_url: string;
+        events_url: string;
+        received_events_url: string;
+        type: string;
+        site_admin: boolean;
+    };
+    labels: string[];
+    state: string;
+    locked: boolean;
+    assignee: null;
+    assignees: [];
+    milestone: null;
+    comments: number;
+    created_at: string;
+    updated_at: string;
+    closed_at: null;
+    author_association: string;
+    active_lock_reason: null;
+    draft: boolean;
+    pull_request: {
+        url: string;
+        html_url: string;
+        diff_url: string;
+        patch_url: string;
+        merged_at: null;
+    };
+    body: null;
+    reactions: {
+        url: string;
+        total_count: number;
+        '+1': number;
+        '-1': number;
+        laugh: number;
+        hooray: number;
+        confused: number;
+        heart: number;
+        rocket: number;
+        eyes: number;
+    };
+    timeline_url: string;
+    performed_via_github_app: null;
+    state_reason: null;
+};
+
 const getJwt = () => {
     const payload = {
         iat: Math.floor(Date.now() / 1000),
@@ -57,3 +126,23 @@ export const createIssue = async (title: string, body: string, labels: string[]
 
     return data;
 };
+
+export const listIssuesWithTag = async (tag: string) => {
+    const accessToken = await getInstallationAccessToken();
+    const repoOwner = 'nthumodifications';
+    const repoName = 'courseweb';
+
+    const response = await fetch(
+        `https://api.github.com/repos/${repoOwner}/${repoName}/issues?filter=all&labels=${tag}&state=open`,
+        {
+            method: 'GET',
+            headers: {
+                Authorization: `token ${accessToken}`,
+                Accept: 'application/vnd.github.v3+json',
+            },
+        }
+    );
+    const data = await response.json();
+
+    return data as GithubIssue[];
+};