Mark post as read when clicking "Expand here" on the preview image on the post listin...

* 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>

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 3f7cdb525360d662ba006c8e78a05003f9d5c639..b0787ecd9aa40278ba695a0b9c1ba12a129a5fd7 100644 (file)
--- 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 bdda543cf75d857e8233d32dbc399bc07962464d..64c61a369f97739f38a50c2f2e962e9ff7f53ab0 100644 (file)
--- 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 6af64f5b398275ac39cea709eae97d5eeab6bd1b..259cde17217762df715391f7ddca1dd992323716 100644 (file)
--- 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 a3a7f88bb918fc093d9bfc59be19d88add157214..08ec7ad079780af4885c0126ed1dd3bd3e2f8c6f 100644 (file)
--- 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 643135796f452c615654304422428ac184ab145b..6c8862862fe9dc4e28134e389caf91baf983f42a 100644 (file)
--- 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 c9a99858aff9d701d8c5c32fe478d0a345214868..afd5daa5cdfb55a84ee815a066d3965da628b96d 100644 (file)
--- 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 3f6c30463777015918b7840673912a563d9b4288..fc77f505a11ff76119bd52658dc4a116bb04603b 100644 (file)
--- 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 a860ae0e4fbafb6ce8b24a150ce13a95ee444fe2..fd6d99ba8e634124d84344cf298d5faa960168a7 100644 (file)
--- 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 5819d253c5d624db8320bc2ce22e4457558be61e..040122818050325723f3749616aca8ccf95fca40 100644 (file)
--- 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 3248db1093000156d4cd50256a10bc56f1e0607f..0fd90825281e3f81f7467cf0246c2cd6300371bc 100644 (file)
--- 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>