refactor: move navbar files to component dir

OpenBeta · Feb 22, 2024 · 48840ba · 48840ba
1 parent 1c92436
commit 48840ba
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 62 deletions.
diff --git a/src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx b/src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx
@@ -0,0 +1,58 @@
+'use client'
+import { EntityIcon, EType } from '../general/components/AreaItem'
+import { SidebarNavProps } from './SidebarNav'
+
+/**
+ * Show area attributes in a small panel
+ */
+export const AreaAttributesPanel: React.FC<Omit<SidebarNavProps, 'slug'>> = ({ canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => {
+  let type: EType
+  if (isLeaf) {
+    type = isBoulder ? 'boulder' : 'crag'
+  } else {
+    type = 'area'
+  }
+  return (
+    <section>
+      <p className='pl-4 pb-1 font-semibold text-secondary text-sm uppercase'>Area attributes</p>
+
+      <div className='bg-base-100 rounded-box border p-4'>
+        <div className='flex flex-col gap-3 text-base-300 text-xs w-full '>
+
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Entity type</span> <span className='text-primary font-semibold'><EntityIcon type={type} size={16} /></span>
+          </div>
+
+          <hr />
+
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Crag</span> <span className='text-primary font-semibold'>{booleanToYesNo(isLeaf)}</span>
+          </div>
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Boulder</span> <span className='text-primary font-semibold'>{booleanToYesNo(isBoulder)}</span>
+          </div>
+
+          <hr />
+
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Child areas</span> <span className='text-primary font-semibold'>{areaCount}</span>
+          </div>
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Climbs</span> <span className='text-primary font-semibold'>{climbCount}</span>
+          </div>
+
+          <hr />
+
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Can add child areas?</span> <span className='text-primary font-semibold'>{booleanToYesNo(canAddAreas)}</span>
+          </div>
+          <div className='flex items-center gap-2 justify-between'>
+            <span className='text-scondary'>Can add climbs?</span> <span className='text-primary font-semibold'>{booleanToYesNo(canAddClimbs)}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const booleanToYesNo = (bool: boolean): string => bool ? 'YES' : 'NO'
diff --git a/.../(default)/editArea/[slug]/SidebarNav.tsx → ...editArea/[slug]/components/SidebarNav.tsx b/.../(default)/editArea/[slug]/SidebarNav.tsx → ...editArea/[slug]/components/SidebarNav.tsx
@@ -2,9 +2,10 @@
 import clx from 'classnames'
 import { usePathname } from 'next/navigation'
 import { Article, Plus } from '@phosphor-icons/react/dist/ssr'
-import { EntityIcon, EType } from './general/components/AreaItem'
+import { EntityIcon } from '../general/components/AreaItem'
+import { AreaAttributesPanel } from './AreaAttributesPanel'
 
-interface Props {
+export interface SidebarNavProps {
   slug: string
   canAddAreas: boolean
   canAddClimbs: boolean
@@ -16,7 +17,7 @@ interface Props {
 /**
  * Sidebar navigation for area edit
  */
-export const SidebarNav: React.FC<Props> = ({ slug, canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => {
+export const SidebarNav: React.FC<SidebarNavProps> = ({ slug, canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => {
   const activePath = usePathname()
   /**
    * Disable menu item's hover/click when own page is showing
@@ -87,64 +88,17 @@ export const SidebarNav: React.FC<Props> = ({ slug, canAddAreas, canAddClimbs, a
 
         </div>
 
-        <Summary
-          canAddAreas={canAddAreas}
-          canAddClimbs={canAddClimbs}
-          areaCount={areaCount}
-          climbCount={climbCount}
-          isLeaf={isLeaf}
-          isBoulder={isBoulder}
-        />
-      </div>
-    </nav>
-  )
-}
-
-const Summary: React.FC<Omit<Props, 'slug'>> = ({ canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => {
-  let type: EType
-  if (isLeaf) {
-    type = isBoulder ? 'boulder' : 'crag'
-  } else {
-    type = 'area'
-  }
-  return (
-    <section className='mt-6'>
-
-      <p className='pl-4 pb-1 font-semibold text-secondary text-sm uppercase'>Area attributes</p>
-
-      <div className='bg-base-100 rounded-box px-4'>
-        <div className='flex flex-col gap-3 py-3 text-base-300 text-xs w-full '>
-
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Entity type</span> <span className='text-primary font-semibold'><EntityIcon type={type} size={16} /></span>
-          </div>
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Crag</span> <span className='text-primary font-semibold'>{isLeaf ? 'YES' : 'NO'}</span>
-          </div>
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Boulder</span> <span className='text-primary font-semibold'>{isBoulder ? 'YES' : 'NO'}</span>
-          </div>
-
-          <hr />
-
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Child areas</span> <span className='text-primary font-semibold'>{areaCount}</span>
-          </div>
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Climbs</span> <span className='text-primary font-semibold'>{climbCount}</span>
-          </div>
-
-          <hr />
-
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Can add areas?</span> <span className='text-primary font-semibold'>{booleanToYesNo(canAddAreas)}</span>
-          </div>
-          <div className='flex items-center gap-2 justify-between'>
-            <span className='text-scondary'>Climbs</span> <span className='text-primary font-semibold'>{booleanToYesNo(canAddClimbs)}</span>
-          </div>
+        <div className='my-6'>
+          <AreaAttributesPanel
+            canAddAreas={canAddAreas}
+            canAddClimbs={canAddClimbs}
+            areaCount={areaCount}
+            climbCount={climbCount}
+            isLeaf={isLeaf}
+            isBoulder={isBoulder}
+          />
         </div>
       </div>
-    </section>
+    </nav>
   )
 }
-const booleanToYesNo = (bool: boolean): string => bool ? 'YES' : 'NO'
diff --git a/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx b/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx
@@ -37,7 +37,7 @@ export const AreaLatLngForm: React.FC<{ initLat: number, initLng: number, uuid:
             registerOptions={AREA_LATLNG_FORM_VALIDATION_RULES}
             readOnly={!isLeaf}
            />)
-        : (<p className='text-secondary'>Field available for crag or boulder only.</p>)}
+        : (<p className='text-secondary'>Coordinates field available only when area type is either 'Crag' or 'Boulder'.</p>)}
     </SingleEntryForm>
   )
 }
diff --git a/src/app/(default)/editArea/[slug]/layout.tsx b/src/app/(default)/editArea/[slug]/layout.tsx
@@ -1,5 +1,5 @@
 import { ArrowUUpLeft } from '@phosphor-icons/react/dist/ssr'
-import { SidebarNav } from './SidebarNav'
+import { SidebarNav } from './components/SidebarNav'
 import { getPageDataForEdit } from './general/page'
 import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs'
 import { getAreaPageFriendlyUrl } from '@/js/utils'