From 141dc7a50783867bcc63e9e075b7b9e9edd1571f Mon Sep 17 00:00:00 2001 From: faisalsayed10 Date: Thu, 13 Jul 2023 13:11:06 +0530 Subject: [PATCH] chore: Lint all the files with current prettier config --- apps/web/components/Dashboard.tsx | 262 +- apps/web/components/GridView.tsx | 122 +- apps/web/components/ListView.tsx | 139 +- apps/web/components/ProgressBar.tsx | 10 +- apps/web/components/files/File.tsx | 140 +- apps/web/components/files/FileGrid.tsx | 146 +- apps/web/components/files/FileIcon.tsx | 20 +- apps/web/components/files/FilePreview.tsx | 558 +- apps/web/components/files/FileRow.tsx | 106 +- apps/web/components/files/FilesEmptyState.tsx | 34 +- apps/web/components/files/FilesTable.tsx | 40 +- .../components/files/FilesTableSkeleton.tsx | 78 +- .../web/components/files/UploadFileButton.tsx | 96 +- apps/web/components/files/UploadProgress.tsx | 72 +- .../components/folders/AddFolderButton.tsx | 166 +- apps/web/components/folders/Folder.tsx | 170 +- .../components/folders/FolderBreadCrumbs.tsx | 126 +- apps/web/components/popups/DeleteAlert.tsx | 62 +- apps/web/components/popups/OptionsPopover.tsx | 90 +- apps/web/components/ui/AWSRegionSelect.tsx | 82 +- apps/web/components/ui/AddDriveButton.tsx | 44 +- apps/web/components/ui/CenterContainer.tsx | 10 +- apps/web/components/ui/FileSortMenu.tsx | 44 +- apps/web/components/ui/Navbar.tsx | 158 +- apps/web/components/ui/PasswordInput.tsx | 46 +- apps/web/components/ui/VideoModal.tsx | 66 +- apps/web/hooks/useBucket.tsx | 48 +- apps/web/hooks/useFirebase.tsx | 785 +- apps/web/hooks/useInterval.tsx | 30 +- apps/web/hooks/useKeys.tsx | 15 +- apps/web/hooks/useS3.tsx | 777 +- apps/web/hooks/useUser.tsx | 35 +- apps/web/next.config.js | 20 +- apps/web/package.json | 140 +- apps/web/pages/_app.tsx | 32 +- apps/web/pages/_document.tsx | 88 +- apps/web/pages/api/auth/logout.ts | 4 +- apps/web/pages/api/auth/user.ts | 2 +- apps/web/pages/api/auth/verify/[token].ts | 32 +- apps/web/pages/api/drive.ts | 70 +- apps/web/pages/api/file.ts | 30 +- apps/web/pages/api/s3/list-buckets.ts | 28 +- apps/web/pages/drives/[id].tsx | 76 +- apps/web/pages/error.tsx | 54 +- apps/web/pages/index.tsx | 274 +- apps/web/pages/login.tsx | 166 +- apps/web/pages/new/backblaze.tsx | 402 +- apps/web/pages/new/firebase.tsx | 186 +- apps/web/pages/new/index.tsx | 136 +- apps/web/pages/new/s3.tsx | 358 +- apps/web/pnpm-lock.yaml | 8624 +++++++++++------ apps/web/styles/index.css | 30 +- apps/web/tsconfig.json | 50 +- apps/web/util/file-sorting.ts | 29 +- apps/web/util/globals.ts | 874 +- apps/web/util/helpers/index.ts | 84 +- apps/web/util/helpers/s3-helpers.ts | 134 +- apps/web/util/prisma.ts | 2 +- apps/web/util/rate-limit.ts | 38 +- apps/web/util/session.ts | 18 +- apps/web/util/types.ts | 74 +- apps/web/util/upload/bytelength.ts | 32 +- apps/web/util/upload/chunker.ts | 36 +- apps/web/util/upload/chunks/getChunkBuffer.ts | 5 +- apps/web/util/upload/chunks/getChunkStream.ts | 7 +- apps/web/util/upload/index.ts | 510 +- apps/web/util/upload/runtimeConfig.ts | 4 +- apps/web/util/upload/types.ts | 22 +- 68 files changed, 10087 insertions(+), 7161 deletions(-) diff --git a/apps/web/components/Dashboard.tsx b/apps/web/components/Dashboard.tsx index 4ddf1d0..2962819 100644 --- a/apps/web/components/Dashboard.tsx +++ b/apps/web/components/Dashboard.tsx @@ -15,149 +15,149 @@ import { DriveFile } from "@util/types"; import { sortDriveFiles } from "@util/file-sorting"; const baseStyle = { - outline: "none", - transition: "border .2s ease-in-out", + outline: "none", + transition: "border .2s ease-in-out", }; const activeStyle = { - borderWidth: 2, - borderRadius: 2, - borderStyle: "dashed", - borderColor: "#2196f3", - backgroundColor: "rgba(0, 0, 0, 0.25)", + borderWidth: 2, + borderRadius: 2, + borderStyle: "dashed", + borderColor: "#2196f3", + backgroundColor: "rgba(0, 0, 0, 0.25)", }; const Dashboard = () => { - const [draggedFilesToUpload, setDraggedFilesToUpload] = useState([]); - const [isDragging, setIsDragging] = useState(false); - const [isFolderDeleting, setIsFolderDeleting] = useState(false); - const { currentFolder, files, folders, loading, uploadingFiles } = useBucket(); - const { colorMode } = useColorMode(); - const style = useMemo(() => ({ ...baseStyle, ...(isDragging ? activeStyle : {}) }), [isDragging]); - const [gridView, setGridView] = useState(false); - const [fileSort, setFileSort] = useState({ property: "name", isAscending: true }); - const [sortedFiles, setSortedFiles] = useState([]); + const [draggedFilesToUpload, setDraggedFilesToUpload] = useState([]); + const [isDragging, setIsDragging] = useState(false); + const [isFolderDeleting, setIsFolderDeleting] = useState(false); + const { currentFolder, files, folders, loading, uploadingFiles } = useBucket(); + const { colorMode } = useColorMode(); + const style = useMemo(() => ({ ...baseStyle, ...(isDragging ? activeStyle : {}) }), [isDragging]); + const [gridView, setGridView] = useState(false); + const [fileSort, setFileSort] = useState({ property: "name", isAscending: true }); + const [sortedFiles, setSortedFiles] = useState([]); - useEffect(() => { - const storedView = localStorage.getItem("grid_view"); - const storedFileSort = localStorage.getItem("file_sort"); + useEffect(() => { + const storedView = localStorage.getItem("grid_view"); + const storedFileSort = localStorage.getItem("file_sort"); - if (storedView) setGridView(storedView === "true"); - if (storedFileSort) setFileSort(JSON.parse(storedFileSort)); - }, []); + if (storedView) setGridView(storedView === "true"); + if (storedFileSort) setFileSort(JSON.parse(storedFileSort)); + }, []); - useEffect(() => { - localStorage.setItem("grid_view", gridView.toString()); - }, [gridView]); + useEffect(() => { + localStorage.setItem("grid_view", gridView.toString()); + }, [gridView]); - useEffect(() => { - localStorage.setItem("file_sort", JSON.stringify(fileSort)); - }, [fileSort]); + useEffect(() => { + localStorage.setItem("file_sort", JSON.stringify(fileSort)); + }, [fileSort]); - useEffect(() => { - if (!files) { - setSortedFiles([]); - return; - } - const sortedFiles = sortDriveFiles(files, fileSort); - setSortedFiles(sortedFiles); - }, [fileSort, files]) + useEffect(() => { + if (!files) { + setSortedFiles([]); + return; + } + const sortedFiles = sortDriveFiles(files, fileSort); + setSortedFiles(sortedFiles); + }, [fileSort, files]); - return ( - <> - - { - setDraggedFilesToUpload(files); - setIsDragging(false); - }} - noClick - onDragOver={() => setIsDragging(true)} - onDragLeave={() => setIsDragging(false)} - > - {({ getRootProps, getInputProps }) => ( - - - - - - - {!gridView ? ( - - ) : ( - - )} - - )} - - - - {uploadingFiles.length > 0 && ( -
- - {uploadingFiles.map((uploading) => ( - - ))} - -
- )} - - ); + return ( + <> + + { + setDraggedFilesToUpload(files); + setIsDragging(false); + }} + noClick + onDragOver={() => setIsDragging(true)} + onDragLeave={() => setIsDragging(false)} + > + {({ getRootProps, getInputProps }) => ( + + + + + + + {!gridView ? ( + + ) : ( + + )} + + )} + + + + {uploadingFiles.length > 0 && ( +
+ + {uploadingFiles.map((uploading) => ( + + ))} + +
+ )} + + ); }; export default Dashboard; diff --git a/apps/web/components/GridView.tsx b/apps/web/components/GridView.tsx index 32d5b50..a47ae6c 100644 --- a/apps/web/components/GridView.tsx +++ b/apps/web/components/GridView.tsx @@ -9,70 +9,70 @@ import AddFolderButton from "./folders/AddFolderButton"; import FileSortMenu from "./ui/FileSortMenu"; type Props = { - setGridView: React.Dispatch>; - loading: boolean; - currentFolder: DriveFolder; - folders: DriveFolder[]; - files: DriveFile[]; - setIsFolderDeleting: React.Dispatch>; - setFileSort: React.Dispatch>; - fileSort: FileSortConfig; + setGridView: React.Dispatch>; + loading: boolean; + currentFolder: DriveFolder; + folders: DriveFolder[]; + files: DriveFile[]; + setIsFolderDeleting: React.Dispatch>; + setFileSort: React.Dispatch>; + fileSort: FileSortConfig; }; const GridView: React.FC = (props) => { - return ( - - - - Your Files - - - - props.setGridView(false)}> - - - - - {props.loading ? ( - - - - - - - ) : ( - - - {props.folders?.length > 0 && - props.folders?.map((folder) => ( - - ))} - {props.files?.length > 0 && - props.files?.map((file) => )} - - )} - - ); + return ( + + + + Your Files + + + + props.setGridView(false)}> + + + + + {props.loading ? ( + + + + + + + ) : ( + + + {props.folders?.length > 0 && + props.folders?.map((folder) => ( + + ))} + {props.files?.length > 0 && + props.files?.map((file) => )} + + )} + + ); }; export default GridView; diff --git a/apps/web/components/ListView.tsx b/apps/web/components/ListView.tsx index b19e85e..8dd259b 100644 --- a/apps/web/components/ListView.tsx +++ b/apps/web/components/ListView.tsx @@ -1,12 +1,4 @@ -import { - Divider, - Flex, - Grid, - IconButton, - Skeleton, - Text, - Box, -} from "@chakra-ui/react"; +import { Divider, Flex, Grid, IconButton, Skeleton, Text, Box } from "@chakra-ui/react"; import FilesEmptyState from "@components/files/FilesEmptyState"; import FilesTable from "@components/files/FilesTable"; import FilesTableSkeleton from "@components/files/FilesTableSkeleton"; @@ -17,75 +9,74 @@ import React from "react"; import { LayoutGrid } from "tabler-icons-react"; import FileSortMenu from "@components/ui/FileSortMenu"; - type Props = { - setGridView: React.Dispatch>; - loading: boolean; - currentFolder: DriveFolder; - folders: DriveFolder[]; - files: DriveFile[]; - setIsFolderDeleting: React.Dispatch>; - setFileSort: React.Dispatch>; - fileSort: FileSortConfig; + setGridView: React.Dispatch>; + loading: boolean; + currentFolder: DriveFolder; + folders: DriveFolder[]; + files: DriveFile[]; + setIsFolderDeleting: React.Dispatch>; + setFileSort: React.Dispatch>; + fileSort: FileSortConfig; }; const ListView: React.FC = (props) => { - return ( - <> - {props.loading ? ( - - - - - - - ) : ( - - {props.folders?.map((f) => ( - - ))} - - - )} - - - - Your Files - - - - props.setGridView(true)}> - - - - - {props.files === null && props.loading ? ( - - ) : !props.files || props.files?.length === 0 ? ( - - ) : ( - - )} - - ); + return ( + <> + {props.loading ? ( + + + + + + + ) : ( + + {props.folders?.map((f) => ( + + ))} + + + )} + + + + Your Files + + + + props.setGridView(true)}> + + + + + {props.files === null && props.loading ? ( + + ) : !props.files || props.files?.length === 0 ? ( + + ) : ( + + )} + + ); }; export default ListView; diff --git a/apps/web/components/ProgressBar.tsx b/apps/web/components/ProgressBar.tsx index 9115b0b..3613f2a 100644 --- a/apps/web/components/ProgressBar.tsx +++ b/apps/web/components/ProgressBar.tsx @@ -3,10 +3,10 @@ import NProgress from "nprogress"; import "nprogress/nprogress.css"; NProgress.configure({ - minimum: 0.3, - easing: "ease", - speed: 500, - showSpinner: false, + minimum: 0.3, + easing: "ease", + speed: 500, + showSpinner: false, }); Router.events.on("routeChangeStart", () => NProgress.start()); @@ -14,5 +14,5 @@ Router.events.on("routeChangeComplete", () => NProgress.done()); Router.events.on("routeChangeError", () => NProgress.done()); export default function () { - return null; + return null; } diff --git a/apps/web/components/files/File.tsx b/apps/web/components/files/File.tsx index 41fba81..050ae71 100644 --- a/apps/web/components/files/File.tsx +++ b/apps/web/components/files/File.tsx @@ -1,10 +1,10 @@ import { - Modal, - ModalCloseButton, - ModalContent, - ModalOverlay, - Text, - useDisclosure, + Modal, + ModalCloseButton, + ModalContent, + ModalOverlay, + Text, + useDisclosure, } from "@chakra-ui/react"; import useBucket from "@hooks/useBucket"; import useKeys from "@hooks/useKeys"; @@ -19,78 +19,78 @@ import FilePreview from "./FilePreview"; import FileRow from "./FileRow"; interface Props { - file: DriveFile; - gridView?: boolean; + file: DriveFile; + gridView?: boolean; } const File: React.FC = ({ file, gridView = false }) => { - const [isOpen, setIsOpen] = useState(false); - const { removeFile } = useBucket(); - const [id] = useState(nanoid()); - const { isOpen: isPreviewOpen, onOpen: onPreviewOpen, onClose: onPreviewClose } = useDisclosure(); - const cancelRef = useRef(); + const [isOpen, setIsOpen] = useState(false); + const { removeFile } = useBucket(); + const [id] = useState(nanoid()); + const { isOpen: isPreviewOpen, onOpen: onPreviewOpen, onClose: onPreviewClose } = useDisclosure(); + const cancelRef = useRef(); - const copyFile = () => { - copy(file.url); - toast.success("File URL copied to clipboard!"); - }; + const copyFile = () => { + copy(file.url); + toast.success("File URL copied to clipboard!"); + }; - const deleteFile = async () => { - try { - const success = await removeFile(file); - if (!success) return; + const deleteFile = async () => { + try { + const success = await removeFile(file); + if (!success) return; - setIsOpen(false); - toast.success("File deleted successfully!"); - } catch (err) { - setIsOpen(false); - console.error(err); - toast.error(() => ( - <> - Error deleting file! - - {err.message} - - - )); - } - }; + setIsOpen(false); + toast.success("File deleted successfully!"); + } catch (err) { + setIsOpen(false); + console.error(err); + toast.error(() => ( + <> + Error deleting file! + + {err.message} + + + )); + } + }; - return ( - <> - {gridView ? ( - - ) : ( - - )} + return ( + <> + {gridView ? ( + + ) : ( + + )} - setIsOpen(false)} - cancelRef={cancelRef} - onClick={deleteFile} - /> - - - - - - - - - ); + setIsOpen(false)} + cancelRef={cancelRef} + onClick={deleteFile} + /> + + + + + + + + + ); }; export default File; diff --git a/apps/web/components/files/FileGrid.tsx b/apps/web/components/files/FileGrid.tsx index cfc5a20..5a9393d 100644 --- a/apps/web/components/files/FileGrid.tsx +++ b/apps/web/components/files/FileGrid.tsx @@ -8,83 +8,83 @@ import { Copy, FileDownload, FileMinus } from "tabler-icons-react"; import FileIcon from "./FileIcon"; interface Props { - file: DriveFile; - onPreviewOpen: () => void; - copyFile: () => void; - setIsOpen: React.Dispatch>; - id: string; + file: DriveFile; + onPreviewOpen: () => void; + copyFile: () => void; + setIsOpen: React.Dispatch>; + id: string; } const FileGrid: React.FC = (props) => { - const optionProps = { - p: 2, - cursor: "pointer", - _hover: { backgroundColor: useColorModeValue("gray.100", "rgba(237, 242, 247, 0.1)") }, - }; + const optionProps = { + p: 2, + cursor: "pointer", + _hover: { backgroundColor: useColorModeValue("gray.100", "rgba(237, 242, 247, 0.1)") }, + }; - return ( - <> - - - {props.file?.contentType?.startsWith("image") ? ( - {props.file.name} - ) : ( - - - - )} - - - - {props.file.name} - - - {!props.file ? ( - - ) : ( - - - - Share - - download(props.file)}> - - Download - - props.setIsOpen(true)}> - - Delete - - - )} - - - - - ); + return ( + <> + + + {props.file?.contentType?.startsWith("image") ? ( + {props.file.name} + ) : ( + + + + )} + + + + {props.file.name} + + + {!props.file ? ( + + ) : ( + + + + Share + + download(props.file)}> + + Download + + props.setIsOpen(true)}> + + Delete + + + )} + + + + + ); }; export default FileGrid; diff --git a/apps/web/components/files/FileIcon.tsx b/apps/web/components/files/FileIcon.tsx index 48f4791..a737976 100644 --- a/apps/web/components/files/FileIcon.tsx +++ b/apps/web/components/files/FileIcon.tsx @@ -3,20 +3,20 @@ import "file-icon-vectors/dist/file-icon-square-o.min.css"; import { useEffect } from "react"; type Props = { - id: string; - extension: string; - bigIcon?: boolean; + id: string; + extension: string; + bigIcon?: boolean; }; const FileIcon: React.FC = ({ extension, id, bigIcon = false }) => { - useEffect(() => { - const icon = document.querySelector(`.icon-${id}`); - FILE_TYPES.includes(extension) - ? icon.classList.add(`fiv-icon-${extension}`) - : icon.classList.add("fiv-icon-blank"); - }, []); + useEffect(() => { + const icon = document.querySelector(`.icon-${id}`); + FILE_TYPES.includes(extension) + ? icon.classList.add(`fiv-icon-${extension}`) + : icon.classList.add("fiv-icon-blank"); + }, []); - return ; + return ; }; export default FileIcon; diff --git a/apps/web/components/files/FilePreview.tsx b/apps/web/components/files/FilePreview.tsx index 0c5a5f9..8b27149 100644 --- a/apps/web/components/files/FilePreview.tsx +++ b/apps/web/components/files/FilePreview.tsx @@ -1,20 +1,20 @@ import { - Box, - Button, - ButtonGroup, - Center, - Flex, - Image, - Link, - Spinner, - Table, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorMode, + Box, + Button, + ButtonGroup, + Center, + Flex, + Image, + Link, + Spinner, + Table, + Tbody, + Td, + Text, + Th, + Thead, + Tr, + useColorMode, } from "@chakra-ui/react"; import useKeys from "@hooks/useKeys"; import { MarkdownPreviewProps } from "@uiw/react-markdown-preview"; @@ -32,303 +32,303 @@ import { ExternalLink, FileDownload } from "tabler-icons-react"; import { Player } from "video-react"; const CodeEditor: React.ComponentType = dynamic( - () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default), - { ssr: false } + () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default), + { ssr: false }, ); const MarkdownPreview: React.ComponentType = dynamic( - () => import("@uiw/react-markdown-preview").then((mod) => mod.default), - { ssr: false } + () => import("@uiw/react-markdown-preview").then((mod) => mod.default), + { ssr: false }, ); type Props = { - url: string; - file: DriveFile; + url: string; + file: DriveFile; }; const FilePreview: React.FC = ({ url, file }) => { - const [isError, setIsError] = useState(false); - const [showRaw, setShowRaw] = useState(false); - const [rawMd, setRawMd] = useState(false); - const [text, setText] = useState(""); - const [loading, setLoading] = useState(false); + const [isError, setIsError] = useState(false); + const [showRaw, setShowRaw] = useState(false); + const [rawMd, setRawMd] = useState(false); + const [text, setText] = useState(""); + const [loading, setLoading] = useState(false); - const extension = file.name.split(".").pop(); - const { colorMode } = useColorMode(); + const extension = file.name.split(".").pop(); + const { colorMode } = useColorMode(); - const codeEditorStyles: React.CSSProperties = useMemo( - () => ({ - height: "98%", - color: colorMode === "light" ? "#2D3748" : "#FFFFFF", - fontSize: 13, - backgroundColor: colorMode === "light" ? "#FFFFFF" : "#2D3748", - overflowY: "auto", - fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", - }), - [colorMode] - ); + const codeEditorStyles: React.CSSProperties = useMemo( + () => ({ + height: "98%", + color: colorMode === "light" ? "#2D3748" : "#FFFFFF", + fontSize: 13, + backgroundColor: colorMode === "light" ? "#FFFFFF" : "#2D3748", + overflowY: "auto", + fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", + }), + [colorMode], + ); - useEffect(() => { - if ( - file?.contentType?.startsWith("text") || - file?.contentType === "application/json" || - file?.contentType === "text/markdown" || - extension === "md" || - showRaw - ) { - setLoading(true); - fetch(url) - .then((res) => res.text()) - .then((text) => setText(text)) - .catch(() => setIsError(true)) - .finally(() => setLoading(false)); - } - }, [showRaw]); + useEffect(() => { + if ( + file?.contentType?.startsWith("text") || + file?.contentType === "application/json" || + file?.contentType === "text/markdown" || + extension === "md" || + showRaw + ) { + setLoading(true); + fetch(url) + .then((res) => res.text()) + .then((text) => setText(text)) + .catch(() => setIsError(true)) + .finally(() => setLoading(false)); + } + }, [showRaw]); - if (isError) { - return ; - } else if (file?.contentType?.startsWith("image")) { - return {file.name} setIsError(true)} />; - } else if (file?.contentType?.startsWith("video")) { - return ( - setIsError(true)} />} - /> - ); - } else if (file?.contentType?.startsWith("audio")) { - return ( - - - - ); - } else if (file?.contentType === "application/pdf") { - return ( -