use second request for paging instead of expand children

This commit is contained in:
spencerwooo 2021-09-04 18:47:31 +01:00
parent 97f4250a57
commit 091e97f211
No known key found for this signature in database
GPG key ID: 24CD550268849CA0
2 changed files with 31 additions and 21 deletions

View file

@ -123,7 +123,6 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
) )
} }
const resp = data.data
const fileIsImage = (fileName: string) => { const fileIsImage = (fileName: string) => {
const fileExtension = getExtension(fileName) const fileExtension = getExtension(fileName)
if (hasKey(extensions, fileExtension)) { if (hasKey(extensions, fileExtension)) {
@ -134,8 +133,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
return false return false
} }
if ('folder' in resp) { if ('folderData' in data) {
const { children } = resp const { value } = data.folderData
// Image preview rendering preparations // Image preview rendering preparations
const imagesInFolder: ImageDecorator[] = [] const imagesInFolder: ImageDecorator[] = []
@ -146,7 +145,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
let renderReadme = false let renderReadme = false
let readmeFile = null let readmeFile = null
children.forEach((c: any) => { value.forEach((c: any) => {
if (fileIsImage(c.name)) { if (fileIsImage(c.name)) {
imagesInFolder.push({ imagesInFolder.push({
src: c['@microsoft.graph.downloadUrl'], src: c['@microsoft.graph.downloadUrl'],
@ -218,7 +217,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
/> />
)} )}
{children.map((c: any) => ( {value.map((c: any) => (
<div className="hover:bg-gray-100 dark:hover:bg-gray-850 grid grid-cols-12" key={c.id}> <div className="hover:bg-gray-100 dark:hover:bg-gray-850 grid grid-cols-12" key={c.id}>
<div <div
className="col-span-11" className="col-span-11"
@ -281,9 +280,10 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
) )
} }
if ('file' in resp) { if ('identityData' in data) {
const downloadUrl = resp['@microsoft.graph.downloadUrl'] const { identityData } = data
const fileName = resp.name const downloadUrl = identityData['@microsoft.graph.downloadUrl']
const fileName = data.identityData.name
const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase() const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase()
if (hasKey(extensions, fileExtension)) { if (hasKey(extensions, fileExtension)) {
@ -297,25 +297,25 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
) )
case preview.text: case preview.text:
return <TextPreview file={resp} /> return <TextPreview file={identityData} />
case preview.code: case preview.code:
return <CodePreview file={resp} /> return <CodePreview file={identityData} />
case preview.markdown: case preview.markdown:
return <MarkdownPreview file={resp} path={path} /> return <MarkdownPreview file={identityData} path={path} />
case preview.video: case preview.video:
return <VideoPreview file={resp} /> return <VideoPreview file={identityData} />
case preview.audio: case preview.audio:
return <AudioPreview file={resp} /> return <AudioPreview file={identityData} />
case preview.pdf: case preview.pdf:
return <PDFPreview file={resp} /> return <PDFPreview file={identityData} />
case preview.office: case preview.office:
return <OfficePreview file={resp} /> return <OfficePreview file={identityData} />
default: default:
return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div> return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div>
@ -326,7 +326,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
<> <>
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour <FourOhFour
errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`} errorMsg={`Preview for file ${identityData.name} is not available, download directly with the button below.`}
/> />
</div> </div>
<div className="mt-4"> <div className="mt-4">
@ -338,7 +338,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
return ( return (
<div className="dark:bg-gray-900 p-3 bg-white rounded shadow"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour errorMsg={`Cannot preview ${resp.name}.`} /> <FourOhFour errorMsg={`Cannot preview ${path}.`} />
</div> </div>
) )
} }

View file

@ -112,15 +112,25 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
} }
// Normal query selecting and expanding every children in current directory // Querying current path identity (file or folder) and follow up query childrens in folder
const { data } = await axios.get(requestUrl, { const { data: identityData } = await axios.get(requestUrl, {
headers: { Authorization: `Bearer ${accessToken}` }, headers: { Authorization: `Bearer ${accessToken}` },
params: { params: {
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file', select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file',
expand: 'children(select=@content.downloadUrl,name,lastModifiedDateTime,eTag,size,id,folder,file)',
}, },
}) })
res.status(200).json({ path, data })
if ('folder' in identityData) {
const { data: folderData } = await axios.get(`${requestUrl}:/children`, {
headers: { Authorization: `Bearer ${accessToken}` },
params: {
select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file',
},
})
res.status(200).json({ path, identityData, folderData })
return
}
res.status(200).json({ path, identityData })
return return
} }