Remove invalid labelers when subscribing/unsubscribing (#4771)

* Remove invalid labelers when subscribing/unsubscribing

* Let the async lock cook

* Use link to associate, leave copy as is

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -10,6 +10,8 @@ import {
 import {msg, Plural, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import {MAX_LABELERS} from '#/lib/constants'
 import {isAppLabeler} from '#/lib/moderation'
 import {logger} from '#/logger'
 import {Shadow} from '#/state/cache/types'
@@ -75,14 +77,14 @@ let ProfileHeaderLabeler = ({
     [profile, moderationOpts],
   )
   const {data: preferences} = usePreferencesQuery()
-  const {mutateAsync: toggleSubscription, variables} =
-    useLabelerSubscriptionMutation()
+  const {
+    mutateAsync: toggleSubscription,
+    variables,
+    reset,
+  } = useLabelerSubscriptionMutation()
   const isSubscribed =
     variables?.subscribe ??
     preferences?.moderationPrefs.labelers.find(l => l.did === profile.did)
-  const canSubscribe =
-    isSubscribed ||
-    (preferences ? preferences?.moderationPrefs.labelers.length <= 20 : false)
   const {mutateAsync: likeMod, isPending: isLikePending} = useLikeMutation()
   const {mutateAsync: unlikeMod, isPending: isUnlikePending} =
     useUnlikeMutation()
@@ -130,17 +132,17 @@ let ProfileHeaderLabeler = ({
   const onPressSubscribe = React.useCallback(
     () =>
       requireAuth(async (): Promise<void> => {
-        if (!canSubscribe) {
-          cantSubscribePrompt.open()
-          return
-        }
         try {
           await toggleSubscription({
             did: profile.did,
             subscribe: !isSubscribed,
           })
         } catch (e: any) {
-          // setSubscriptionError(e.message)
+          reset()
+          if (e.message === 'MAX_LABELERS') {
+            cantSubscribePrompt.open()
+            return
+          }
           logger.error(`Failed to subscribe to labeler`, {message: e.message})
         }
       }),
@@ -149,8 +151,8 @@ let ProfileHeaderLabeler = ({
       toggleSubscription,
       isSubscribed,
       profile,
-      canSubscribe,
       cantSubscribePrompt,
+      reset,
     ],
   )
 
@@ -199,14 +201,13 @@ let ProfileHeaderLabeler = ({
                     style={[
                       {
                         paddingVertical: gtMobile ? 12 : 10,
-                        backgroundColor:
-                          isSubscribed || !canSubscribe
-                            ? state.hovered || state.pressed
-                              ? t.palette.contrast_50
-                              : t.palette.contrast_25
-                            : state.hovered || state.pressed
-                            ? tokens.color.temp_purple_dark
-                            : tokens.color.temp_purple,
+                        backgroundColor: isSubscribed
+                          ? state.hovered || state.pressed
+                            ? t.palette.contrast_50
+                            : t.palette.contrast_25
+                          : state.hovered || state.pressed
+                          ? tokens.color.temp_purple_dark
+                          : tokens.color.temp_purple,
                       },
                       a.px_lg,
                       a.rounded_sm,
@@ -215,11 +216,9 @@ let ProfileHeaderLabeler = ({
                     <Text
                       style={[
                         {
-                          color: canSubscribe
-                            ? isSubscribed
-                              ? t.palette.contrast_700
-                              : t.palette.white
-                            : t.palette.contrast_400,
+                          color: isSubscribed
+                            ? t.palette.contrast_700
+                            : t.palette.white,
                         },
                         a.font_bold,
                         a.text_center,
@@ -317,6 +316,9 @@ let ProfileHeaderLabeler = ({
 ProfileHeaderLabeler = memo(ProfileHeaderLabeler)
 export {ProfileHeaderLabeler}
 
+/**
+ * Keep this in sync with the value of {@link MAX_LABELERS}
+ */
 function CantSubscribePrompt({
   control,
 }: {