From afafb777b4be09d70cd8f56f8d236d98ac63ba6e Mon Sep 17 00:00:00 2001 From: Milan Damen <github@darvit.nl> Date: Fri, 4 Aug 2023 14:47:17 +0000 Subject: [PATCH] Mark post as read when clicking "Expand here" on the preview image on the post listing page (#1600) (#1978) * Mark post as read when clicking "Expand here" on the preview image on the post listing page (#1600) * Simplified check for mark post as read * Implemented mark post as read as a property callback instead of directly using HttpService --------- Co-authored-by: SleeplessOne1917 <abias1122@gmail.com> --- src/shared/components/community/community.tsx | 8 ++++++++ src/shared/components/home/home.tsx | 8 ++++++++ src/shared/components/person/person-details.tsx | 4 ++++ src/shared/components/person/profile.tsx | 8 ++++++++ src/shared/components/post/post-form.tsx | 2 ++ src/shared/components/post/post-listing.tsx | 13 ++++++++++++- src/shared/components/post/post-listings.tsx | 3 +++ src/shared/components/post/post-report.tsx | 1 + src/shared/components/post/post.tsx | 8 ++++++++ src/shared/components/search.tsx | 2 ++ 10 files changed, 56 insertions(+), 1 deletion(-) diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index 3f7cdb5..b0787ec 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -62,6 +62,7 @@ import { LockPost, MarkCommentReplyAsRead, MarkPersonMentionAsRead, + MarkPostAsRead, PostResponse, PurgeComment, PurgeCommunity, @@ -195,6 +196,7 @@ export class Community extends Component< this.handleSavePost = this.handleSavePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this); + this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this); this.mainContentRef = createRef(); // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { @@ -431,6 +433,7 @@ export class Community extends Component< onAddAdmin={this.handleAddAdmin} onTransferCommunity={this.handleTransferCommunity} onFeaturePost={this.handleFeaturePost} + onMarkPostAsRead={this.handleMarkPostAsRead} /> ); } @@ -801,6 +804,11 @@ export class Community extends Component< await HttpService.client.markPersonMentionAsRead(form); } + async handleMarkPostAsRead(form: MarkPostAsRead) { + const res = await HttpService.client.markPostAsRead(form); + this.findAndUpdatePost(res); + } + async handleBanFromCommunity(form: BanFromCommunity) { const banRes = await HttpService.client.banFromCommunity(form); this.updateBanFromCommunity(banRes); diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index bdda543..64c61a3 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -59,6 +59,7 @@ import { LockPost, MarkCommentReplyAsRead, MarkPersonMentionAsRead, + MarkPostAsRead, PostResponse, PurgeComment, PurgeItemResponse, @@ -268,6 +269,7 @@ export class Home extends Component<any, HomeState> { this.handleSavePost = this.handleSavePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this); + this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this); // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { @@ -698,6 +700,7 @@ export class Home extends Component<any, HomeState> { onAddAdmin={this.handleAddAdmin} onTransferCommunity={this.handleTransferCommunity} onFeaturePost={this.handleFeaturePost} + onMarkPostAsRead={this.handleMarkPostAsRead} /> ); } @@ -1025,6 +1028,11 @@ export class Home extends Component<any, HomeState> { this.updateBan(banRes); } + async handleMarkPostAsRead(form: MarkPostAsRead) { + const res = await HttpService.client.markPostAsRead(form); + this.findAndUpdatePost(res); + } + updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) { // Maybe not necessary if (banRes.state === "success") { diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx index 6af64f5..259cde1 100644 --- a/src/shared/components/person/person-details.tsx +++ b/src/shared/components/person/person-details.tsx @@ -25,6 +25,7 @@ import { LockPost, MarkCommentReplyAsRead, MarkPersonMentionAsRead, + MarkPostAsRead, PersonView, PostView, PurgeComment, @@ -84,6 +85,7 @@ interface PersonDetailsProps { onSavePost(form: SavePost): void; onFeaturePost(form: FeaturePost): void; onPurgePost(form: PurgePost): void; + onMarkPostAsRead(form: MarkPostAsRead): void; } enum ItemEnum { @@ -200,6 +202,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> { onAddModToCommunity={this.props.onAddModToCommunity} onAddAdmin={this.props.onAddAdmin} onTransferCommunity={this.props.onTransferCommunity} + onMarkPostAsRead={this.props.onMarkPostAsRead} /> ); } @@ -311,6 +314,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> { onAddModToCommunity={this.props.onAddModToCommunity} onAddAdmin={this.props.onAddAdmin} onTransferCommunity={this.props.onTransferCommunity} + onMarkPostAsRead={this.props.onMarkPostAsRead} /> <hr className="my-3" /> </> diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index a3a7f88..08ec7ad 100644 --- a/src/shared/components/person/profile.tsx +++ b/src/shared/components/person/profile.tsx @@ -60,6 +60,7 @@ import { LockPost, MarkCommentReplyAsRead, MarkPersonMentionAsRead, + MarkPostAsRead, PersonView, PostResponse, PurgeComment, @@ -208,6 +209,7 @@ export class Profile extends Component< this.handlePurgePost = this.handlePurgePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleModBanSubmit = this.handleModBanSubmit.bind(this); + this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this); // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { @@ -376,6 +378,7 @@ export class Profile extends Component< onSavePost={this.handleSavePost} onPurgePost={this.handlePurgePost} onFeaturePost={this.handleFeaturePost} + onMarkPostAsRead={this.handleMarkPostAsRead} /> </div> @@ -944,6 +947,11 @@ export class Profile extends Component< await HttpService.client.markPersonMentionAsRead(form); } + async handleMarkPostAsRead(form: MarkPostAsRead) { + const res = await HttpService.client.markPostAsRead(form); + this.findAndUpdatePost(res); + } + async handleBanFromCommunity(form: BanFromCommunity) { const banRes = await HttpService.client.banFromCommunity(form); this.updateBanFromCommunity(banRes); diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx index 6431357..6c88628 100644 --- a/src/shared/components/post/post-form.tsx +++ b/src/shared/components/post/post-form.tsx @@ -447,6 +447,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { onAddModToCommunity={() => {}} onAddAdmin={() => {}} onTransferCommunity={() => {}} + onMarkPostAsRead={() => {}} /> </> )} @@ -641,6 +642,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { onAddModToCommunity={() => {}} onAddAdmin={() => {}} onTransferCommunity={() => {}} + onMarkPostAsRead={() => {}} /> </> ) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index c9a9985..afd5daa 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -1,4 +1,4 @@ -import { myAuthRequired } from "@utils/app"; +import { myAuth, myAuthRequired } from "@utils/app"; import { canShare, share } from "@utils/browser"; import { getExternalHost, getHttpBase } from "@utils/env"; import { @@ -34,6 +34,7 @@ import { FeaturePost, Language, LockPost, + MarkPostAsRead, PersonView, PostView, PurgePerson, @@ -130,6 +131,7 @@ interface PostListingProps { onAddModToCommunity(form: AddModToCommunity): void; onAddAdmin(form: AddAdmin): void; onTransferCommunity(form: TransferCommunity): void; + onMarkPostAsRead(form: MarkPostAsRead): void; } export class PostListing extends Component<PostListingProps, PostListingState> { @@ -1723,6 +1725,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> { event.preventDefault(); i.setState({ imageExpanded: !i.state.imageExpanded }); setupTippy(); + + const auth = myAuth(); + if (auth && !i.props.post_view.read) { + i.props.onMarkPostAsRead({ + post_id: i.props.post_view.post.id, + read: true, + auth: auth, + }); + } } handleViewSource(i: PostListing) { diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx index 3f6c304..fc77f50 100644 --- a/src/shared/components/post/post-listings.tsx +++ b/src/shared/components/post/post-listings.tsx @@ -14,6 +14,7 @@ import { FeaturePost, Language, LockPost, + MarkPostAsRead, PostView, PurgePerson, PurgePost, @@ -49,6 +50,7 @@ interface PostListingsProps { onAddModToCommunity(form: AddModToCommunity): void; onAddAdmin(form: AddAdmin): void; onTransferCommunity(form: TransferCommunity): void; + onMarkPostAsRead(form: MarkPostAsRead): void; } export class PostListings extends Component<PostListingsProps, any> { @@ -95,6 +97,7 @@ export class PostListings extends Component<PostListingsProps, any> { onAddModToCommunity={this.props.onAddModToCommunity} onAddAdmin={this.props.onAddAdmin} onTransferCommunity={this.props.onTransferCommunity} + onMarkPostAsRead={this.props.onMarkPostAsRead} /> {idx + 1 !== this.posts.length && <hr className="my-3" />} </> diff --git a/src/shared/components/post/post-report.tsx b/src/shared/components/post/post-report.tsx index a860ae0..fd6d99b 100644 --- a/src/shared/components/post/post-report.tsx +++ b/src/shared/components/post/post-report.tsx @@ -87,6 +87,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> { onAddModToCommunity={() => {}} onAddAdmin={() => {}} onTransferCommunity={() => {}} + onMarkPostAsRead={() => {}} /> <div> {I18NextService.i18n.t("reporter")}:{" "} diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index 5819d25..0401228 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -63,6 +63,7 @@ import { LockPost, MarkCommentReplyAsRead, MarkPersonMentionAsRead, + MarkPostAsRead, PostResponse, PurgeComment, PurgeCommunity, @@ -171,6 +172,7 @@ export class Post extends Component<any, PostState> { this.handleSavePost = this.handleSavePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this); + this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this); this.state = { ...this.state, commentSectionRef: createRef() }; @@ -384,6 +386,7 @@ export class Post extends Component<any, PostState> { onAddAdmin={this.handleAddAdmin} onTransferCommunity={this.handleTransferCommunity} onFeaturePost={this.handleFeaturePost} + onMarkPostAsRead={this.handleMarkPostAsRead} /> <div ref={this.state.commentSectionRef} className="mb-2" /> <CommentForm @@ -917,6 +920,11 @@ export class Post extends Component<any, PostState> { await HttpService.client.markPersonMentionAsRead(form); } + async handleMarkPostAsRead(form: MarkPostAsRead) { + const res = await HttpService.client.markPostAsRead(form); + this.updatePost(res); + } + async handleBanFromCommunity(form: BanFromCommunity) { const banRes = await HttpService.client.banFromCommunity(form); this.updateBan(banRes); diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 3248db1..0fd9082 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -706,6 +706,7 @@ export class Search extends Component<any, SearchState> { onAddModToCommunity={() => {}} onAddAdmin={() => {}} onTransferCommunity={() => {}} + onMarkPostAsRead={() => {}} /> )} {i.type_ === "comments" && ( @@ -856,6 +857,7 @@ export class Search extends Component<any, SearchState> { onAddModToCommunity={() => {}} onAddAdmin={() => {}} onTransferCommunity={() => {}} + onMarkPostAsRead={() => {}} /> </div> </div> -- 2.44.1