Refactor code

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { VCLDrawerModule, IconResolverService } from '@vcl/ng-vcl';
+import { IconResolverService } from '@vcl/ng-vcl';
 import {
   TranslateModule,
   TranslateLoader,
@@ -22,8 +22,6 @@ import {
   LazyLoadImageModule,
   ScrollHooks,
 } from 'ng-lazyload-image';
-import { ClickStopPropagation } from './shared/click-stop-propagation.directive';
-import { HoverColorPickerDirective } from './directives/hover-color-picker-directive.service';
 import { GraphQLModule } from './graphql.module';
 import { ProductsModule } from './features/products/products.module';
 import { SharedModule } from './shared/shared.module';
@@ -35,10 +33,8 @@ export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
-const vclModules = [];
-
 @NgModule({
-  declarations: [AppComponent, ClickStopPropagation, HoverColorPickerDirective],
+  declarations: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     BrowserAnimationsModule,
@@ -60,7 +56,6 @@ const vclModules = [];
     GraphQLModule,
     OverlayModule,
     ScrollingModule,
-    ...vclModules,
     SharedModule,
   ],
   exports: [TranslateModule],

src/app/core/components/footer-top/footer-top.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-footer-top',

src/app/core/components/header/header.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-header',

src/app/core/components/top-bar/top-bar.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CartService } from 'src/app/features/cart/services/cart.service';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from '../../services/screen.service';
 
 @Component({
   selector: 'app-top-bar',

src/app/features/products/components/product-description/product-description.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 import { CartService } from 'src/app/features/cart/services/cart.service';
 
 @Component({

src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts

@@ -5,7 +5,7 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-import { ScreenService } from 'src/app/services/screen.service';
+import { ScreenService } from 'src/app/core/services/screen.service';
 import { IoRestorecommerceImageImage, IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
 
 @Component({

src/app/features/products/components/product-main/product-info/product-info.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { Decimal } from '@restorecommerce/cart/lib/model/primitives';
 import { CartService } from 'src/app/features/cart/services/cart.service';
-import { NotificationService } from 'src/app/services/notification.service';
+import { NotificationService } from 'src/app/core/services/notification.service';
 import { IItem } from '@restorecommerce/cart/lib/model/IItem';
 import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
 

src/app/features/products/components/product-main/product-main.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
-import { Product } from 'src/app/models/product';
-
 @Component({
   selector: 'app-product-main',
   templateUrl: './product-main.component.html',

src/app/features/products/components/product-navigation/product-navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-product-navigation',

src/app/features/products/components/product-recommend/product-recommend.service.ts

@@ -1,9 +1,9 @@
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 
-import * as blackSneakers from 'src/app/data/blackSneakers.json';
-import * as brownSneakers from 'src/app/data/brownSneakers.json';
-import * as whiteSneakers from 'src/app/data/whiteSneakers.json';
-import * as whiteShirt from 'src/app/data/whiteShirt.json';
+import * as blackSneakers from '../../data/blackSneakers.json';
+import * as brownSneakers from '../../data/brownSneakers.json';
+import * as whiteSneakers from '../../data/whiteSneakers.json';
+import * as whiteShirt from '../../data/whiteShirt.json';
 
 export class ProductRecommendationService {
   private color: string = 'brown';

src/app/features/products/components/product-zoom/product-zoom.component.ts

@@ -9,7 +9,7 @@ import {
   HostListener,
   AfterViewChecked,
 } from '@angular/core';
-import { ProductImage } from 'src/app/models/product';
+import { ProductImage } from '../../models/product';
 
 @Component({
   selector: 'app-product-zoom',

src/app/features/products/components/product/product.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { ScreenService } from 'src/app/services/screen.service';
 import { ProductService } from 'src/app/features/products/services/product.service';
 import { combineLatest, map, switchMap } from 'rxjs';
+import { ScreenService } from 'src/app/core/services/screen.service';
 
 @Component({
   selector: 'app-product',

src/app/features/products/models/product.ts

@@ -0,0 +1,27 @@
+export interface ProductImage {
+  src: string;
+  srcThumb: string;
+  alt: string;
+}
+
+// TODO Map BackendTypes to a More useful Frontend type.
+
+// export interface MultiColorsProductImage {
+//   [key: string]: ProductImage[];
+// }
+
+// export interface Product {
+//   id: string;
+//   title: string;
+//   description: string;
+//   price: number;
+//   isBestSeller: boolean;
+//   liked: boolean;
+//   productImageSources: MultiColorsProductImage;
+//   materialInfo: string;
+//   additionalLabel: string;
+//   selectedColor: string;
+//   colors: string[];
+//   selectedSize: number;
+//   sizes: number[];
+// }

src/app/features/products/products.module.ts

@@ -5,7 +5,7 @@ import { ShoesComponent } from './components/shoes/shoes.component';
 import { ShoesProductsComponent } from './components/shoes-products/shoes-products.component';
 import { ProductComponent } from './components/product/product.component';
 import { ProductVariantsComponent } from './components/product-variants/product-variants.component';
-import { ProductsTemplateComponent } from '../../templates/products-template/products-template.component';
+import { ProductsTemplateComponent } from './templates/products-template/products-template.component';
 import { ProductCardComponent } from './components/product-card/product-card.component';
 import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
 import { ProductInterestComponent } from './components/product-interest/product-interest.component';

src/app/features/products/services/product.service.ts

@@ -1,9 +1,6 @@
-import { Injectable, EventEmitter, OnDestroy } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable, EventEmitter } from '@angular/core';
 
-import { Product } from '../../../models/product';
-import { Product as ProductCard } from '../components/products/products.component';
-import { Subject, Subscription, map, catchError, of, tap } from 'rxjs';
+import { map, catchError, of, tap } from 'rxjs';
 import {
   IoRestorecommerceProductProduct,
   IoRestorecommerceResourcebaseFilterOperation,
@@ -13,19 +10,10 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class ProductService implements OnDestroy {
-  productImageColorHover = new Subject<string>();
-
-  sub: Subscription;
-
+export class ProductService {
   productColorChanged = new EventEmitter<string>();
 
-  constructor(private http: HttpClient, private productGQL: ProductsQueryGQL) {}
-
-  getShoe(shoeId: number | string) {
-    const url = `/assets/shoes/${shoeId}.json`;
-    return this.http.get<Product>(url);
-  }
+  constructor(private productGQL: ProductsQueryGQL) {}
 
   products$ = this.productGQL
     .fetch({
@@ -58,36 +46,4 @@ export class ProductService implements OnDestroy {
         return of([] as IoRestorecommerceProductProduct[]);
       })
     );
-
-  getShoes() {
-    this.sub = this.productGQL
-      .fetch({
-        input: {
-          offset: 0,
-          limit: 10,
-          filters: [
-            {
-              // TODO This refactor this code as In-house boilerplate code.
-              filters: [
-                {
-                  field: 'meta.owners[*].attributes[0].value',
-                  operation: IoRestorecommerceResourcebaseFilterOperation.In,
-                  value: 'r-ug',
-                },
-              ],
-            },
-          ],
-        },
-      })
-      .subscribe((response) => console.log('Products', response));
-    return this.http.get<ProductCard[]>('/assets/shoes/shoes.json');
-  }
-
-  ngOnDestroy(): void {
-    if (this.sub) {
-      this.sub.unsubscribe();
-    }
-  }
-
-  onProductColorChanged(color: string) {}
 }