move instanceList fetching up a level; use to disable button when no instances available

Author: charliepark

app/forms/anti-affinity-group-member-add.tsx

@@ -7,53 +7,26 @@
  */
 
 import { useForm } from 'react-hook-form'
-import type { LoaderFunctionArgs } from 'react-router'
 
-import { queryClient, useApiMutation, usePrefetchedQuery } from '~/api'
+import { queryClient, useApiMutation, type Instance } from '~/api'
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
-import {
-  getAntiAffinityGroupSelector,
-  useAntiAffinityGroupSelector,
-} from '~/hooks/use-params'
+import { useAntiAffinityGroupSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { Modal } from '~/ui/lib/Modal'
 
-import {
-  affinityGroupList,
-  antiAffinityGroupMemberList,
-  instanceList,
-} from './affinity-util'
-
-export async function clientLoader({ params }: LoaderFunctionArgs) {
-  const { antiAffinityGroup, project } = getAntiAffinityGroupSelector(params)
-  await Promise.all([
-    queryClient.prefetchQuery(antiAffinityGroupMemberList({ antiAffinityGroup, project })),
-    queryClient.prefetchQuery(instanceList({ project })),
-    queryClient.prefetchQuery(affinityGroupList({ project })),
-  ])
-  return null
-}
-
 export function AddAntiAffinityGroupMemberForm({
+  availableInstances,
   isModalOpen,
   setIsModalOpen,
 }: {
+  availableInstances: Instance[]
   isModalOpen: boolean
   setIsModalOpen: (open: boolean) => void
 }) {
   const { project, antiAffinityGroup } = useAntiAffinityGroupSelector()
 
-  const { data: members } = usePrefetchedQuery(
-    antiAffinityGroupMemberList({ antiAffinityGroup, project })
-  )
-  const { data: instances } = usePrefetchedQuery(instanceList({ project }))
-  // Construct a list of all instances not currently in this anti-affinity group.
-  const availableInstances = instances.items.filter(
-    (instance) => !members.items.some(({ value }) => value.name === instance.name)
-  )
-
   const form = useForm({
     defaultValues: {
       antiAffinityGroupMember: '',

app/pages/project/affinity/AntiAffinityGroupPage.tsx

@@ -87,6 +87,12 @@ export default function AntiAffinityPage() {
   )
   const membersCount = members.items.length
 
+  const { data: instances } = usePrefetchedQuery(instanceList({ project }))
+  // Construct a list of all instances not currently in this anti-affinity group.
+  const availableInstances = instances.items
+    .filter((instance) => !members.items.some(({ value }) => value.name === instance.name))
+    .sort((a, b) => a.name.localeCompare(b.name))
+
   const { mutateAsync: removeMember } = useApiMutation(
     'antiAffinityGroupMemberInstanceDelete',
     {
@@ -176,7 +182,10 @@ export default function AntiAffinityPage() {
           title="Members"
           description="Instances in this anti-affinity group"
         >
-          <CreateButton onClick={() => setIsModalOpen(true)}>
+          <CreateButton
+            onClick={() => setIsModalOpen(true)}
+            disabled={!availableInstances.length}
+          >
             Add instance to group
           </CreateButton>
         </CardBlock.Header>
@@ -185,6 +194,7 @@ export default function AntiAffinityPage() {
         </CardBlock.Body>
       </CardBlock>
       <AddAntiAffinityGroupMemberForm
+        availableInstances={availableInstances}
         isModalOpen={isModalOpen}
         setIsModalOpen={setIsModalOpen}
       />