add way to view the issues and search them (but with poor styling)

1 files changed, 56 insertions, 7 deletions

diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx
index 128d58d88..7d8f02bb8 100644
--- a/src/client/util/ReportManager.tsx
+++ b/src/client/util/ReportManager.tsx
@@ -29,25 +29,65 @@ export class ReportManager extends React.Component<{}> {
 
     private octokit: Octokit;
 
+    public issues: any[] = [];
+
+    @observable public shownIssues = this.issues.filter(issue => issue.state === 'open');
+    
+    public updateIssueSearch = action((query: string = '') => {
+        if (query === '') {
+            this.shownIssues = this.issues.filter(issue => issue.state === 'open');
+            return;
+        }
+       this.shownIssues = this.issues.filter(issue => issue.title.toLowerCase().includes(query.toLowerCase()));
+    });
+
     constructor(props: {}) {
         super(props);
         ReportManager.Instance = this;
 
         this.octokit = new Octokit({
-            auth: 'auth key'
+            auth: 'key'
         });
     }
 
     public close = action(() => (this.isOpen = false));
-    public open = action(() => (this.isOpen = true));
+    public open = action(() => {
+        if (this.issues.length === 0) {
+            // load in the issues if not already loaded
+            this.getAllIssues()
+                .then(issues => {
+                    this.issues = issues
+                    this.updateIssueSearch();
+                })
+                .catch(err => console.log(err));
+        }
+        (this.isOpen = true)
+    });
 
     private bugTitle = '';
     private bugDescription = '';
-    private toGithub = false;
+
+    // private toGithub = false;
+    // will always be set to true - no alterntive option yet
+    private toGithub = true;
 
     private formatTitle = (title: string, userEmail: string) => `${title} - ${userEmail.replace('@brown.edu', '')}`; 
 
-    public async reportBug() {
+    public async getAllIssues() : Promise<any[]> {
+        const res = await this.octokit.request('GET /repos/{owner}/{repo}/issues', {
+            owner: 'brown-dash',
+            repo: 'Dash-Web',
+        });
+
+        // 200 status means success
+        if (res.status === 200) {
+            return res.data;
+        } else {
+            throw new Error('Error getting issues');
+        }
+    }
+
+    public async reportIssue() {
         if (this.toGithub) {
             const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
                 owner: 'brown-dash',
@@ -81,6 +121,15 @@ export class ReportManager extends React.Component<{}> {
 
         return (
             <div className="settings-interface">
+                <div className="settings-panel">
+                    <input type="text" placeholder='issue name' onChange={(e => this.updateIssueSearch(e.target.value))}></input>
+                    <h3>Previous Issues</h3>
+                    {this.shownIssues.map(issue => <div>{issue.title}</div>)}
+
+                    <div className="settings-user">
+                        <button onClick={() => this.getAllIssues().then(issues => this.issues = issues)}>Poll Issues</button>
+                    </div>
+                </div>
                 <div className="close-button" onClick={this.close}>
                     <FontAwesomeIcon icon={'times'} color="black" size={'lg'} />
                 </div>
@@ -93,10 +142,10 @@ export class ReportManager extends React.Component<{}> {
                     <label>Please leave a description for the bug and how it can be recreated.</label>
                     <textarea placeholder='description' onChange={(e) => this.bugDescription = e.target.value}/>
                     <br /><br />
-                    <label>Send to github issues? </label>
+                    {/* <label>Send to github issues? </label>
                     <input type="checkbox" onChange={(e) => this.toGithub = e.target.checked} />
-                    <br />
-                    <button onClick={() => this.reportBug()}>Submit</button>
+                    <br /> */}
+                    <button onClick={() => this.reportIssue()}>Submit</button>
                 </div>