Searching by keyword added

src/app/components/help/report-issue/filter.tsx

@@ -0,0 +1,24 @@
+import React, {Component} from "react";
+import Form from 'react-bootstrap/Form';
+
+const formGroupStyle = {
+    margin: '20px'
+};
+
+class FilterComponent extends Component<any, any> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                <Form.Group style={formGroupStyle}>
+                    <Form.Control size="lg" type="text" placeholder="Search by keyword" value={this.props.filter} onChange={this.props.handleChange} />
+                </Form.Group>
+            </div>
+        )
+    }
+}
+
+export default FilterComponent;

src/app/components/help/report-issue/issue-list.tsx

@@ -1,7 +1,26 @@
 import React, { Component } from "react";
-import { FunctionComponent, useEffect, useRef, useState } from 'react';
 import Card from 'react-bootstrap/Card';
-import CardGroup from 'react-bootstrap/CardGroup';
+import Spinner from 'react-bootstrap/Spinner';
+import IssueComponent from './issue';
+import FilterComponent from './filter';
+
+const wrapperStyle = { 
+    justifyContent: 'center', 
+    display: 'flex', 
+    flex: 1, 
+    flexDirection: 'row', 
+    flexWrap: 'wrap',  
+    margin: '20px' 
+};
+
+const cardStyle = { 
+    width: '300px', 
+    margin: '20px' 
+};
+
+const cardTitleStyle = { 
+    color: 'red' 
+};
 
 const apiUrl = 'https://api.github.com/repos/GNS3/gns3-web-ui/issues';
 const newIssueLink = 'https://github.com/GNS3/gns3-web-ui/issues/new';
@@ -10,41 +29,60 @@ class IssueListComponent extends Component<any, any> {
     constructor(props) {
         super(props);
         this.state = {
-            isFetching: false,
-            issues: []
+            issues: [],
+            filteredIssues: [],
+            isFetching: true
         };
     }
 
     componentDidMount() {
         fetch(apiUrl)
             .then(response => response.json())
-            .then(data => this.setState({ issues: data }));
+            .then(data => this.setState({ 
+                issues: data, 
+                filteredIssues: data,
+                isFetching: false 
+            }));
+    }
+
+    handleChange = (e) => {
+        let filter = e.target.value;
+        let filteredIssues = this.state.issues;
+
+        filteredIssues = filteredIssues.filter((issue) => {
+            return issue.title.toLowerCase().includes(filter.toLowerCase())
+        });
+
+        this.setState({
+            filteredIssues: filteredIssues
+        });
     }
 
     render() {
-        const { issues } = this.state;
-     
         return (
-          <div style={{ justifyContent: 'center', display: 'flex', flex: 1, flexDirection: 'row', flexWrap: 'wrap',  margin: '20px' }}>
-            {issues.map(issue =>
-                <Card key={issue.title} style={{ width: '300px', margin: '20px' }}>
-                    <Card.Body>
-                        <Card.Title style={{ color: 'black' }}>{issue.title}</Card.Title>
-                        <Card.Subtitle className="mb-2 text-muted">Status: {issue.state}</Card.Subtitle>
-                        <Card.Text style={{ color: 'black', overflowY: 'auto', height: '100px' }}>
-                            {issue.body}
-                        </Card.Text>
-                        <Card.Link href={issue.html_url} target = "_blank">{issue.html_url}</Card.Link>
-                    </Card.Body>
-                </Card>
+            <div>
+                <div>
+                    <FilterComponent handleChange={this.handleChange} filter={this.state.filter} />
+                </div>
+                
+                {this.state.isFetching ? (
+                    <div style={wrapperStyle}>
+                        <Spinner animation="grow" />
+                    </div>
+                ) : (
+                    <div style={wrapperStyle}>
+                    {this.state.filteredIssues.map(issue =>
+                        <IssueComponent key={issue.html_url} data={issue}/>
                     )}
-            <Card style={{ width: '300px', margin: '20px' }}>
+                    <Card style={cardStyle}>
                         <Card.Body>
-                    <Card.Title style={{ color: 'red' }}>Don't see your issue here?</Card.Title>
+                            <Card.Title style={cardTitleStyle}>Don't see your issue here?</Card.Title>
                             <Card.Link href={newIssueLink} target = "_blank">Open new issue</Card.Link>
                         </Card.Body>
                     </Card>
                     </div>
+                )}
+            </div>
         );
     }
 };

src/app/components/help/report-issue/issue.tsx

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import Card from 'react-bootstrap/Card';
+
+const cardStyle = { 
+    width: '300px', 
+    margin: '20px' 
+};
+
+const cardTitleStyle = { 
+    color: 'black' 
+};
+
+const cardTextStyle = { 
+    color: 'black', 
+    overflowY: 'auto', 
+    height: '100px' 
+};
+
+class IssueComponent extends Component<any, any> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    render() {
+        const issue = this.state.data;
+        return (
+            <Card key={issue.html_url} style={cardStyle}>
+                <Card.Body>
+                    <Card.Title style={cardTitleStyle}>{issue.title}</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">Status: {issue.state}</Card.Subtitle>
+                    <Card.Text style={cardTextStyle}>{issue.body}</Card.Text>
+                    <Card.Link href={issue.html_url} target = "_blank">{issue.html_url}</Card.Link>
+                </Card.Body>
+            </Card>
+        );
+    }
+};
+
+export default IssueComponent;