Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Splitted Content component from ContentBox

Browse source
This commit is contained in:
Simon Backx 2022-09-09 11:38:52 +02:00
parent d63e75f0a2
commit 87729cd0ee
2 changed files with 57 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
apps/comments-ui/src/components/ContentBox.js
View file

@ -1,56 +1,8 @@
import React, {useContext, useEffect} from 'react'; import React, {useContext} from 'react';
import AppContext from '../AppContext'; import AppContext from '../AppContext';
import CTABox from './content/CTABox';
import MainForm from './content/forms/MainForm';
import Comment from './content/Comment';
import Pagination from './content/Pagination';
import Loading from './content/Loading';
import {ROOT_DIV_ID} from '../utils/constants'; import {ROOT_DIV_ID} from '../utils/constants';
import ContentTitle from './content/ContentTitle'; import Content from './content/Content';
import Loading from './content/Loading';
const Content = (props) => {
const {pagination, member, comments, commentCount, commentsEnabled, title, showCount, secundaryFormCount} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid;
useEffect(() => {
const elem = document.getElementById(ROOT_DIV_ID);
// Check scroll position
if (elem && window.location.hash === `#ghost-comments`) {
// Only scroll if the user didn't scroll by the time we loaded the comments
// We could remove this, but if the network connection is slow, we risk having a page jump when the user already started scrolling
if (window.scrollY === 0) {
// This is a bit hacky, but one animation frame is not enough to wait for the iframe height to have changed and the DOM to be updated correctly before scrolling
requestAnimationFrame(() => {
requestAnimationFrame(() => {
elem.scrollIntoView();
});
});
}
}
}, []);
const hasOpenSecundaryForms = secundaryFormCount > 0;
return (
<>
<ContentTitle title={title} showCount={showCount} count={commentCount}/>
<Pagination />
<div className={!pagination ? 'mt-4' : ''} data-test="comment-elements">
{commentsElements}
</div>
<div>
{!hasOpenSecundaryForms
? (member ? (isPaidMember || !paidOnly ? <MainForm commentsCount={commentCount} /> : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />) : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />)
: null
}
</div>
</>
);
};
const ContentBox = (props) => { const ContentBox = (props) => {
const luminance = (r, g, b) => { const luminance = (r, g, b) => {

54
apps/comments-ui/src/components/content/Content.js Normal file
View file

@ -0,0 +1,54 @@
import React, {useContext, useEffect} from 'react';
import AppContext from '../../AppContext';
import CTABox from './CTABox';
import MainForm from './forms/MainForm';
import Comment from './Comment';
import Pagination from './Pagination';
import ContentTitle from './ContentTitle';
import {ROOT_DIV_ID} from '../../utils/constants';
const Content = (props) => {
const {pagination, member, comments, commentCount, commentsEnabled, title, showCount, secundaryFormCount} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid;
useEffect(() => {
const elem = document.getElementById(ROOT_DIV_ID);
// Check scroll position
if (elem && window.location.hash === `#ghost-comments`) {
// Only scroll if the user didn't scroll by the time we loaded the comments
// We could remove this, but if the network connection is slow, we risk having a page jump when the user already started scrolling
if (window.scrollY === 0) {
// This is a bit hacky, but one animation frame is not enough to wait for the iframe height to have changed and the DOM to be updated correctly before scrolling
requestAnimationFrame(() => {
requestAnimationFrame(() => {
elem.scrollIntoView();
});
});
}
}
}, []);
const hasOpenSecundaryForms = secundaryFormCount > 0;
return (
<>
<ContentTitle title={title} showCount={showCount} count={commentCount}/>
<Pagination />
<div className={!pagination ? 'mt-4' : ''} data-test="comment-elements">
{commentsElements}
</div>
<div>
{!hasOpenSecundaryForms
? (member ? (isPaidMember || !paidOnly ? <MainForm commentsCount={commentCount} /> : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />) : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />)
: null
}
</div>
</>
);
};
export default Content;