Merge pull request #176 from bento-platform/bugfix/search-spinners

bugfix for correct search spinner behaviour
bento-platform · Nov 22, 2022 · 17258c9 · 17258c9
2 parents 177ef4f + 202c18e
commit 17258c9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/src/components/discovery/DiscoveryQueryBuilder.js b/src/components/discovery/DiscoveryQueryBuilder.js
@@ -231,7 +231,7 @@ class DiscoveryQueryBuilder extends Component {
             <Button type="primary"
                     icon="search"
                     loading={this.props.searchLoading}
-                    disabled={this.props.dataTypeForms.length === 0}
+                    disabled={this.props.dataTypeForms.length === 0 || this.props.isFetchingTextSearch}
                     onClick={() => this.handleSubmit()}>Search</Button>
         </Card>;
     }
@@ -250,6 +250,7 @@ DiscoveryQueryBuilder.propTypes = {
     formValues: PropTypes.object,
     dataTypeForms: PropTypes.arrayOf(PropTypes.object),
     joinFormValues: PropTypes.object,
+    isFetchingTextSearch: PropTypes.bool,
 
     addDataTypeQueryForm: PropTypes.func,
     updateDataTypeQueryForm: PropTypes.func,
@@ -267,6 +268,7 @@ const mapStateToProps = state => ({
     dataTypesByID: state.serviceDataTypes.itemsByID,
 
     autoQuery: state.explorer.autoQuery,
+    isFetchingTextSearch: state.explorer.fetchingTextSearch || false,
 
     dataTypesLoading: state.services.isFetching || state.serviceDataTypes.isFetchingAll
         || Object.keys(state.serviceDataTypes.dataTypesByServiceID).length === 0,

diff --git a/src/components/explorer/ExplorerDatasetSearch.js b/src/components/explorer/ExplorerDatasetSearch.js
@@ -107,9 +107,11 @@ class ExplorerDatasetSearch extends Component {
 
         const numResults = (this.props.searchResults || {searchFormattedResults: []}).searchFormattedResults.length;
 
+        const isFetchingSearchResults = this.props.fetchingSearch || this.props.fetchingTextSearch;
+
         const tableStyle = {
-            opacity: (this.props.fetchingSearch ? 0.5 : 1),
-            pointerEvents: (this.props.fetchingSearch ? "none" : "auto")
+            opacity: (isFetchingSearchResults ? 0.5 : 1),
+            pointerEvents: (isFetchingSearchResults ? "none" : "auto")
         };
 
         // Calculate page numbers and range
@@ -129,7 +131,7 @@ class ExplorerDatasetSearch extends Component {
                                    addDataTypeQueryForm={this.props.addDataTypeQueryForm}
                                    updateDataTypeQueryForm={this.props.updateDataTypeQueryForm}
                                    removeDataTypeQueryForm={this.props.removeDataTypeQueryForm} />
-            {this.props.searchResults && !this.props.fetchingSearch ? <>
+            {this.props.searchResults && !(isFetchingSearchResults) ? <>
                 <Typography.Title level={4}>
                     Showing results {showingResults}-{Math.min(this.state.currentPage * this.state.pageSize,
                     numResults)} of {numResults}
@@ -163,7 +165,7 @@ class ExplorerDatasetSearch extends Component {
                                    onCancel={() => this.setState({tracksModalVisible: false})} />
                     <div style={tableStyle}>
                         <Table bordered
-                               disabled={this.props.fetchingSearch}
+                               disabled={isFetchingSearchResults}
                                size="middle"
                                columns={SEARCH_RESULT_COLUMNS}
                                dataSource={this.props.searchResults.searchFormattedResults || []}
@@ -202,6 +204,7 @@ ExplorerDatasetSearch.propTypes = {
 
     dataTypeForms: PropTypes.arrayOf(PropTypes.object),
     fetchingSearch: PropTypes.bool,
+    fetchingTextSearch: PropTypes.bool,
     searchResults: PropTypes.object,
     selectedRows: PropTypes.arrayOf(PropTypes.string),
 
@@ -225,6 +228,7 @@ const mapStateToProps = (state, ownProps) => {
 
         dataTypeForms: state.explorer.dataTypeFormsByDatasetID[datasetID] || [],
         fetchingSearch: state.explorer.fetchingSearchByDatasetID[datasetID] || false,
+        fetchingTextSearch: state.explorer.fetchingTextSearch || false,
         searchResults: state.explorer.searchResultsByDatasetID[datasetID] || null,
         selectedRows: state.explorer.selectedRowsByDatasetID[datasetID] || [],
 

diff --git a/src/components/explorer/SearchAllRecords.js b/src/components/explorer/SearchAllRecords.js
@@ -17,7 +17,6 @@ class SearchAllRecords extends Component {
     }
 
     render() {
-        const isFetching = this.props.searchAllRecords.fetchingSearchByDatasetID[this.props.datasetID];
         return (
       <Card style={{ marginBottom: "1.5em" }}>
         <Typography.Title level={3} style={{ marginBottom: "1.5rem" }}>
@@ -27,7 +26,8 @@ class SearchAllRecords extends Component {
           placeholder="Search"
           onSearch={this.onSearch}
           style={{ width: "40%" }}
-          loading={isFetching}
+          loading={this.props.isFetchingTextSearch}
+          disabled={this.props.isFetchingAdvancedSearch}
           enterButton />
       </Card>
         );
@@ -38,10 +38,13 @@ SearchAllRecords.propTypes = {
     datasetID: PropTypes.string,
     performFreeTextSearchIfPossible: PropTypes.func,
     searchAllRecords: PropTypes.object,
+    isFetchingAdvancedSearch: PropTypes.bool,
+    isFetchingTextSearch: PropTypes.bool
 };
 
-const mapStateToProps = (state) => ({
-    searchAllRecords: state.explorer,
+const mapStateToProps = (state, ownProps) => ({
+    isFetchingAdvancedSearch: state.explorer.fetchingSearchByDatasetID[ownProps.datasetID] ?? false,
+    isFetchingTextSearch: state.explorer.fetchingTextSearch ?? false,
 });
 
 export default connect(mapStateToProps, {

diff --git a/src/modules/explorer/reducers.js b/src/modules/explorer/reducers.js
@@ -32,6 +32,7 @@ export const explorer = (
         searchResultsByDatasetID: {},
         selectedRowsByDatasetID: {},
         isFetchingDownload: false,
+        fetchingTextSearch: false,
 
         autoQuery: {
             isAutoQuery: false,
@@ -166,10 +167,7 @@ export const explorer = (
         case FREE_TEXT_SEARCH.REQUEST:
             return {
                 ...state,
-                fetchingSearchByDatasetID: {
-                    ...state.fetchingSearchByDatasetID,
-                    [action.datasetID]: true,
-                },
+                fetchingTextSearch: true
             };
         case FREE_TEXT_SEARCH.RECEIVE:
             return {
@@ -185,10 +183,7 @@ export const explorer = (
         case FREE_TEXT_SEARCH.FINISH:
             return {
                 ...state,
-                fetchingSearchByDatasetID: {
-                    ...state.fetchingSearchByDatasetID,
-                    [action.datasetID]: false,
-                },
+                fetchingTextSearch: false
             };
         case SET_OTHER_THRESHOLD_PERCENTAGE:
             return {