cleanup: middleware, custom branding, gql fragments, adjust migration date

Author: Soxasora

components/nav/common.js

@@ -352,7 +352,7 @@ function LogoutObstacle ({ onClose }) {
 
             await signOut({ callbackUrl: '/', redirect: !customDomain })
             if (customDomain) {
-              onClose()
+              router.push('/') // next auth redirect only supports the main domain
             }
           }}
         >

components/territory-branding-form.js

@@ -35,20 +35,20 @@ export default function BrandingForm ({ sub }) {
     }
   }
 
-  const subColors = sub?.customBranding?.colors || {}
+  const customBranding = sub?.customBranding || {}
+  const subColors = customBranding?.colors || {}
 
   const initialValues = {
-    title: sub?.customBranding?.title || sub?.subName,
+    title: customBranding?.title || sub?.name,
     primary: subColors?.primary || '#FADA5E',
     secondary: subColors?.secondary || '#F6911D',
     info: subColors?.info || '#007cbe',
     success: subColors?.success || '#5c8001',
     danger: subColors?.danger || '#c03221',
-    logoId: sub?.customBranding?.logoId || null,
-    faviconId: sub?.customBranding?.faviconId || null
+    logoId: customBranding?.logoId || null,
+    faviconId: customBranding?.faviconId || null
   }
 
