Merge pull request #390 from payloadcms/feat/custom-domains-refresh

feat: custom domains refresh

Author: tylandavis

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/domains/AddDomain/index.tsx

@@ -11,6 +11,7 @@ import * as React from 'react'
 import { toast } from 'sonner'
 
 import classes from './index.module.scss'
+import { useRouter } from 'next/navigation'
 
 const generateUUID = () => {
   return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
@@ -28,6 +29,8 @@ export const AddDomain: React.FC<{
   const projectID = project?.id
   const projectDomains = project?.domains
 
+  const router = useRouter()
+
   const saveDomain = React.useCallback<OnSubmit>(
     async ({ data }) => {
       // The type `Project.domains[0]` -> does not work because the array is not required - Payload type issue?
@@ -64,7 +67,7 @@ export const AddDomain: React.FC<{
           )
 
           if (req.status === 200) {
-            // reloadProject()
+            router.refresh()
             setFieldKey(generateUUID())
             toast.success('Domain added successfully.')
           }

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/domains/ManageDomain/index.tsx

@@ -7,6 +7,7 @@ import { ModalWindow } from '@components/ModalWindow/index.js'
 import { useModal } from '@faceless-ui/modal'
 import { ExternalLinkIcon } from '@root/icons/ExternalLinkIcon/index.js'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import * as React from 'react'
 
 import classes from './index.module.scss'
@@ -23,11 +24,11 @@ type Props = {
 export const ManageDomain: React.FC<Props> = ({ domain, environmentSlug, project, team }) => {
   const { id, domain: domainURL, recordContent, recordName, recordType } = domain
   const modalSlug = `delete-domain-${id}`
+  const router = useRouter()
 
   const { closeModal, openModal } = useModal()
   const projectID = project?.id
-  const projectDomains = project?.domains
-  const cnameRecord = project?.defaultDomain
+  const [projectDomains, setProjectDomains] = React.useState(project?.domains || [])
 
   const patchDomains = React.useCallback(
     async (domains: Props['domain'][]) => {
@@ -46,20 +47,19 @@ export const ManageDomain: React.FC<Props> = ({ domain, environmentSlug, project
           },
         )
 
-        // TODO: alert user based on status code & message
-
         if (req.status === 200) {
           const res = await req.json()
-          // reloadProject()
+          router.refresh()
+          setProjectDomains(domains)
           return res
         }
       } catch (e) {
-        console.error(e) // eslint-disable-line no-console
+        console.error(e)
       }
 
       return null
     },
-    [projectID],
+    [projectID, environmentSlug],
   )
 
   const deleteDomain = React.useCallback(async () => {