content: listTagsBy{Name,Uses}

4 files changed, 110 insertions, 35 deletions

diff --git a/src/content/dependencies/listArtistsByName.js b/src/content/dependencies/listArtistsByName.js
index 1b93eca8..4b379bb2 100644
--- a/src/content/dependencies/listArtistsByName.js
+++ b/src/content/dependencies/listArtistsByName.js
@@ -27,7 +27,7 @@ export default {
 
       artistLinks:
         query.artists
-          .map(album => relation('linkArtist', album)),
+          .map(artist => relation('linkArtist', artist)),
     };
   },
 
diff --git a/src/content/dependencies/listTagsByName.js b/src/content/dependencies/listTagsByName.js
new file mode 100644
index 00000000..b5aa172f
--- /dev/null
+++ b/src/content/dependencies/listTagsByName.js
@@ -0,0 +1,54 @@
+import {stitchArrays} from '../../util/sugar.js';
+import {sortAlphabetically} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: ['generateListingPage', 'linkArtTag'],
+  extraDependencies: ['language', 'wikiData'],
+
+  sprawl({artTagData}) {
+    return {artTagData};
+  },
+
+  query({artTagData}, spec) {
+    return {
+      spec,
+
+      artTags:
+        sortAlphabetically(
+          artTagData
+            .filter(tag => !tag.isContentWarning)),
+    };
+  },
+
+  relations(relation, query) {
+    return {
+      page: relation('generateListingPage', query.spec),
+
+      artTagLinks:
+        query.artTags
+          .map(tag => relation('linkArtTag', tag)),
+    };
+  },
+
+  data(query) {
+    return {
+      counts:
+        query.artTags
+          .map(tag => tag.taggedInThings.length),
+    };
+  },
+
+  generate(data, relations, {language}) {
+    return relations.page.slots({
+      type: 'rows',
+      rows:
+        stitchArrays({
+          link: relations.artTagLinks,
+          count: data.counts,
+        }).map(({link, count}) => ({
+            tag: link,
+            timesUsed: language.countTimesUsed(count, {unit: true}),
+          })),
+    });
+  },
+};
diff --git a/src/content/dependencies/listTagsByUses.js b/src/content/dependencies/listTagsByUses.js
new file mode 100644
index 00000000..81b66424
--- /dev/null
+++ b/src/content/dependencies/listTagsByUses.js
@@ -0,0 +1,53 @@
+import {stitchArrays} from '../../util/sugar.js';
+import {filterByCount, sortByCount} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: ['generateListingPage', 'linkArtTag'],
+  extraDependencies: ['language', 'wikiData'],
+
+  sprawl({artTagData}) {
+    return {artTagData};
+  },
+
+  query({artTagData}, spec) {
+    const artTags = artTagData.filter(tag => !tag.isContentWarning);
+    const counts = artTags.map(tag => tag.taggedInThings.length);
+
+    filterByCount(artTags, counts);
+    sortByCount(artTags, counts, {greatestFirst: true});
+
+    return {spec, artTags, counts};
+  },
+
+  relations(relation, query) {
+    return {
+      page: relation('generateListingPage', query.spec),
+
+      artTagLinks:
+        query.artTags
+          .map(tag => relation('linkArtTag', tag)),
+    };
+  },
+
+  data(query) {
+    return {
+      counts:
+        query.artTags
+          .map(tag => tag.taggedInThings.length),
+    };
+  },
+
+  generate(data, relations, {language}) {
+    return relations.page.slots({
+      type: 'rows',
+      rows:
+        stitchArrays({
+          link: relations.artTagLinks,
+          count: data.counts,
+        }).map(({link, count}) => ({
+            tag: link,
+            timesUsed: language.countTimesUsed(count, {unit: true}),
+          })),
+    });
+  },
+};
diff --git a/src/listing-spec.js b/src/listing-spec.js
index 4853f812..4dea3b3e 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -415,47 +415,15 @@ listingSpec.push(listTracksWithProperty('midiProjectFiles', {
 listingSpec.push({
   directory: 'tags/by-name',
   stringsKey: 'listTags.byName',
+  contentFunction: 'listTagsByName',
   featureFlag: 'enableArtTagUI',
-
-  data: ({wikiData: {artTagData}}) =>
-    sortAlphabetically(
-      artTagData
-        .filter(tag => !tag.isContentWarning)
-        .map(tag => ({
-          tag,
-          timesUsed: tag.taggedInThings.length,
-
-          // For sortAlphabetically!
-          directory: tag.directory,
-          name: tag.name,
-        }))),
-
-  row: ({tag, timesUsed}, {language, link}) =>
-    language.$('listingPage.listTags.byName.item', {
-      tag: link.tag(tag),
-      timesUsed: language.countTimesUsed(timesUsed, {unit: true}),
-    }),
 });
 
 listingSpec.push({
   directory: 'tags/by-uses',
   stringsKey: 'listTags.byUses',
+  contentFunction: 'listTagsByUses',
   featureFlag: 'enableArtTagUI',
-
-  data: ({wikiData: {artTagData}}) =>
-    artTagData
-      .filter(tag => !tag.isContentWarning)
-      .map(tag => ({
-        tag,
-        timesUsed: tag.taggedInThings.length
-      }))
-      .sort((a, b) => b.timesUsed - a.timesUsed),
-
-  row: ({tag, timesUsed}, {language, link}) =>
-    language.$('listingPage.listTags.byUses.item', {
-      tag: link.tag(tag),
-      timesUsed: language.countTimesUsed(timesUsed, {unit: true}),
-    }),
 });
 
 function listAdditionalFilesInProperty(property, {