Add dedicated button in header for following territories

stackernews · Feb 22, 2024 · 6980586 · 6980586
1 parent ab5f974
commit 6980586
Showing 1 changed file with 54 additions and 20 deletions.
diff --git a/components/territory-header.js b/components/territory-header.js
@@ -71,6 +71,22 @@ export default function TerritoryHeader ({ sub }) {
     }
   )
 
+  const [toggleSubSubscription] = useMutation(
+    gql`
+      mutation toggleSubSubscription($name: String!) {
+        toggleSubSubscription(name: $name)
+      }`, {
+      update (cache, { data: { toggleSubSubscription } }) {
+        cache.modify({
+          id: `Sub:{"name":"${sub.name}"}`,
+          fields: {
+            meSubscription: () => toggleSubSubscription
+          }
+        })
+      }
+    }
+  )
+
   return (
     <>
       <TerritoryPaymentDue sub={sub} />
@@ -81,26 +97,44 @@ export default function TerritoryHeader ({ sub }) {
         <div className='d-flex my-2 justify-content-end'>
           <Share path={`/~${sub.name}`} title={`~${sub.name} stacker news territory`} className='mx-3' />
           {me &&
-            (Number(sub.userId) === Number(me?.id)
-              ? (
-                <Link href={`/~${sub.name}/edit`} className='d-flex align-items-center'>
-                  <Button variant='outline-grey border-2 rounded py-0' size='sm'>edit territory</Button>
-                </Link>)
-              : (
-                <Button
-                  variant='outline-grey border-2 py-0 rounded'
-                  size='sm'
-                  onClick={async () => {
-                    try {
-                      await toggleMuteSub({ variables: { name: sub.name } })
-                    } catch {
-                      toaster.danger(`failed to ${sub.meMuteSub ? 'join' : 'mute'} territory`)
-                      return
-                    }
-                    toaster.success(`${sub.meMuteSub ? 'joined' : 'muted'} territory`)
-                  }}
-                >{sub.meMuteSub ? 'join' : 'mute'} territory
-                </Button>))}
+            <>
+              <Button
+                className='me-1'
+                variant='outline-grey border-2 py-0 rounded'
+                size='sm'
+                onClick={async () => {
+                  try {
+                    await toggleSubSubscription({ variables: { name: sub.name } })
+                  } catch {
+                    toaster.danger(`failed to ${sub.meSubscription ? 'follow' : 'unfollow'} territory`)
+                    return
+                  }
+                  toaster.success(`${sub.meSubscription ? 'followed' : 'unfollowed'} territory`)
+                }}
+              >{sub.meSubscription ? 'unfollow' : 'follow'}
+              </Button>
+              {Number(sub.userId) === Number(me?.id)
+                ? (
+                  <Link href={`/~${sub.name}/edit`} className='d-flex align-items-center'>
+                    <Button variant='outline-grey border-2 rounded py-0' size='sm'>edit territory</Button>
+                  </Link>)
+                : (
+                  <Button
+                    variant='outline-grey border-2 py-0 rounded'
+                    size='sm'
+                    onClick={async () => {
+                      try {
+                        await toggleMuteSub({ variables: { name: sub.name } })
+                      } catch {
+                        toaster.danger(`failed to ${sub.meMuteSub ? 'join' : 'mute'} territory`)
+                        return
+                      }
+                      toaster.success(`${sub.meMuteSub ? 'joined' : 'muted'} territory`)
+                    }}
+                  >{sub.meMuteSub ? 'join' : 'mute'} territory
+                  </Button>
+                  )}
+            </>}
         </div>
       </div>
     </>