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();
 };

src/routes/chat/GuestSessionList/Session.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import { useState, useEffect, FC } from "react";
-import dayjs from "dayjs";
 import clsx from "clsx";
 import { renderPreviewMessage } from "../../chat/utils";
 import Avatar from "../../../common/component/Avatar";
 import { NavLink } from "react-router-dom";
 import { useAppSelector } from "../../../app/store";
+import { fromNowTime } from "../../../common/utils";
 
 interface IProps {
   id: number;
@@ -49,7 +49,7 @@ const Session: FC<IProps> = ({ id, mid }) => {
               {name}
             </span>
             <span className="text-xs text-gray-600 max-w-[80px] truncate">
-              {previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
+              {fromNowTime(previewMsg.created_at)}
             </span>
           </div>
           <div className="flex items-center justify-between">

src/routes/chat/SessionList/Session.tsx

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { useState, useEffect, FC } from "react";
 import clsx from "clsx";
-import dayjs from "dayjs";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { useNavigate, NavLink } from "react-router-dom";
@@ -13,6 +12,7 @@ import IconLock from "../../../assets/icons/lock.svg";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import useUploadFile from "../../../common/hook/useUploadFile";
 import { useAppSelector } from "../../../app/store";
+import { fromNowTime } from "../../../common/utils";
 
 interface IProps {
   type?: "user" | "channel";
@@ -135,8 +135,8 @@ const Session: FC<IProps> = ({
                 </i>
                 {!is_public && <IconLock className="dark:fill-gray-400" />}
               </span>
-              <span className={clsx("text-xs text-gray-600 dark:text-gray-400 max-w-[80px] truncate")}>
-                {previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
+              <span className={clsx("text-xs text-gray-500 dark:text-gray-400 max-w-[80px] truncate font-semibold")}>
+                {fromNowTime(previewMsg.created_at)}
               </span>
             </div>
             <div className="flex items-center justify-between">