marcode24 · marcode24 · Jul 23, 2022 · Jul 23, 2022
diff --git a/src/app/core/components/sidebar/sidebar.component.css b/src/app/core/components/sidebar/sidebar.component.css
@@ -21,6 +21,7 @@ nav .logo-details {
   position: relative;
   opacity: 1;
   gap: 5px;
+  cursor: pointer;
 }
 
 nav .logo-details img {
@@ -71,6 +72,10 @@ nav li {
   height: 55px;
 }
 
+nav li.mobile {
+  display: none;
+}
+
 nav li .tooltip {
   position: absolute;
   top: -20px;
@@ -221,6 +226,10 @@ nav .profile {
     display: block;
   }
 
+  nav li.mobile {
+    display: block;
+  }
+
   nav .logo-details {
     gap: 0;
     justify-content: center;
@@ -286,6 +295,11 @@ nav .profile {
     bottom: 0;
     justify-content: space-evenly;
   }
+
+  /* nav li {
+    padding: 10px 0;
+  } */
+
   nav li .tooltip {
     display: none;
   }

diff --git a/src/app/core/components/sidebar/sidebar.component.html b/src/app/core/components/sidebar/sidebar.component.html
@@ -1,5 +1,5 @@
 <nav class="sidebar">
-  <div class="logo-details">
+  <div class="logo-details " (click)="goToHome()">
     <img src="/assets/logo.png" alt="logo" srcset="">
     <!-- <i class='bx bx-news icon'></i> -->
     <span class="logo_name">InfoReader</span>
@@ -19,6 +19,13 @@
       </a>
       <span class="tooltip">Explore</span>
     </li>
+    <li class="mobile">
+      <a routerLink="/search" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <i class='bx bx-search'></i>
+        <span class="links_name">Search</span>
+      </a>
+      <span class="tooltip">Search</span>
+    </li>
     <li>
       <a routerLink="/feed/saved" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
         <i class='bx bx-bookmark'></i>
@@ -27,7 +34,7 @@
       <span class="tooltip">Saved</span>
     </li>
     <li>
-      <a routerLink="/settings" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+      <a routerLink="/settings" routerLinkActive="active">
         <i class='bx bx-cog'></i>
         <span class="links_name">Settings</span>
       </a>

diff --git a/src/app/core/components/sidebar/sidebar.component.ts b/src/app/core/components/sidebar/sidebar.component.ts
@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import { User } from '@models/user.model';
@@ -20,6 +21,7 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
 
   constructor(
     private authService: AuthService,
+    private router: Router
   ) {
     this.userActive = authService.getUserActive;
   }
@@ -58,4 +60,8 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     this.authService.showModalAuth(to);
   }
 
+  goToHome(): void  {
+    this.router.navigate(['/']);
+  }
+
 }
diff --git a/src/app/core/constants/messages.constant.ts b/src/app/core/constants/messages.constant.ts
@@ -11,4 +11,8 @@ export const messages: IMessage[] = [
    message: 'Here you can find your news saved',
    imagePath: `${pathRelative}/saved.svg`,
   },
+  {
+    message: 'Sorry, we could not find any results',
+    imagePath: `${pathRelative}/no-data.svg`
+  }
 ];
diff --git a/src/app/core/services/feed.service.ts b/src/app/core/services/feed.service.ts
@@ -42,7 +42,6 @@ export class FeedService {
     const headers = !isAuthenticated ? {} : this.headers;
     return this.http.get<IResponseFeed>(url, headers)
       .pipe(map(resp => this.mapInUserResource(resp.feeds) as Feed[]));
-
   }
 
   getFeed(id: string): Observable<Feed> {
@@ -57,6 +56,11 @@ export class FeedService {
       .pipe(map((resp) => this.mapInUserResource(resp.feeds) as Feed[]));
   }
 
+  searchFeeds(skip = 0, limit = 10, query: string): Observable<Feed[]> {
+    const url = `${base_url}/feed/search?skip=${skip}&limit=${limit}&q=${query}`;
+    return this.http.get<IResponseFeed>(url).pipe(map(resp => resp.feeds));
+  }
+
   private mapInUserResource(feeds: Feed[] | Feed): Feed[] | Feed {
     const userActive = this.authService.getUserActive;
     if(userActive) {

diff --git a/src/app/features/features.module.ts b/src/app/features/features.module.ts
@@ -10,6 +10,7 @@ import { WebsiteModule } from './website/website.module';
 import { AuthModule } from 'app/auth/auth.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { HomeModule } from './home/home.module';
+import { SearchModule } from './search/search.module';
 import { SettingsModule } from './settings/settings.module';
 
 @NgModule({
@@ -25,7 +26,8 @@ import { SettingsModule } from './settings/settings.module';
     AuthModule,
     HomeModule,
     SharedModule,
-    SettingsModule
+    SettingsModule,
+    SearchModule
   ]
 })
 export class FeaturesModule { }
diff --git a/src/app/features/features.routing.ts b/src/app/features/features.routing.ts
@@ -22,6 +22,11 @@ const routes: Routes = [
     path: 'settings',
     component: FeaturesComponent,
     loadChildren: () => import('./settings/settings.routing').then(m => m.SettingsRoutingModule),
+  },
+  {
+    path: 'search',
+    component: FeaturesComponent,
+    loadChildren: () => import('./search/search.routing').then(m => m.SearchRoutingModule),
   }
 ];
 

diff --git a/src/app/features/feed/pages/feed/feed.component.ts b/src/app/features/feed/pages/feed/feed.component.ts
@@ -31,10 +31,10 @@ export class FeedComponent implements OnInit {
     this.saveFeedSub.pipe(
       debounceTime(250))
       .subscribe((idFeed) => this.updatePreferences(idFeed)
-    );
-  }
+      );
+    }
 
