Group titles in UI use friendly dates when enabled

ransome1 · Jul 10, 2024 · 7496de2 · 7496de2
1 parent 05b66ae
commit 7496de2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/renderer/Grid/Grid.tsx b/src/renderer/Grid/Grid.tsx
@@ -100,6 +100,7 @@ const GridComponent: React.FC<GridComponentProps> = memo(({
         return (
           <React.Fragment key={group.title}>
             <Group
+              settings={settings}
               title={group.title}
               todotxtAttribute={settings.sorting[0].value}
               filters={filters}

diff --git a/src/renderer/Grid/Group.tsx b/src/renderer/Grid/Group.tsx
@@ -2,25 +2,58 @@ import React, { memo } from 'react';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
+import dayjs from 'dayjs';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import { friendlyDate } from 'renderer/Shared';
+import type { i18n } from 'renderer/Settings/LanguageSelector';
+import { type WithTranslation, withTranslation } from 'react-i18next';
+import { getDateAttributes } from 'main/modules/Attributes';
+dayjs.extend(updateLocale);
 
-interface GroupProps {
+interface FormatGroupElementProps {
+  groupElement: string;
+  settings: Settings;
+  t: typeof i18n.t;
+  todotxtAttribute: string;
+}
+
+function formatGroupElement({ groupElement, settings, t, todotxtAttribute }: FormatGroupElementProps) {
+  // If group element is a date, then format according to user preferences
+  const dateAttributeKeys = Object.keys(getDateAttributes());
+  if (
+    dateAttributeKeys.includes(todotxtAttribute)
+      && dayjs(groupElement).isValid()
+      && settings.useHumanFriendlyDates
+  ) {
+    return friendlyDate(groupElement, todotxtAttribute, t).pop();
+  }
+
+  // No transformation required: display as-is
+  return groupElement;
+}
+
+interface GroupProps extends WithTranslation {
+  settings: Settings;
   title: string | string[];
   todotxtAttribute: string;
   filters: Filters | null;
   onClick: Function;
+  t: typeof i18n.t;
 }
 
-const Group: React.FC<GroupProps> = memo(({ title, todotxtAttribute, filters, onClick }) => {
-
+const Group: React.FC<GroupProps> = memo(({ settings, t, title, todotxtAttribute, filters, onClick }) => {
   if (!title || title.length === 0) {
     return <ListItem className="row group"><Divider /></ListItem>;
   }
 
   const groupElements = (typeof title === 'string') ? [title] : title
+  const formattedGroupElements = groupElements.map(
+    (groupElement) => formatGroupElement({ groupElement, settings, t, todotxtAttribute })
+  );
 
   return (
     <ListItem className="row group">
-      {groupElements.map((groupElement, index) => {
+      {formattedGroupElements.map((groupElement, index) => {
         const selected: boolean = filters && (filters[todotxtAttribute as keyof Filters] || []).some(
           (filter: Filter) => filter && filter.name === groupElement.trim()
         );
@@ -41,4 +74,4 @@ const Group: React.FC<GroupProps> = memo(({ title, todotxtAttribute, filters, on
   );
 });
 
-export default Group;
+export default withTranslation()(Group);