From e417e602989347d78c32fb0aa08204783ff53cb0 Mon Sep 17 00:00:00 2001
From: Eric Wang <37554696+ericwang401@users.noreply.github.com>
Date: Sun, 4 Feb 2024 19:07:14 -0600
Subject: [PATCH] Fix buggy nodes lookup in NodesMultiSelect

---
 .../scripts/api/admin/nodes/useNodesSWR.ts    |   8 +-
 .../admin/coterms/EditCotermModal.tsx         | 116 +++++++++---------
 2 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/resources/scripts/api/admin/nodes/useNodesSWR.ts b/resources/scripts/api/admin/nodes/useNodesSWR.ts
index f70ae7d4be6..00cf58400a1 100644
--- a/resources/scripts/api/admin/nodes/useNodesSWR.ts
+++ b/resources/scripts/api/admin/nodes/useNodesSWR.ts
@@ -1,12 +1,12 @@
 import useSWR from 'swr'
 
-import getNodes, { NodeResponse, QueryParams } from '@/api/admin/nodes/getNodes'
+import getNodes, {NodeResponse, QueryParams} from '@/api/admin/nodes/getNodes'
 
 
-const useNodesSWR = ({ page, query, id, cotermId, ...params }: QueryParams) => {
+const useNodesSWR = ({page, query, id, cotermId, ...params}: QueryParams) => {
     return useSWR<NodeResponse>(
-        ['admin:nodes', page, query, Boolean(id), cotermId],
-        () => getNodes({ page, query, id, cotermId, ...params })
+        ['admin:nodes', page, query, id, cotermId],
+        () => getNodes({page, query, id, cotermId, ...params})
     )
 }
 
diff --git a/resources/scripts/components/admin/coterms/EditCotermModal.tsx b/resources/scripts/components/admin/coterms/EditCotermModal.tsx
index 2e10600e172..ad6962871a9 100644
--- a/resources/scripts/components/admin/coterms/EditCotermModal.tsx
+++ b/resources/scripts/components/admin/coterms/EditCotermModal.tsx
@@ -1,13 +1,13 @@
-import { useFlashKey } from '@/util/useFlash'
-import { port } from '@/util/validation'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect } from 'react'
-import { FormProvider, useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { KeyedMutator } from 'swr'
-import { z } from 'zod'
-
-import { Coterm, CotermResponse } from '@/api/admin/coterms/getCoterms'
+import {useFlashKey} from '@/util/useFlash'
+import {port} from '@/util/validation'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {useEffect} from 'react'
+import {FormProvider, useForm} from 'react-hook-form'
+import {useTranslation} from 'react-i18next'
+import {KeyedMutator} from 'swr'
+import {z} from 'zod'
+
+import {Coterm, CotermResponse} from '@/api/admin/coterms/getCoterms'
 import updateCoterm from '@/api/admin/coterms/updateCoterm'
 import useAttachedNodes from '@/api/admin/coterms/useAttachedNodes'
 
@@ -25,12 +25,12 @@ interface Props {
     mutate: KeyedMutator<CotermResponse>
 }
 
-const EditCotermModal = ({ coterm, onClose, mutate }: Props) => {
-    const { t: tStrings } = useTranslation('strings')
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey(
-        `admin.coterms.${coterm?.id}.update`
+const EditCotermModal = ({coterm, onClose, mutate}: Props) => {
+    const {t: tStrings} = useTranslation('strings')
+    const {clearFlashes, clearAndAddHttpError} = useFlashKey(
+            `admin.coterms.${coterm?.id}.update`
     )
-    const { data: attachedNodes } = useAttachedNodes(coterm?.id ?? -1, {})
+    const {data: attachedNodes} = useAttachedNodes(coterm ? coterm.id : -1, {})
 
     const schema = z.object({
         name: z.string().min(1).max(191),
@@ -67,7 +67,7 @@ const EditCotermModal = ({ coterm, onClose, mutate }: Props) => {
             isTlsEnabled: old.isTlsEnabled,
             fqdn: old.fqdn,
             port: old.port,
-            nodeIds: attachedNodes?.items.map(node => node.id.toString()) ?? [],
+            nodeIds: attachedNodes ? attachedNodes.items.map(node => node.id.toString()) : [],
         }))
     }, [attachedNodes])
 
@@ -81,14 +81,14 @@ const EditCotermModal = ({ coterm, onClose, mutate }: Props) => {
 
         clearFlashes()
         try {
-            const updatedCoterm = await updateCoterm(coterm.id, data)
+            const updatedCoterm = await updateCoterm(coterm!.id, data)
             mutate(data => {
                 if (!data) return data
 
                 return {
                     ...data,
                     items: data.items.map(item =>
-                        item.id === updatedCoterm.id ? updatedCoterm : item
+                            item.id === updatedCoterm.id ? updatedCoterm : item
                     ),
                 }
             }, false)
@@ -99,47 +99,47 @@ const EditCotermModal = ({ coterm, onClose, mutate }: Props) => {
     }
 
     return (
-        <Modal open={Boolean(coterm)} onClose={handleClose}>
-            <Modal.Header>
-                <Modal.Title>Edit {coterm?.name}</Modal.Title>
-            </Modal.Header>
-
-            <FormProvider {...form}>
-                <form onSubmit={form.handleSubmit(submit)}>
-                    <Modal.Body>
-                        <FlashMessageRender
-                            className='mb-5'
-                            byKey={`admin.coterms.${coterm?.id}.update`}
-                        />
-                        <TextInputForm name='name' label={tStrings('name')} />
-                        <div className={'space-y-3'}>
-                            <TextInputForm
-                                name='fqdn'
-                                label={tStrings('fqdn')}
+            <Modal open={Boolean(coterm)} onClose={handleClose}>
+                <Modal.Header>
+                    <Modal.Title>Edit {coterm?.name}</Modal.Title>
+                </Modal.Header>
+
+                <FormProvider {...form}>
+                    <form onSubmit={form.handleSubmit(submit)}>
+                        <Modal.Body>
+                            <FlashMessageRender
+                                    className='mb-5'
+                                    byKey={`admin.coterms.${coterm?.id}.update`}
                             />
-                            <CheckboxForm
-                                name={'isTlsEnabled'}
-                                label={'Is TLS Enabled?'}
-                            />
-                        </div>
-                        <TextInputForm name='port' label={tStrings('port')} />
-                        <CotermNodesMultiSelectForm />
-                    </Modal.Body>
-
-                    <Modal.Actions>
-                        <Modal.Action type='button' onClick={handleClose}>
-                            {tStrings('cancel')}
-                        </Modal.Action>
-                        <Modal.Action
-                            type='submit'
-                            loading={form.formState.isSubmitting}
-                        >
-                            {tStrings('save')}
-                        </Modal.Action>
-                    </Modal.Actions>
-                </form>
-            </FormProvider>
-        </Modal>
+                            <TextInputForm name='name' label={tStrings('name')}/>
+                            <div className={'space-y-3'}>
+                                <TextInputForm
+                                        name='fqdn'
+                                        label={tStrings('fqdn')}
+                                />
+                                <CheckboxForm
+                                        name={'isTlsEnabled'}
+                                        label={'Is TLS Enabled?'}
+                                />
+                            </div>
+                            <TextInputForm name='port' label={tStrings('port')}/>
+                            <CotermNodesMultiSelectForm/>
+                        </Modal.Body>
+
+                        <Modal.Actions>
+                            <Modal.Action type='button' onClick={handleClose}>
+                                {tStrings('cancel')}
+                            </Modal.Action>
+                            <Modal.Action
+                                    type='submit'
+                                    loading={form.formState.isSubmitting}
+                            >
+                                {tStrings('save')}
+                            </Modal.Action>
+                        </Modal.Actions>
+                    </form>
+                </FormProvider>
+            </Modal>
     )
 }