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>
This commit is contained in:
Milan Damen 2023-08-04 14:47:17 +00:00 committed by GitHub
parent 2531d05191
commit afafb777b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 56 additions and 1 deletions

View file

@ -62,6 +62,7 @@ import {
LockPost, LockPost,
MarkCommentReplyAsRead, MarkCommentReplyAsRead,
MarkPersonMentionAsRead, MarkPersonMentionAsRead,
MarkPostAsRead,
PostResponse, PostResponse,
PurgeComment, PurgeComment,
PurgeCommunity, PurgeCommunity,
@ -195,6 +196,7 @@ export class Community extends Component<
this.handleSavePost = this.handleSavePost.bind(this); this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this);
this.mainContentRef = createRef(); this.mainContentRef = createRef();
// Only fetch the data if coming from another route // Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) { if (FirstLoadService.isFirstLoad) {
@ -431,6 +433,7 @@ export class Community extends Component<
onAddAdmin={this.handleAddAdmin} onAddAdmin={this.handleAddAdmin}
onTransferCommunity={this.handleTransferCommunity} onTransferCommunity={this.handleTransferCommunity}
onFeaturePost={this.handleFeaturePost} onFeaturePost={this.handleFeaturePost}
onMarkPostAsRead={this.handleMarkPostAsRead}
/> />
); );
} }
@ -801,6 +804,11 @@ export class Community extends Component<
await HttpService.client.markPersonMentionAsRead(form); await HttpService.client.markPersonMentionAsRead(form);
} }
async handleMarkPostAsRead(form: MarkPostAsRead) {
const res = await HttpService.client.markPostAsRead(form);
this.findAndUpdatePost(res);
}
async handleBanFromCommunity(form: BanFromCommunity) { async handleBanFromCommunity(form: BanFromCommunity) {
const banRes = await HttpService.client.banFromCommunity(form); const banRes = await HttpService.client.banFromCommunity(form);
this.updateBanFromCommunity(banRes); this.updateBanFromCommunity(banRes);

View file

@ -59,6 +59,7 @@ import {
LockPost, LockPost,
MarkCommentReplyAsRead, MarkCommentReplyAsRead,
MarkPersonMentionAsRead, MarkPersonMentionAsRead,
MarkPostAsRead,
PostResponse, PostResponse,
PurgeComment, PurgeComment,
PurgeItemResponse, PurgeItemResponse,
@ -268,6 +269,7 @@ export class Home extends Component<any, HomeState> {
this.handleSavePost = this.handleSavePost.bind(this); this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this);
// Only fetch the data if coming from another route // Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) { if (FirstLoadService.isFirstLoad) {
@ -698,6 +700,7 @@ export class Home extends Component<any, HomeState> {
onAddAdmin={this.handleAddAdmin} onAddAdmin={this.handleAddAdmin}
onTransferCommunity={this.handleTransferCommunity} onTransferCommunity={this.handleTransferCommunity}
onFeaturePost={this.handleFeaturePost} onFeaturePost={this.handleFeaturePost}
onMarkPostAsRead={this.handleMarkPostAsRead}
/> />
); );
} }
@ -1025,6 +1028,11 @@ export class Home extends Component<any, HomeState> {
this.updateBan(banRes); this.updateBan(banRes);
} }
async handleMarkPostAsRead(form: MarkPostAsRead) {
const res = await HttpService.client.markPostAsRead(form);
this.findAndUpdatePost(res);
}
updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) { updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
// Maybe not necessary // Maybe not necessary
if (banRes.state === "success") { if (banRes.state === "success") {

View file

@ -25,6 +25,7 @@ import {
LockPost, LockPost,
MarkCommentReplyAsRead, MarkCommentReplyAsRead,
MarkPersonMentionAsRead, MarkPersonMentionAsRead,
MarkPostAsRead,
PersonView, PersonView,
PostView, PostView,
PurgeComment, PurgeComment,
@ -84,6 +85,7 @@ interface PersonDetailsProps {
onSavePost(form: SavePost): void; onSavePost(form: SavePost): void;
onFeaturePost(form: FeaturePost): void; onFeaturePost(form: FeaturePost): void;
onPurgePost(form: PurgePost): void; onPurgePost(form: PurgePost): void;
onMarkPostAsRead(form: MarkPostAsRead): void;
} }
enum ItemEnum { enum ItemEnum {
@ -200,6 +202,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
onAddModToCommunity={this.props.onAddModToCommunity} onAddModToCommunity={this.props.onAddModToCommunity}
onAddAdmin={this.props.onAddAdmin} onAddAdmin={this.props.onAddAdmin}
onTransferCommunity={this.props.onTransferCommunity} onTransferCommunity={this.props.onTransferCommunity}
onMarkPostAsRead={this.props.onMarkPostAsRead}
/> />
); );
} }
@ -311,6 +314,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
onAddModToCommunity={this.props.onAddModToCommunity} onAddModToCommunity={this.props.onAddModToCommunity}
onAddAdmin={this.props.onAddAdmin} onAddAdmin={this.props.onAddAdmin}
onTransferCommunity={this.props.onTransferCommunity} onTransferCommunity={this.props.onTransferCommunity}
onMarkPostAsRead={this.props.onMarkPostAsRead}
/> />
<hr className="my-3" /> <hr className="my-3" />
</> </>

View file

@ -60,6 +60,7 @@ import {
LockPost, LockPost,
MarkCommentReplyAsRead, MarkCommentReplyAsRead,
MarkPersonMentionAsRead, MarkPersonMentionAsRead,
MarkPostAsRead,
PersonView, PersonView,
PostResponse, PostResponse,
PurgeComment, PurgeComment,
@ -208,6 +209,7 @@ export class Profile extends Component<
this.handlePurgePost = this.handlePurgePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleModBanSubmit = this.handleModBanSubmit.bind(this); this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this);
// Only fetch the data if coming from another route // Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) { if (FirstLoadService.isFirstLoad) {
@ -376,6 +378,7 @@ export class Profile extends Component<
onSavePost={this.handleSavePost} onSavePost={this.handleSavePost}
onPurgePost={this.handlePurgePost} onPurgePost={this.handlePurgePost}
onFeaturePost={this.handleFeaturePost} onFeaturePost={this.handleFeaturePost}
onMarkPostAsRead={this.handleMarkPostAsRead}
/> />
</div> </div>
@ -944,6 +947,11 @@ export class Profile extends Component<
await HttpService.client.markPersonMentionAsRead(form); await HttpService.client.markPersonMentionAsRead(form);
} }
async handleMarkPostAsRead(form: MarkPostAsRead) {
const res = await HttpService.client.markPostAsRead(form);
this.findAndUpdatePost(res);
}
async handleBanFromCommunity(form: BanFromCommunity) { async handleBanFromCommunity(form: BanFromCommunity) {
const banRes = await HttpService.client.banFromCommunity(form); const banRes = await HttpService.client.banFromCommunity(form);
this.updateBanFromCommunity(banRes); this.updateBanFromCommunity(banRes);

View file

@ -447,6 +447,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
onAddModToCommunity={() => {}} onAddModToCommunity={() => {}}
onAddAdmin={() => {}} onAddAdmin={() => {}}
onTransferCommunity={() => {}} onTransferCommunity={() => {}}
onMarkPostAsRead={() => {}}
/> />
</> </>
)} )}
@ -641,6 +642,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
onAddModToCommunity={() => {}} onAddModToCommunity={() => {}}
onAddAdmin={() => {}} onAddAdmin={() => {}}
onTransferCommunity={() => {}} onTransferCommunity={() => {}}
onMarkPostAsRead={() => {}}
/> />
</> </>
) )

