2019-10-15 00:21:40 +02:00
|
|
|
// @flow
|
|
|
|
import React from 'react';
|
2021-02-04 06:45:49 +01:00
|
|
|
import Empty from 'component/common/empty';
|
2021-10-18 17:54:59 +02:00
|
|
|
import { lazyImport } from 'util/lazyImport';
|
|
|
|
|
|
|
|
const CommentsList = lazyImport(() => import('component/commentsList' /* webpackChunkName: "comments" */));
|
2019-10-15 00:21:40 +02:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
uri: string,
|
2021-07-15 16:43:28 +02:00
|
|
|
linkedCommentId?: string,
|
Re-design comment threads (#1489)
* Redesign threadline and fetching state
- threadline goes right below channel avatar, mimicking reddits implementation, has a increase effect on hover and is slimmer, creating more space for comments on screen
- fetching state now replaces show/hide button, also mimicking reddit, and now says that it is loading, instead of a blank spinner, and also improves space a bit
* Redesign comment threads
- Allow for infinite comment chains
- Can go back and forth between the pages
- Can go back to all comments or to the first comment in the chain
- Some other improvements, which include:
- add title on non-drawer comment sections (couldn't see amount of comments)
- fix Expandable component (would begin expanded and collapse after the effect runs, which looked bad and shifted the layout, now each comments greater than the set length begins collapsed)
- used constants for consistency
* Fix replying to last thread comment
* Fix buttons condition (only on fetched comment to avoid deleted case)
* Fix auto-scroll
* Bring back instant feedback for Show More replies
* Improve thread back links
- Now going back to all comments links the top-level comment for easier navigation
- Going back to ~ previous ~ now goes back into the chain instead of topmost level
* Clear timeouts due to unrelated issue
* Fix deep thread linked comment case and more scroll improvements
* More minor changes
* Flow
* Fix commentList tile style
* Fix long channel names overflowing on small screens
* More scroll changes
* Fix threadline
* Revert "Fix long channel names overflowing on small screens"
This reverts commit e4d2dc7da5861ed8136a60f3352e41a690cd4d33.
* Fix replies fetch
* Revert "Fix replies fetch"
This reverts commit ec70054675a604a7a5f3764ba07c36bf7b0f49c8.
* Cleanup and make smooth
* Always use linked comment on threads
* Cleanup
* Higlight thread comment
* Fix comment body styles
2022-05-16 12:22:13 +02:00
|
|
|
threadCommentId?: string,
|
2021-02-05 00:00:07 +01:00
|
|
|
commentsDisabled: boolean,
|
2022-02-05 13:06:19 +01:00
|
|
|
commentSettingDisabled?: boolean,
|
2019-10-15 00:21:40 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
function ChannelDiscussion(props: Props) {
|
Re-design comment threads (#1489)
* Redesign threadline and fetching state
- threadline goes right below channel avatar, mimicking reddits implementation, has a increase effect on hover and is slimmer, creating more space for comments on screen
- fetching state now replaces show/hide button, also mimicking reddit, and now says that it is loading, instead of a blank spinner, and also improves space a bit
* Redesign comment threads
- Allow for infinite comment chains
- Can go back and forth between the pages
- Can go back to all comments or to the first comment in the chain
- Some other improvements, which include:
- add title on non-drawer comment sections (couldn't see amount of comments)
- fix Expandable component (would begin expanded and collapse after the effect runs, which looked bad and shifted the layout, now each comments greater than the set length begins collapsed)
- used constants for consistency
* Fix replying to last thread comment
* Fix buttons condition (only on fetched comment to avoid deleted case)
* Fix auto-scroll
* Bring back instant feedback for Show More replies
* Improve thread back links
- Now going back to all comments links the top-level comment for easier navigation
- Going back to ~ previous ~ now goes back into the chain instead of topmost level
* Clear timeouts due to unrelated issue
* Fix deep thread linked comment case and more scroll improvements
* More minor changes
* Flow
* Fix commentList tile style
* Fix long channel names overflowing on small screens
* More scroll changes
* Fix threadline
* Revert "Fix long channel names overflowing on small screens"
This reverts commit e4d2dc7da5861ed8136a60f3352e41a690cd4d33.
* Fix replies fetch
* Revert "Fix replies fetch"
This reverts commit ec70054675a604a7a5f3764ba07c36bf7b0f49c8.
* Cleanup and make smooth
* Always use linked comment on threads
* Cleanup
* Higlight thread comment
* Fix comment body styles
2022-05-16 12:22:13 +02:00
|
|
|
const { uri, linkedCommentId, threadCommentId, commentsDisabled, commentSettingDisabled } = props;
|
2020-08-31 19:12:34 +02:00
|
|
|
|
2021-02-05 00:00:07 +01:00
|
|
|
if (commentsDisabled) {
|
2022-02-05 13:06:19 +01:00
|
|
|
return <Empty text={__('The creator of this content has disabled comments.')} />;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (commentSettingDisabled) {
|
2021-02-05 00:00:07 +01:00
|
|
|
return <Empty text={__('This channel has disabled comments on their page.')} />;
|
2021-02-04 06:45:49 +01:00
|
|
|
}
|
2022-02-05 13:06:19 +01:00
|
|
|
|
2019-10-15 00:21:40 +02:00
|
|
|
return (
|
2020-08-25 21:25:33 +02:00
|
|
|
<section className="section">
|
2021-10-18 17:54:59 +02:00
|
|
|
<React.Suspense fallback={null}>
|
Re-design comment threads (#1489)
* Redesign threadline and fetching state
- threadline goes right below channel avatar, mimicking reddits implementation, has a increase effect on hover and is slimmer, creating more space for comments on screen
- fetching state now replaces show/hide button, also mimicking reddit, and now says that it is loading, instead of a blank spinner, and also improves space a bit
* Redesign comment threads
- Allow for infinite comment chains
- Can go back and forth between the pages
- Can go back to all comments or to the first comment in the chain
- Some other improvements, which include:
- add title on non-drawer comment sections (couldn't see amount of comments)
- fix Expandable component (would begin expanded and collapse after the effect runs, which looked bad and shifted the layout, now each comments greater than the set length begins collapsed)
- used constants for consistency
* Fix replying to last thread comment
* Fix buttons condition (only on fetched comment to avoid deleted case)
* Fix auto-scroll
* Bring back instant feedback for Show More replies
* Improve thread back links
- Now going back to all comments links the top-level comment for easier navigation
- Going back to ~ previous ~ now goes back into the chain instead of topmost level
* Clear timeouts due to unrelated issue
* Fix deep thread linked comment case and more scroll improvements
* More minor changes
* Flow
* Fix commentList tile style
* Fix long channel names overflowing on small screens
* More scroll changes
* Fix threadline
* Revert "Fix long channel names overflowing on small screens"
This reverts commit e4d2dc7da5861ed8136a60f3352e41a690cd4d33.
* Fix replies fetch
* Revert "Fix replies fetch"
This reverts commit ec70054675a604a7a5f3764ba07c36bf7b0f49c8.
* Cleanup and make smooth
* Always use linked comment on threads
* Cleanup
* Higlight thread comment
* Fix comment body styles
2022-05-16 12:22:13 +02:00
|
|
|
<CommentsList
|
|
|
|
uri={uri}
|
|
|
|
linkedCommentId={linkedCommentId}
|
|
|
|
threadCommentId={threadCommentId}
|
|
|
|
commentsAreExpanded
|
|
|
|
notInDrawer
|
|
|
|
/>
|
2021-10-18 17:54:59 +02:00
|
|
|
</React.Suspense>
|
2020-08-25 21:25:33 +02:00
|
|
|
</section>
|
2019-10-15 00:21:40 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ChannelDiscussion;
|