From ce3f0b42fcaa668ce32b0f34cc46bf26d16bc5db Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sat, 23 Mar 2024 01:00:34 +0800
Subject: [PATCH 1/3] chore(package): add faker package

---
 package.json   |  1 +
 pnpm-lock.yaml | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/package.json b/package.json
index e5f1426..2354ced 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87b0bd7..c95a942 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   '@emotion/styled':
     specifier: ^11.11.0
     version: 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.46)(react@18.2.0)
+  '@faker-js/faker':
+    specifier: ^8.4.1
+    version: 8.4.1
   '@fontsource-variable/open-sans':
     specifier: ^5.0.28
     version: 5.0.28
@@ -2573,6 +2576,14 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
+  /@faker-js/faker@8.4.1:
+    resolution:
+      {
+        integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
+      }
+    engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13' }
+    dev: false
+
   /@floating-ui/core@1.6.0:
     resolution:
       {

From 813b0efd1d2727ec5c7db5b8af480885aeb5053f Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sat, 23 Mar 2024 11:20:08 +0800
Subject: [PATCH 2/3] feat(FollowSection): use avatars from faker

---
 src/hooks/useFetchFollowData.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useFetchFollowData.ts b/src/hooks/useFetchFollowData.ts
index 7ff4c82..91b2073 100644
--- a/src/hooks/useFetchFollowData.ts
+++ b/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

From 3639aaf94e14b30c36d6dcdd31bbdce3c067575a Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sat, 23 Mar 2024 14:13:35 +0800
Subject: [PATCH 3/3] feat(ResultsPage): use images from faker

---
 src/hooks/useFetchResults.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useFetchResults.ts b/src/hooks/useFetchResults.ts
index a6ecd8e..c2e0587 100644
--- a/src/hooks/useFetchResults.ts
+++ b/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