mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-25 13:51:13 +00:00
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:
parent
2531d05191
commit
afafb777b4
10 changed files with 56 additions and 1 deletions
|
@ -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);
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
|
@ -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" />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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={() => {}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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" />}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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")}:{" "}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue