Merge pull request #16 from yun-cheng/feat/use-fake-images

feat: use fake images

package.json

@@ -25,6 +25,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.0",
+		"@faker-js/faker": "^8.4.1",
 		"@fontsource-variable/open-sans": "^5.0.28",
 		"@fontsource/ubuntu": "^5.0.12",
 		"@mui/material": "^5.15.13",

src/hooks/useFetchFollowData.ts

@@ -1,14 +1,29 @@
+import { faker } from '@faker-js/faker'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import fetchFollowData from 'api/fetchFollowData'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 
 export default function useFetchFollowData() {
 	const [type, setType] = useState<'followers' | 'following'>('followers')
 
+	const fetchAndTransformFollowData = useCallback(
+		async ({ pageParam }: { pageParam: number }) => {
+			const typeNumber = type === 'followers' ? 0 : 1000
+			faker.seed(typeNumber + pageParam)
+			const followData = await fetchFollowData({ type, page: pageParam })
+			followData.data = followData.data.map(user => ({
+				...user,
+				avater: faker.image.avatarLegacy()
+			}))
+			return followData
+		},
+		[type]
+	)
+
 	const { status, data, error, isFetching, fetchNextPage, hasNextPage } =
 		useInfiniteQuery({
 			queryKey: ['fetchFollowData', type],
-			queryFn: async ({ pageParam: page }) => fetchFollowData({ type, page }),
+			queryFn: fetchAndTransformFollowData,
 			initialPageParam: 1,
 			getNextPageParam: lastPage =>
 				lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined

src/hooks/useFetchResults.ts

@@ -1,5 +1,7 @@
+import { faker } from '@faker-js/faker'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import fetchResults from 'api/fetchResults'
+import { useCallback } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 export default function useFetchResults() {
@@ -8,11 +10,30 @@ export default function useFetchResults() {
 	const keyword = searchParams.get('keyword') ?? ''
 	const pageSize = Number(searchParams.get('pageSize'))
 
+	const fetchAndTransformResults = useCallback(
+		async ({ pageParam }: { pageParam: number }) => {
+			faker.seed(pageParam * 100 + pageSize)
+			const results = await fetchResults({
+				keyword,
+				pageSize,
+				page: pageParam
+			})
+			results.data = results.data.map(result => ({
+				...result,
+				avater: faker.image.urlPicsumPhotos({
+					width: 450,
+					height: 300
+				})
+			}))
+			return results
+		},
+		[keyword, pageSize]
+	)
+
 	const { status, data, error, isFetching, fetchNextPage, hasNextPage } =
 		useInfiniteQuery({
 			queryKey: ['fetchResults', keyword, pageSize],
-			queryFn: async ({ pageParam: page }) =>
-				fetchResults({ keyword, page, pageSize }),
+			queryFn: fetchAndTransformResults,
 			initialPageParam: 1,
 			getNextPageParam: lastPage =>
 				lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined