content: generateCommentaryEntryDate

Just moves somewhat complex logic out of the main component.

2 files changed, 83 insertions, 71 deletions

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index c148d244..b51d4315 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -2,9 +2,8 @@ import {empty} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateCommentaryEntryDate',
     'generateColorStyleAttribute',
-    'generateTextWithTooltip',
-    'generateTooltip',
     'linkArtist',
     'transformContent',
   ],
@@ -36,27 +35,15 @@ export default {
     colorStyle:
       relation('generateColorStyleAttribute'),
 
-    textWithTooltip:
-      relation('generateTextWithTooltip'),
-
-    tooltip:
-      relation('generateTooltip'),
-  }),
-
-  data: (entry) => ({
-    date: entry.date,
-    secondDate: entry.secondDate,
-    dateKind: entry.dateKind,
-
-    accessDate: entry.accessDate,
-    accessKind: entry.accessKind,
+    date:
+      relation('generateCommentaryEntryDate', entry),
   }),
 
   slots: {
     color: {validate: v => v.isColor},
   },
 
-  generate: (data, relations, slots, {html, language}) =>
+  generate: (relations, slots, {html, language}) =>
     language.encapsulate('misc.artistCommentary.entry', entryCapsule =>
       html.tags([
         html.tag('p', {class: 'commentary-entry-heading'},
@@ -106,60 +93,7 @@ export default {
                 return language.$(workingCapsule, workingOptions);
               })),
 
-            relations.textWithTooltip.slots({
-              attributes: {class: 'commentary-date'},
-
-              customInteractionCue: true,
-
-              text:
-                html.tag('time',
-                  {class: 'text-with-tooltip-interaction-cue'},
-                  {[html.onlyIfContent]: true},
-
-                  language.encapsulate(titleCapsule, 'date', workingCapsule => {
-                    const workingOptions = {};
-
-                    if (!data.date) {
-                      return html.blank();
-                    }
-
-                    const rangeNeeded =
-                      data.dateKind === 'sometime' ||
-                      data.dateKind === 'throughout';
-
-                    if (rangeNeeded && !data.secondDate) {
-                      workingOptions.date = language.formatDate(data.date);
-                      return language.$(workingCapsule, workingOptions);
-                    }
-
-                    if (data.dateKind) {
-                      workingCapsule += '.' + data.dateKind;
-                    }
-
-                    if (data.secondDate) {
-                      workingCapsule += '.range';
-                      workingOptions.dateRange =
-                        language.formatDateRange(data.date, data.secondDate);
-                    } else {
-                      workingOptions.date =
-                        language.formatDate(data.date);
-                    }
-
-                    return language.$(workingCapsule, workingOptions);
-                  })),
-
-              tooltip:
-                data.accessKind &&
-                  relations.tooltip.slots({
-                    attributes: {class: 'commentary-date-tooltip'},
-
-                    content:
-                      language.$(titleCapsule, 'date', data.accessKind, {
-                        date:
-                          language.formatDate(data.accessDate),
-                      }),
-                  }),
-            }),
+            relations.date,
           ])),
 
         html.tag('blockquote', {class: 'commentary-entry-body'},
diff --git a/src/content/dependencies/generateCommentaryEntryDate.js b/src/content/dependencies/generateCommentaryEntryDate.js
new file mode 100644
index 00000000..628bf22f
--- /dev/null
+++ b/src/content/dependencies/generateCommentaryEntryDate.js
@@ -0,0 +1,78 @@
+export default {
+  contentDependencies: ['generateTextWithTooltip', 'generateTooltip'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, _entry) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
+  }),
+
+  data: (entry) => ({
+    date: entry.date,
+    secondDate: entry.secondDate,
+    dateKind: entry.dateKind,
+
+    accessDate: entry.accessDate,
+    accessKind: entry.accessKind,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('misc.artistCommentary.entry.title', titleCapsule =>
+      relations.textWithTooltip.slots({
+        attributes: {class: 'commentary-date'},
+
+        customInteractionCue: true,
+
+        text:
+          html.tag('time',
+            {class: 'text-with-tooltip-interaction-cue'},
+            {[html.onlyIfContent]: true},
+
+            language.encapsulate(titleCapsule, 'date', workingCapsule => {
+              const workingOptions = {};
+
+              if (!data.date) {
+                return html.blank();
+              }
+
+              const rangeNeeded =
+                data.dateKind === 'sometime' ||
+                data.dateKind === 'throughout';
+
+              if (rangeNeeded && !data.secondDate) {
+                workingOptions.date = language.formatDate(data.date);
+                return language.$(workingCapsule, workingOptions);
+              }
+
+              if (data.dateKind) {
+                workingCapsule += '.' + data.dateKind;
+              }
+
+              if (data.secondDate) {
+                workingCapsule += '.range';
+                workingOptions.dateRange =
+                  language.formatDateRange(data.date, data.secondDate);
+              } else {
+                workingOptions.date =
+                  language.formatDate(data.date);
+              }
+
+              return language.$(workingCapsule, workingOptions);
+            })),
+
+        tooltip:
+          data.accessKind &&
+            relations.tooltip.slots({
+              attributes: {class: 'commentary-date-tooltip'},
+
+              content:
+                language.$(titleCapsule, 'date', data.accessKind, {
+                  date:
+                    language.formatDate(data.accessDate),
+                }),
+            }),
+      })),
+}