From f289cd38f1c1faa4522e982baab85d6a3817a137 Mon Sep 17 00:00:00 2001 From: David LJ Date: Thu, 9 Nov 2023 18:32:35 +0100 Subject: [PATCH] refactor: use lodash for grouping & uniq (#172) --- ...project-list-item-extra-data-generator.mts | 14 ++--- .../images/responsive-image-breakpoints.ts | 6 +- .../project-assets-collections.service.ts | 62 +++++++------------ 3 files changed, 29 insertions(+), 53 deletions(-) diff --git a/scripts/src/project-list-item-extra-data-generator.mts b/scripts/src/project-list-item-extra-data-generator.mts index 9c1abcab..188234d8 100644 --- a/scripts/src/project-list-item-extra-data-generator.mts +++ b/scripts/src/project-list-item-extra-data-generator.mts @@ -6,7 +6,7 @@ import { Log } from './log.mjs' import { Project } from '../../src/app/projects/project.js' import previewJson from '../../src/data/assets-collections/preview.json' assert { type: 'json' } import projectImageAssetPkg from '../../src/app/projects/project-page/project-image-asset.js' -import { isEmpty, isUndefined } from 'lodash-es' +import { groupBy, isEmpty, isUndefined } from 'lodash-es' const { ProjectImageAsset } = projectImageAssetPkg @@ -40,14 +40,12 @@ export class ProjectListItemExtraDataGenerator { private async getImagesByGroups(): Promise { if (isUndefined(this._imagesByGroups)) { const images = await this.getImages() - const preview: ImageAsset[] = [] - const others: ImageAsset[] = [] - for (const image of images) { - this.isPreviewImage(image) ? preview.push(image) : others.push(image) - } this._imagesByGroups = { - preview, - others, + preview: [], + others: [], + ...groupBy(images, (image): keyof ImagesByGroups => + this.isPreviewImage(image) ? 'preview' : 'others', + ), } } return this._imagesByGroups diff --git a/src/app/common/images/responsive-image-breakpoints.ts b/src/app/common/images/responsive-image-breakpoints.ts index 0936151d..bc004cf4 100644 --- a/src/app/common/images/responsive-image-breakpoints.ts +++ b/src/app/common/images/responsive-image-breakpoints.ts @@ -1,5 +1,6 @@ import { ResponsiveImageBreakpointsReducer } from './responsive-image-breakpoints-reducer' import { HtmlNgSrcSetAttribute } from '../html/html-ng-src-set-attribute' +import { uniq } from 'lodash-es' export class ResponsiveImageBreakpoints { public readonly ngSrcSet = new HtmlNgSrcSetAttribute(this) @@ -7,10 +8,7 @@ export class ResponsiveImageBreakpoints { private constructor(public readonly pxList: ReadonlyArray) {} static from(list: ReadonlyArray): ResponsiveImageBreakpoints { - const uniqueBreakpointPxs = new Set(list) - const sortedUniqueBreakpointPxs = Array.from(uniqueBreakpointPxs).sort( - (a, b) => a - b, - ) + const sortedUniqueBreakpointPxs = uniq(list).sort((a, b) => a - b) return new this(sortedUniqueBreakpointPxs) } diff --git a/src/app/projects/project-page/project-assets-collections.service.ts b/src/app/projects/project-page/project-assets-collections.service.ts index b28149f0..0f61166a 100644 --- a/src/app/projects/project-page/project-assets-collections.service.ts +++ b/src/app/projects/project-page/project-assets-collections.service.ts @@ -17,7 +17,7 @@ import { ProjectImageAsset } from './project-image-asset' import { LookbookNameAndSlug } from '../lookbook-name-and-slug' import { AssetsCollectionSize } from './assets-collection-size' import { IMAGES_FILENAME } from '../../common/files' -import { isEmpty } from 'lodash-es' +import { groupBy, isEmpty } from 'lodash-es' @Injectable() export class ProjectAssetsCollectionsService { @@ -128,47 +128,25 @@ export class ProjectAssetsCollectionsService { const projectImageAssets = imageAssets.map( (imageAsset) => new ProjectImageAsset(imageAsset, slug), ) - const projectImageAssetsByCollectionSlug = new Map< - string, - ReadonlyArray - >() - for (const projectImageAsset of projectImageAssets) { - const collection = projectImageAsset.collection - const assetsInCollection = - projectImageAssetsByCollectionSlug.get(collection) ?? [] - projectImageAssetsByCollectionSlug.set(collection, [ - ...assetsInCollection, - projectImageAsset, - ]) - } + const projectImageAssetsByCollectionSlug = groupBy( + projectImageAssets, + (projectImageAsset) => projectImageAsset.collection, + ) const assetCollections: ImageAssetsCollection[] = [] for (const assetCollection of this.assetsCollectionsData) { - const projectImageAssets = projectImageAssetsByCollectionSlug.get( - assetCollection.slug, - ) + const projectImageAssets = + projectImageAssetsByCollectionSlug[assetCollection.slug] if (!isEmpty(projectImageAssets)) { if (assetCollection.slug === this.lookbookCollectionSlug) { - const projectImageAssetsBySubcollectionSlug = new Map< - string, - ReadonlyArray - >() - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - for (const projectImageAsset of projectImageAssets!) { - const subCollection = projectImageAsset.subCollection - const assetsInCollection = - projectImageAssetsBySubcollectionSlug.get(subCollection) ?? [] - projectImageAssetsBySubcollectionSlug.set(subCollection, [ - ...assetsInCollection, - projectImageAsset, - ]) - } + const projectImageAssetsBySubcollectionSlug = groupBy( + projectImageAssets, + (projectImageAsset) => projectImageAsset.subCollection, + ) const lookbookCollections: ImageAssetsCollection[] = [] let index = 1 for (const lookbookNameAndSlug of lookbookNamesAndSlugs) { const subcollectionImageAssets = - projectImageAssetsBySubcollectionSlug.get( - lookbookNameAndSlug.slug, - ) + projectImageAssetsBySubcollectionSlug[lookbookNameAndSlug.slug] if (!isEmpty(subcollectionImageAssets)) { lookbookCollections.push( new ImageAssetsCollection( @@ -180,14 +158,14 @@ export class ProjectAssetsCollectionsService { subcollectionImageAssets!.map(({ asset }) => asset), ), ) - projectImageAssetsBySubcollectionSlug.delete( - lookbookNameAndSlug.slug, - ) + delete projectImageAssetsBySubcollectionSlug[ + lookbookNameAndSlug.slug + ] index++ } } const restOfLookbookImages = Array.from( - projectImageAssetsBySubcollectionSlug.values(), + Object.values(projectImageAssetsBySubcollectionSlug), ) .flat() .map(({ asset }) => asset) @@ -203,7 +181,7 @@ export class ProjectAssetsCollectionsService { ) } assetCollections.push(...lookbookCollections) - projectImageAssetsByCollectionSlug.delete(assetCollection.slug) + delete projectImageAssetsByCollectionSlug[assetCollection.slug] } else { assetCollections.push( new ImageAssetsCollection( @@ -212,11 +190,13 @@ export class ProjectAssetsCollectionsService { projectImageAssets!.map(({ asset }) => asset), ), ) - projectImageAssetsByCollectionSlug.delete(assetCollection.slug) + delete projectImageAssetsByCollectionSlug[assetCollection.slug] } } } - const restOfImages = Array.from(projectImageAssetsByCollectionSlug.values()) + const restOfImages = Array.from( + Object.values(projectImageAssetsByCollectionSlug), + ) .flat() .map(({ asset }) => asset) if (!isEmpty(restOfImages)) {