Skip to content

Commit

Permalink
fix(plugin-search): Render error on custom UI component
Browse files Browse the repository at this point in the history
  • Loading branch information
paulpopus committed May 29, 2024
1 parent 92f458d commit fa33672
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 53 deletions.
65 changes: 65 additions & 0 deletions packages/plugin-search/src/Search/ui/index.client.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
'use client'

import type { FormState } from 'payload/types'

import { useWatchForm } from '@payloadcms/ui/forms/Form'
import { useConfig } from '@payloadcms/ui/providers/Config'
import React from 'react'
// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
// import CopyToClipboard from 'payload/dist/admin/components/elements/CopyToClipboard'

type FieldsWithDoc = FormState & {
doc: {
value: {
relationTo: string
value: string
}
}
}

export const LinkToDocClient: React.FC = () => {
const form = useWatchForm()
const fields = form.fields as FieldsWithDoc

const {
doc: {
value: { relationTo, value: docId },
},
} = fields

const config = useConfig()

const {
routes: {
admin: adminRoute, // already includes leading slash
},
serverURL,
} = config

const href = `${serverURL}${adminRoute}/collections/${relationTo}/${docId}`

return (
<div>
<div>
<span
className="label"
style={{
color: '#9A9A9A',
}}
>
Doc URL
</span>
{/* <CopyToClipboard value={href} /> */}
</div>
<div
style={{
fontWeight: '600',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
<a href={href}>{href}</a>
</div>
</div>
)
}
56 changes: 3 additions & 53 deletions packages/plugin-search/src/Search/ui/index.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,13 @@
import type { FormState, UIField } from 'payload/types'
import type { UIField } from 'payload/types'

import { useWatchForm } from '@payloadcms/ui/forms/Form'
import { useConfig } from '@payloadcms/ui/providers/Config'
import React from 'react'
// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
// import CopyToClipboard from 'payload/dist/admin/components/elements/CopyToClipboard'

type FieldsWithDoc = FormState & {
doc: {
value: {
relationTo: string
value: string
}
}
}
import { LinkToDocClient } from './index.client.js'

export const LinkToDoc: React.FC<UIField> = () => {
const form = useWatchForm()
const fields = form.fields as FieldsWithDoc

const {
doc: {
value: { relationTo, value: docId },
},
} = fields

const config = useConfig()

const {
routes: {
admin: adminRoute, // already includes leading slash
},
serverURL,
} = config

const href = `${serverURL}${adminRoute}/collections/${relationTo}/${docId}`

return (
<div>
<div>
<span
className="label"
style={{
color: '#9A9A9A',
}}
>
Doc URL
</span>
{/* <CopyToClipboard value={href} /> */}
</div>
<div
style={{
fontWeight: '600',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
<a href={href}>{href}</a>
</div>
<LinkToDocClient />
</div>
)
}

0 comments on commit fa33672

Please sign in to comment.