From 43c5f429548eda8afa9752d67d90bef4492291b6 Mon Sep 17 00:00:00 2001
From: viet nguyen <vietnguyen@noreply>
Date: Sun, 26 Nov 2023 07:33:19 -0800
Subject: [PATCH] add subareas table to area page

---
 src/app/area/[...slug]/page.tsx               | 27 +++++++++++-
 .../[slug]/general/components/AddAreaForm.tsx |  2 +-
 .../[slug]/general/components/AreaItem.tsx    | 43 ++++++++++---------
 .../[slug]/general/components/AreaList.tsx    | 15 ++++---
 src/app/editArea/[slug]/general/page.tsx      |  4 +-
 src/components/cues/Entities.tsx              |  3 ++
 src/components/editor/MarkdownEditor.tsx      |  7 +--
 7 files changed, 64 insertions(+), 37 deletions(-)
 create mode 100644 src/components/cues/Entities.tsx

diff --git a/src/app/area/[...slug]/page.tsx b/src/app/area/[...slug]/page.tsx
index 5eb30a0b9..0afc88472 100644
--- a/src/app/area/[...slug]/page.tsx
+++ b/src/app/area/[...slug]/page.tsx
@@ -1,7 +1,8 @@
+import Link from 'next/link'
 import { notFound, redirect } from 'next/navigation'
 import slugify from 'slugify'
 import { validate } from 'uuid'
-import { MapPinLine } from '@phosphor-icons/react/dist/ssr'
+import { MapPinLine, PlusCircle } from '@phosphor-icons/react/dist/ssr'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import Markdown from 'react-markdown'
 
@@ -13,6 +14,9 @@ import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate'
 import { getMapHref } from '@/js/utils'
 import AreaMap from '@/components/area/areaMap'
 import { PageContainer } from '@/app/components/ui/PageContainer'
+import { AreaList } from 'app/editArea/[slug]/general/components/AreaList'
+import { AreaEntityBullet } from '@/components/cues/Entities'
+
 /**
  * Cache duration in seconds
  */
@@ -92,6 +96,27 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
           <h3>Description</h3>
           <Markdown>{description}</Markdown>
         </div>
+
+      </div>
+
+      <div className='w-full mt-16'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-3'>
+            <h3 className='flex items-center gap-4'><AreaEntityBullet />{area.children.length} Areas</h3>
+            {/* <AddAreaTrigger parentName={parentName} parentUuid={parentUuid} onSuccess={onChange}>
+              <AddAreaTriggerButtonSm />
+            </AddAreaTrigger> */}
+          </div>
+          <Link href={`/editArea/${uuid}/general#addArea`}>
+            <button className='btn btn-primary'>
+              <PlusCircle size={24} weight='duotone' /> New Areas
+            </button>
+          </Link>
+        </div>
+
+        <hr className='my-4 border-1 border-base-content' />
+
+        <AreaList parentUuid={uuid} areas={area.children} />
       </div>
     </PageContainer>
   )
