docbrown/app/javascript/articles/components/SearchSnippet.jsx
Nick Taylor 5e677daac1
Homepage feed components (#6052)
* wip - <PodcastArticle /> component.

* Added filler user avatar for other article types.

* Added <LoadingArticle /> component.

* wip

* wip on <Article /> component.

* Added <Article /> component to barrel file.

* Deleted assets from dummy storybook assets folder.

* Updated podcast article story avatar.

* More work on <Article /> component.

* Refactoring Storybook stories.

* Refactored so main component is just the <Article /> component.

* Added a missing video article property.

* Some refactoring of <Article /> component.

* Added Storybook knobs addon.

* Now <Article /> component supports an isBookmarked prop.

* Fixed podcast Storybook story.

* Made the knobs Storybook addon the first tab

* Added more <Article /> Storybook stories.

* More <Article /> component tweaks.

* Added publish time to <Article /> component stories.

* Made the timeAgo function compatible with Preact.

* Added loading="lazy" attribute to <img /> in <Article /> component.

* Added <Article /> Storybook story for past published date.

* Fixed publish date for <Article /> story data.

* Scrapped random avatars.

* Added snapshots for <Article /> component.

* Added snapshots for <LoadingArticle /> component.

* Now test article entities are shared.

* Fixed some wording of Storybook stories.

* Breaking up Article.jsx to make codeclimate happy.

* Now <Article /> component receives icon props.

* Added knobs for <Article /> icon props.

* Added *.stories.jsx to codeclimate exclusion list.

* Added **/*.stories.jsx to codeclimate exclusion list.

* Alright now we have the good glob for excluding Storybook from codeclimate 😆

* Added org headline changes from low hanging fruit PR.

* Updated <Article /> snapshot for org headline.
2020-02-19 11:39:13 -06:00

56 lines
1.5 KiB
JavaScript

import { h } from 'preact';
import { articleSnippetResultPropTypes } from '../../src/components/common-prop-types';
export const SearchSnippet = ({ snippetResult }) => {
if (snippetResult && snippetResult.body_text) {
let bodyTextSnippet = '';
if (snippetResult.body_text.matchLevel !== 'none') {
const firstSnippetChar = snippetResult.body_text.value[0];
let startingEllipsis = '';
if (firstSnippetChar.toLowerCase() !== firstSnippetChar.toUpperCase()) {
startingEllipsis = '…';
}
bodyTextSnippet = `${startingEllipsis + snippetResult.body_text.value}`;
}
let commentsBlobSnippet = '';
if (
snippetResult.comments_blob.matchLevel !== 'none' &&
bodyTextSnippet === ''
) {
const firstSnippetChar = snippetResult.comments_blob.value[0];
let startingEllipsis = '';
if (firstSnippetChar.toLowerCase() !== firstSnippetChar.toUpperCase()) {
startingEllipsis = '…';
}
commentsBlobSnippet = `${startingEllipsis +
snippetResult.comments_blob.value}… <i>(comments)</i>`;
}
if (bodyTextSnippet.length > 0 || commentsBlobSnippet.length > 0) {
return (
<div className="search-snippet">
<span>
{bodyTextSnippet}
{commentsBlobSnippet}
</span>
</div>
);
}
}
return null;
};
SearchSnippet.propTypes = {
// eslint-disable-next-line no-underscore-dangle
snippetResult: articleSnippetResultPropTypes.isRequired,
};
SearchSnippet.displayName = 'SearchSnippet';