From 56c57a6cdfb4604a12aadee7cdfb6a0073c35f08 Mon Sep 17 00:00:00 2001 From: subnub Date: Fri, 10 Jan 2025 14:03:04 -0500 Subject: [PATCH] optimizations --- .gitignore | 3 ++- package.json | 3 ++- src/components/DownloadPage/DownloadPage.tsx | 4 ++-- src/components/FileInfoPopup/FileInfoPopup.tsx | 4 ++-- src/components/FileItem/FileItem.tsx | 4 ++-- src/components/FolderItem/FolderItem.tsx | 5 ++--- src/components/LoginPage/LoginPage.tsx | 2 +- src/components/MoverPopup/MoverPopup.tsx | 2 +- src/components/QuickAccessItem/QuickAccessItem.tsx | 4 ++-- src/components/RightSection/RightSection.tsx | 4 ++-- src/components/SharePopup/SharePopup.tsx | 4 ++-- src/hooks/files.ts | 2 +- vite.config.ts | 3 ++- 13 files changed, 23 insertions(+), 21 deletions(-) diff --git a/.gitignore b/.gitignore index 54d93e6..8a75fc2 100755 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,5 @@ dist/ rds-combined-ca-bundle.pem docker-variables.env dist-frontend/ -dist-backend/ \ No newline at end of file +dist-backend/ +stats.html \ No newline at end of file diff --git a/package.json b/package.json index 715c1ea..22a16d3 100755 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "copy-text-to-clipboard": "^2.1.1", "core-js": "^3.6.4", "cors": "^2.8.5", + "dayjs": "^1.11.13", "diskusage": "^1.1.3", "dotenv": "^8.2.0", "eslint-plugin-react-hooks": "^4.6.2", @@ -74,7 +75,6 @@ "history": "^4.10.1", "jsonwebtoken": "^9.0.2", "lodash.debounce": "^4.0.8", - "moment": "^2.24.0", "mongodb": "^6.7.0", "mongoose": "^8.4.1", "nodemailer": "^6.9.14", @@ -121,6 +121,7 @@ "globals": "^15.7.0", "jest": "^29.7.0", "nodemon": "^3.1.3", + "rollup-plugin-visualizer": "^5.14.0", "sass": "^1.77.4", "superagent-binary-parser": "^1.0.1", "supertest": "^6.0.1", diff --git a/src/components/DownloadPage/DownloadPage.tsx b/src/components/DownloadPage/DownloadPage.tsx index f63a70a..7c1018b 100644 --- a/src/components/DownloadPage/DownloadPage.tsx +++ b/src/components/DownloadPage/DownloadPage.tsx @@ -6,7 +6,7 @@ import { } from "../../api/filesAPI"; import { toast, ToastContainer } from "react-toastify"; import Spinner from "../Spinner/Spinner"; -import moment from "moment"; +import dayjs from "dayjs"; import { getFileColor, getFileExtension } from "../../utils/files"; import { FileInterface } from "../../types/file"; import bytes from "bytes"; @@ -50,7 +50,7 @@ const PublicDownloadPage = () => { const imageColor = getFileColor(file.filename); - const formattedDate = moment(file.uploadDate).format("L"); + const formattedDate = dayjs(file.uploadDate).format("MM/DD/YYYY hh:mma"); const fileSize = bytes(file.metadata.size); diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx index 287b426..26d435d 100644 --- a/src/components/FileInfoPopup/FileInfoPopup.tsx +++ b/src/components/FileInfoPopup/FileInfoPopup.tsx @@ -8,7 +8,7 @@ import ContextMenu from "../ContextMenu/ContextMenu"; import { resetPopupSelect } from "../../reducers/selected"; import { getFileColor, getFileExtension } from "../../utils/files"; import bytes from "bytes"; -import moment from "moment"; +import dayjs from "dayjs"; const FileInfoPopup = () => { const file = useAppSelector((state) => state.selected.popupModal.file)!; @@ -28,7 +28,7 @@ const FileInfoPopup = () => { const imageColor = getFileColor(file.filename); const formattedDate = useMemo( - () => moment(file.uploadDate).format("L"), + () => dayjs(file.uploadDate).format("MM/DD/YYYY hh:mma"), [file.uploadDate] ); diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx index 66fbf36..4bb4b06 100644 --- a/src/components/FileItem/FileItem.tsx +++ b/src/components/FileItem/FileItem.tsx @@ -1,5 +1,4 @@ import capitalize from "../../utils/capitalize"; -import moment from "moment"; import React, { memo, useMemo, useRef, useState } from "react"; import ContextMenu from "../ContextMenu/ContextMenu"; import { useContextMenu } from "../../hooks/contextMenu"; @@ -13,6 +12,7 @@ import { setPopupSelect } from "../../reducers/selected"; import ActionsIcon from "../../icons/ActionsIcon"; import { FileInterface } from "../../types/file"; import getBackendURL from "../../utils/getBackendURL"; +import dayjs from "dayjs"; interface FileItemProps { file: FileInterface; @@ -56,7 +56,7 @@ const FileItem: React.FC = memo((props) => { const formattedFilename = capitalize(file.filename); const formattedCreatedDate = useMemo( - () => moment(file.uploadDate).format("MM/DD/YY hh:mma"), + () => dayjs(file.uploadDate).format("MM/DD/YY hh:mma"), [file.uploadDate] ); diff --git a/src/components/FolderItem/FolderItem.tsx b/src/components/FolderItem/FolderItem.tsx index a0173fb..c806636 100644 --- a/src/components/FolderItem/FolderItem.tsx +++ b/src/components/FolderItem/FolderItem.tsx @@ -3,8 +3,6 @@ import ContextMenu from "../ContextMenu/ContextMenu"; import { useContextMenu } from "../../hooks/contextMenu"; import classNames from "classnames"; import { useNavigate } from "react-router-dom"; -import mobilecheck from "../../utils/mobileCheck"; -import moment from "moment"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { addNavigationMap, @@ -13,6 +11,7 @@ import { } from "../../reducers/selected"; import { useUtils } from "../../hooks/utils"; import { FolderInterface } from "../../types/folders"; +import dayjs from "dayjs"; interface FolderItemProps { folder: FolderInterface; @@ -172,7 +171,7 @@ const FolderItem: React.FC = memo((props) => { : "text-gray-primary" )} > - Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")} + Created {dayjs(folder.createdAt).format("MM/DD/YY hh:mma")} diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx index 397e329..c42030f 100755 --- a/src/components/LoginPage/LoginPage.tsx +++ b/src/components/LoginPage/LoginPage.tsx @@ -8,7 +8,7 @@ import { import { useLocation, useNavigate } from "react-router-dom"; import { setUser } from "../../reducers/user"; import { useAppDispatch } from "../../hooks/store"; -import { capitalize } from "lodash"; +import capitalize from "lodash/capitalize"; import AlertIcon from "../../icons/AlertIcon"; import Spinner from "../Spinner/Spinner"; import { toast, ToastContainer } from "react-toastify"; diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx index 1e704c2..d70aa2d 100644 --- a/src/components/MoverPopup/MoverPopup.tsx +++ b/src/components/MoverPopup/MoverPopup.tsx @@ -4,7 +4,7 @@ import { useFolders, useMoveFolders } from "../../hooks/folders"; import { FolderInterface } from "../../types/folders"; import CloseIcon from "../../icons/CloseIcon"; import { resetMoveModal } from "../../reducers/selected"; -import { debounce } from "lodash"; +import debounce from "lodash/debounce"; import Spinner from "../Spinner/Spinner"; import HomeIconOutline from "../../icons/HomeIconOutline"; import ArrowBackIcon from "../../icons/ArrowBackIcon"; diff --git a/src/components/QuickAccessItem/QuickAccessItem.tsx b/src/components/QuickAccessItem/QuickAccessItem.tsx index 20cf1f0..e01c91c 100644 --- a/src/components/QuickAccessItem/QuickAccessItem.tsx +++ b/src/components/QuickAccessItem/QuickAccessItem.tsx @@ -1,5 +1,4 @@ import capitalize from "../../utils/capitalize"; -import moment from "moment"; import React, { memo, useMemo, useRef, useState } from "react"; import ContextMenu from "../ContextMenu/ContextMenu"; import classNames from "classnames"; @@ -14,6 +13,7 @@ import { setPopupSelect, } from "../../reducers/selected"; import PlayButtonIcon from "../../icons/PlayIcon"; +import dayjs from "dayjs"; import getBackendURL from "../../utils/getBackendURL"; interface QuickAccessItemProps { @@ -55,7 +55,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => { const fileExtension = getFileExtension(file.filename); const imageColor = getFileColor(file.filename); const formattedDate = useMemo( - () => moment(file.uploadDate).format("MM/DD/YY hh:mma"), + () => dayjs(file.uploadDate).format("MM/DD/YY hh:mma"), [file.uploadDate] ); const formattedFilename = capitalize(file.filename); diff --git a/src/components/RightSection/RightSection.tsx b/src/components/RightSection/RightSection.tsx index df06aa1..7ef299f 100644 --- a/src/components/RightSection/RightSection.tsx +++ b/src/components/RightSection/RightSection.tsx @@ -1,5 +1,4 @@ import bytes from "bytes"; -import moment from "moment"; import { memo, useMemo } from "react"; import ContextMenu from "../ContextMenu/ContextMenu"; import classNames from "classnames"; @@ -13,6 +12,7 @@ import { useUtils } from "../../hooks/utils"; import CloseIcon from "../../icons/CloseIcon"; import FileDetailsIcon from "../../icons/FileDetailsIcon"; import ActionsIcon from "../../icons/ActionsIcon"; +import dayjs from "dayjs"; const RightSection = memo(() => { const selectedItem = useAppSelector((state) => state.selected.mainSection); @@ -45,7 +45,7 @@ const RightSection = memo(() => { const formattedDate = useMemo(() => { const date = selectedItem.file?.uploadDate || selectedItem.folder?.createdAt; - return moment(date).format("L"); + return dayjs(date).format("MM/DD/YYYY"); }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt]); const fileSize = bytes(selectedItem.file?.length || 0); diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx index 9835046..5dc35e8 100644 --- a/src/components/SharePopup/SharePopup.tsx +++ b/src/components/SharePopup/SharePopup.tsx @@ -3,7 +3,6 @@ import CloseIcon from "../../icons/CloseIcon"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { getFileColor, getFileExtension } from "../../utils/files"; import bytes from "bytes"; -import moment from "moment"; import { makeOneTimePublicPopup, makePublicPopup, @@ -21,6 +20,7 @@ import { setShareModal, } from "../../reducers/selected"; import { toast } from "react-toastify"; +import dayjs from "dayjs"; const SharePopup = memo(() => { const file = useAppSelector((state) => state.selected.shareModal.file)!; @@ -35,7 +35,7 @@ const SharePopup = memo(() => { const fileExtension = getFileExtension(file.filename, 3); const formattedDate = useMemo( - () => moment(file.uploadDate).format("MM/DD/YYYY"), + () => dayjs(file.uploadDate).format("MM/DD/YYYY"), [file.uploadDate] ); diff --git a/src/hooks/files.ts b/src/hooks/files.ts index 28a584e..0236557 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -20,7 +20,7 @@ import { addFileUploadCancelToken, removeFileUploadCancelToken, } from "../utils/cancelTokenManager"; -import { debounce } from "lodash"; +import debounce from "lodash/debounce"; import { addUpload, editUpload } from "../reducers/uploader"; import { uploadFolderAPI } from "../api/foldersAPI"; import { useFolders } from "./folders"; diff --git a/vite.config.ts b/vite.config.ts index cc9df62..745af5e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,12 +1,13 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +import { visualizer } from "rollup-plugin-visualizer"; // Here you can set the proxy URL if you are using a proxy server // This is only used for development const proxyURL = "http://localhost:3000"; export default defineConfig({ - plugins: [react()], + plugins: [react(), visualizer()], build: { outDir: "dist-frontend", },