Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c3dd2da

Browse files
pbteja1998pbteja1998
committed
Use the data from mutation response to update the home page feed
1 parent 05ec747 commit c3dd2da

6 files changed

Lines changed: 120 additions & 11 deletions

File tree

‎src/components/HomePageFeed.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,7 @@ function FollowButton({ user }: { user: User }) {
513513

514514
function HomePageAside({ goalId }: { goalId: string }) {
515515
const [session] = useSession()
516-
const { isLoading, isError, data } = useQuery(
516+
const { isLoading, isError, data } = useQuery<{ response: GoalResponse }>(
517517
['/api/fauna/recent-updates', goalId],
518518
() => {
519519
if (!goalId) {
@@ -545,7 +545,7 @@ function HomePageAside({ goalId }: { goalId: string }) {
545545

546546
const shouldShowRecentUpdates =
547547
Boolean(goalId) && goalId !== '' && !isLoading && !isError
548-
const goal: GoalResponse = data?.response ?? {}
548+
const goal: GoalResponse = data?.response
549549

550550
return (
551551
<>

‎src/components/goals/NewUpdate.tsx‎

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useMutation, useQueryClient } from 'react-query'
66
import toast, { Toaster } from 'react-hot-toast'
77
import { useRef, useState } from 'react'
88
import { Markdown, A } from '@/components'
9+
import { HomePageFeedUpdateType } from 'src/pages'
10+
import { GoalResponse } from 'src/pages/[username]'
911

1012
type Inputs = {
1113
description: string
@@ -41,15 +43,78 @@ export default function NewUpdate({
4143
return res.json()
4244
}),
4345
{
44-
onSuccess: () => {
46+
onSuccess: (data, variables, context) => {
4547
toast.success('You have successfully added an update.', {
4648
id: toastId.current,
4749
})
48-
queryClient.refetchQueries('/api/fauna/goals/all-goals-by-user')
50+
51+
queryClient.setQueryData<GoalResponse[]>(
52+
'/api/fauna/goals/all-goals-by-user',
53+
(oldData) => {
54+
if (!oldData) {
55+
return oldData
56+
}
57+
return oldData.map((goalResponse) => {
58+
if (goalResponse.id === goal.id) {
59+
goalResponse.updates = {
60+
data: [
61+
...goalResponse.updates.data,
62+
{
63+
id: data.response.id,
64+
description: data.response.description,
65+
createdAt: data.response.createdAt,
66+
postedBy: data.response.postedBy,
67+
},
68+
],
69+
}
70+
}
71+
return goalResponse
72+
})
73+
}
74+
)
75+
4976
if (updateFromHomePage) {
50-
queryClient.refetchQueries('/api/fauna/all-updates')
51-
queryClient.refetchQueries(['/api/fauna/recent-updates', goal.id])
77+
queryClient.setQueryData<{ updates: HomePageFeedUpdateType[] }>(
78+
'/api/fauna/all-updates',
79+
(oldData) => {
80+
if (!oldData) {
81+
return oldData
82+
}
83+
return {
84+
updates: [data.response, ...oldData.updates],
85+
}
86+
}
87+
)
88+
89+
queryClient.setQueryData<{ response: GoalResponse }>(
90+
['/api/fauna/recent-updates', goal.id],
91+
(oldData) => {
92+
// If the recent-updates panel is not opened yet
93+
// then this oldData will be undefined
94+
// since the corresponsing query is not execcuted even once
95+
if (!oldData) {
96+
return oldData
97+
}
98+
return {
99+
response: {
100+
...oldData.response,
101+
updates: {
102+
data: [
103+
...oldData.response.updates.data,
104+
{
105+
id: data.response.id,
106+
description: data.response.description,
107+
createdAt: data.response.createdAt,
108+
postedBy: data.response.postedBy,
109+
},
110+
],
111+
},
112+
},
113+
}
114+
}
115+
)
52116
}
117+
53118
reset()
54119
},
55120
onError: () => {

‎src/pages/[username]/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function UserProfile({
6060
})
6161
)
6262

63-
const goalResponses = data?.response?.data ?? []
63+
const goalResponses = data ?? []
6464

6565
if (isLoading) {
6666
return (

‎src/pages/api/fauna/goals/add-update.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,51 @@ const FaunaCreateHandler: NextApiHandler = async (
4949
}),
5050
null
5151
),
52+
goalDoc: q.Get(q.Select(['data', 'goal'], q.Var('goalUpdateDoc'))),
53+
postedByDoc: q.Get(
54+
q.Select(['data', 'postedBy'], q.Var('goalUpdateDoc'))
55+
),
5256
},
5357
{
5458
id: q.Select(['ref', 'id'], q.Var('goalUpdateDoc'), null),
59+
goal: {
60+
id: q.Select(['ref', 'id'], q.Var('goalDoc')),
61+
title: q.Select(['data', 'title'], q.Var('goalDoc')),
62+
},
63+
comments: {
64+
data: [],
65+
},
66+
hasLiked: false,
67+
likes: {
68+
data: [],
69+
},
70+
description: q.Select(
71+
['data', 'description'],
72+
q.Var('goalUpdateDoc')
73+
),
74+
createdAt: q.ToMillis(
75+
q.Select(
76+
['data', 'timestamps', 'createdAt'],
77+
q.Var('goalUpdateDoc')
78+
)
79+
),
80+
postedBy: {
81+
id: q.Select(['ref', 'id'], q.Var('postedByDoc')),
82+
name: q.Select(['data', 'name'], q.Var('postedByDoc'), null),
83+
image: q.Select(['data', 'image'], q.Var('postedByDoc'), null),
84+
username: q.Select(
85+
['data', 'username'],
86+
q.Var('postedByDoc'),
87+
null
88+
),
89+
account: {
90+
firstName: q.Select(
91+
['data', 'account', 'firstName'],
92+
q.Var('postedByDoc'),
93+
null
94+
),
95+
},
96+
},
5597
}
5698
)
5799
)

‎src/pages/api/fauna/goals/all-goals-by-user.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ const FaunaCreateHandler: NextApiHandler = async (
112112
}
113113
}
114114
)
115-
const response = await client.query(FQL)
116-
res.status(200).json({ response })
115+
const response: any = await client.query(FQL)
116+
res.status(200).json(response.data)
117117
} catch (error) {
118118
console.error(error)
119119
console.error({ msg: error.message })

‎src/pages/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ export type HomePageFeedUpdateType = {
3232
export default function Home() {
3333
const [session] = useSession()
3434

35-
const { isLoading, isError, data } = useQuery('/api/fauna/all-updates', () =>
35+
const { isLoading, isError, data } = useQuery<{
36+
updates: HomePageFeedUpdateType[]
37+
}>('/api/fauna/all-updates', () =>
3638
fetch(`/api/fauna/all-updates`).then((res) => {
3739
if (!res.ok) {
3840
throw new Error('Something went wrong!!')
@@ -62,7 +64,7 @@ export default function Home() {
6264
<>
6365
<Title>Learn. Code. Collaborate.</Title>
6466
<HomePageFeed
65-
updates={isLoading ? [] : data.updates}
67+
updates={data?.updates ?? []}
6668
showGoal={Boolean(
6769
!isGoalLoading && !isGoalError && session && goalData?.goal
6870
)}

0 commit comments

Comments
 (0)