# code-snippets/4.0.0-beta.1/js/components/ManageMenu/CommunityCloud/SearchResult.tsx

Code Snippets, version 4.0.0-beta.1. 219 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
- Modified: 2026-06-19T15:56:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/ManageMenu/CommunityCloud/SearchResult.tsx#L10-L20`.

```tsx
import React, { useEffect, useState } from 'react'
import classnames from 'classnames'
import { __, _x } from '@wordpress/i18n'
import { Modal, Spinner } from '@wordpress/components'
import { useRestAPI } from '../../../hooks/useRestAPI'
import { CloudStatus } from '../../../types/schema/CloudSnippetSchema'
import { Prism } from '../../../utils/Prism'
import { REST_BASES } from '../../../utils/restAPI'
import { isLicensed } from '../../../utils/screen'
import { getSnippetEditUrl, getSnippetType, isProSnippet } from '../../../utils/snippets/snippets'
import { Badge } from '../../common/Badge'
import { Button } from '../../common/Button'
import { ErrorTooltip } from '../../common/Tooltip'
import { UpsellDialog } from '../../common/UpsellDialog'
import { STATUS_LABELS } from './SearchFilters'
import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'

const MAX_DESCRIPTION_LENGTH = 150

interface DownloadSnippetResponse {
	success: boolean
	snippet_id: number
	link_id: number
}

interface CloudSnippetDetailsProps {
	snippet: CloudSnippetSchema
	setIsPreviewOpen: (isOpen: boolean) => void
}

const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setIsPreviewOpen }) =>
	<div className="cloud-snippet">
		<h3>
			<button
				type="button"
				className="cloud-snippet-title-button"
				title={__('Preview this snippet', 'code-snippets')}
				onClick={() => {
					setIsPreviewOpen(true)
				}}
			>
				{snippet.name}
			</button>
		</h3>

		<div className="cloud-snippet-meta">
			<Badge name={getSnippetType(snippet)} />
			<span className="cloud-snippet-votes">
				<span className="dashicons dashicons-thumbs-up" aria-hidden="true"></span>
				<span>
					{snippet.vote_count}
					<span className="screen-reader-text">{` ${__('votes', 'code-snippets')}`}</span>
				</span>
			</span>
			{0 < snippet.tags.length
				? <span className="cloud-snippet-category">
					<strong>{__('Category: ', 'code-snippets')}</strong>
					{snippet.tags[0]}
				</span>
				: null}
		</div>

		{snippet.description && (
			<p className="cloud-snippet-description">
				{snippet.description.length > MAX_DESCRIPTION_LENGTH
					? `${snippet.description.slice(0, MAX_DESCRIPTION_LENGTH)}…`
					: snippet.description}
			</p>
		)}

		<p className="cloud-snippet-author">
			{_x('by ', 'snippet author', 'code-snippets')}
			<a href={`${window.CODE_SNIPPETS?.urls.cloud}/codevault/${snippet.codevault}`} target="_blank" rel="noopener noreferrer">
				{snippet.codevault}
			</a>
		</p>
	</div>

interface PreviewModalProps {
	isOpen: boolean
	snippet: CloudSnippetSchema
	setIsOpen: (isOpen: boolean) => void
}

const PreviewModal: React.FC<PreviewModalProps> = ({ snippet, isOpen, setIsOpen }) => {
	const snippetType = getSnippetType(snippet)

	return isOpen
		? <Modal onRequestClose={() => setIsOpen(false)} title={snippet.name}>
			<pre className="line-numbers">
				<code className={`language-${snippetType}`}>
					{'php' === snippetType ? '<?php\n\n' : ''}
					{snippet.code}
				</code>
			</pre>
		</Modal>
		: null
}

interface DownloadOrViewButtonProps {
	snippet: CloudSnippetSchema
	isWorking: boolean
	onDownload: VoidFunction
	localSnippetId: number | undefined
}

const DownloadOrViewButton: React.FC<DownloadOrViewButtonProps> = ({
	snippet,
	isWorking,
	onDownload,
	localSnippetId,
}) => {
	const [isUpsellOpen, setIsUpsellOpen] = useState(false)

	if (localSnippetId) {
		return (
			<a className="button button-primary" href={getSnippetEditUrl({ id: localSnippetId })} target="_blank" rel="noopener noreferrer">
				{__('View', 'code-snippets')}
			</a>
		)
	}

	if (isProSnippet(snippet) && !isLicensed()) {
		return (
			<>
				<Button className="cloud-pro-button" onClick={() => setIsUpsellOpen(true)}>
					{__('Pro Only', 'code-snippets')}
				</Button>
				<UpsellDialog isOpen={isUpsellOpen} setIsOpen={setIsUpsellOpen} />
			</>
		)
	}

	return (
		<Button primary onClick={onDownload} disabled={isWorking}>
			{__('Download', 'code-snippets')}
		</Button>
	)
}

interface DownloadButtonProps {
	snippet: CloudSnippetSchema
}

const DownloadButton: React.FC<DownloadButtonProps> = ({ snippet }) => {
	const { api } = useRestAPI()
	const [isWorking, setIsWorking] = useState(false)
	const [errorMessage, setErrorMessage] = useState<string>()
	const [localSnippetId, setLocalSnippetId] = useState<number>()

	const handleDownload = () => {
		setIsWorking(true)
		setErrorMessage(undefined)

		api.post<DownloadSnippetResponse>(`${REST_BASES.cloud.snippets}/${snippet.id}/download`)
			.then(response => {
				setLocalSnippetId(response.snippet_id)
			})
			.catch((error: unknown) => {
				setErrorMessage('string' === typeof error
					? error
					: __('An error occurred while trying to download the snippet. Please try again later.', 'code-snippets'))
			})
			.finally(() => setIsWorking(false))
	}

	return (
		<>
			{isWorking && <Spinner />}
			{errorMessage && <ErrorTooltip message={errorMessage} />}

			<DownloadOrViewButton
				snippet={snippet}
				isWorking={isWorking}
				onDownload={handleDownload}
				localSnippetId={localSnippetId}
			/>
		</>
	)
}

export interface SearchResultProps {
	snippet: CloudSnippetSchema
}

export const SearchResult: React.FC<SearchResultProps> = ({ snippet }) => {
	const [isPreviewOpen, setIsPreviewOpen] = useState(false)

	useEffect(() => {
		if (isPreviewOpen) {
			Prism.highlightAll()
		}
	}, [isPreviewOpen])

	return (
		<li className="cloud-search-result">
			<CloudSnippetDetails snippet={snippet} setIsPreviewOpen={setIsPreviewOpen} />

			<footer>
				<span className={classnames(
					'cloud-snippet-status',
					`cloud-snippet-status-${CloudStatus[snippet.status].toLowerCase().replace('_', '-')}`
				)}>
					{STATUS_LABELS[snippet.status]}
				</span>

				<DownloadButton snippet={snippet} />

				<Button secondary onClick={() => setIsPreviewOpen(true)}>
					{__('Preview', 'code-snippets')}
				</Button>

			</footer>

			<PreviewModal snippet={snippet} isOpen={isPreviewOpen} setIsOpen={setIsPreviewOpen} />
		</li>
	)
}

```