Merge pull request #4 from carolabadeer/reset-button

Reset button fix (Menu component)
spideruci · Nov 19, 2020 · ccda157 · ccda157
2 parents 831a8d2 + c7dfd7d
commit ccda157
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/src/components/common/Menu.js b/src/components/common/Menu.js
@@ -1,9 +1,20 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpIcon from '@material-ui/icons/Help';
 import './Menu.scss'
 
-const Menu = ({ title = "", description=[], onChange=(e) => console.log(e), entries = [] }) => {
+const Menu = ({ title = "", description=[], onChange=(e) => console.log(e.target.value), entries = [], reset, updateReset}) => {
+    const [value, setValue] = useState("default");
+
+    const handleChange = e =>{
+        if(reset === true){
+            updateReset();
+        }
+        setValue(e.target.value);
+        onChange(e); 
+
+    }
+
     let tooltip = description.length === 0 ? null : (
         <Tooltip
             title={
@@ -13,18 +24,25 @@ const Menu = ({ title = "", description=[], onChange=(e) => console.log(e), entr
             <HelpIcon fontSize="small" />
         </Tooltip>
     )
+    useEffect(() => {
+        if(reset) {
+            setValue("default")
+        }
+      }, [reset]); // Only re-run the effect if reset changes
+
     return (
         <div className="menu-selector">
             <span>{title}: </span>
             {tooltip}
-            <select onChange={onChange}>
-                <option> -- select an option -- </option>
+            <select value={value} onChange={handleChange}>
+                <option value="default"> -- select an option -- </option>
                 {entries.map((entry) => (
                     <option key={entry.key} value={entry.value}>{entry.value}</option>
+
                 ))}
             </select>
         </div>
     )
-}
 
+}
 export default Menu;
diff --git a/src/components/routes/TestMatrixView.js b/src/components/routes/TestMatrixView.js
@@ -41,13 +41,15 @@ class TestMatrixView extends Component {
             history: [new FunctionMap()],
             projects: [],
             commits: [],
-            expanded: false
+            expanded: false,
+            reset: false
         }
 
         this.backInTime = this.backInTime.bind(this);
         this.reset = this.reset.bind(this);
         this.onProjectChange = this.onProjectChange.bind(this);
-        this.onCommitChange = this.onCommitChange.bind(this)
+        this.onCommitChange = this.onCommitChange.bind(this);
+        this.updateReset = this.updateReset.bind(this);
     }
 
     async onCommitChange(event) {
@@ -184,8 +186,14 @@ class TestMatrixView extends Component {
         this.setState({
             history: [new FunctionMap()]
         })
+        this.setState({selectedProject: "", selectedCommit: "", reset: true});
     }
 
+    updateReset(){
+        this.setState({reset: false});
+    }
+
+
     render() {
         const history = this.state.history;
         const current_filter_map = history[history.length - 1];
@@ -237,8 +245,8 @@ class TestMatrixView extends Component {
                         <span>Project selector</span>
                         </AccordionSummary>
                         <AccordionDetails className="accordion-block">
-                            <Menu title="Projects" onChange={this.onProjectChange} entries={this.state.projects} />
-                            <Menu title="Commit" onChange={this.onCommitChange} entries={this.state.commits} />
+                            <Menu title="Projects" onChange={this.onProjectChange} entries={this.state.projects} reset={this.state.reset} updateReset={this.updateReset}/>
+                            <Menu title="Commit" onChange={this.onCommitChange} entries={this.state.commits} reset={this.state.reset} updateReset={this.updateReset}/>
                         </AccordionDetails>
                     </Accordion>
                     <Accordion expanded={this.state.expanded === 'panel2'} onChange={handleChange('panel2')}>
@@ -279,7 +287,10 @@ class TestMatrixView extends Component {
                                 { key: 1, value: "Coverage" },
                                 { key: 2, value: "Cluster" },
                                 { key: 3, value: "Suspiciousness"}
-                            ]} />
+                                ]}
+                                reset={this.state.reset}
+                                updateReset={this.updateReset}
+                                />
                             <Menu
                                 title="Sort Y-Axis"
                                 onChange={(e) => {
@@ -305,7 +316,10 @@ class TestMatrixView extends Component {
                                     { key: 0, value: "Name" },
                                     { key: 1, value: "Coverage" },
                                     { key: 2, value: "Cluster" },
-                                ]} />
+                                ]} 
+                                reset={this.state.reset}
+                                updateReset={this.updateReset}
+                                />
                         </AccordionDetails>
                     </Accordion>
                     <Accordion expanded={this.state.expanded === 'panel3'} onChange={handleChange('panel3')}>
@@ -332,7 +346,10 @@ class TestMatrixView extends Component {
                                     this.setState({
                                         history: this.state.history.concat(new_filter_map)
                                     })
-                                }} />
+                                }} 
+                                reset={this.state.reset}
+                                updateReset={this.updateReset}
+                                />
                             <Menu title="Test Pass Filter" 
                                 entries={[
                                     { key: 0, value: "All" },
@@ -353,7 +370,10 @@ class TestMatrixView extends Component {
                                     this.setState({
                                         history: this.state.history.concat(new_filter_map)
                                     })
-                            }} />
+                                }} 
+                                reset={this.state.reset}
+                                updateReset={this.updateReset}
+                               />
                             <FilterMenu title="Search Test:" 
                                 entries={current_state.y} 
                                 onClick={(event) => {