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

Skip to content

Commit 1404d89

Browse files
pbteja1998pbteja1998
committed
Fetch the following status along with other user details
1 parent 185aaa9 commit 1404d89

File tree

6 files changed

+117
-125
lines changed

6 files changed

+117
-125
lines changed

‎src/components/members/Member.tsx‎

Lines changed: 42 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from 'tabler-icons'
1313
import { A, FollowModal } from '@/components'
1414
import useFollowUser from '../profile/useFollowUser'
15-
import { useEffect, useState } from 'react'
15+
import { useState } from 'react'
1616
import { useRouter } from 'next/router'
1717
import { useSession } from 'next-auth/client'
1818

@@ -22,20 +22,10 @@ export default function Member({ user }: { user: User }) {
2222
const socials = user.socials
2323
const account = user.account
2424
const [isHoveringFollowButton, setIsHoveringFollowButton] = useState(false)
25-
const {
26-
shouldShowFollowButton,
27-
isFollowing: isFollowingData,
28-
toggleFollow,
29-
isLoading,
30-
} = useFollowUser(user.id)
25+
const { shouldShowFollowButton, toggleFollow } = useFollowUser(user.id)
3126
const [isModalOpen, setIsModalOpen] = useState(false)
3227

33-
const [isFollowing, setIsFollowing] = useState(false)
34-
useEffect(() => {
35-
if (!isLoading) {
36-
setIsFollowing(isFollowingData)
37-
}
38-
}, [isFollowingData, isLoading])
28+
const [isFollowing, setIsFollowing] = useState(user.isFollowing)
3929

4030
const toggle = () => {
4131
setIsFollowing(!isFollowing)
@@ -145,47 +135,45 @@ export default function Member({ user }: { user: User }) {
145135
{shouldShowFollowButton && (
146136
<>
147137
<dt className="sr-only">Follow</dt>
148-
{!isLoading && (
149-
<dd className="mt-4">
150-
{isFollowing ? (
151-
<>
152-
<Button
153-
size="xs"
154-
onClick={() => toggle()}
155-
variant="solid"
156-
variantColor={isHoveringFollowButton ? 'danger' : 'brand'}
157-
onMouseEnter={() => setIsHoveringFollowButton(true)}
158-
onMouseLeave={() => setIsHoveringFollowButton(false)}
159-
>
160-
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
161-
</Button>
162-
</>
163-
) : (
164-
<>
165-
<Button
166-
size="xs"
167-
onClick={() => {
168-
if (!session) {
169-
setIsModalOpen(true)
170-
return
171-
}
172-
toggle()
173-
}}
174-
leadingIcon={IconPlus}
175-
>
176-
Follow
177-
</Button>
178-
{!session && (
179-
<FollowModal
180-
user={user}
181-
isOpen={isModalOpen}
182-
setIsOpen={setIsModalOpen}
183-
/>
184-
)}
185-
</>
186-
)}
187-
</dd>
188-
)}
138+
<dd className="mt-4">
139+
{isFollowing ? (
140+
<>
141+
<Button
142+
size="xs"
143+
onClick={() => toggle()}
144+
variant="solid"
145+
variantColor={isHoveringFollowButton ? 'danger' : 'brand'}
146+
onMouseEnter={() => setIsHoveringFollowButton(true)}
147+
onMouseLeave={() => setIsHoveringFollowButton(false)}
148+
>
149+
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
150+
</Button>
151+
</>
152+
) : (
153+
<>
154+
<Button
155+
size="xs"
156+
onClick={() => {
157+
if (!session) {
158+
setIsModalOpen(true)
159+
return
160+
}
161+
toggle()
162+
}}
163+
leadingIcon={IconPlus}
164+
>
165+
Follow
166+
</Button>
167+
{!session && (
168+
<FollowModal
169+
user={user}
170+
isOpen={isModalOpen}
171+
setIsOpen={setIsModalOpen}
172+
/>
173+
)}
174+
</>
175+
)}
176+
</dd>
189177
</>
190178
)}
191179
{!shouldShowFollowButton && (

‎src/components/profile/Profile.tsx‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,11 @@ import { useSession } from 'next-auth/client'
1515

1616
export default function Profile({ user }: { user: User }) {
1717
const [session, loading] = useSession()
18-
const {
19-
shouldShowFollowButton,
20-
isFollowing: isFollowingData,
21-
toggleFollow,
22-
isLoading,
23-
} = useFollowUser(user.id)
18+
const { shouldShowFollowButton, toggleFollow } = useFollowUser(user.id)
2419
const [isHoveringFollowButton, setIsHoveringFollowButton] = useState(false)
2520
const [isModalOpen, setIsModalOpen] = useState(false)
2621

27-
const [isFollowing, setIsFollowing] = useState(false)
28-
useEffect(() => {
29-
if (!isLoading) {
30-
setIsFollowing(isFollowingData)
31-
}
32-
}, [isFollowingData, isLoading])
22+
const [isFollowing, setIsFollowing] = useState(user.isFollowing)
3323

3424
const toggle = () => {
3525
setIsFollowing(!isFollowing)
@@ -145,39 +135,38 @@ export default function Profile({ user }: { user: User }) {
145135
</div>
146136
) : (
147137
<div className="mt-5 flex justify-center sm:mt-0">
148-
{!isLoading &&
149-
(isFollowing ? (
150-
<>
151-
<Button
152-
onClick={() => toggle()}
153-
variant="solid"
154-
variantColor={isHoveringFollowButton ? 'danger' : 'brand'}
155-
onMouseEnter={() => setIsHoveringFollowButton(true)}
156-
onMouseLeave={() => setIsHoveringFollowButton(false)}
157-
>
158-
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
159-
</Button>
160-
</>
161-
) : (
162-
<>
163-
<Button
164-
onClick={() => {
165-
if (!session) {
166-
setIsModalOpen(true)
167-
return
168-
}
169-
toggle()
170-
}}
171-
>
172-
Follow
173-
</Button>
174-
<FollowModal
175-
user={user}
176-
isOpen={isModalOpen}
177-
setIsOpen={setIsModalOpen}
178-
/>
179-
</>
180-
))}
138+
{isFollowing ? (
139+
<>
140+
<Button
141+
onClick={() => toggle()}
142+
variant="solid"
143+
variantColor={isHoveringFollowButton ? 'danger' : 'brand'}
144+
onMouseEnter={() => setIsHoveringFollowButton(true)}
145+
onMouseLeave={() => setIsHoveringFollowButton(false)}
146+
>
147+
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
148+
</Button>
149+
</>
150+
) : (
151+
<>
152+
<Button
153+
onClick={() => {
154+
if (!session) {
155+
setIsModalOpen(true)
156+
return
157+
}
158+
toggle()
159+
}}
160+
>
161+
Follow
162+
</Button>
163+
<FollowModal
164+
user={user}
165+
isOpen={isModalOpen}
166+
setIsOpen={setIsModalOpen}
167+
/>
168+
</>
169+
)}
181170
</div>
182171
)}
183172
</div>

‎src/components/profile/useFollowUser.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,6 @@ export default function useFollowUser(userId: string) {
1212
setCurrentUser(session.user)
1313
}
1414
}, [loading, session])
15-
const { isLoading, data: isFollowingData } = useQuery(
16-
['/api/isFollowing', currentUser?.id, userId],
17-
() => {
18-
return fetch(`/api/fauna/is-following`, {
19-
method: 'POST',
20-
headers: {
21-
'Content-Type': 'application/json',
22-
},
23-
body: JSON.stringify({
24-
userId,
25-
}),
26-
}).then((res) => {
27-
if (!res.ok) {
28-
throw new Error('Something went wrong!!')
29-
}
30-
return res.json()
31-
})
32-
}
33-
)
3415

3516
const { mutate: toggleFollow } = useMutation(
3617
() =>
@@ -56,9 +37,7 @@ export default function useFollowUser(userId: string) {
5637
)
5738

5839
return {
59-
isLoading,
6040
shouldShowFollowButton: currentUser.id !== userId,
61-
isFollowing: isFollowingData?.isFollowing ?? false,
6241
toggleFollow,
6342
}
6443
}

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { InferGetServerSidePropsType } from 'next'
55
import { User } from '../members'
66
import { DateTime } from 'luxon'
77
import { useQuery } from 'react-query'
8-
import { useSession } from 'next-auth/client'
8+
import { getSession, useSession } from 'next-auth/client'
99
const q = faunadb.query
1010
const isProduction = process.env.NODE_ENV === 'production'
1111
const client = new faunadb.Client({
@@ -149,17 +149,33 @@ export default function UserProfile({
149149
)
150150
}
151151

152-
export const getServerSideProps = async (context) => {
153-
const username = context.query.username
152+
export const getServerSideProps = async ({ req, query }) => {
153+
const session = await getSession({ req })
154+
const username = query.username
154155
const dbUser = q.Get(q.Match(q.Index('user_by_username'), username))
156+
const userId = q.Select(['ref', 'id'], dbUser)
157+
let isFollowing = false
158+
if (session) {
159+
const followerId = (session.user as User).id
160+
const ref = q.Match(q.Index('unique_user_and_follower'), [
161+
q.Ref(q.Collection('users'), userId),
162+
q.Ref(q.Collection('users'), followerId),
163+
])
164+
isFollowing = q.If(
165+
q.Exists(ref),
166+
q.Select(['data', 'isFollowing'], q.Get(ref)),
167+
false
168+
) as boolean
169+
}
155170
const user = (await client.query({
156-
id: q.Select(['ref', 'id'], dbUser),
171+
id: userId,
157172
name: q.Select(['data', 'name'], dbUser, null),
158173
username: q.Select(['data', 'username'], dbUser, null),
159174
email: q.Select(['data', 'email'], dbUser, null),
160175
image: q.Select(['data', 'image'], dbUser, null),
161176
account: q.Select(['data', 'account'], dbUser, null),
162177
socials: q.Select(['data', 'socials'], dbUser, null),
178+
isFollowing,
163179
})) as User
164180
return {
165181
props: {

‎src/pages/api/fauna/members.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
22

33
import faunadb from 'faunadb'
44
import { User } from 'src/pages/members'
5+
import { getSession } from 'next-auth/client'
56
const q = faunadb.query
67
const isProduction = process.env.NODE_ENV === 'production'
78
const client = new faunadb.Client({
@@ -15,12 +16,29 @@ const FaunaCreateHandler: NextApiHandler = async (
1516
req: NextApiRequest,
1617
res: NextApiResponse
1718
) => {
19+
const session = await getSession({ req })
20+
1821
try {
1922
const response: any = await client.query(
2023
q.Map(q.Paginate(q.Documents(q.Collection('users'))), (userRef) => {
2124
const user = q.Get(userRef)
25+
const userId = q.Select(['ref', 'id'], user)
26+
let isFollowing = false
27+
28+
if (session) {
29+
const followerId = (session.user as User).id
30+
const ref = q.Match(q.Index('unique_user_and_follower'), [
31+
q.Ref(q.Collection('users'), userId),
32+
q.Ref(q.Collection('users'), followerId),
33+
])
34+
isFollowing = q.If(
35+
q.Exists(ref),
36+
q.Select(['data', 'isFollowing'], q.Get(ref)),
37+
false
38+
) as boolean
39+
}
2240
return {
23-
id: q.Select(['ref', 'id'], user),
41+
id: userId,
2442
name: q.Select(['data', 'name'], user, null),
2543
username: q.Select(['data', 'username'], user, null),
2644
image: q.Select(['data', 'image'], user, null),
@@ -29,6 +47,7 @@ const FaunaCreateHandler: NextApiHandler = async (
2947
bio: q.Select(['data', 'account', 'bio'], user, null),
3048
},
3149
socials: q.Select(['data', 'socials'], user, null),
50+
isFollowing,
3251
}
3352
})
3453
)

‎src/pages/members.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,5 @@ export type User = Partial<{
5959
company: string
6060
technologiesFamiliarWith: string[]
6161
}>
62+
isFollowing: boolean
6263
}>

0 commit comments

Comments
 (0)