2 files changed, 79 insertions, 21 deletions
diff --git a/src/content/dependencies/listGroupsByLatestAlbum.js b/src/content/dependencies/listGroupsByLatestAlbum.js
new file mode 100644
index 00000000..0d2ee5c2
--- /dev/null
+++ b/src/content/dependencies/listGroupsByLatestAlbum.js
@@ -0,0 +1,78 @@
+import {stitchArrays} from '../../util/sugar.js';
+
+import {
+  compareDates,
+  filterMultipleArrays,
+  sortChronologically,
+  sortMultipleArrays,
+} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: [
+    'generateListingPage',
+    'linkAlbum',
+    'linkGroup',
+    'linkGroupGallery',
+  ],
+
+  extraDependencies: ['language', 'wikiData'],
+
+  sprawl({groupData}) {
+    return {groupData};
+  },
+
+  query({groupData}, spec) {
+    const groups = sortChronologically(groupData.slice());
+
+    const albums =
+      groups
+        .map(group =>
+          sortChronologically(
+            group.albums.filter(album => album.date),
+            {latestFirst: true}))
+        .map(albums => albums[0]);
+
+    filterMultipleArrays(groups, albums, (group, album) => album);
+
+    const dates = albums.map(album => album.date);
+
+    // Note: After this sort, the groups/dates arrays are misaligned with
+    // albums. That's OK only because we aren't doing anything further with
+    // the albums array.
+    sortMultipleArrays(groups, dates,
+      (groupA, groupB, dateA, dateB) =>
+        compareDates(dateA, dateB, {latestFirst: true}));
+
+    return {spec, groups, dates};
+  },
+
+  relations(relation, query) {
+    return {
+      page: relation('generateListingPage', query.spec),
+
+      groupLinks:
+        query.groups
+          .map(group => relation('linkGroup', group)),
+    };
+  },
+
+  data(query) {
+    return {
+      dates: query.dates,
+    };
+  },
+
+  generate(data, relations, {language}) {
+    return relations.page.slots({
+      type: 'rows',
+      rows:
+        stitchArrays({
+          groupLink: relations.groupLinks,
+          date: data.dates,
+        }).map(({groupLink, date}) => ({
+            group: groupLink,
+            date: language.formatDate(date),
+          })),
+    });
+  },
+};
diff --git a/src/listing-spec.js b/src/listing-spec.js
index 5e03cc17..4853f812 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -124,28 +124,8 @@ listingSpec.push({
 listingSpec.push({
   directory: 'groups/by-latest-album',
   stringsKey: 'listGroups.byLatest',
+  contentFunction: 'listGroupsByLatestAlbum',
   featureFlag: 'enableGroupUI',
-
-  data: ({wikiData: {groupData}}) =>
-    sortChronologically(
-      groupData
-        .map(group => {
-          const albums = group.albums.filter(a => a.date);
-          return !empty(albums) && {
-            group,
-            directory: group.directory,
-            name: group.name,
-            date: albums[albums.length - 1].date,
-          };
-        })
-        .filter(Boolean),
-      {latestFirst: true}),
-
-  row: ({group, date}, {language, link}) =>
-    language.$('listingPage.listGroups.byLatest.item', {
-      group: link.groupInfo(group),
-      date: language.formatDate(date),
-    }),
 });
 
 listingSpec.push({