refactor: replaced date fns with dayjs (#345)

jest/unit/components/__mocks__/token.ts

@@ -3,12 +3,19 @@
  */
 
 import { Base64 } from 'js-base64';
-import addHours from 'date-fns/addHours';
+import dayjs from 'dayjs';
 
-export function generateTokenWithTimeRange(limit = 0) {
+export function generateTokenWithTimeRange(amount = 0) {
   const payload = {
     username: 'verdaccio',
-    exp: Number.parseInt(String(addHours(new Date(), limit).getTime() / 1000), 10),
+    exp: Number.parseInt(
+      String(
+        dayjs(new Date())
+          .add(amount, 'hour')
+          .valueOf() / 1000
+      ),
+      10
+    ),
   };
   return `xxxxxx.${Base64.encode(JSON.stringify(payload))}.xxxxxx`;
 }

package.json

@@ -50,7 +50,7 @@
     "concurrently": "5.0.0",
     "cross-env": "6.0.3",
     "css-loader": "3.2.1",
-    "date-fns": "2.8.1",
+    "dayjs": "1.8.17",
     "detect-secrets": "1.0.5",
     "emotion": "10.0.23",
     "emotion-theming": "10.0.19",

src/components/Package/Package.tsx

@@ -104,7 +104,7 @@ const Package: React.FC<PackageInterface> = ({
       <OverviewItem>
         <Icon name="time" />
         <Published>{`Published on ${formatDate(time)} •`}</Published>
-        {`${formatDateDistance(time)} ago`}
+        {formatDateDistance(time)}
       </OverviewItem>
     );
 

src/components/UpLinks/UpLinks.tsx

@@ -31,7 +31,7 @@ const UpLinks: React.FC = () => {
             <ListItem key={name}>
               <ListItemText>{name}</ListItemText>
               <Spacer />
-              <ListItemText>{`${formatDateDistance(uplinks[name].fetched)} ago`}</ListItemText>
+              <ListItemText>{formatDateDistance(uplinks[name].fetched)}</ListItemText>
             </ListItem>
           ))}
       </List>

src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap

@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">a year ago</span></div></li></ul>"`;

src/components/Versions/VersionsHistoryList.tsx

@@ -25,7 +25,7 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
             <ListItemText>{version}</ListItemText>
           </StyledLink>
           <Spacer />
-          <ListItemText>{time[version] ? `${formatDateDistance(time[version])} ago` : NOT_AVAILABLE}</ListItemText>
+          <ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
         </ListItem>
       ))}
   </List>

src/utils/package.test.ts

@@ -71,7 +71,7 @@ describe('formatDateDistance', (): void => {
     const date2 = dateTwoMonthsAgo();
     // FIXME: we need to review this expect, fails every x time.
     // expect(formatDateDistance(date1)).toEqual('about 2 months');
-    expect(formatDateDistance(date2)).toEqual('2 months');
+    expect(formatDateDistance(date2)).toEqual('2 months ago');
   });
 });
 

src/utils/package.ts

@@ -2,12 +2,15 @@ import { isObject } from 'util';
 
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
-import format from 'date-fns/format';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { Time } from '../../types/packageMeta';
 
-export const TIMEFORMAT = 'dd.MM.yyyy, HH:mm:ss';
+export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss';
+
+dayjs.extend(relativeTime);
 
 /**
  * Formats license field for webui.
@@ -52,11 +55,11 @@ export function formatRepository(repository: any): string | null {
 }
 
 export function formatDate(lastUpdate: string | number): string {
-  return format(new Date(lastUpdate), TIMEFORMAT);
+  return dayjs(new Date(lastUpdate)).format('DD.MM.YYYY, HH:mm:ss');
 }
 
 export function formatDateDistance(lastUpdate: Date | string | number): string {
-  return formatDistanceToNow(new Date(lastUpdate));
+  return dayjs(new Date(lastUpdate)).fromNow();
 }
 
 /**

yarn.lock

@@ -4760,16 +4760,16 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-fns@2.8.1, date-fns@^2.0.1:
-  version "2.8.1"
-  resolved "https://registry.verdaccio.org/date-fns/-/date-fns-2.8.1.tgz#2109362ccb6c87c3ca011e9e31f702bc09e4123b"
-  integrity sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg==
-
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.verdaccio.org/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.0.1:
+  version "2.8.1"
+  resolved "https://registry.verdaccio.org/date-fns/-/date-fns-2.8.1.tgz#2109362ccb6c87c3ca011e9e31f702bc09e4123b"
+  integrity sha512-EL/C8IHvYRwAHYgFRse4MGAPSqlJVlOrhVYZ75iQBKrnv+ZedmYsgwH3t+BCDuZDXpoo07+q9j4qgSSOa7irJg==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.verdaccio.org/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"