refactor: use lodash for grouping & uniq (#172)

davidlj95 · Nov 9, 2023 · f289cd3 · f289cd3
1 parent 1769631
commit f289cd3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 53 deletions.
diff --git 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<ImagesByGroups> {
     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
@@ -1,16 +1,14 @@
 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)
 
   private constructor(public readonly pxList: ReadonlyArray<number>) {}
 
   static from(list: ReadonlyArray<number>): 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
@@ -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<ProjectImageAsset>
-    >()
-    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<ProjectImageAsset>
-          >()
-          // 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)) {