📁 Fix account follow logic (Joystream#6015)

* Get follow data from account * Adjust the logic
Joystream · Mar 17, 2024 · 4f511d2 · 4f511d2
1 parent 27d0fc8
commit 4f511d2
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/packages/atlas/src/api/hooks/channel.ts b/packages/atlas/src/api/hooks/channel.ts
@@ -30,6 +30,7 @@ import {
   useUnfollowChannelMutation,
 } from '@/api/queries/__generated__/channels.generated'
 import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
+import { useAuth } from '@/providers/auth/auth.hooks'
 
 export const useBasicChannel = (
   id: string,
@@ -143,6 +144,7 @@ export const useMostPaidChannels = (): { channels: PayeeChannel[] | undefined; l
 
 export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutation>) => {
   const [followChannel, rest] = useFollowChannelMutation()
+  const { refetchCurrentUser } = useAuth()
   const { trackChannelFollow } = useSegmentAnalytics()
   return {
     followChannel: (id: string) => {
@@ -152,6 +154,9 @@ export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutatio
         variables: {
           channelId: id,
         },
+        onCompleted: () => {
+          refetchCurrentUser().catch(() => undefined)
+        },
         update: (cache, mutationResult) => {
           cache.modify({
             id: cache.identify({
@@ -171,13 +176,18 @@ export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutatio
 
 export const useUnfollowChannel = (opts?: MutationHookOptions<UnfollowChannelMutation>) => {
   const [unfollowChannel, rest] = useUnfollowChannelMutation()
+  const { refetchCurrentUser } = useAuth()
+
   return {
     unfollowChannel: (id: string) =>
       unfollowChannel({
         ...opts,
         variables: {
           channelId: id,
         },
+        onCompleted: () => {
+          refetchCurrentUser().catch(() => undefined)
+        },
         update: (cache, mutationResult) => {
           cache.modify({
             id: cache.identify({

diff --git a/packages/atlas/src/api/queries/__generated__/accounts.generated.tsx b/packages/atlas/src/api/queries/__generated__/accounts.generated.tsx
diff --git a/packages/atlas/src/api/queries/accounts.graphql b/packages/atlas/src/api/queries/accounts.graphql
@@ -5,6 +5,10 @@ query GetCurrentAccount {
     isEmailConfirmed
     joystreamAccount
     membershipId
+    followedChannels {
+      channelId
+      timestamp
+    }
   }
 }
 

diff --git a/packages/atlas/src/hooks/useHandleFollowChannel.ts b/packages/atlas/src/hooks/useHandleFollowChannel.ts
@@ -1,31 +1,17 @@
 import { useCallback } from 'react'
 
 import { useFollowChannel, useUnfollowChannel } from '@/api/hooks/channel'
-import { useGetChannelFollowsQuery } from '@/api/queries/__generated__/accounts.generated'
+import { useAuth } from '@/providers/auth/auth.hooks'
 import { useConfirmationModal } from '@/providers/confirmationModal'
-import { useUser } from '@/providers/user/user.hooks'
 import { SentryLogger } from '@/utils/logs'
 
 export const useHandleFollowChannel = (channelId?: string, channelTitle?: string | null) => {
   const [openUnfollowDialog, closeUnfollowDialog] = useConfirmationModal()
   const { followChannel } = useFollowChannel()
-  const { accountId } = useUser()
+  const { currentUser } = useAuth()
   const { unfollowChannel } = useUnfollowChannel()
-  const { data } = useGetChannelFollowsQuery({
-    variables: {
-      where: {
-        channelId_eq: channelId,
-        user: {
-          account: {
-            id_eq: accountId,
-          },
-        },
-      },
-      limit: 1,
-    },
-    skip: !accountId || !channelTitle || !channelId,
-  })
-  const follow = !!data?.channelFollows.length
+
+  const follow = currentUser?.followedChannels.some((followage) => followage.channelId === channelId)
 
   const toggleFollowing = useCallback(async () => {
     if (!channelId || !channelTitle) {

diff --git a/packages/atlas/src/providers/auth/auth.provider.tsx b/packages/atlas/src/providers/auth/auth.provider.tsx
@@ -261,19 +261,34 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const isWalletUser = useMemo(() => encodedSeed === null && !!currentUser, [currentUser, encodedSeed])
 
+  const refetchCurrentUser = useCallback(async () => {
+    const res = await refetch()
+    setCurrentUser(res.data.accountData)
+    return res
+  }, [refetch])
+
   const contextValue: AuthContextValue = useMemo(
     () => ({
       handleLogin,
       isAuthenticating,
       loggedAddress,
-      refetchCurrentUser: refetch,
+      refetchCurrentUser,
       currentUser,
       isWalletUser,
       handleLogout,
       encodedSeed,
       isLoggedIn: isAuthenticating ? undefined : !!currentUser,
     }),
-    [currentUser, encodedSeed, handleLogin, handleLogout, isAuthenticating, isWalletUser, loggedAddress, refetch]
+    [
+      currentUser,
+      encodedSeed,
+      handleLogin,
+      handleLogout,
+      isAuthenticating,
+      isWalletUser,
+      loggedAddress,
+      refetchCurrentUser,
+    ]
   )
 
   return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>