Merge pull request #342 from spencerwooo/migrate-pnpm

components/FileListing.tsx

@@ -37,7 +37,7 @@ import DefaultPreview from './previews/DefaultPreview'
 import { DownloadBtnContainer, PreviewContainer } from './previews/Containers'
 import DownloadButtonGroup from './DownloadBtnGtoup'
 
-import { OdFileObject, OdFolderObject } from '../types'
+import type { OdFileObject, OdFolderObject } from '../types'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -552,7 +552,13 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
             <>
               <PreviewContainer>
                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img className="mx-auto" src={downloadUrl} alt={fileName} />
+                <img
+                  className="mx-auto"
+                  src={downloadUrl}
+                  alt={fileName}
+                  width={file.image?.width}
+                  height={file.image?.height}
+                />
               </PreviewContainer>
               <DownloadBtnContainer>
                 <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />

components/SearchModal.tsx

@@ -9,7 +9,7 @@ import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Dialog, Transition } from '@headlessui/react'
 
-import { OdDriveItem, OdSearchResult } from '../types'
+import type { OdDriveItem, OdSearchResult } from '../types'
 import { LoadingIcon } from './Loading'
 
 import { getFileIcon } from '../utils/getFileIcon'

components/previews/AudioPreview.tsx

@@ -1,4 +1,4 @@
-import { OdFileObject } from '../../types'
+import type { OdFileObject } from '../../types'
 import { FC, useState } from 'react'
 
 import ReactPlayer from 'react-player'

components/previews/DefaultPreview.tsx

@@ -1,4 +1,4 @@
-import { OdFileObject } from '../../types'
+import type { OdFileObject } from '../../types'
 import { FC } from 'react'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

components/previews/EPUBPreview.tsx

@@ -1,14 +1,13 @@
-import { OdFileObject } from '../../types'
+import type { OdFileObject } from '../../types'
-import { FC, useEffect, useRef, useState } from 'react'
 
+import { FC, useEffect, useRef, useState } from 'react'
 import { ReactReader } from 'react-reader'
-import type { Rendition } from 'epubjs'
 
 import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const EPUBPreview: FC<{ file: OdFileObject}> = ({ file }) => {
+const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
   const [epubContainerWidth, setEpubContainerWidth] = useState(400)
   const epubContainer = useRef<HTMLDivElement>(null)
 
@@ -21,9 +20,9 @@ const EPUBPreview: FC<{ file: OdFileObject}> = ({ file }) => {
 
   // Fix for not valid epub files according to
   // https://github.com/gerhardsletten/react-reader/issues/33#issuecomment-673964947
-  const fixEpub = (rendition: Rendition) => {
+  const fixEpub = rendition => {
     const spineGet = rendition.book.spine.get.bind(rendition.book.spine)
-    rendition.book.spine.get = function (target) {
+    rendition.book.spine.get = function (target: string) {
       const targetStr = target as string
       let t = spineGet(target)
       while (t == null && targetStr.startsWith('../')) {

components/previews/OfficePreview.tsx

@@ -1,4 +1,4 @@
-import { OdFileObject } from '../../types'
+import type { OdFileObject } from '../../types'
 import { FC, useEffect, useRef, useState } from 'react'
 
 import Preview from 'preview-office-docs'

components/previews/VideoPreview.tsx

@@ -1,4 +1,4 @@
-import { OdFileObject } from '../../types'
+import type { OdFileObject } from '../../types'
 import ReactPlayer from 'react-player'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'

next.config.js

@@ -1,26 +1,3 @@
 module.exports = {
-  webpack: (config) => {
-    config.resolve.fallback = { fs: false, path: false, stream: false, constants: false };
-
-    // load worker files as a urls with `file-loader`
-    config.module.rules.unshift({
-      test: /pdf\.worker\.(min\.)?js/,
-      use: [
-        {
-          loader: "file-loader",
-          options: {
-            name: "[contenthash].[ext]",
-            publicPath: "_next/static/worker",
-            outputPath: "static/worker"
-          }
-        }
-      ]
-    });
-
-    return config;
-  },
   reactStrictMode: true,
-  images: {
-    domains: ['public.dm.files.1drv.com'],
-  },
 }

package.json

@@ -16,13 +16,14 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@headlessui/react": "^1.4.0",
     "awesome-debounce-promise": "^2.1.0",
-    "axios": "^0.21.1",
+    "axios": "^0.25.0",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
-    "emoji-regex": "^9.2.2",
+    "csstype": "^3.0.10",
+    "emoji-regex": "^10.0.0",
     "ioredis": "^4.28.2",
     "jszip": "^3.7.1",
-    "next": "^12.0.7",
+    "next": "^12.0.10",
     "nextjs-progressbar": "^0.0.13",
     "preview-office-docs": "^1.0.2",
     "prismjs": "^1.23.0",
@@ -32,15 +33,15 @@
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.0.0",
     "react-hotkeys-hook": "^3.4.4",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^8.0.0",
     "react-player": "^2.9.0",
     "react-reader": "^0.20.4",
     "react-viewer": "^3.2.2",
-    "rehype-katex": "^5.0.0",
+    "rehype-katex": "^6.0.2",
     "rehype-raw": "^6.0.0",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^3.0.1",
-    "remark-math": "^4.0.0",
+    "remark-math": "^5.1.1",
-    "swr": "^0.5.6",
+    "swr": "^1.2.0",
     "use-clipboard-copy": "^0.2.0",
     "use-constant": "^1.1.0"
   },
@@ -49,16 +50,16 @@
     "@types/crypto-js": "^4.0.2",
     "@types/ioredis": "^4.28.5",
     "@types/prismjs": "^1.16.5",
-    "@types/react": "17.0.11",
+    "@types/react": "17.0.38",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^17.0.8",
     "@types/react-pdf": "^5.0.4",
     "@types/react-syntax-highlighter": "^13.5.1",
     "autoprefixer": "^10.4.0",
-    "eslint": "7.29.0",
+    "eslint": "8.8.0",
-    "eslint-config-next": "11.0.0",
+    "eslint-config-next": "12.0.10",
     "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.8",
+    "tailwindcss": "^3.0.18",
-    "typescript": "4.3.4"
+    "typescript": "4.5.5"
   }
 }

pages/api/index.ts

@@ -209,7 +209,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { data: identityData } = await axios.get(requestUrl, {
       headers: { Authorization: `Bearer ${accessToken}` },
       params: {
-        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
       },
     })
 
@@ -218,12 +218,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         headers: { Authorization: `Bearer ${accessToken}` },
         params: next
           ? {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
               top: siteConfig.maxItems,
               $skipToken: next,
             }
           : {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video,image',
               top: siteConfig.maxItems,
             },
       })

tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",

types/index.d.ts

@@ -15,6 +15,7 @@ export declare type OdFolderObject = {
     lastModifiedDateTime: string
     file?: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
     folder?: { childCount: number; view: { sortBy: string; sortOrder: 'ascending'; viewType: 'thumbnails' } }
+    image?: OdImageFile
     video?: OdVideoFile
   }>
 }
@@ -27,8 +28,14 @@ export declare type OdFileObject = {
   id: string
   lastModifiedDateTime: string
   file: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } }
