diff --git a/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx b/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx index 3edd012bc3..efa6077945 100644 --- a/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx +++ b/packages/kg-unsplash-selector/src/UnsplashSearchModal.tsx @@ -106,6 +106,9 @@ export const UnsplashSearchModal : React.FC = ({onClose, onI setDataset([]); UnsplashLib.clearPhotos(); await UnsplashLib.updateSearch(searchTerm); + if (!UnsplashLib.hasUpdatedResults) { + return; + } const columns = UnsplashLib.getColumns(); if (columns) { setDataset(columns); @@ -124,7 +127,7 @@ export const UnsplashSearchModal : React.FC = ({onClose, onI } else { await loadInitPhotos(); } - }, 300); + }, 600); return () => { initLoadRef.current = true; clearTimeout(timeoutId); diff --git a/packages/kg-unsplash-selector/src/api/IUnsplashProvider.ts b/packages/kg-unsplash-selector/src/api/IUnsplashProvider.ts index f92143649f..c95a1877ef 100644 --- a/packages/kg-unsplash-selector/src/api/IUnsplashProvider.ts +++ b/packages/kg-unsplash-selector/src/api/IUnsplashProvider.ts @@ -6,4 +6,5 @@ export interface IUnsplashProvider { searchPhotos(term: string): Promise; triggerDownload(photo: Photo): Promise | void; searchIsRunning(): boolean; + getLastSearchTerm(): string; } diff --git a/packages/kg-unsplash-selector/src/api/InMemoryUnsplashProvider.ts b/packages/kg-unsplash-selector/src/api/InMemoryUnsplashProvider.ts index 1821154ad2..3113ff551b 100644 --- a/packages/kg-unsplash-selector/src/api/InMemoryUnsplashProvider.ts +++ b/packages/kg-unsplash-selector/src/api/InMemoryUnsplashProvider.ts @@ -9,6 +9,7 @@ export class InMemoryUnsplashProvider implements IUnsplashProvider { REQUEST_IS_RUNNING: boolean = false; SEARCH_IS_RUNNING: boolean = false; LAST_REQUEST_URL: string = ''; + LAST_SEARCH_TERM: string = ''; ERROR: string | null = null; IS_LOADING: boolean = false; currentPage: number = 1; @@ -36,6 +37,7 @@ export class InMemoryUnsplashProvider implements IUnsplashProvider { public async searchPhotos(term: string): Promise { this.SEARCH_IS_RUNNING = true; + this.LAST_SEARCH_TERM = term; const filteredPhotos = this.photos.filter(photo => (photo.description && photo.description.toLowerCase().includes(term.toLowerCase())) || (photo.alt_description && photo.alt_description.toLowerCase().includes(term.toLowerCase())) ); @@ -47,6 +49,10 @@ export class InMemoryUnsplashProvider implements IUnsplashProvider { return this.SEARCH_IS_RUNNING; } + getLastSearchTerm(): string { + return this.LAST_SEARCH_TERM; + } + triggerDownload(photo: Photo): void { () => { photo; diff --git a/packages/kg-unsplash-selector/src/api/PhotoUseCase.ts b/packages/kg-unsplash-selector/src/api/PhotoUseCase.ts index 8fe140999c..fd07284e96 100644 --- a/packages/kg-unsplash-selector/src/api/PhotoUseCase.ts +++ b/packages/kg-unsplash-selector/src/api/PhotoUseCase.ts @@ -33,4 +33,8 @@ export class PhotoUseCases { searchIsRunning(): boolean { return this._provider.searchIsRunning(); } + + getLastSearchTerm(): string { + return this._provider.getLastSearchTerm(); + } } diff --git a/packages/kg-unsplash-selector/src/api/UnsplashProvider.ts b/packages/kg-unsplash-selector/src/api/UnsplashProvider.ts index 6ff22d4c16..2d65190b60 100644 --- a/packages/kg-unsplash-selector/src/api/UnsplashProvider.ts +++ b/packages/kg-unsplash-selector/src/api/UnsplashProvider.ts @@ -9,6 +9,7 @@ export class UnsplashProvider implements IUnsplashProvider { REQUEST_IS_RUNNING: boolean = false; SEARCH_IS_RUNNING: boolean = false; LAST_REQUEST_URL: string = ''; + LAST_SEARCH_TERM: string = ''; IS_LOADING: boolean = false; constructor(HEADERS: DefaultHeaderTypes) { @@ -16,10 +17,6 @@ export class UnsplashProvider implements IUnsplashProvider { } private async makeRequest(url: string): Promise { - if (this.REQUEST_IS_RUNNING) { - return null; - } - this.LAST_REQUEST_URL = url; const options = { method: 'GET', @@ -35,7 +32,7 @@ export class UnsplashProvider implements IUnsplashProvider { this.extractPagination(checkedResponse); const jsonResponse = await checkedResponse.json(); - + if ('results' in jsonResponse) { return jsonResponse.results; } else { @@ -106,6 +103,7 @@ export class UnsplashProvider implements IUnsplashProvider { } public async searchPhotos(term: string): Promise { + this.LAST_SEARCH_TERM = term; const url = `${this.API_URL}/search/photos?query=${term}&per_page=30`; const request = await this.makeRequest(url); @@ -159,4 +157,8 @@ export class UnsplashProvider implements IUnsplashProvider { searchIsRunning(): boolean { return this.SEARCH_IS_RUNNING; } + + getLastSearchTerm(): string { + return this.LAST_SEARCH_TERM; + } } diff --git a/packages/kg-unsplash-selector/src/api/UnsplashService.ts b/packages/kg-unsplash-selector/src/api/UnsplashService.ts index 685e16990f..d5c2e10d02 100644 --- a/packages/kg-unsplash-selector/src/api/UnsplashService.ts +++ b/packages/kg-unsplash-selector/src/api/UnsplashService.ts @@ -12,12 +12,14 @@ export interface IUnsplashService { triggerDownload(photo: Photo): void; photos: Photo[]; searchIsRunning(): boolean; + getLastSearchTerm(): string; } export class UnsplashService implements IUnsplashService { private photoUseCases: PhotoUseCases; private masonryService: MasonryService; public photos: Photo[] = []; + public hasUpdatedResults: boolean = false; constructor(photoUseCases: PhotoUseCases, masonryService: MasonryService) { this.photoUseCases = photoUseCases; @@ -47,8 +49,13 @@ export class UnsplashService implements IUnsplashService { async updateSearch(term: string) { let results = await this.photoUseCases.searchPhotos(term); + if (this.getLastSearchTerm() !== term) { + this.hasUpdatedResults = false; + return; + } this.photos = results; this.layoutPhotos(); + this.hasUpdatedResults = true; } async loadNextPage() { @@ -68,4 +75,8 @@ export class UnsplashService implements IUnsplashService { searchIsRunning() { return this.photoUseCases.searchIsRunning(); } + + getLastSearchTerm(): string { + return this.photoUseCases.getLastSearchTerm(); + } }