Use swr for data fetching

web/src/pages/EmailList.tsx

@@ -19,11 +19,10 @@
 
 export default function EmailList() {
   const {
-    count,
     setCount,
     hasMore,
     setHasMore,
     nextCursor,
     setNextCursor,
     emails,
     setEmails,
@@ -111,22 +110,22 @@
     return currentYear > year || (currentYear === year && currentMonth > month)
   }
 
   const loadMoreEmails = async () => {
     if (!hasMore) return
-    try {
-      const data = await loadEmails({
-        year,
-        month,
-        nextCursor
-      })
-      setEmails([...emails, ...data.items])
-      setCount(data.count + count)
-      setHasMore(data.hasMore)
-      setNextCursor(data.nextCursor)
-    } catch (e) {
-      console.error('Failed to load emails', e)
-      toast.error('Failed to load emails')
-    }
+    // try {
+    //   const data = await loadEmails({
+    //     year,
+    //     month,
+    //     nextCursor
+    //   })
+    //   setEmails([...emails, ...data.items])
+    //   setCount(data.count + count)
+    //   setHasMore(data.hasMore)
+    //   setNextCursor(data.nextCursor)
+    // } catch (e) {
+    //   console.error('Failed to load emails', e)
+    //   toast.error('Failed to load emails')
+    // }
   }
 
   const handleDelete = async () => {

web/src/pages/EmailRoot.tsx

@@ -10,7 +10,12 @@
 
 import { DraftEmailsContext } from 'contexts/DraftEmailContext'
 
-import { EmailInfo, ListEmailsResponse, listEmails } from 'services/emails'
+import {
+  EmailInfo,
+  ListEmailsResponse,
+  listEmails,
+  useEmails
+} from 'services/emails'
 
 import { getCurrentYearMonth } from 'utils/time'
 
@@ -46,6 +51,10 @@
 }
 
 export default function EmailRoot(props: EmailRootProps) {
+  const { year: initialYear, month: initialMonth } = getCurrentYearMonth()
+  const [year, setYear] = useState(initialYear)
+  const [month, setMonth] = useState(initialMonth)
+
   const [count, setCount] = useState(0)
   const [hasMore, setHasMore] = useState(true)
   const [nextCursor, setNextCursor] = useState<string | undefined>(undefined)
@@ -56,15 +65,35 @@
     'idle' | 'loading' | 'loaded' | 'error'
   >('idle')
 
-  const { year: initialYear, month: initialMonth } = getCurrentYearMonth()
-  const [year, setYear] = useState(initialYear)
-  const [month, setMonth] = useState(initialMonth)
+  const useEmailsEffect = () => {
+    const data = useEmails({
+      type: props.type,
+      year,
+      month,
+      order: 'desc',
+      nextCursor
+    })
+    return data
+  }
+
+  const emailsData = useEmailsEffect()
+
+  useEffect(() => {
+    console.log('84 emailsData', emailsData)
+    if (emailsData.loadingState === 'loaded') {
+      setEmails(emailsData.items)
+      setCount(emailsData.count)
+      setHasMore(emailsData.hasMore)
+      // setNextCursor(emailsData.nextCursor)
+    }
+  }, [emailsData.loadingState])
 
   const loadEmails = async (input: {
     year?: number
     month?: number
     nextCursor?: string
   }) => {
+    return []
     const { nextCursor } = input
 
     const data = await listEmails({

web/src/services/emails.ts

@@ -31,9 +31,11 @@ export interface ListEmailsResponse {
   nextCursor?: string
 }
 
-export async function listEmails(
-  props: ListEmailsProps
-): Promise<ListEmailsResponse> {
+export interface UseEmailsResponse extends ListEmailsResponse {
+  loadingState: 'idle' | 'loading' | 'loaded' | 'error'
+}
+
+function generateListEmailsParamString(props: ListEmailsProps): string {
   const { type, year, month, order, pageSize, nextCursor } = props
   const params = new URLSearchParams({
     type
@@ -53,8 +55,45 @@ export async function listEmails(
   if (nextCursor) {
     params.append('nextCursor', nextCursor)
   }
+  return params.toString()
+}
+
+export function useEmails(props: ListEmailsProps): UseEmailsResponse {
+  const key = ['emails', generateListEmailsParamString(props)]
+  const { data, error, isLoading } = useSWR<ListEmailsResponse, Error>(
+    key,
+    async () => {
+      return await listEmails(props)
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false
+    }
+  )
+
+  let loadingState: 'idle' | 'loading' | 'loaded' | 'error' = 'idle'
+  if (isLoading) {
+    loadingState = 'loading'
+  } else if (error) {
+    loadingState = 'error'
+  } else if (data) {
+    loadingState = 'loaded'
+  }
+
+  return {
+    items: data?.items ?? [],
+    count: data?.count ?? 0,
+    hasMore: data?.hasMore ?? false,
+    nextCursor: data?.nextCursor,
+    loadingState
+  }
+}
 
-  const response = await fetch('/web/emails?' + params.toString(), {
+export async function listEmails(
+  props: ListEmailsProps
+): Promise<ListEmailsResponse> {
+  const params = generateListEmailsParamString(props)
+  const response = await fetch('/web/emails?' + params, {
     method: 'GET'
   })
   return response.json() as Promise<ListEmailsResponse>