From b47dd88d1a4b972e73b0379b2d82081125210007 Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Mon, 24 Jan 2022 20:50:43 +0800 Subject: [PATCH] useSWR instead of custom useAxiosGet hook for cache reuse --- components/SearchModal.tsx | 24 ++++++++---------------- components/previews/CodePreview.tsx | 2 +- components/previews/MarkdownPreview.tsx | 2 +- components/previews/TextPreview.tsx | 2 +- components/previews/URLPreview.tsx | 2 +- pages/api/item.ts | 2 +- utils/fetchOnMount.ts | 10 +++++----- 7 files changed, 18 insertions(+), 26 deletions(-) diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx index 4983442..ab0a63f 100644 --- a/components/SearchModal.tsx +++ b/components/SearchModal.tsx @@ -1,19 +1,20 @@ import axios from 'axios' +import useSWR, { SWRResponse } from 'swr' +import { Dispatch, Fragment, SetStateAction, useState } from 'react' import AwesomeDebouncePromise from 'awesome-debounce-promise' import { useAsync } from 'react-async-hook' import useConstant from 'use-constant' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { Dispatch, Fragment, SetStateAction, useState } from 'react' -import { Dialog, Transition } from '@headlessui/react' import Link from 'next/link' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { Dialog, Transition } from '@headlessui/react' import { OdDriveItem, OdSearchResult } from '../types' import { LoadingIcon } from './Loading' import { getFileIcon } from '../utils/getFileIcon' -import useAxiosGet from '../utils/fetchOnMount' import siteConfig from '../config/site.json' +import { fetcher } from '../utils/fetchWithSWR' /** * Extract the searched item's path in field 'parentReference' and convert it to the @@ -101,27 +102,18 @@ function SearchResultItemTemplate({ } function SearchResultItemLoadRemote({ result }: { result: OdSearchResult[number] }) { - const { - content, - error, - validating, - }: { - content: OdDriveItem - error: string - validating: boolean - } = useAxiosGet(`/api/item?id=${result.id}`) + const { data, error }: SWRResponse = useSWR(`/api/item?id=${result.id}`, fetcher) if (error) { return } - - if (validating) { + if (!data) { return ( ) } - const driveItemPath = `${mapAbsolutePath(content.parentReference.path)}/${encodeURIComponent(content.name)}` + const driveItemPath = `${mapAbsolutePath(data.parentReference.path)}/${encodeURIComponent(data.name)}` return ( = ({ file }) => { - const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) + const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) useEffect(() => { if (typeof window !== 'undefined') { diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx index 2bb8047..6a4209e 100644 --- a/components/previews/MarkdownPreview.tsx +++ b/components/previews/MarkdownPreview.tsx @@ -19,7 +19,7 @@ const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ( path, standalone = true, }) => { - const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) + const { response: content, error, validating } = useAxiosGet(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('/')) diff --git a/components/previews/TextPreview.tsx b/components/previews/TextPreview.tsx index 70f15b5..15226a9 100644 --- a/components/previews/TextPreview.tsx +++ b/components/previews/TextPreview.tsx @@ -5,7 +5,7 @@ import useAxiosGet from '../../utils/fetchOnMount' import { DownloadBtnContainer, PreviewContainer } from './Containers' const TextPreview = ({ file }) => { - const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) + const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) if (error) { return ( diff --git a/components/previews/URLPreview.tsx b/components/previews/URLPreview.tsx index 6555747..5bf459f 100644 --- a/components/previews/URLPreview.tsx +++ b/components/previews/URLPreview.tsx @@ -12,7 +12,7 @@ const parseDotUrl = (content: string): string | undefined => { } const TextPreview = ({ file }) => { - const { content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) + const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl']) if (error) { return ( diff --git a/pages/api/item.ts b/pages/api/item.ts index 9ae9176..8385c47 100644 --- a/pages/api/item.ts +++ b/pages/api/item.ts @@ -1,7 +1,7 @@ import axios from 'axios' import type { NextApiRequest, NextApiResponse } from 'next' -import { encodePath, getAccessToken } from '.' +import { getAccessToken } from '.' import apiConfig from '../../config/api.json' export default async function handler(req: NextApiRequest, res: NextApiResponse) { diff --git a/utils/fetchOnMount.ts b/utils/fetchOnMount.ts index 05595d7..3a0a67f 100644 --- a/utils/fetchOnMount.ts +++ b/utils/fetchOnMount.ts @@ -1,20 +1,20 @@ import axios from 'axios' import { useEffect, useState } from 'react' -// Custom hook to fetch raw file content on mount -export default function useAxiosGet(fetchUrl: string): { content: any; error: string; validating: boolean } { - const [content, setContent] = useState('') +// Custom hook to axios get a URL or API endpoint on mount +export default function useAxiosGet(fetchUrl: string): { response: any; error: string; validating: boolean } { + const [response, setResponse] = useState('') const [validating, setValidating] = useState(true) const [error, setError] = useState('') useEffect(() => { axios .get(fetchUrl) - .then(res => setContent(res.data)) + .then(res => setResponse(res.data)) .catch(e => setError(e.message)) .finally(() => { setValidating(false) }) }, [fetchUrl]) - return { content, error, validating } + return { response, error, validating } }