feat: search loading and error handling

Verseghy · Aug 19, 2020 · 7c74283 · 7c74283
1 parent 820713a
commit 7c74283
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/apps/frontend/src/app/modules/search/components/search/search.component.html b/apps/frontend/src/app/modules/search/components/search/search.component.html
@@ -1,4 +1,7 @@
 <h1 *ngIf="(type$ | async) === 'term'">Találatok erre a kifejezésre: "{{ term$ | async }}"</h1>
+<verseghy-loaders [hidden]="(loaded$ | async) === true || (error$ | async) !== null" [loader]="'pacman'"></verseghy-loaders>
+<span *ngIf="(error$ | async) !== null && (error$ | async).status === 404">Nincs találat!</span>
+<span *ngIf="(error$ | async) !== null && (error$ | async).status !== 404">Ismeretlen hiba történt!</span>
 <div class="results">
   <verseghy-card [post]="post" *ngFor="let post of posts$ | async"></verseghy-card>
 </div>
diff --git a/apps/frontend/src/app/modules/search/components/search/search.component.scss b/apps/frontend/src/app/modules/search/components/search/search.component.scss
@@ -8,6 +8,16 @@
 h1 {
   font-weight: 400;
   margin-top: 30px;
+  font-size: 24px;
+
+  @media screen and (max-width: 770px) {
+    font-size: 20px;
+  }
+}
+
+span {
+  margin-top: 20px;
+  display: block;
 }
 
 .results {

diff --git a/apps/frontend/src/app/modules/search/search.module.ts b/apps/frontend/src/app/modules/search/search.module.ts
@@ -9,12 +9,14 @@ import * as fromSearch from './state/search/search.reducer'
 import { SearchEffects } from './state/search/search.effects'
 import { SearchFacade } from './state/search/search.facade'
 import { SharedModule } from '../shared/shared.module'
+import { LoadersModule } from '@verseghy/ui'
 
 @NgModule({
   declarations: [SearchComponent],
   imports: [
     CommonModule,
     SearchRoutingModule,
+    LoadersModule,
     StoreModule.forFeature(fromSearch.SEARCH_FEATURE_KEY, fromSearch.reducer),
     EffectsModule.forFeature([SearchEffects]),
     SharedModule,