-  ngOnInit(): void {
+    ngOnInit(): void {
     this.activatedRoute.params.subscribe(({ feedID }) => this.loadData(feedID));
   }
 

diff --git a/src/app/features/home/home.component.css b/src/app/features/home/home.component.css
@@ -13,6 +13,18 @@
   margin-top: 0.5rem;
 }
 
+.top-search {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  width: inherit;
+  min-height: 70px;
+}
+
+.top-search app-search-input {
+  width: 100%;
+}
+
 @media (max-width: 1200px) {
   .home-section .recently .news {
     grid-template-columns: repeat(1, 100%);

diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
@@ -19,6 +19,9 @@
     </div>
   </section>
   <section class="websites">
+    <div class="top-search">
+      <app-search-input (search)="search($event)"></app-search-input>
+    </div>
     <app-card-websites-a *ngIf="isLoading"></app-card-websites-a>
     <app-websites-card *ngIf="!isLoading" [websites]="websites"></app-websites-card>
   </section>

diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { debounceTime, forkJoin, map, Observable, Subject, Subscription } from 'rxjs';
+import { Router } from '@angular/router';
 
 import { Feed } from '@models/feed.model';
 import { Website } from '@models/website.model';
@@ -17,20 +18,17 @@ export class HomeComponent implements OnInit, OnDestroy {
   private loadingNews: Subject<boolean> = new Subject();
   public isLoading: boolean = true;
   private isAuthenticated: boolean = false;
-
   private skip: number = 0;
   private limit: number = 10;
-
   public websites: Website[] = [];
   public feeds: Feed[] = [];
   public recentFeed: Feed;
-
   private isAuthenticatedSub: Subscription;
-
   constructor(
     private feedService: FeedService,
     private websiteService: WebsiteService,
     private authService: AuthService,
+    private router: Router
   ) {
     this.loadingNews.pipe(debounceTime(1000)).subscribe(() => this.getDataInitial());
    }
@@ -79,11 +77,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   private setRecentFeed(index: number): void {
     if(index < this.feeds.length) {
       const item = this.feeds[index];
-      if(!item.image || item.image === '') {
-        return this.setRecentFeed(index + 1);
-      } else {
-        this.recentFeed = item;
-      }
+      (!item.image || item.image === '') ? this.setRecentFeed(index + 1): this.recentFeed = item;
     }
   }
 
@@ -92,7 +86,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   onScroll() {
-    this. skip += this.limit;
+    this.skip += this.limit;
     if(!this.isAuthenticated && this.skip >= this.limit) {
       return this.authService.showModalAuth('init');
     }
@@ -103,4 +97,8 @@ export class HomeComponent implements OnInit, OnDestroy {
     return this.skip;
   }
 
+  search(value: string): void {
+    this.router.navigate(['/search'], { queryParams: { q: value } });
+  }
+
 }
diff --git a/src/app/features/search/pages/search/search.component.css b/src/app/features/search/pages/search/search.component.css
@@ -0,0 +1,36 @@
+.search-section {
+  max-width: calc(100% - 300px);
+}
+
+.search-wrapper {
+  margin: 0.5rem 1rem;
+}
+
+.title-wrapper {
+  justify-content: flex-end;
+}
+
+.title-wrapper app-search-input {
+  width: 55%;
+}
+
+@media (max-width: 1200px) {
+  .search-section {
+    max-width: 85%;
+  }
+}
+
+@media (max-width: 900px) {
+  .search-section {
+    max-width: 100%;
+  }
+  .title-wrapper app-search-input {
+    width: 75%;
+  }
+}
+
+@media (max-width: 480px) {
+  .title-wrapper app-search-input {
+    width: 100%;
+  }
+}
diff --git a/src/app/features/search/pages/search/search.component.html b/src/app/features/search/pages/search/search.component.html
@@ -0,0 +1,16 @@
+<section class="search-section">
+  <div class="title-wrapper">
+    <app-search-input [value]="getQueryValue" (search)="resetQuery($event)"></app-search-input>
+  </div>
+  <div class="search-wrapper">
+    <div class="skeletons" *ngIf="isLoading">
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+      <app-card-new></app-card-new>
+    </div>
+    <app-no-feeds *ngIf="!isLoading && feeds.length < 1" [messageIndex]="2"></app-no-feeds>
+    <app-news-container *ngIf="!isLoading && feeds && feeds.length > 0" [feeds]="feeds" (moreItems)="onScroll()">
+    </app-news-container>
+  </div>
+</section>