diff --git a/src/app/editArea/[slug]/general/components/AddAreaForm.tsx b/src/app/editArea/[slug]/general/components/AddAreaForm.tsx
index 3c0e21c84..7f0857478 100644
--- a/src/app/editArea/[slug]/general/components/AddAreaForm.tsx
+++ b/src/app/editArea/[slug]/general/components/AddAreaForm.tsx
@@ -26,7 +26,7 @@ export const AddAreaForm: React.FC<{ area: AreaType }> = ({ area }) => {
       initialValues={{ areaName: '' }}
       keepValuesAfterReset={false}
       title='Add new area'
-      helperText='Do not copy description from guidebooks.'
+      helperText='TIP: Pick &ldquo;AREA&rdquo; if not sure.  You can still change it later.'
       submitHandler={async ({ areaName, areaType }) => {
         const { isBoulder, isLeaf } = areaDesignationToDb(areaType)
         await addOneAreaCmd({ name: areaName, parentUuid: uuid, isBoulder, isLeaf })
diff --git a/src/app/editArea/[slug]/general/components/AreaItem.tsx b/src/app/editArea/[slug]/general/components/AreaItem.tsx
index 38c3d56eb..5f332238f 100644
--- a/src/app/editArea/[slug]/general/components/AreaItem.tsx
+++ b/src/app/editArea/[slug]/general/components/AreaItem.tsx
@@ -8,7 +8,7 @@ import { DeleteAreaTrigger, DeleteAreaTriggerButtonSm } from '@/components/edit/
 
 export type EType = 'area' | 'crag' | 'boulder' | 'climb'
 
-const CragIcon = forwardRef<any, IconProps>((props, ref) => <ShareNetwork ref={ref} {...props} className='p-1 rotate-90' />)
+const CragIcon = forwardRef<any, IconProps>((props, ref) => <ShareNetwork ref={ref} {...props} className='rotate-90' />)
 
 // type MyIconProps = Icon & {
 //   class
@@ -31,36 +31,39 @@ export const EntityIcon: React.FC<{ type: EType, withLabel?: boolean, size?: 20
   )
 }
 
-export const AreaItem: React.FC<{ area: AreaType, parentUuid: string, index: number }> = ({ area, index, parentUuid }) => {
+export const AreaItem: React.FC<{
+  area: AreaType
+  parentUuid: string
+  index: number
+  editMode: boolean
+}> = ({ area, index, parentUuid, editMode = false }) => {
   const { uuid, areaName, children, climbs } = area
 
   // undefined array can mean we forget to include the field in GQL so let's make it not editable
   const canDelete = (children?.length ?? 1) === 0 && (climbs?.length ?? 1) === 0
 
+  const url = editMode ? `/editArea/${uuid}` : `/area/${uuid}`
   return (
     <div className='break-inside-avoid-column break-inside-avoid pb-8'>
-      <div className='card card-compact card-bordered border-base-300/80 w-full bg-base-100 shadow  p-2'>
-        <div className='flex items-center gap-4 justify-between'>
-          <div className='px-2'>
-            <div className='area-entity-box'>{index}</div>
-          </div>
-          <div className='grow'>
-            <Link
-              className='uppercase font-semibold hover:underline underline-offset-4
-'
-              href={`/editArea/${uuid}`}
-            >
+      <Link href={url} className='block hover:outline hover:outline-1 hover:rounded-box'>
+        <div className='card card-compact card-bordered w-full bg-base-100 shadow  p-2'>
+          <div className='flex items-center gap-4 justify-between'>
+            <div className='px-2'>
+              <div className='area-entity-box'>{index}</div>
+            </div>
+            <div className='grow uppercase'>
               {areaName}
-            </Link>
-            <div className='flex items-center justify-between'>
-              <AreaIcon area={area} />
+              <div className='flex items-center justify-between'>
+                <AreaIcon area={area} />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className='flex justify-end py-1'>
-        <Actions uuid={uuid} areaName={areaName} parentUuid={parentUuid} canDelete={canDelete} />
-      </div>
+      </Link>
+      {editMode &&
+        <div className='flex justify-end py-1'>
+          <Actions uuid={uuid} areaName={areaName} parentUuid={parentUuid} canDelete={canDelete} />
+        </div>}
     </div>
   )
 }
diff --git a/src/app/editArea/[slug]/general/components/AreaList.tsx b/src/app/editArea/[slug]/general/components/AreaList.tsx
index b142af1d4..105161f0b 100644
--- a/src/app/editArea/[slug]/general/components/AreaList.tsx
+++ b/src/app/editArea/[slug]/general/components/AreaList.tsx
@@ -7,7 +7,7 @@ type AreaListProps = Pick<AreaType, 'uuid' | 'areaName' | 'pathTokens' | 'ancest
   areas: AreaType[]
 }
 
-export const AreaList: React.FC<AreaListProps> = ({ areaName, uuid, pathTokens, ancestors, areas }) => {
+export const AreaListForm: React.FC<AreaListProps> = ({ areaName, uuid, pathTokens, ancestors, areas }) => {
   return (
     <div id='children' className='card card-compact card-bordered border-base-300/50  overflow-hidden w-full'>
       <div className='form-control'>
@@ -22,14 +22,15 @@ export const AreaList: React.FC<AreaListProps> = ({ areaName, uuid, pathTokens,
 
           <GluttenFreeCrumbs ancestors={ancestors} pathTokens={pathTokens} />
           <hr className='border mb-6' />
-
-          {/* Child area list */}
-          <div className='two-column-table'>
-            {areas.map((item, index) =>
-              <AreaItem key={item.uuid} area={item} index={index + 1} parentUuid={uuid} />)}
-          </div>
+          <AreaList areas={areas} parentUuid={uuid} editMode />
         </div>
       </div>
     </div>
   )
 }
+
+export const AreaList: React.FC<{ parentUuid: string, areas: AreaType[], editMode?: boolean }> = ({ areas, parentUuid, editMode = false }) => (
+  <div className='two-column-table'>
+    {areas.map((item, index) =>
+      <AreaItem key={item.uuid} area={item} index={index + 1} parentUuid={parentUuid} editMode={editMode} />)}
+  </div>)
diff --git a/src/app/editArea/[slug]/general/page.tsx b/src/app/editArea/[slug]/general/page.tsx
index e6ba01f92..3bc114738 100644
--- a/src/app/editArea/[slug]/general/page.tsx
+++ b/src/app/editArea/[slug]/general/page.tsx
@@ -8,7 +8,7 @@ import { AreaNameForm } from './components/AreaNameForm'
 import { AreaDescriptionForm } from './components/AreaDescriptionForm'
 import { AreaLatLngForm } from './components/AreaLatLngForm'
 import { AddAreaForm } from './components/AddAreaForm'
-import { AreaList } from './components/AreaList'
+import { AreaListForm } from './components/AreaList'
 import { AreaTypeForm } from './components/AreaTypeForm'
 
 // Opt out of caching for all data requests in the route segment
@@ -58,7 +58,7 @@ export default async function AreaEditPage ({ params }: DashboardPageProps): Pro
       </PageContainer>
 
       <PageContainer id='children'>
-        <AreaList
+        <AreaListForm
           areaName={areaName}
           uuid={uuid}
           ancestors={ancestors}
diff --git a/src/components/cues/Entities.tsx b/src/components/cues/Entities.tsx
new file mode 100644
index 000000000..6a3172e20
--- /dev/null
+++ b/src/components/cues/Entities.tsx
@@ -0,0 +1,3 @@
+import { EntityIcon } from 'app/editArea/[slug]/general/components/AreaItem'
+
+export const AreaEntityBullet: React.FC = () => <span className='area-entity-box'><EntityIcon type='area' size={24} withLabel={false} /></span>
diff --git a/src/components/editor/MarkdownEditor.tsx b/src/components/editor/MarkdownEditor.tsx
index ef91f8c40..2004d94db 100644
--- a/src/components/editor/MarkdownEditor.tsx
+++ b/src/components/editor/MarkdownEditor.tsx
@@ -23,14 +23,9 @@ export interface MarkdownEditorProps {
 }
 
 /**
- * Multiline inplace editor with react-hook-form support.
+ * Multiline markdown editor with react-hook-form support.
  */
 export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initialValue = '', preview = false, placeholder = 'Enter some text', rules }) => {
-  // const { field, fieldState: { error } } = useController({ name: fieldName, rules })
-
-  // const onChangeHandler = (arg0: EditorState, arg1: LexicalEditor): void => {
-  //   onChange(arg0, arg1, field)
-  // }
   const config = mdeditorConfig(initialValue, !preview)
   return (
     <div className='relative border'>