Fixed a race condition when combining querystring input in PnP Search…

… Box with dynamic data connection on this web part
YannickRe · Apr 12, 2021 · be463f0 · be463f0
1 parent d17937c
commit be463f0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/config/package-solution.json b/config/package-solution.json
@@ -10,7 +10,7 @@
  },
  "name": "Microsoft Graph People Search",
  "id": "98a8d9d1-47c4-477c-addd-ecae95b235cc",
- "version": "2.3.0.0",
+ "version": "2.4.0.0",
  "includeClientSideAssets": true,
  "skipFeatureDeployment": true,
  "isDomainIsolated": false

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "spfx-msgraph-peoplesearch",
- "version": "2.3.0",
+ "version": "2.4.0",
  "private": true,
  "main": "lib/index.js",
  "engines": {

diff --git a/src/webparts/peoplesearch/components/PeopleSearchContainer/IPeopleSearchContainerState.ts b/src/webparts/peoplesearch/components/PeopleSearchContainer/IPeopleSearchContainerState.ts
@@ -8,4 +8,5 @@ export interface IPeopleSearchContainerState {
  errorMessage: string;
  hasError: boolean;
  page: number;
+ searchParameter: string;
 }
diff --git a/src/webparts/peoplesearch/components/PeopleSearchContainer/PeopleSearchContainer.tsx b/src/webparts/peoplesearch/components/PeopleSearchContainer/PeopleSearchContainer.tsx
@@ -38,7 +38,8 @@ export class PeopleSearchContainer extends React.Component<IPeopleSearchContaine
  areResultsLoading: false,
  errorMessage: '',
  hasError: false,
- page: 1
+ page: 1,
+ searchParameter: ''
  };
  }
 
@@ -62,7 +63,7 @@ export class PeopleSearchContainer extends React.Component<IPeopleSearchContaine
  else if (!isEqual(this.props, prevProps)) {
  if (this.state.hasError) {
  this.setState({
- hasError: false,
+ hasError: false
  });
  } else {
  this.forceUpdate();
@@ -203,18 +204,27 @@ export class PeopleSearchContainer extends React.Component<IPeopleSearchContaine
  private async _fetchPeopleSearchResults(page: number, reset: boolean = false): Promise<void> {
  try {
  if (page === 1 && reset || isEmpty(this.state.results) || isEmpty(this.state.results[0]) || isEmpty(this.state.results[0].value)) {
+ let localSearchParameter = this.props.searchService.searchParameter;
  this.setState({
  areResultsLoading: true,
  hasError: false,
- errorMessage: ""
+ errorMessage: "",
+ searchParameter: localSearchParameter
  });
 
  let searchResults = await this.props.searchService.searchUsers();
- this.setState({
- results: [searchResults],
- resultCount: searchResults["@odata.count"],
- areResultsLoading: false,
- page: 1
+
+ this.setState(prevState => {
+ if (prevState.searchParameter === localSearchParameter)
+ {
+ return {
+ results: [searchResults],
+ resultCount: searchResults["@odata.count"],
+ areResultsLoading: false,
+ page: 1
+ };
+ }
+ return null;
  }, () => this._fetchPeopleProfilePictures(1));
  } else if (this.state.results.length === (page - 1)) {
  if (this.hasNextPage()) {