files-shopify.service.ts

import { Injectable } from '@angular/core';
import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core';
import {
  BdNodeDataImage,
  PagedData,
  shopifyHandleError,
  shopifyMapEdges,
  ShopifyPagedResponse,
} from '@builder-lib';
import { last } from 'lodash-es';
import { from, map, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ShopifyFile, ShopifyFilesById } from '../../../models';
import { FilesShopifyUploadService } from './files-shopify-upload.service';

@Injectable({
  providedIn: 'root',
})
export class FilesShopifyService {
  public client: ApolloClient<any>;

  constructor(private _filesShopifyUpload: FilesShopifyUploadService) {
    const link = createHttpLink({
      uri: '/api/shopify/admin/api/2022-01/graphql.json',
      headers: {
        'X-Shopify-Access-Token': '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',
      },
    });
    this.client = new ApolloClient({
      link,
      cache: new InMemoryCache({ addTypename: true }),
    });
  }

  public deleteFiles(ids: string[]): Observable<any> {
    const mutation = gql`
      mutation fileDelete($fileIds: [ID!]!) {
        fileDelete(fileIds: $fileIds) {
          deletedFileIds
          userErrors {
            field
            message
          }
        }
      }
    `;
    return from(
      this.client.mutate({
        mutation,
        variables: {
          fileIds: ids,
        },
      }),
    ).pipe(tap(shopifyHandleError));
  }

  public fetchFiles(count: number, cursor: string): Observable<PagedData<BdNodeDataImage[]>> {
    const query = gql`
      query files($count: Int, $cursor: String) {
        files(first: $count, after: $cursor, sortKey: CREATED_AT, reverse: true, query: "-status:FAILED") {
          edges {
            cursor
            node {
              ... on MediaImage {
                id
                image {
                  height
                  width
                  url
                }
              }
              __typename
            }
          }
          pageInfo {
            hasNextPage
          }
        }
      }
    `;
    return from(this.client.query({ query, variables: { count, cursor } })).pipe(
      tap(shopifyHandleError),
      map((resp: ShopifyPagedResponse<ShopifyFile>) => {
        const images = shopifyMapEdges({ ...resp.data['files'] });
        const data = images
          .filter((image) => !!image?.image)
          .map(
            (image) =>
              ({
                imageId: image.id,
                imageUrl: image.image.url,
                maxWidth: image.image.width,
                maxHeight: image.image.height,
              } as BdNodeDataImage),
          );
        const pageMark = last(resp.data['files'].edges)?.cursor;
        const hasNextPage = resp.data['files'].pageInfo?.hasNextPage;
        return Object.freeze({ data, pageMark, hasNextPage });
      }),
    );
  }

  public fetchFilesById(ids: string[]): Observable<BdNodeDataImage[]> {
    const query = gql`
      query particularImages($ids: [ID!]!) {
        nodes(ids: $ids) {
          ... on MediaImage {
            id
            image {
              height
              width
              url
            }
          }
          __typename
        }
      }
    `;
    return from(this.client.query({ query, variables: { ids }, fetchPolicy: 'no-cache' })).pipe(
      tap(shopifyHandleError),
      map((resp: ShopifyFilesById) => {
        return resp.data.nodes.map(
          (image) =>
            Object.freeze({
              imageId: image.id,
              imageUrl: image.image?.url,
              maxWidth: image.image?.width,
              maxHeight: image.image?.height,
            }) as BdNodeDataImage,
        );
      }),
    );
  }

  public uploadFiles(files: File[]): Observable<BdNodeDataImage[]> {
    return this._filesShopifyUpload.uploadFiles(this.client, files);
  }
}