View file

@ -1,4 +1,4 @@
import { myAuthRequired } from "@utils/app"; import { myAuth, myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser"; import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env"; import { getExternalHost, getHttpBase } from "@utils/env";
import { import {
@ -34,6 +34,7 @@ import {
FeaturePost, FeaturePost,
Language, Language,
LockPost, LockPost,
MarkPostAsRead,
PersonView, PersonView,
PostView, PostView,
PurgePerson, PurgePerson,
@ -130,6 +131,7 @@ interface PostListingProps {
onAddModToCommunity(form: AddModToCommunity): void; onAddModToCommunity(form: AddModToCommunity): void;
onAddAdmin(form: AddAdmin): void; onAddAdmin(form: AddAdmin): void;
onTransferCommunity(form: TransferCommunity): void; onTransferCommunity(form: TransferCommunity): void;
onMarkPostAsRead(form: MarkPostAsRead): void;
} }
export class PostListing extends Component<PostListingProps, PostListingState> { export class PostListing extends Component<PostListingProps, PostListingState> {
@ -1723,6 +1725,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
event.preventDefault(); event.preventDefault();
i.setState({ imageExpanded: !i.state.imageExpanded }); i.setState({ imageExpanded: !i.state.imageExpanded });
setupTippy(); 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) { handleViewSource(i: PostListing) {

View file

@ -14,6 +14,7 @@ import {
FeaturePost, FeaturePost,
Language, Language,
LockPost, LockPost,
MarkPostAsRead,
PostView, PostView,
PurgePerson, PurgePerson,
PurgePost, PurgePost,
@ -49,6 +50,7 @@ interface PostListingsProps {
onAddModToCommunity(form: AddModToCommunity): void; onAddModToCommunity(form: AddModToCommunity): void;
onAddAdmin(form: AddAdmin): void; onAddAdmin(form: AddAdmin): void;
onTransferCommunity(form: TransferCommunity): void; onTransferCommunity(form: TransferCommunity): void;
onMarkPostAsRead(form: MarkPostAsRead): void;
} }
export class PostListings extends Component<PostListingsProps, any> { export class PostListings extends Component<PostListingsProps, any> {
@ -95,6 +97,7 @@ export class PostListings extends Component<PostListingsProps, any> {
onAddModToCommunity={this.props.onAddModToCommunity} onAddModToCommunity={this.props.onAddModToCommunity}
onAddAdmin={this.props.onAddAdmin} onAddAdmin={this.props.onAddAdmin}
onTransferCommunity={this.props.onTransferCommunity} onTransferCommunity={this.props.onTransferCommunity}
onMarkPostAsRead={this.props.onMarkPostAsRead}
/> />
{idx + 1 !== this.posts.length && <hr className="my-3" />} {idx + 1 !== this.posts.length && <hr className="my-3" />}
</> </>

View file

@ -87,6 +87,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
onAddModToCommunity={() => {}} onAddModToCommunity={() => {}}
onAddAdmin={() => {}} onAddAdmin={() => {}}
onTransferCommunity={() => {}} onTransferCommunity={() => {}}
onMarkPostAsRead={() => {}}
/> />
<div> <div>
{I18NextService.i18n.t("reporter")}:{" "} {I18NextService.i18n.t("reporter")}:{" "}

View file

@ -63,6 +63,7 @@ import {
LockPost, LockPost,
MarkCommentReplyAsRead, MarkCommentReplyAsRead,
MarkPersonMentionAsRead, MarkPersonMentionAsRead,
MarkPostAsRead,
PostResponse, PostResponse,
PurgeComment, PurgeComment,
PurgeCommunity, PurgeCommunity,
@ -171,6 +172,7 @@ export class Post extends Component<any, PostState> {
this.handleSavePost = this.handleSavePost.bind(this); this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleMarkPostAsRead = this.handleMarkPostAsRead.bind(this);
this.state = { ...this.state, commentSectionRef: createRef() }; this.state = { ...this.state, commentSectionRef: createRef() };
@ -384,6 +386,7 @@ export class Post extends Component<any, PostState> {
onAddAdmin={this.handleAddAdmin} onAddAdmin={this.handleAddAdmin}
onTransferCommunity={this.handleTransferCommunity} onTransferCommunity={this.handleTransferCommunity}
onFeaturePost={this.handleFeaturePost} onFeaturePost={this.handleFeaturePost}
onMarkPostAsRead={this.handleMarkPostAsRead}
/> />
<div ref={this.state.commentSectionRef} className="mb-2" /> <div ref={this.state.commentSectionRef} className="mb-2" />
<CommentForm <CommentForm
@ -917,6 +920,11 @@ export class Post extends Component<any, PostState> {
await HttpService.client.markPersonMentionAsRead(form); await HttpService.client.markPersonMentionAsRead(form);
} }
async handleMarkPostAsRead(form: MarkPostAsRead) {
const res = await HttpService.client.markPostAsRead(form);
this.updatePost(res);
}
async handleBanFromCommunity(form: BanFromCommunity) { async handleBanFromCommunity(form: BanFromCommunity) {
const banRes = await HttpService.client.banFromCommunity(form); const banRes = await HttpService.client.banFromCommunity(form);
this.updateBan(banRes); this.updateBan(banRes);

View file

@ -706,6 +706,7 @@ export class Search extends Component<any, SearchState> {
onAddModToCommunity={() => {}} onAddModToCommunity={() => {}}
onAddAdmin={() => {}} onAddAdmin={() => {}}
onTransferCommunity={() => {}} onTransferCommunity={() => {}}
onMarkPostAsRead={() => {}}
/> />
)} )}
{i.type_ === "comments" && ( {i.type_ === "comments" && (
@ -856,6 +857,7 @@ export class Search extends Component<any, SearchState> {
onAddModToCommunity={() => {}} onAddModToCommunity={() => {}}
onAddAdmin={() => {}} onAddAdmin={() => {}}
onTransferCommunity={() => {}} onTransferCommunity={() => {}}
onMarkPostAsRead={() => {}}
/> />
</div> </div>
</div> </div>