refactor: dayjs and tippy setting

src/common/DayjsSetting.ts

@@ -0,0 +1,8 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import isToday from "dayjs/plugin/isToday";
+import isYesterday from "dayjs/plugin/isYesterday";
+
+dayjs.extend(relativeTime);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);

src/common/TippySetting.ts

@@ -0,0 +1,7 @@
+import tippy, { followCursor } from "tippy.js";
+
+tippy.setDefaultProps({
+  duration: 0,
+  delay: [0, 0],
+  plugins: [followCursor]
+});

src/common/component/FileBox/index.tsx

@@ -1,6 +1,5 @@
 import { FC, ReactElement } from "react";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import Styled from "./styled";
 import {
   VideoPreview,
@@ -14,9 +13,6 @@ import { getFileIcon, formatBytes } from "../../utils";
 import IconDownload from "../../../assets/icons/download.svg";
 import { useAppSelector } from "../../../app/store";
 
-// todo: move to root file
-dayjs.extend(relativeTime);
-
 interface Data {
   file_type: string;
   name: string;

src/common/component/FileMessage/index.tsx

@@ -1,6 +1,5 @@
 import { FC, useEffect, useState } from "react";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import Styled from "./styled";
 import ImageMessage from "./ImageMessage";
 import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
@@ -8,15 +7,10 @@ import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
 import Progress from "./Progress";
 import { getFileIcon, formatBytes, isImage, getImageSize, ImageSize } from "../../utils";
-// import { ReactComponent as IconDownload } from "../../../assets/icons/download.svg";
-// import { ReactComponent as IconClose } from "../../../assets/icons/close.circle.svg";
 import { useAppSelector } from "../../../app/store";
 import IconDownload from "../../../assets/icons/download.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
 
-// todo: move to root file
-dayjs.extend(relativeTime);
-
 const isLocalFile = (content: string) => {
   return content.startsWith("blob:");
 };

src/common/component/Message/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState, useEffect, FC } from "react";
 import dayjs from "dayjs";
-import isToday from "dayjs/plugin/isToday";
+
-import isYesterday from "dayjs/plugin/isYesterday";
 import useInView from "./useInView";
 import Tippy from "@tippyjs/react";
 import Reaction from "./Reaction";
@@ -18,9 +17,6 @@ import useContextMenu from "../../hook/useContextMenu";
 import usePinMessage from "../../hook/usePinMessage";
 import { useAppSelector } from "../../../app/store";
 
-// todo: move to root file
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
 interface IProps {
   readOnly?: boolean;
   contextId: number;

src/common/component/TippyDefault.tsx

@@ -1,10 +0,0 @@
-import tippy, { followCursor } from "tippy.js";
-
-export default function TippyDefault() {
-  tippy.setDefaultProps({
-    duration: 0,
-    delay: [0, 0],
-    plugins: [followCursor]
-  });
-  return null;
-}

src/index.tsx

@@ -1,29 +1,27 @@
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import toast, { Toaster } from 'react-hot-toast';
+import toast, { Toaster } from "react-hot-toast";
-import { Reset } from 'styled-reset';
+import { Reset } from "styled-reset";
-import { DndProvider } from 'react-dnd';
+import { DndProvider } from "react-dnd";
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { HTML5Backend } from "react-dnd-html5-backend";
-import './assets/base.css';
+import "./assets/base.css";
-import 'animate.css';
+import "animate.css";
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import "./common/DayjsSetting";
-import TippyDefault from './common/component/TippyDefault';
+import "./common/TippySetting";
-import MarkdownStyleOverride from './common/component/MarkdownStyleOverride';
+import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
-import ReduxRoutes from './routes';
+import MarkdownStyleOverride from "./common/component/MarkdownStyleOverride";
-import NewVersion from './common/component/NewVersion';
+import ReduxRoutes from "./routes";
+import NewVersion from "./common/component/NewVersion";
 
-const root = ReactDOM.createRoot(
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-  document.getElementById('root') as HTMLElement
-);
 
 root.render(
   <>
-    <Reset/>
+    <Reset />
-    <Toaster/>
+    <Toaster />
-    <TippyDefault/>
     <DndProvider backend={HTML5Backend}>
-      <ReduxRoutes/>
+      <ReduxRoutes />
     </DndProvider>
-    <MarkdownStyleOverride/>
+    <MarkdownStyleOverride />
   </>
 );
 
@@ -37,9 +35,9 @@ serviceWorkerRegistration.register({
         window.location.reload();
       });
     };
-    toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate}/>, {
+    toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate} />, {
       duration: Infinity,
-      position: 'top-right'
+      position: "top-right"
     });
   }
 });

src/routes/chat/DMList/NavItem.tsx

@@ -5,14 +5,12 @@ import { useDispatch } from "react-redux";
 import { NativeTypes } from "react-dnd-html5-backend";
 
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import Tippy from "@tippyjs/react";
 import { useReadMessageMutation } from "../../../app/services/message";
 import { removeUserSession } from "../../../app/slices/message.user";
 import useNormalizeMessage from "../../../common/hook/useNormalizeMessage";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
-dayjs.extend(relativeTime);
 import { renderPreviewMessage } from "../utils";
 import User from "../../../common/component/User";
 import { ContentTypes } from "../../../app/config";

src/routes/chat/SessionList/Session.tsx

@@ -2,20 +2,16 @@ import { useState, useEffect, FC } from "react";
 import dayjs from "dayjs";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import relativeTime from "dayjs/plugin/relativeTime";
 import ContextMenu from "./ContextMenu";
 import getUnreadCount, { renderPreviewMessage } from "../utils";
 import User from "../../../common/component/User";
 import Avatar from "../../../common/component/Avatar";
-// import iconChannel from "../../../assets/icons/channel.svg?url";
 import IconLock from "../../../assets/icons/lock.svg";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import { useNavigate, NavLink } from "react-router-dom";
 import useUploadFile from "../../../common/hook/useUploadFile";
 import { useAppSelector } from "../../../app/store";
 
-// todo: move to root file
-dayjs.extend(relativeTime);
 interface IProps {
   type?: "user" | "channel";
   id: number;