Skip to content

Commit

Permalink
add subareas table to area page
Browse files Browse the repository at this point in the history
  • Loading branch information
viet nguyen committed Nov 26, 2023
1 parent 6fb2505 commit 43c5f42
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 37 deletions.
27 changes: 26 additions & 1 deletion src/app/area/[...slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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
*/
Expand Down Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion src/app/editArea/[slug]/general/components/AddAreaForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand Down
43 changes: 23 additions & 20 deletions src/app/editArea/[slug]/general/components/AreaItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
)
}
Expand Down
15 changes: 8 additions & 7 deletions src/app/editArea/[slug]/general/components/AreaList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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>)
4 changes: 2 additions & 2 deletions src/app/editArea/[slug]/general/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -58,7 +58,7 @@ export default async function AreaEditPage ({ params }: DashboardPageProps): Pro
</PageContainer>

<PageContainer id='children'>
<AreaList
<AreaListForm
areaName={areaName}
uuid={uuid}
ancestors={ancestors}
Expand Down
3 changes: 3 additions & 0 deletions src/components/cues/Entities.tsx
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 1 addition & 6 deletions src/components/editor/MarkdownEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down

0 comments on commit 43c5f42

Please sign in to comment.