From 42e5753c2273fb07678c03b01152e3c0828a947b Mon Sep 17 00:00:00 2001
From: Ab30657 <amar_ronaldo30657@yahoo.com>
Date: Sat, 10 Apr 2021 13:05:01 +0545
Subject: minor improvements

---
 src/web/src/app/home/home.component.html           |  2 +-
 src/web/src/app/movie-tv.service.ts                |  6 +--
 src/web/src/app/search-bar/search-bar.component.ts | 20 ++++-----
 .../src/app/search-item/search-item.component.css  | 14 ++++++
 .../src/app/search-item/search-item.component.html | 50 +++++++++-------------
 .../src/app/search-item/search-item.component.ts   |  2 +
 6 files changed, 48 insertions(+), 46 deletions(-)

(limited to 'src/web')

diff --git a/src/web/src/app/home/home.component.html b/src/web/src/app/home/home.component.html
index 6d65871..d32cdaa 100644
--- a/src/web/src/app/home/home.component.html
+++ b/src/web/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="container h-100">
     <div class="row h-100">
-        <div class="offset-lg-1 offset-md-2 mt-5 col-lg-10 col-md-8 col-sm-12">
+        <div class="offset-lg-1 offset-xs-2 mt-5 col-lg-10 col-xs-8">
             <app-search-bar></app-search-bar>
         </div>
     </div>
diff --git a/src/web/src/app/movie-tv.service.ts b/src/web/src/app/movie-tv.service.ts
index 3e416d4..26a0388 100644
--- a/src/web/src/app/movie-tv.service.ts
+++ b/src/web/src/app/movie-tv.service.ts
@@ -11,10 +11,6 @@ export class MovieTVService {
     constructor(private service: HttpClient) {}
 
     search(query: string) {
-        return this.service.get(this.baseUrl + query).pipe(
-            tap((response) => {
-                return response;
-            })
-        );
+        return this.service.get(this.baseUrl + query);
     }
 }
diff --git a/src/web/src/app/search-bar/search-bar.component.ts b/src/web/src/app/search-bar/search-bar.component.ts
index 8884717..29aa47d 100644
--- a/src/web/src/app/search-bar/search-bar.component.ts
+++ b/src/web/src/app/search-bar/search-bar.component.ts
@@ -11,18 +11,15 @@ import { MovieTVService } from '../movie-tv.service';
 })
 export class SearchBarComponent implements OnInit {
     myControl = new FormControl();
-    keyword = 'robot';
-    isLoading: boolean;
     color: ThemePalette = 'accent';
+    isLoading: boolean;
     options;
-    baseUrl =
-        'https://api.themoviedb.org/3/search/movie?api_key=b745fd575abc6a839db385885fb2aee0&query=';
-    hasItems: boolean = true;
-    isEmpty: boolean = false;
+    hasItems = true;
+    isEmpty = false;
 
-    constructor(private movieservice: MovieTVService) {}
+    constructor(private tmdbService: MovieTVService) {}
 
-    ngOnInit(): void {
+    ngOnInit() {
         this.myControl.valueChanges
             .pipe(
                 debounceTime(1000),
@@ -30,9 +27,9 @@ export class SearchBarComponent implements OnInit {
                 switchMap((value) => {
                     if (value) {
                         this.isEmpty = false;
-                        return this.movieservice.search(value).pipe(
-                            map((response: any) =>
-                                response.results.filter(
+                        return this.tmdbService.search(value).pipe(
+                            map((values: any) =>
+                                values.results.filter(
                                     (x) => x.media_type !== 'person'
                                 )
                             ),
@@ -45,6 +42,7 @@ export class SearchBarComponent implements OnInit {
                 })
             )
             .subscribe((results: any) => {
+                console.log(results);
                 this.hasItems = true;
                 if (results.length === 0) {
                     this.hasItems = false;
diff --git a/src/web/src/app/search-item/search-item.component.css b/src/web/src/app/search-item/search-item.component.css
index e69de29..5a92152 100644
--- a/src/web/src/app/search-item/search-item.component.css
+++ b/src/web/src/app/search-item/search-item.component.css
@@ -0,0 +1,14 @@
+.example-option-img {
+    width: 70px;
+}
+
+.year-wrapper {
+    margin-top: 10px;
+}
+
+.year-wrapper-content {
+    background-color: white;
+    color: #3f51b5;
+    padding: 5px;
+    box-sizing: border-box;
+}
diff --git a/src/web/src/app/search-item/search-item.component.html b/src/web/src/app/search-item/search-item.component.html
index 7d43bff..59f7020 100644
--- a/src/web/src/app/search-item/search-item.component.html
+++ b/src/web/src/app/search-item/search-item.component.html
@@ -1,34 +1,26 @@
 <div class="row p-0">
-  <div class="col-md-2 text-center p-1">
-    <img class="example-option-img" [src]="getImage()" width="70px" />
-  </div>
-  <div class="searchitem-text col-md-8">
-    <div class="movie-title font-weight-bold text-uppercase">
-      {{ getTitle() }}
+    <div class="col-md-2 col-sm-2 text-center p-1">
+        <img [src]="getImage()" alt="Not Found" class="example-option-img" />
     </div>
-    <div class="pubYear" style="margin-top: 10px">
-      <strong></strong>
-
-      <small
-        style="
-          background-color: white;
-          color: #3f51b5;
-          padding: 5px;
-          box-sizing: border-box;
-        "
-        >{{ getYear() }} | {{ model.media_type | titlecase }}</small
-      >
+    <div class="search-item-text col-sm-8 col-md-8">
+        <div class="movie-title font-weight-bold text-uppercase">
+            {{ getTitle() }}
+        </div>
+        <div class="year-wrapper">
+            <small class="year-wrapper-content">
+                {{ getYear() }} | {{ model.media_type | titlecase }}
+            </small>
+        </div>
     </div>
-  </div>
-  <div class="rating col-md-2 pl-0 pr-1">
-    <span class="material-icons mt-3"> star_rate </span>
-    <div class="" style="line-height: 0.9rem">
-      <strong
-        >{{ getRating()
-        }}<small class="d-md-none d-lg-inline-block" *ngIf="isRated"
-          >/10</small
-        ></strong
-      >
+    <div class="rating col-sm-2 col-md-2 pl-0 pr-1">
+        <span class="material-icons mt-3">star_rate</span>
+        <div class="rating-content">
+            <strong>
+                {{ getRating() }}
+                <small class="d-sm-none d-lg-inline-block" *ngIf="isRated">
+                    /10
+                </small>
+            </strong>
+        </div>
     </div>
-  </div>
 </div>
diff --git a/src/web/src/app/search-item/search-item.component.ts b/src/web/src/app/search-item/search-item.component.ts
index f731601..cf7d7b8 100644
--- a/src/web/src/app/search-item/search-item.component.ts
+++ b/src/web/src/app/search-item/search-item.component.ts
@@ -9,9 +9,11 @@ import { Component, OnInit } from '@angular/core';
 export class SearchItemComponent implements OnInit {
     @Input() model: any;
     isRated: boolean;
+
     constructor() {}
 
     ngOnInit(): void {}
+
     getImage() {
         return 'https://image.tmdb.org/t/p/original' + this.model.poster_path;
     }
-- 
cgit v1.2.3