-  // TODO: cleanup
   return (
     <Form
       initial={initialValues}

components/territory-domains.js

@@ -26,18 +26,19 @@ export const DomainProvider = ({ customDomain: ssrCustomDomain, children }) => {
   const router = useRouter()
   const [customDomain, setCustomDomain] = useState(ssrCustomDomain || null)
 
+  // maintain the custom domain state across re-renders
   useEffect(() => {
     if (ssrCustomDomain && !customDomain) {
       setCustomDomain(ssrCustomDomain)
     }
   }, [ssrCustomDomain])
 
-  // TODO: alternative to this, for test only
-  // auth sync
+  // temporary auth sync
   useEffect(() => {
     if (router.query.type === 'sync') {
       console.log('signing in with sync')
       signIn('sync', { token: router.query.token, callbackUrl: router.query.callbackUrl, multiAuth: router.query.multiAuth, redirect: false })
+      router.push(router.query.callbackUrl) // next auth redirect only supports the main domain
     }
   }, [router.query.type])
 
@@ -143,7 +144,6 @@ export function DomainGuidelines ({ customDomain }) {
   )
 }
 
-// TODO: clean this up, might not need all this refreshing, plus all this polling is not done correctly
 export default function CustomDomainForm ({ sub }) {
   const [setCustomDomain] = useMutation(SET_CUSTOM_DOMAIN)
 
@@ -184,12 +184,11 @@ export default function CustomDomainForm ({ sub }) {
   return (
     <>
       <Form
-        initial={{ domain: domain || sub.customDomain?.domain }}
+        initial={{ domain }}
         schema={customDomainSchema}
         onSubmit={onSubmit}
         className='mb-2'
       >
-        {/* TODO: too many flexes */}
         <div className='d-flex align-items-center gap-2'>
           <Input
             label={<DomainLabel customDomain={data?.customDomain} polling={polling} />}

components/territory-form.js

@@ -88,7 +88,6 @@ export default function TerritoryForm ({ sub }) {
     }
   }, [sub, billing])
 
-  // TODO: Add a custom domain textbox and verification status; validation too
   return (
     <FeeButtonProvider baseLineItems={lineItems}>
       <Form

components/territory-header.js

@@ -70,7 +70,7 @@ export function TerritoryInfo ({ sub, includeLink }) {
             <span className='fw-bold'>{numWithUnits(sub.replyCost)}</span>
           </div>
         </div>
-        {sub.customDomain && (
+        {sub.customDomain?.status === 'ACTIVE' && (
           <div className='text-muted'>
             <span>website </span>
             <Link className='fw-bold' href={`https://${sub.customDomain.domain}`}>{sub.customDomain.domain}</Link>

fragments/brandings.js

@@ -1,18 +1,6 @@
 import { gql } from 'graphql-tag'
 
-export const GET_CUSTOM_BRANDING = gql`
-  query CustomBranding($subName: String!) {
-    customBranding(subName: $subName) {
-      title
-      colors
-      logoId
-      faviconId
-      subName
-    }
-  }
-`
-
-export const GET_CUSTOM_BRANDING_FIELDS = gql`
+export const CUSTOM_BRANDING_FIELDS = gql`
   fragment CustomBrandingFields on CustomBranding {
     title
     colors
@@ -22,8 +10,17 @@ export const GET_CUSTOM_BRANDING_FIELDS = gql`
   }
 `
 
+export const GET_CUSTOM_BRANDING = gql`
+  ${CUSTOM_BRANDING_FIELDS}
+  query CustomBranding($subName: String!) {
+    customBranding(subName: $subName) {
+      ...CustomBrandingFields
+    }
+  }
+`
+
 export const SET_CUSTOM_BRANDING = gql`
-  ${GET_CUSTOM_BRANDING_FIELDS}
+  ${CUSTOM_BRANDING_FIELDS}
   mutation SetCustomBranding($subName: String!, $branding: CustomBrandingInput!) {
     setCustomBranding(subName: $subName, branding: $branding) {
       ...CustomBrandingFields

fragments/domains.js

@@ -1,24 +1,38 @@
 import { gql } from 'graphql-tag'
 
+export const CUSTOM_DOMAIN_FIELDS = gql`
+  fragment CustomDomainFields on CustomDomain {
+    domain
+    status
+  }
+`
+
+export const CUSTOM_DOMAIN_FULL_FIELDS = gql`
+  ${CUSTOM_DOMAIN_FIELDS}
+  fragment CustomDomainFullFields on CustomDomain {
+    ...CustomDomainFields
+    lastVerifiedAt
+    verification {
+      dns {
+        state
+        cname
+        txt
+      }
+      ssl {
+        state
+        arn
+        cname
+        value
+      }
+    }
+  }
+`
+
 export const GET_CUSTOM_DOMAIN = gql`
+  ${CUSTOM_DOMAIN_FULL_FIELDS}
   query CustomDomain($subName: String!) {
     customDomain(subName: $subName) {
-      domain
-      status
-      lastVerifiedAt
-      verification {
-        dns {
-          state
-          cname
-          txt
-        }
-        ssl {
-          state
-          arn
-          cname
-          value
-        }
-      }
+      ...CustomDomainFullFields
     }
   }
 `
@@ -32,14 +46,6 @@ export const GET_DOMAIN_MAPPING = gql`
   }
 `
 
-export const GET_CUSTOM_DOMAIN_FULL = gql`
-  ${GET_CUSTOM_DOMAIN}
-  fragment CustomDomainFull on CustomDomain {
-    ...CustomDomainFields
-    failedAttempts
-  }
-`
-
 export const SET_CUSTOM_DOMAIN = gql`
   mutation SetCustomDomain($subName: String!, $domain: String!) {
     setCustomDomain(subName: $subName, domain: $domain) {

fragments/subs.js

@@ -1,6 +1,8 @@
 import { gql } from '@apollo/client'
 import { ITEM_FIELDS, ITEM_FULL_FIELDS } from './items'
 import { COMMENTS_ITEM_EXT_FIELDS } from './comments'
+import { CUSTOM_DOMAIN_FIELDS } from './domains'
+import { CUSTOM_BRANDING_FIELDS } from './brandings'
 
 // we can't import from users because of circular dependency
 const STREAK_FIELDS = gql`
@@ -15,6 +17,8 @@ const STREAK_FIELDS = gql`
 
 // TODO: better place
 export const SUB_FIELDS = gql`
+  ${CUSTOM_DOMAIN_FIELDS}
+  ${CUSTOM_BRANDING_FIELDS}
   fragment SubFields on Sub {
     name
     createdAt
@@ -36,31 +40,10 @@ export const SUB_FIELDS = gql`
     meSubscription
     nsfw
     customDomain {
-      createdAt
-      updatedAt
-      domain
-      subName
-      lastVerifiedAt
-      status
-      verification {
-        dns {
-          state
-          cname
-          txt
-        }
-        ssl {
-          state
-          arn
-          cname
-          value
-        }
-      }
+      ...CustomDomainFields
     }
     customBranding {
-      title
-      colors
-      logoId
-      faviconId
+      ...CustomBrandingFields
     }
   }`