Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update #20907

Closed
wants to merge 4 commits into from
Closed

update #20907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f922e1
Update Article.jsx
CyberSage5 May 1, 2024
9abe39e
Update Feed.jsx
CyberSage5 May 1, 2024
5592eea
Update testSetup.js
CyberSage5 May 12, 2024
81872ca
Merge pull request #1 from CyberSage5/CyberSage5-patch-1
CyberSage5 May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
223 changes: 77 additions & 146 deletions app/javascript/articles/Article.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,158 +16,89 @@ import {
} from './components';
import { PodcastArticle } from './PodcastArticle';

export const Article = ({
article,
isFeatured,
isBookmarked,
bookmarkClick,
feedStyle,
pinned,
saveable,
}) => {
if (article && article.type_of === 'podcast_episodes') {
return <PodcastArticle article={article} />;
}

const isArticle = article.class_name === 'Article';
const clickableClassList = [
'crayons-story',
'crayons-story__top',
'crayons-story__body',
'crayons-story__indention',
'crayons-story__title',
'crayons-story__tags',
'crayons-story__bottom',
'crayons-story__tertiary',
];
const clickableClassList = [
'crayons-story',
'crayons-story__top',
'crayons-story__body',
'crayons-story__indention',
'crayons-story__title',
'crayons-story__tags',
'crayons-story__bottom',
'crayons-story__tertiary',
];

let showCover =
(isFeatured || (feedStyle === 'rich' && article.main_image)) &&
!article.cloudinary_video_url;
const shouldOpenInNewTab = (event) =>
event.which > 1 || event.metaKey || event.ctrlKey;

// pinned article can have a cover image
showCover = showCover || (article.pinned && article.main_image);
const getFullUrl = (article) =>
window.location.origin + article.path;

return (
<article
className={`crayons-story cursor-pointer${
isFeatured ? ' crayons-story--featured' : ''
}`}
id={isFeatured ? 'featured-story-marker' : `article-${article.id}`}
data-feed-content-id={isArticle ? article.id : null}
data-content-user-id={article.user_id}
>
<a
href={article.path}
aria-labelledby={`article-link-${article.id}`}
className="crayons-story__hidden-navigation-link"
>
{article.title}
</a>
<div
role="presentation"
onClick={(event) => {
const { classList } = event.target;
if (clickableClassList.includes(...classList)) {
if (event.which > 1 || event.metaKey || event.ctrlKey) {
// Indicates should open in _blank
window.open(article.path, '_blank');
} else {
const fullUrl = window.location.origin + article.path; // InstantClick deals with full urls
InstantClick.preload(fullUrl);
InstantClick.display(fullUrl);
}
}
}}
>
{article.cloudinary_video_url && <Video article={article} />}

{showCover && <ArticleCoverImage article={article} />}
<div className="crayons-story__body">
<div className="crayons-story__top">
<Meta article={article} organization={article.organization} />
{pinned && (
<div
className="pinned color-accent-brand fw-bold"
data-testid="pinned-article"
>
{/* images/pin.svg */}
<svg
aria-hidden="true"
className="mr-2 align-text-bottom color-accent-brand"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path d="M22.314 10.172l-1.415 1.414-.707-.707-4.242 4.242-.707 3.536-1.415 1.414-4.242-4.243-4.95 4.95-1.414-1.414 4.95-4.95-4.243-4.242 1.414-1.415L8.88 8.05l4.242-4.242-.707-.707 1.414-1.415z" />
</svg>
Pinned
<span class="hidden s:inline">&nbsp;post</span>
</div>
)}
const renderContent = (article, isArticle) => (
<>
{article.cloudinary_video_url && <Video article={article} />}
{article.main_image && <ArticleCoverImage article={article} />}
<div className="crayons-story__body">
<div className="crayons-story__top">
<Meta article={article} organization={article.organization} />
{pinned && (
<div
className="pinned color-accent-brand fw-bold"
data-testid="pinned-article"
>
<svg
aria-hidden="true"
className="mr-2 align-text-bottom color-accent-brand"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path d="M22.314 10.172l-1.415 1.414-.707-.707-4.242 4.242-.707 3.536-1.415 1.414-4.242-4.243-4.95 4.95-1.414-1.414 4.95-4.95-4.243-4.242 1.414-1.415L8.88 8.05l4.242-4.242-.707-.707 1.414-1.415z" />
</svg>
Pinned
<span className="hidden s:inline">&nbsp;post</span>
</div>

<div className="crayons-story__indention">
<ContentTitle article={article} />
<TagList tags={article.tag_list} flare_tag={article.flare_tag} />

{isArticle && (
// eslint-disable-next-line no-underscore-dangle
<SearchSnippet highlightText={article.highlight} />
)}

<div className="crayons-story__bottom">
{article.class_name !== 'User' && (
<div className="crayons-story__details">
<ReactionsCount article={article} />
<CommentsCount
count={article.comments_count}
articlePath={article.path}
articleTitle={article.title}
/>
</div>
)}

<div className="crayons-story__save">
<ReadingTime readingTime={article.reading_time} />

<SaveButton
article={article}
isBookmarked={isBookmarked}
onClick={bookmarkClick}
saveable={saveable}
/>
</div>
)}
</div>
<div className="crayons-story__indention">
<ContentTitle article={article} />
<TagList tags={article.tag_list} flare_tag={article.flare_tag} />
{isArticle && (
<SearchSnippet highlightText={article.highlight} />
)}
<div className="crayons-story__bottom">
{article.class_name !== 'User' && (
<div className="crayons-story__details">
<ReactionsCount article={article} />
<CommentsCount
count={article.comments_count}
articlePath={article.path}
articleTitle={article.title}
/>
</div>
)}
<div className="crayons-story__save">
<ReadingTime readingTime={article.reading_time} />
<SaveButton
article={article}
isBookmarked={isBookmarked}
onClick={bookmarkClick}
saveable={saveable}
/>
</div>
</div>

{article.top_comments && article.top_comments.length > 0 && (
<CommentsList
comments={article.top_comments}
articlePath={article.path}
totalCount={article.comments_count}
/>
)}
</div>
</article>
);
};

Article.defaultProps = {
isBookmarked: false,
isFeatured: false,
feedStyle: 'basic',
saveable: true,
};
</div>
</>
);

Article.propTypes = {
article: articlePropTypes.isRequired,
isBookmarked: PropTypes.bool,
isFeatured: PropTypes.bool,
feedStyle: PropTypes.string,
bookmarkClick: PropTypes.func.isRequired,
pinned: PropTypes.bool,
saveable: PropTypes.bool.isRequired,
};
export const Article = ({
article,
isFeatured,
isBookmarked,
bookmarkClick,
feedStyle,
pinned,
saveable,
}) => {
const isArticle = article.class_name === 'Article