refactor: fromNowTime

src/common/component/FileBox/index.tsx

@@ -1,5 +1,4 @@
 import { FC, ReactElement } from "react";
-import dayjs from "dayjs";
 import clsx from "clsx";
 import {
   VideoPreview,
@@ -9,7 +8,7 @@ import {
   CodePreview,
   DocPreview
 } from "./preview";
-import { getFileIcon, formatBytes } from "../../utils";
+import { getFileIcon, formatBytes, fromNowTime } from "../../utils";
 import IconDownload from "../../../assets/icons/download.svg";
 import { useAppSelector } from "../../../app/store";
 
@@ -95,7 +94,7 @@ const FileBox: FC<Props> = ({
           <span className="font-semibold text-sm text-gray-800 dark:text-gray-200 truncate">{name}</span>
           <em className="text-xs text-gray-500 flex gap-4 not-italic">
             <span className="size">{formatBytes(size)}</span>
-            <span className="time">{dayjs(created_at).fromNow()}</span>
+            <span className="time">{fromNowTime(created_at)}</span>
             <span>
               by <strong className="font-bold">{fromUser.name}</strong>
             </span>

src/common/component/FileMessage/index.tsx

@@ -1,11 +1,10 @@
 import { FC, useEffect, useState } from "react";
-import dayjs from "dayjs";
 import ImageMessage from "./ImageMessage";
 import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
 import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
 import Progress from "./Progress";
-import { getFileIcon, formatBytes, isImage, getImageSize } from "../../utils";
+import { getFileIcon, formatBytes, isImage, getImageSize, fromNowTime } from "../../utils";
 import { useAppSelector } from "../../../app/store";
 import IconDownload from "../../../assets/icons/download.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
@@ -167,7 +166,7 @@ const FileMessage: FC<Props> = ({
             ) : (
               <>
                 <strong>{formatBytes(size)}</strong>
-                <strong>{dayjs(created_at).fromNow()}</strong>
+                <strong>{fromNowTime(created_at)}</strong>
                 {fromUser && (
                   <strong>
                     by <strong className="font-bold">{fromUser.name}</strong>

src/common/utils.tsx

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import BASE_URL, { FILE_IMAGE_SIZE, ContentTypes, KEY_TOKEN, KEY_REFRESH_TOKEN, KEY_EXPIRE } from "../app/config";
 import IconPdf from "../assets/icons/file.pdf.svg";
 import IconAudio from "../assets/icons/file.audio.svg";
@@ -383,4 +384,10 @@ export const isDarkMode = () => {
 
   return isDarkMode || (!isLightMode && window.matchMedia('(prefers-color-scheme: dark)').matches);
 
+};
+
+export const fromNowTime = (ts?: number) => {
+  if (!ts) return null;
+  const currTS = + new Date();
+  return dayjs(ts > currTS ? currTS : ts).fromNow();
 };