✨ search news added

Author: marcode24

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;
   }

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>

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(['/']);
+  }
+
 }

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`
+  }
 ];

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) {

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 { }

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),
   }
 ];
 

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));
   }
 

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%);

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>