wip: add new climbs form

src/app/editArea/[slug]/addClimbs/components/AddClimbsForm.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { useSession } from 'next-auth/react'
+
+import { SingleEntryForm } from 'app/editArea/[slug]/components/SingleEntryForm'
+import { AREA_DESCRIPTION_FORM_VALIDATION_RULES } from '@/components/edit/EditAreaForm'
+import useUpdateAreasCmd from '@/js/hooks/useUpdateAreasCmd'
+import { MarkdownTextArea } from '@/components/ui/form/MarkdownTextArea'
+import useUpdateClimbsCmd from '@/js/hooks/useUpdateClimbsCmd'
+import { DashboardInput } from '@/components/ui/form/Input'
+import { DynamicClimbInputList } from './DynamicClimbInputList'
+/**
+ * Area description edit form
+ * @param param0
+ * @returns
+ */
+export const AddClimbsForm: React.FC<{ parentAreaUuid: string }> = ({ parentAreaUuid }) => {
+  const session = useSession({ required: true })
+  const { updateClimbCmd } = useUpdateClimbsCmd(
+    {
+      parentId: parentAreaUuid,
+      accessToken: session?.data?.accessToken as string
+    }
+  )
+
+  return (
+    <SingleEntryForm<{ climbList: any[] }>
+      title='Add climbs'
+      initialValues={{ climbList: [{ climbName: '' }] }}
+      // initialValues={{ description: initialValue }}
+      submitHandler={async (data) => {
+        console.log(data)
+        // await updateClimbCmd({ description })
+      }}
+    >
+      <DynamicClimbInputList parentAreaUuid={parentAreaUuid} name='climbList' />
+    </SingleEntryForm>
+  )
+}

src/app/editArea/[slug]/addClimbs/components/DynamicClimbInputList.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from 'react'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import { ListPlus, Minus } from '@phosphor-icons/react/dist/ssr'
+
+import { BaseInput } from '@/components/ui/form/Input'
+
+export const DynamicClimbInputList: React.FC<{ parentAreaUuid: string, name: string }> = ({ parentAreaUuid, name = 'climbList' }) => {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    name
+  })
+
+  const addMoreFields = useCallback(() => {
+    for (let i = 0; i < 5; i++) {
+      append({ climbName: '' })
+    }
+  }, [append])
+
+  return (
+    <div>
+      <ul>
+        {fields.map((item, index) => {
+          return (
+            <li key={item.id}>
+
+              <NewClimbInput
+                parentAreaUuid={parentAreaUuid} index={index} count={fields.length}
+                onRemove={(removeIndex) => remove(removeIndex)}
+              />
+
+            </li>
+          )
+        })}
+      </ul>
+
+      <button
+        type='button'
+        className='mt-6 btn btn-sm btn-primary btn-outline'
+        onClick={addMoreFields}
+        disabled={fields.length >= 30}
+      >
+        <ListPlus size={18} /> Bulk entry
+      </button>
+    </div>
+  )
+}
+
+const NewClimbInput: React.FC<{ parentAreaUuid: string, index: number, count: number, onRemove: (index: number) => void }> = ({ parentAreaUuid, index, count, onRemove }) => {
+  const formContext = useFormContext()
+  const inputName = `climbList[${index}].climbName`
+  return (
+    <div>
+      <div className='form-control'>
+        <label className='label' htmlFor={inputName}><span className='label-text text-secondary'>Climb name {count > 1 ? index + 1 : ''}</span></label>
+        <div className='flex items-center gap-4'>
+          <BaseInput
+            formContext={formContext}
+            name={inputName}
+            label={`Climb #${index + 1}`}
+            className='w-full'
+          />
+          {count > 1 &&
+            <button
+              type='button'
+              className='btn btn-sm btn-outline btn-circle'
+              onClick={() => onRemove(index)}
+            ><Minus size={18} />
+            </button>}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/editArea/[slug]/addClimbs/page.tsx

@@ -1,10 +1,16 @@
+import { DashboardPageProps, getPageDataForEdit } from '../general/page'
 import { PageContainer, SectionContainer } from '../components/EditAreaContainers'
+import { AddClimbsForm } from './components/AddClimbsForm'
 
-export default function AddClimbsPage (): JSX.Element {
+export default async function AddClimbsPage ({ params: { slug } }: DashboardPageProps): Promise<any> {
+  const { area } = await getPageDataForEdit(slug)
+  const {
+    areaName, uuid, ancestors, pathTokens, children
+  } = area
   return (
     <PageContainer>
       <SectionContainer id='general'>
-        <div>Add new climbs form (TBD)</div>
+        <AddClimbsForm parentAreaUuid={uuid} />
       </SectionContainer>
     </PageContainer>
   )