fix: don't use RHF to disable submit btn (#1043)

Co-authored-by: viet nguyen <vietnguyen@noreply>

src/app/area/[[...slug]]/sections/ClimbListSection.tsx

@@ -1,4 +1,3 @@
-import { Plus } from '@phosphor-icons/react/dist/ssr'
 import { ClimbList } from '@/app/editArea/[slug]/general/components/climb/ClimbListForm'
 import { AreaType } from '@/js/types'
 /**
@@ -17,7 +16,7 @@ export const ClimbListSection: React.FC<{ area: AreaType, editMode?: boolean }>
         {!editMode &&
           <div className='flex items-center gap-2'>
             <a href={`/editArea/${uuid}/manageClimbs`} className='btn btn-sm btn-accent btn-outline'>
-              <Plus size={18} weight='bold' /> New Climbs
+              Add Climbs
             </a>
           </div>}
       </div>

src/app/editArea/[slug]/general/components/AddAreaForm.tsx

@@ -27,8 +27,10 @@ export const AddAreaForm: React.FC<{ area: AreaType }> = ({ area }) => {
     <SingleEntryForm<{ areaName: string, areaType: AreaTypeFormProp }>
       initialValues={{ areaName: '' }}
       keepValuesAfterReset={false}
+      validationMode='onSubmit'
+      ignoreIsValid
       title='Add new area'
-      helperText='TIP: Pick &ldquo;AREA&rdquo; if not sure.  You can still change it later.'
+      helperText='TIP: Pick &ldquo;AREA&rdquo; type if not sure.  You can change it later.'
       submitHandler={async ({ areaName, areaType }) => {
         const { isBoulder, isLeaf } = areaDesignationToDb(areaType)
         await addOneAreaCmd({ name: areaName, parentUuid: uuid, isBoulder, isLeaf })
@@ -39,7 +41,7 @@ export const AddAreaForm: React.FC<{ area: AreaType }> = ({ area }) => {
       {notEditable &&
         <div role='alert' className='alert alert-info'>
           <WarningOctagon size={24} />
-          <span>This area is either a crag or a boulder.  Adding a new child area is not allowed.</span>
+          <span>This area is either a crag or a boulder.  Adding new child areas is not allowed.</span>
         </div>}
       <DashboardInput
         name='areaName'

src/app/editArea/[slug]/general/components/climb/ClimbListForm.tsx

@@ -17,7 +17,13 @@ export const ClimbList: React.FC<{ gradeContext: GradeContexts, climbs: ClimbTyp
   const sortedClimbs = climbs.sort(leftRightIndexComparator)
   return (
     <div>
-      {climbs.length === 0 && <div className='alert alert-info text-sm'>No climbs found.  Use the form below to add new climbs.</div>}
+      {climbs.length === 0
+        ? (
+            editMode
+              ? <NoClimbsEditModeCTA />
+              : <NoClimbsCTA areaId={areaMetadata.areaId} />
+          )
+        : null}
       <ol className={clx(climbs.length < 5 ? 'block max-w-sm' : 'three-column-table', 'divide-y divide-base-200')}>
         {sortedClimbs.map((climb, index) => {
           return (
@@ -90,3 +96,16 @@ const DisciplinesInfo: React.FC<{ disciplines: Partial<ClimbDisciplineRecord> }>
     </div>
   )
 }
+
+const NoClimbsEditModeCTA: React.FC = () => (
+  <div className='alert alert-info text-sm'>No climbs found.  Use the form below to add new climbs.</div>
+)
+
+const NoClimbsCTA: React.FC<{ areaId: string }> = ({ areaId }) => (
+  <div className='alert alert-info text-sm'>
+    No climbs found.&nbsp;
+    <a href={`/editArea/${areaId}/manageClimbs`} className='btn btn-sm btn-solid btn-accent'>
+      Add Climbs
+    </a>
+  </div>
+)