+  image?: OdImageFile
   video?: OdVideoFile
 }
+// A representation of a OneDrive image file. Some images do not return a width and height, so types are optional.
+export declare type OdImageFile = {
+  width?: number
+  height?: number
+}
 // A representation of a OneDrive video file. All fields are declared here, but we mainly use 'width' and 'height'.
 export declare type OdVideoFile = {
   width: number

utils/fetchWithSWR.ts

@@ -1,5 +1,7 @@
 import axios from 'axios'
-import useSWR, { cache, Key, useSWRInfinite } from 'swr'
+import useSWRInfinite from 'swr/infinite'
+
+import type { OdAPIResponse } from '../types'
 
 import { getStoredToken } from './protectedRouteHandler'
 
@@ -17,22 +19,6 @@ export async function fetcher(url: string, token?: string): Promise<any> {
     throw { status: err.response.status, message: err.response.data }
   }
 }
-/**
- * Use stale SWR instead of revalidating on each request. Not ideal for this scenario but have to do
- * if fetching serverside props from component instead of pages.
- * @param url request url
- * @returns useSWR instance
- */
-export function useStaleSWR({ url, path = '' }: { url: Key; path?: string }) {
-  const revalidationOptions = {
-    revalidateOnMount: !(cache.has(`arg@"${url}"@null`) || cache.has(url)),
-    revalidateOnFocus: false,
-    revalidateOnReconnect: true,
-  }
-
-  const hashedToken = getStoredToken(path)
-  return useSWR([url, hashedToken], fetcher, revalidationOptions)
-}
 
 /**
  * Paging with useSWRInfinite + protected token support
@@ -49,7 +35,7 @@ export function useProtectedSWRInfinite(path: string = '') {
    * @param path Directory path
    * @returns API to the next page
    */
-  function getNextKey(pageIndex, previousPageData): (string | null)[] | null {
+  function getNextKey(pageIndex: number, previousPageData: OdAPIResponse): (string | null)[] | null {
     // Reached the end of the collection
     if (previousPageData && !previousPageData.folder) return null
 
@@ -60,11 +46,12 @@ export function useProtectedSWRInfinite(path: string = '') {
     return [`/api?path=${path}&next=${previousPageData.next}`, hashedToken]
   }
 
+  // Disable auto-revalidate, these options are equivalent to useSWRImmutable
+  // https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations
   const revalidationOptions = {
-    revalidateOnMount: !(cache.has(`arg@"/api?path=${path}"@null`) || cache.has(`/api?path=${path}`)),
+    revalidateIfStale: false,
     revalidateOnFocus: false,
     revalidateOnReconnect: true,
   }
-  // return useSWRInfinite(getNextKey, fetcher)
   return useSWRInfinite(getNextKey, fetcher, revalidationOptions)
 }

utils/getFileIcon.ts

@@ -1,4 +1,4 @@
-import { IconPrefix, IconName } from '@fortawesome/fontawesome-common-types'
+import type { IconPrefix, IconName } from '@fortawesome/fontawesome-common-types'
 
 const icons: { [key: string]: [IconPrefix, IconName] } = {
   image: ['far', 'file-image'],