diff --git a/src/renderer/Drawer/Attributes.tsx b/src/renderer/Drawer/Attributes.tsx
index 05b78b99..92b9c497 100644
--- a/src/renderer/Drawer/Attributes.tsx
+++ b/src/renderer/Drawer/Attributes.tsx
@@ -7,24 +7,17 @@ import Badge from '@mui/material/Badge';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import AirIcon from '@mui/icons-material/Air';
-import { handleFilterSelect } from '../Shared';
+import { handleFilterSelect, friendlyDate, translatedAttributes } from '../Shared';
import { withTranslation, WithTranslation } from 'react-i18next';
import { i18n } from '../Settings/LanguageSelector';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import duration from 'dayjs/plugin/duration';
-import calendar from 'dayjs/plugin/calendar';
import './Attributes.scss';
-dayjs.extend(relativeTime);
-dayjs.extend(duration);
-dayjs.extend(calendar);
+
const { store } = window.api;
interface DrawerAttributesProps extends WithTranslation {
settings: Settings;
attributes: Attributes | null;
- attributeMapping: TranslatedAttributes;
filters: Filters | null;
t: typeof i18n.t;
}
@@ -32,38 +25,24 @@ interface DrawerAttributesProps extends WithTranslation {
const DrawerAttributes: React.FC
= memo(({
settings,
attributes,
- attributeMapping,
filters,
t,
}) => {
const firstTabbableElementRef = useRef(null);
const [hovered, setHovered] = useState(null);
- const friendlyDate = (value: string) => {
- dayjs.locale(settings.language);
- return dayjs(value).calendar(null, {
- sameDay: `[${t(`drawer.attributes.today`)}]`,
- nextDay: `[${t(`drawer.attributes.tomorrow`)}]`,
- nextWeek: `[${t(`drawer.attributes.nextWeek`)}]`,
- lastDay: `[${t(`drawer.attributes.yesterday`)}]`,
- lastWeek: `[${t(`drawer.attributes.lastWeek`)}]`,
- sameElse: function () {
- return dayjs(this).fromNow();
- },
- });
- };
-
const preprocessAttributes = (attributeKey, attributes) => {
if (!attributes) {
return null;
}
+ const isDate: boolean = ['due', 't', 'completed', 'created'].includes(attributeKey);
const processedAttributes = {};
Object.keys(attributes).forEach((key) => {
if (attributes[key]) {
const count = attributes[key].count;
- const formattedValue = settings.useHumanFriendlyDates && dayjs(key).isValid() ? friendlyDate(key) : key;
+ const formattedValue = settings.useHumanFriendlyDates && isDate ? friendlyDate(key, t) : key;
if (!processedAttributes[formattedValue]) {
processedAttributes[formattedValue] = {
@@ -166,7 +145,8 @@ const DrawerAttributes: React.FC = memo(({
{!isAttributesEmpty ? (
Object.keys(attributes).map((key, index) => {
- const preprocessedAttributes = attributes[key] ? preprocessAttributes(key, attributes[key]) : attributes[key];
+ const preprocessedAttributes: Attributes = preprocessAttributes(key, attributes[key]);
+ const attributeHeadline: string = translatedAttributes(t)[key];
return Object.keys(preprocessedAttributes).length > 0 ? (
= memo(({
}>
attribute.notify))}>
- {attributeMapping[key]}
+ {attributeHeadline}
@@ -199,4 +179,4 @@ const DrawerAttributes: React.FC = memo(({
);
});
-export default withTranslation()(DrawerAttributes);
+export default withTranslation()(DrawerAttributes);
\ No newline at end of file
diff --git a/src/renderer/Drawer/Drawer.tsx b/src/renderer/Drawer/Drawer.tsx
index 765335d1..68c47a93 100644
--- a/src/renderer/Drawer/Drawer.tsx
+++ b/src/renderer/Drawer/Drawer.tsx
@@ -19,7 +19,6 @@ interface Props extends WithTranslation {
attributes: Attributes | null;
filters: Filters | null;
searchFieldRef: React.RefObject;
- attributeMapping: TranslatedAttributes;
t: typeof i18n.t;
}
@@ -28,7 +27,6 @@ const DrawerComponent: React.FC = memo(({
attributes,
filters,
searchFieldRef,
- attributeMapping,
t
}) => {
const [activeTab, setActiveTab] = useState('attributes');
@@ -97,13 +95,12 @@ const DrawerComponent: React.FC = memo(({
)}
{settings.isDrawerOpen && activeTab === 'filters' && }
{settings.isDrawerOpen && activeTab === 'sorting' && (
-
+
)}
);
diff --git a/src/renderer/Drawer/Sorting/DraggableList.tsx b/src/renderer/Drawer/Sorting/DraggableList.tsx
index e1a163c0..433d790e 100644
--- a/src/renderer/Drawer/Sorting/DraggableList.tsx
+++ b/src/renderer/Drawer/Sorting/DraggableList.tsx
@@ -7,12 +7,10 @@ const { store } = window.api;
type DraggableListProps = {
settings: Settings;
- attributeMapping: TranslatedAttributes;
};
const DraggableList: React.FC = ({
settings,
- attributeMapping,
}) => {
const [accordionOrder, setAccordionOrder] = useState(settings.sorting);
const reorder = (list: Sorting[], startIndex: number, endIndex: number): Sorting[] => {
@@ -44,7 +42,6 @@ const DraggableList: React.FC = ({
key={item.id}
settings={settings}
setAccordionOrder={setAccordionOrder}
- attributeMapping={attributeMapping}
/>
))}
{provided.placeholder}
diff --git a/src/renderer/Drawer/Sorting/DraggableListItem.tsx b/src/renderer/Drawer/Sorting/DraggableListItem.tsx
index 49aaf029..381cba25 100644
--- a/src/renderer/Drawer/Sorting/DraggableListItem.tsx
+++ b/src/renderer/Drawer/Sorting/DraggableListItem.tsx
@@ -4,22 +4,25 @@ import ListItem from '@mui/material/ListItem';
import Button from '@mui/material/Button';
import SortIcon from '@mui/icons-material/Sort';
import DragHandleIcon from '@mui/icons-material/DragHandle';
+import { withTranslation } from 'react-i18next';
+import { i18n } from '../../Settings/LanguageSelector';
+import { translatedAttributes } from '../../Shared';
import './DraggableListItem.scss';
type DraggableListItemProps = {
item: Sorting;
index: number;
settings: Settings;
- attributeMapping: TranslatedAttributes;
setAccordionOrder: React.Dispatch>;
+ t: typeof i18n.t;
};
const DraggableListItem: React.FC = ({
item,
index,
settings,
- attributeMapping,
setAccordionOrder,
+ t,
}) => {
const updatedSorting = settings.sorting.map((sortingItem: Sorting) => {
if(sortingItem.id === item.id) {
@@ -31,6 +34,8 @@ const DraggableListItem: React.FC = ({
setAccordionOrder(updatedSorting);
};
+ const attributeHeadline: string = translatedAttributes(t)[item.value];
+
return (
{(provided, snapshot) => (
@@ -42,7 +47,7 @@ const DraggableListItem: React.FC = ({
data-testid={`drawer-sorting-draggable-list-item-${item.value}`}
>
- {attributeMapping[item.value]}
+ {attributeHeadline}