wip move setting area coordinates to its own page

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

@@ -1,6 +1,12 @@
-import { DashboardPageProps, getPageDataForEdit } from '../page'
+import { AreaLatLngForm } from '../general/AreaLatLngForm'
+import { DashboardPageProps, getPageDataForEdit, PageContainer } from '../page'
 
 export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(params.slug)
-  return (<div>Attributes {JSON.stringify(area, null, 2)}</div>)
+  const { area: { uuid, metadata: { lat, lng } } } = await getPageDataForEdit(params.slug)
+
+  return (
+    <PageContainer>
+      <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
+    </PageContainer>
+  )
 }

src/app/editArea/[slug]/loading.tsx

@@ -0,0 +1,11 @@
+import { PageContainer } from './page'
+
+export default function Loading (): JSX.Element {
+  return (
+    <PageContainer>
+      <div className='card card-compact card-bordered w-full h-56 bg-base-300/60' />
+      <div className='card card-compact card-bordered w-full h-56 bg-base-300/60' />
+      <div className='card card-compact card-bordered w-full h-56 bg-base-300/60' />
+    </PageContainer>
+  )
+}

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

@@ -1,12 +1,10 @@
 import { notFound } from 'next/navigation'
 import { validate } from 'uuid'
-import { Suspense, ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { AreaPageDataProps, getArea } from '@/js/graphql/getArea'
 import { AreaNameForm } from './general/AreaNameForm'
 import { AreaDescriptionForm } from './general/AreaDescriptionForm'
-import { AreaLatLngForm } from './general/AreaLatLngForm'
-import Loading from './Skeleton'
 
 // Opt out of caching for all data requests in the route segment
 export const dynamic = 'force-dynamic'
@@ -18,18 +16,11 @@ export interface DashboardPageProps {
 }
 
 export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
-  const areaUuid = params.slug
-  if (!validate(areaUuid)) {
-    notFound()
-  }
-  const { area: { areaName, uuid, content: { description }, metadata: { lat, lng } } } = await getPageDataForEdit(areaUuid)
+  const { area: { areaName, uuid, content: { description }, metadata: { lat, lng } } } = await getPageDataForEdit(params.slug)
   return (
     <PageContainer>
-      <Suspense fallback={<Loading />}>
-        <AreaNameForm initialValue={areaName} uuid={uuid} />
-        <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
-        <AreaDescriptionForm initialValue={description} uuid={uuid} />
-      </Suspense>
+      <AreaNameForm initialValue={areaName} uuid={uuid} />
+      <AreaDescriptionForm initialValue={description} uuid={uuid} />
     </PageContainer>
   )
 }
@@ -40,10 +31,14 @@ export const PageContainer: React.FC<{ children: ReactNode } > = ({ children })
   </section>
 )
 
-export const getPageDataForEdit = async (uuid: string): Promise<AreaPageDataProps> => {
-  if (uuid == null) notFound()
+export const getPageDataForEdit = async (pageSlug: string): Promise<AreaPageDataProps> => {
+  if (pageSlug == null) notFound()
+
+  if (!validate(pageSlug)) {
+    notFound()
+  }
 
-  const pageData = await getArea(uuid)
+  const pageData = await getArea(pageSlug)
   if (pageData == null) {
     notFound()
   }

src/components/editor/plugins/PlainTextResetPlugin.ts

@@ -33,6 +33,7 @@ export function PlainTextResetPlugin ({ initialValue, resetSignal, editable = fa
 
 export const $createInitialPlainTextState = (plainText: string): void => {
   const root = $getRoot()
+
   const paragraph = $createParagraphNode()
   paragraph.append(
     $createTextNode(plainText)

src/components/ui/form/MDTextArea.tsx

@@ -61,5 +61,7 @@ export const MDTextArea: React.FC<EditorProps> = ({ initialValue = '', name, pla
 }
 
 export const MarkdownEditor = dynamic<MarkdownEditorProps>(async () => await import('@/components/editor/MarkdownEditor').then(
-  module => module.MarkdownEditor), { ssr: true }
+  module => module.MarkdownEditor), {
+  ssr: true
+}
 )

src/js/graphql/getArea.ts

@@ -20,5 +20,8 @@ export const getArea = async (uuid: string): Promise<AreaPageDataProps> => {
     fetchPolicy: 'no-cache'
   })
 
+  // eslint-disable-next-line
+  new Promise(resolve => setTimeout(resolve, 5000))
+
   return rs.data
 }