refactor new file download functions to new file

components/Auth.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { FunctionComponent } from 'react'
 
-import { matchProtectedRoute } from '../utils/tools'
+import { matchProtectedRoute } from '../utils/protectedRouteHandler'
 import useLocalStorage from '../utils/useLocalStorage'
 
 const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {

components/DownloadBtn.tsx

@@ -4,7 +4,7 @@ import toast, { Toaster } from 'react-hot-toast'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
 
-import { getBaseUrl } from '../utils/tools'
+import { getBaseUrl } from "../utils/getBaseUrl"
 
 const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
   const { asPath } = useRouter()

components/FileListing.tsx

@@ -12,13 +12,9 @@ import dynamic from 'next/dynamic'
 
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
-import {
-  getBaseUrl,
-  traverseFolder,
-  downloadMultipleFiles,
-  useProtectedSWRInfinite,
-  downloadTreelikeMultipleFiles,
-} from '../utils/tools'
+import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
+import { getBaseUrl } from '../utils/getBaseUrl'
+import { downloadMultipleFiles, downloadTreelikeMultipleFiles, traverseFolder } from '../utils/downloadMultipleFiles'
 
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
@@ -290,7 +286,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       } else if (files.length > 1) {
         setTotalGenerating(true)
         const toastId = toast.loading('Downloading selected files. Refresh to cancel, this may take some time...')
-        downloadMultipleFiles(toastId, files, folder)
+        downloadMultipleFiles({ toastId, files, folder })
           .then(() => {
             setTotalGenerating(false)
             toast.dismiss(toastId)
@@ -320,7 +316,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       setFolderGenerating({ ...folderGenerating, [id]: true })
       const toastId = toast.loading('Downloading folder. Refresh to cancel, this may take some time...')
 
-      downloadTreelikeMultipleFiles(toastId, files, path, name)
+      downloadTreelikeMultipleFiles({ toastId, files, basePath: path, folder: name })
         .then(() => {
           setFolderGenerating({ ...folderGenerating, [id]: false })
           toast.dismiss(toastId)

components/previews/CodePreview.tsx

@@ -2,13 +2,13 @@ import { useEffect, FunctionComponent } from 'react'
 import Prism from 'prismjs'
 
 import { getExtension } from '../../utils/getFileIcon'
-import { useStaleSWR } from '../../utils/tools'
+import { useStaleSWR } from '../../utils/fetchWithSWR'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
 
 const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
-  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
+  const { data, error } = useStaleSWR({ url: file['@microsoft.graph.downloadUrl'] })
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

components/previews/MarkdownPreview.tsx

@@ -11,14 +11,14 @@ import 'katex/dist/katex.min.css'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
-import { useStaleSWR } from '../../utils/tools'
+import { useStaleSWR } from '../../utils/fetchWithSWR'
 
 const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?: boolean }> = ({
   file,
   path,
   standalone = true,
 }) => {
-  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
+  const { data, error } = useStaleSWR({ url: file['@microsoft.graph.downloadUrl'] })
 
   // The parent folder of the markdown file, which is also the relative image folder
   const parentPath = path.substring(0, path.lastIndexOf('/'))

components/previews/TextPreview.tsx

@@ -3,10 +3,10 @@ import { FunctionComponent } from 'react'
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadBtn from '../DownloadBtn'
-import { useStaleSWR } from '../../utils/tools'
+import { useStaleSWR } from '../../utils/fetchWithSWR'
 
 const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
-  const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
+  const { data, error } = useStaleSWR({ url: file['@microsoft.graph.downloadUrl'] })
   if (error) {
     return (
       <div className="dark:bg-gray-900 p-3 bg-white rounded">

components/previews/VideoPreview.tsx

@@ -6,7 +6,7 @@ import { useClipboard } from 'use-clipboard-copy'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 
-import { getBaseUrl } from '../../utils/tools'
+import { getBaseUrl } from "../../utils/getBaseUrl"
 
 export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const { asPath } = useRouter()