2060 create a new api key (#2206)

* Add folder for api settings

* Init create api key page

* Update create api key page

* Implement api call to create apiKey

* Add create api key mutation

* Get id when creating apiKey

* Display created Api Key

* Add delete api key button

* Remove button from InputText

* Update stuff

* Add test for ApiDetail

* Fix type

* Use recoil instead of router state

* Remane route paths

* Remove online return

* Move and test date util

* Remove useless Component

* Rename ApiKeys paths

* Rename ApiKeys files

* Add input text info testing

* Rename hooks to webhooks

* Remove console error

* Add tests to reach minimum coverage

front/src/utils/__tests__/date-utils.test.ts

@@ -2,6 +2,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { DateTime } from 'luxon';
 
 import {
+  beautifyDateDiff,
   beautifyExactDate,
   beautifyExactDateTime,
   beautifyPastDateAbsolute,
@@ -237,3 +238,47 @@ describe('hasDatePassed', () => {
     expect(result).toEqual(false);
   });
 });
+
+describe('beautifyDateDiff', () => {
+  it('should return the correct date diff', () => {
+    const date = '2023-11-05T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('4 days');
+  });
+  it('should return the correct date diff for large diff', () => {
+    const date = '2033-11-05T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('10 years and 4 days');
+  });
+  it('should return the correct date for negative diff', () => {
+    const date = '2013-11-05T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('-9 years and -361 days');
+  });
+  it('should return the correct date diff for large diff', () => {
+    const date = '2033-11-01T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('10 years');
+  });
+  it('should return the proper english date diff', () => {
+    const date = '2024-11-02T00:00:00.000Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('1 year and 1 day');
+  });
+  it('should round date diff', () => {
+    const date = '2024-11-03T14:04:43.421Z';
+    const dateToCompareWith = '2023-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date, dateToCompareWith);
+    expect(result).toEqual('1 year and 2 days');
+  });
+  it('should compare to now', () => {
+    const date = '2200-11-01T00:00:00.000Z';
+    const result = beautifyDateDiff(date);
+    expect(result).toContain('years');
+  });
+});

front/src/utils/date-utils.ts

@@ -108,3 +108,17 @@ export const hasDatePassed = (date: Date | string | number) => {
     return false;
   }
 };
+
+export const beautifyDateDiff = (date: string, dateToCompareWith?: string) => {
+  const dateDiff = DateTime.fromISO(date).diff(
+    dateToCompareWith ? DateTime.fromISO(dateToCompareWith) : DateTime.now(),
+    ['years', 'days'],
+  );
+  let result = '';
+  if (dateDiff.years) result = result + `${dateDiff.years} year`;
+  if (![0, 1].includes(dateDiff.years)) result = result + 's';
+  if (dateDiff.years && dateDiff.days) result = result + ' and ';
+  if (dateDiff.days) result = result + `${Math.floor(dateDiff.days)} day`;
+  if (![0, 1].includes(dateDiff.days)) result = result + 's';
+  return result;
+};