Merge branch 'jcarstairs-scottlogic-group-elements-use-friendly-dates'

ransome1 · Aug 4, 2024 · f975507 · f975507
2 parents 6252fad + a2b0af0
commit f975507
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 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,56 @@ 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 { i18n } from 'renderer/Settings/LanguageSelector';
+import { WithTranslation, withTranslation } from 'react-i18next';
+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
+  if (
+    ['due', 't'].includes(todotxtAttribute)
+      && dayjs(groupElement).isValid()
+      && settings.useHumanFriendlyDates
+  ) {
+    return friendlyDate(groupElement, todotxtAttribute, settings, 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 +72,4 @@ const Group: React.FC<GroupProps> = memo(({ title, todotxtAttribute, filters, on
   );
 });
 
-export default Group;
+export default withTranslation()(Group);
diff --git a/src/renderer/Shared.tsx b/src/renderer/Shared.tsx
@@ -4,6 +4,7 @@ import duration from 'dayjs/plugin/duration';
 import calendar from 'dayjs/plugin/calendar';
 import weekday from 'dayjs/plugin/weekday';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { i18n } from './Settings/LanguageSelector';
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 dayjs.extend(calendar);
@@ -112,4 +113,4 @@ export const friendlyDate = (value: string, attributeKey: string, settings: Sett
   }
 
   return results;
-};
+};