christopherpholder / markets Goto Github PK

Motivation

• Improve separation of concerns by not calling a service inside another service.
• Improve testability of services as there is no master service and value service relationship.
• Improve maintainability of feature by moving the logic to the container component.

Current State

Currently linkService external-resource-link is being called inside of apiService data-access.

  addPreloadLCPLinks():void {
    this.getHighlightListings().pipe(tap((listings) => {
      if (!listings) {
        return;
      }
      for (let i = 0; i < 2; i++) {
        this.linkService.addLink({
          rel: 'preload',
          as: 'image',
          href: listings["watercrafts"][i].thumbnailUrl,
          fetchpriority: 'high'
        });
      }
    })).subscribe();
  }

  private addPreloadFetchLink(): void {
    this.linkService.addLink({
      rel: 'preload',
      as: 'fetch',
      type: 'application/json',
      href: this.apiEndpoint,
      crossorigin: ''
    });
  }

Desired State

The external-resource-link lib is not imported the apiService.

TODO

• Trace uses of external-resource-link in code base. 35#issuecomment-1412464067
• Move the addPreloadLCPLinks logic out of ApiService and into the initializeDataFactory directly.
• Move initializeDataFactory from AppModule to the data-access lib as a service.
• Move the addPreloadFetchLink logic out of getHighlightListings and into the container features or its route resolver.
• Remove external-resource-link from ApiService
• Fix apiService test

The footer banner will be part of the footer.

It will display a deferent image when on a desktop then on a mobile.

Mobile

Desktop

When loading the application on the internet the files should be compressed using Gzip and Brotli.

The files should not be compressed during transit but be compressed in their storage.

Feature overview

The details page will be accessible under the following url:

• example.com/listing-details/?:listing-id

It will pull in the listing id from the activated route.

It will fetch the data in a route resolver using the listing id

Display product not found id resolver fails

The data will be split into to sections:

1. Item details
2. Purchase details

Item details

• Title
• Images (main img specified)
• General details
  • Category
  • State (location)
  • Condition: New or used
  • Brand
  • Model
  • Year
  • Feet
  • Horse power
• Moter Details
  • Number of motors
  • Motor Brand
  • Horse Power
• Description

Purchase details

• year
• category
• Seller's Informaation
  • Name
  • Telephone
  • Email

TODOS

• Create ListingDetails type
• Add route with optional params
• Add a resolver
  • Display not found it resolver fails

TODOS

• Landing page has 3 highlight sections
• Highlight sections are divided with a line
• Highlight sections are followed by a more btn

The Landing page short display the preview section:

• Watercraft
• Products
• Services

Each section should have a different heading

• Featured Watercraft
• Featured Products
• Featured Services

Between each section there should be a separation line

eg.

Each section should contain more button under them.

eg.

For the scope of this ticket the button is none functional ...