Add Territory Sub management tab in Subscriptions

Author: brymut

api/resolvers/sub.js

@@ -170,6 +170,33 @@ export default {
         cursor: subs.length === limit ? nextCursorEncoded(decodedCursor, limit) : null,
         subs
       }
+    },
+    mySubscribedSubs: async (parent, { cursor }, { models, me }) => {
+      if (!me) {
+        throw new GqlAuthenticationError()
+      }
+
+      const decodedCursor = decodeCursor(cursor)
+      const subs = await models.$queryRawUnsafe(`
+        SELECT "Sub".*,
+          EXISTS (
+            SELECT 1 FROM "MuteSub"
+            WHERE "MuteSub"."userId" = $1 AND "MuteSub"."subName" = "Sub".name
+          ) AS "meMuteSub",
+          TRUE as "meSubscription"
+        FROM "SubSubscription"
+        JOIN "Sub" ON "SubSubscription"."subName" = "Sub".name
+        WHERE "SubSubscription"."userId" = $1
+          AND "Sub".status <> 'STOPPED'
+        ORDER BY "Sub".name ASC
+        OFFSET $2
+        LIMIT $3
+      `, me.id, decodedCursor.offset, LIMIT)
+
+      return {
+        cursor: subs.length === LIMIT ? nextCursorEncoded(decodedCursor, LIMIT) : null,
+        subs
+      }
     }
   },
   Mutation: {

api/typeDefs/sub.js

@@ -7,6 +7,7 @@ export default gql`
     subs: [Sub!]!
     topSubs(cursor: String, when: String, from: String, to: String, by: String, limit: Limit): Subs
     userSubs(name: String!, cursor: String, when: String, from: String, to: String, by: String, limit: Limit): Subs
+    mySubscribedSubs(cursor: String): Subs
     subSuggestions(q: String!, limit: Limit): [Sub!]!
   }
 

components/territory-header.js

@@ -1,3 +1,4 @@
+import { createContext, useContext } from 'react'
 import { Badge, Button, CardFooter, Dropdown } from 'react-bootstrap'
 import { AccordianCard } from './accordian-item'
 import TerritoryPaymentDue, { TerritoryBillingLine } from './territory-payment-due'
@@ -13,6 +14,16 @@ import { useToast } from './toast'
 import ActionDropdown from './action-dropdown'
 import { TerritoryTransferDropdownItem } from './territory-transfer'
 
+const SubscribeTerritoryContext = createContext({ refetchQueries: [] })
+
+export const SubscribeTerritoryContextProvider = ({ children, value }) => (
+  <SubscribeTerritoryContext.Provider value={value}>
+    {children}
+  </SubscribeTerritoryContext.Provider>
+)
+
+export const useSubscribeTerritoryContext = () => useContext(SubscribeTerritoryContext)
+
 export function TerritoryDetails ({ sub, children }) {
   return (
     <AccordianCard
@@ -149,12 +160,15 @@ export default function TerritoryHeader ({ sub }) {
 
 export function MuteSubDropdownItem ({ item, sub }) {
   const toaster = useToast()
+  const { refetchQueries } = useSubscribeTerritoryContext()
 
   const [toggleMuteSub] = useMutation(
     gql`
       mutation toggleMuteSub($name: String!) {
         toggleMuteSub(name: $name)
       }`, {
+      refetchQueries,
+      awaitRefetchQueries: true,
       update (cache, { data: { toggleMuteSub } }) {
         cache.modify({
           id: `Sub:{"name":"${sub.name}"}`,
@@ -213,11 +227,14 @@ export function PinSubDropdownItem ({ item: { id, position } }) {
 
 export function ToggleSubSubscriptionDropdownItem ({ sub: { name, meSubscription } }) {
   const toaster = useToast()
+  const { refetchQueries } = useSubscribeTerritoryContext()
   const [toggleSubSubscription] = useMutation(
     gql`
       mutation toggleSubSubscription($name: String!) {
         toggleSubSubscription(name: $name)
       }`, {
+      refetchQueries,
+      awaitRefetchQueries: true,
       update (cache, { data: { toggleSubSubscription } }) {
         cache.modify({
           id: `Sub:{"name":"${name}"}`,

components/territory-list.js

@@ -6,7 +6,8 @@ import { useQuery } from '@apollo/client'
 import MoreFooter from './more-footer'
 import { useData } from './use-data'
 import Info from './info'
-import { TerritoryInfo } from './territory-header'
+import ActionDropdown from './action-dropdown'
+import { TerritoryInfo, ToggleSubSubscriptionDropdownItem, MuteSubDropdownItem } from './territory-header'
 
 // all of this nonsense is to show the stat we are sorting by first
 const Revenue = ({ sub }) => (sub.optional.revenue !== null && <span>{abbrNum(sub.optional.revenue)} revenue</span>)
@@ -35,16 +36,16 @@ function separate (arr, separator) {
   return arr.flatMap((x, i) => i < arr.length - 1 ? [x, separator] : [x])
 }
 
-export default function TerritoryList ({ ssrData, query, variables, destructureData, rank }) {
+export default function TerritoryList ({ ssrData, query, variables, destructureData, rank, statCompsProp }) {
   const { data, fetchMore } = useQuery(query, { variables })
   const dat = useData(data, ssrData)
-  const [statComps, setStatComps] = useState(separate(STAT_COMPONENTS, Separator))
+  const [statComps, setStatComps] = useState(separate(statCompsProp || STAT_COMPONENTS, Separator))
 
   useEffect(() => {
     // shift the stat we are sorting by to the front
-    const comps = [...STAT_COMPONENTS]
+    const comps = [...statComps]
     setStatComps(separate([...comps.splice(STAT_POS[variables?.by || 0], 1), ...comps], Separator))
-  }, [variables?.by])
+  }, [variables?.by], statComps)
 
   const { subs, cursor } = useMemo(() => {
     if (!dat) return {}
@@ -77,6 +78,10 @@ export default function TerritoryList ({ ssrData, query, variables, destructureD
                     {sub.name}
                   </Link>
                   <Info className='d-flex'><TerritoryInfo sub={sub} /></Info>
+                  <ActionDropdown>
+                    <ToggleSubSubscriptionDropdownItem sub={sub} />
+                    <MuteSubDropdownItem sub={sub} />
+                  </ActionDropdown>
                 </div>
                 <div className={styles.other}>
                   {statComps.map((Comp, i) => <Comp key={i} sub={sub} />)}

fragments/subs.js

@@ -149,3 +149,15 @@ export const TOP_SUBS = gql`
     }
   }
 `
+
+export const MY_SUBSCRIBED_SUBS = gql`
+  ${SUB_FULL_FIELDS}
+  query MySubscribedSubs($cursor: String) {
+    mySubscribedSubs(cursor: $cursor) {
+      subs {
+        ...SubFullFields
+      }
+      cursor
+    }
+  }
+`

fragments/users.js

@@ -390,3 +390,28 @@ export const USER_STATS = gql`
         }
       }
     }`
+
+export const MY_SUBSCRIPTIONS = gql`
+  ${STREAK_FIELDS}
+  ${SUB_FULL_FIELDS}
+  query MySubscriptions($cursor: String) {
+    mySubscribedUsers(cursor: $cursor) {
+      users {
+        id
+        name
+        photoId
+        meSubscriptionPosts
+        meSubscriptionComments
+        meMute
+        ...StreakFields
+      }
+      cursor
+    }
+    mySubscribedSubs(cursor: $cursor) {
+      subs {
+        ...SubFullFields
+      }
+      cursor
+    }
+  }
+`

pages/settings/subscriptions/index.js

@@ -1,30 +1,61 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import Layout from '@/components/layout'
+import { Select } from '@/components/form'
 import UserList from '@/components/user-list'
-import { MY_SUBSCRIBED_USERS } from '@/fragments/users'
+import TerritoryList from '@/components/territory-list'
+import { MY_SUBSCRIPTIONS } from '@/fragments/users'
 import { SettingsHeader } from '../index'
 import { SubscribeUserContextProvider } from '@/components/subscribeUser'
+import { SubscribeTerritoryContextProvider } from '@/components/territory-header'
 
-export const getServerSideProps = getGetServerSideProps({ query: MY_SUBSCRIBED_USERS, authRequired: true })
+export const getServerSideProps = getGetServerSideProps({
+  query: MY_SUBSCRIPTIONS,
+  authRequired: true
+})
 
 export default function MySubscribedUsers ({ ssrData }) {
-  const subscribeUserContextValue = useMemo(() => ({ refetchQueries: ['MySubscribedUsers'] }), [])
+  const [view, setView] = useState('stackers')
+  const subscribeContextValue = useMemo(() => ({ refetchQueries: ['MySubscriptions'] }), [])
+
   return (
     <Layout>
       <div className='pb-3 w-100 mt-2'>
         <SettingsHeader />
-        <div className='mb-4 text-muted'>These here are stackers you've hitched your wagon to, pardner.</div>
-        <SubscribeUserContextProvider value={subscribeUserContextValue}>
-          <UserList
-            ssrData={ssrData} query={MY_SUBSCRIBED_USERS}
-            destructureData={data => data.mySubscribedUsers}
-            variables={{}}
-            rank
-            nymActionDropdown
-            statCompsProp={[]}
-          />
-        </SubscribeUserContextProvider>
+        <Select
+          name='subscriptionType'
+          size='sm'
+          noForm
+          items={['stackers', 'territories']}
+          value={view}
+          onChange={(_, e) => setView(e.target.value)}
+        />
+        {view === 'stackers'
+          ? (
+            <SubscribeUserContextProvider value={subscribeContextValue}>
+              <UserList
+                ssrData={ssrData}
+                query={MY_SUBSCRIPTIONS}
+                destructureData={data => data.mySubscribedUsers}
+                variables={{}}
+                rank
+                nymActionDropdown
+                statCompsProp={[]}
+              />
+            </SubscribeUserContextProvider>
+            )
+          : (
+            <SubscribeTerritoryContextProvider value={subscribeContextValue}>
+              <TerritoryList
+                ssrData={ssrData}
+                query={MY_SUBSCRIPTIONS}
+                variables={{}}
+                destructureData={data => data.mySubscribedSubs}
+                rank
+                statCompsProp={[]}
+              />
+            </SubscribeTerritoryContextProvider>
+            )}
       </div>
     </Layout>
   )