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

@@ -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);

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") {

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" />
           </>

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);

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={() => {}}
               />
             </>
           )

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) {

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" />}
             </>

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")}:{" "}

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);

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>