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

[lemmy-ui.git] / src / shared / components / community / community.tsx

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 191f8ae3b18bc1f4f78d7088ac9bea62efff7010..b0787ecd9aa40278ba695a0b9c1ba12a129a5fd7 100644 (file)
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -22,7 +22,7 @@ import {
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
-import { Component, linkEvent } from "inferno";
+import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   AddAdmin,
@@ -62,6 +62,7 @@ import {
   LockPost,
   MarkCommentReplyAsRead,
   MarkPersonMentionAsRead,
+  MarkPostAsRead,
   PostResponse,
   PurgeComment,
   PurgeCommunity,
@@ -154,7 +155,7 @@ export class Community extends Component<
     finished: new Map(),
     isIsomorphic: false,
   };
-
+  private readonly mainContentRef: RefObject<HTMLElement>;
   constructor(props: RouteComponentProps<{ name: string }>, context: any) {
     super(props, context);
 
@@ -195,7 +196,8 @@ 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) {
       const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
@@ -290,7 +292,7 @@ export class Community extends Component<
 
   get documentTitle(): string {
     const cRes = this.state.communityRes;
-    return cRes.state == "success"
+    return cRes.state === "success"
       ? `${cRes.data.community_view.community.title} - ${this.isoData.site_res.site_view.site.name}`
       : "";
   }
@@ -312,12 +314,16 @@ export class Community extends Component<
             <HtmlTags
               title={this.documentTitle}
               path={this.context.router.route.match.url}
+              canonicalPath={res.community_view.community.actor_id}
               description={res.community_view.community.description}
               image={res.community_view.community.icon}
             />
 
             <div className="row">
-              <div className="col-12 col-md-8 col-lg-9">
+              <main
+                className="col-12 col-md-8 col-lg-9"
+                ref={this.mainContentRef}
+              >
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
@@ -339,10 +345,10 @@ export class Community extends Component<
                 {this.selects(res)}
                 {this.listings(res)}
                 <Paginator page={page} onChange={this.handlePageChange} />
-              </div>
-              <div className="d-none d-md-block col-md-4 col-lg-3">
+              </main>
+              <aside className="d-none d-md-block col-md-4 col-lg-3">
                 {this.sidebar(res)}
-              </div>
+              </aside>
             </div>
           </>
         );
@@ -427,6 +433,7 @@ export class Community extends Component<
               onAddAdmin={this.handleAddAdmin}
               onTransferCommunity={this.handleTransferCommunity}
               onFeaturePost={this.handleFeaturePost}
+              onMarkPostAsRead={this.handleMarkPostAsRead}
             />
           );
       }
@@ -444,7 +451,7 @@ export class Community extends Component<
               nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
+              isTopLevel
               showContext
               enableDownvotes={enableDownvotes(site_res)}
               moderators={communityRes.moderators}
@@ -482,7 +489,7 @@ export class Community extends Component<
       community && (
         <div className="mb-2">
           <BannerIconHeader banner={community.banner} icon={community.icon} />
-          <h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
+          <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
           <CommunityLink
             community={community}
             realLink
@@ -566,7 +573,7 @@ export class Community extends Component<
     };
 
     this.props.history.push(
-      `/c/${this.props.match.params.name}${getQueryString(queryParams)}`
+      `/c/${this.props.match.params.name}${getQueryString(queryParams)}`,
     );
 
     await this.fetchData();
@@ -622,11 +629,11 @@ export class Community extends Component<
     this.updateCommunity(followCommunityRes);
 
     // Update myUserInfo
-    if (followCommunityRes.state == "success") {
+    if (followCommunityRes.state === "success") {
       const communityId = followCommunityRes.data.community_view.community.id;
       const mui = UserService.Instance.myUserInfo;
       if (mui) {
-        mui.follows = mui.follows.filter(i => i.community.id != communityId);
+        mui.follows = mui.follows.filter(i => i.community.id !== communityId);
       }
     }
   }
@@ -653,10 +660,10 @@ export class Community extends Component<
 
   async handleBlockCommunity(form: BlockCommunity) {
     const blockCommunityRes = await HttpService.client.blockCommunity(form);
-    if (blockCommunityRes.state == "success") {
+    if (blockCommunityRes.state === "success") {
       updateCommunityBlock(blockCommunityRes.data);
       this.setState(s => {
-        if (s.communityRes.state == "success") {
+        if (s.communityRes.state === "success") {
           s.communityRes.data.community_view.blocked =
             blockCommunityRes.data.blocked;
         }
@@ -666,7 +673,7 @@ export class Community extends Component<
 
   async handleBlockPerson(form: BlockPerson) {
     const blockPersonRes = await HttpService.client.blockPerson(form);
-    if (blockPersonRes.state == "success") {
+    if (blockPersonRes.state === "success") {
       updatePersonBlock(blockPersonRes.data);
     }
   }
@@ -749,14 +756,14 @@ export class Community extends Component<
 
   async handleCommentReport(form: CreateCommentReport) {
     const reportRes = await HttpService.client.createCommentReport(form);
-    if (reportRes.state == "success") {
+    if (reportRes.state === "success") {
       toast(I18NextService.i18n.t("report_created"));
     }
   }
 
   async handlePostReport(form: CreatePostReport) {
     const reportRes = await HttpService.client.createPostReport(form);
-    if (reportRes.state == "success") {
+    if (reportRes.state === "success") {
       toast(I18NextService.i18n.t("report_created"));
     }
   }
@@ -774,14 +781,14 @@ export class Community extends Component<
   async handleAddAdmin(form: AddAdmin) {
     const addAdminRes = await HttpService.client.addAdmin(form);
 
-    if (addAdminRes.state == "success") {
+    if (addAdminRes.state === "success") {
       this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
     }
   }
 
   async handleTransferCommunity(form: TransferCommunity) {
     const transferCommunityRes = await HttpService.client.transferCommunity(
-      form
+      form,
     );
     toast(I18NextService.i18n.t("transfer_community"));
     this.updateCommunityFull(transferCommunityRes);
@@ -797,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);
@@ -809,20 +821,20 @@ export class Community extends Component<
 
   updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
     // Maybe not necessary
-    if (banRes.state == "success") {
+    if (banRes.state === "success") {
       this.setState(s => {
-        if (s.postsRes.state == "success") {
+        if (s.postsRes.state === "success") {
           s.postsRes.data.posts
-            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .filter(c => c.creator.id === banRes.data.person_view.person.id)
             .forEach(
-              c => (c.creator_banned_from_community = banRes.data.banned)
+              c => (c.creator_banned_from_community = banRes.data.banned),
             );
         }
-        if (s.commentsRes.state == "success") {
+        if (s.commentsRes.state === "success") {
           s.commentsRes.data.comments
-            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .filter(c => c.creator.id === banRes.data.person_view.person.id)
             .forEach(
-              c => (c.creator_banned_from_community = banRes.data.banned)
+              c => (c.creator_banned_from_community = banRes.data.banned),
             );
         }
         return s;
@@ -832,16 +844,16 @@ export class Community extends Component<
 
   updateBan(banRes: RequestState<BanPersonResponse>) {
     // Maybe not necessary
-    if (banRes.state == "success") {
+    if (banRes.state === "success") {
       this.setState(s => {
-        if (s.postsRes.state == "success") {
+        if (s.postsRes.state === "success") {
           s.postsRes.data.posts
-            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .filter(c => c.creator.id === banRes.data.person_view.person.id)
             .forEach(c => (c.creator.banned = banRes.data.banned));
         }
-        if (s.commentsRes.state == "success") {
+        if (s.commentsRes.state === "success") {
           s.commentsRes.data.comments
-            .filter(c => c.creator.id == banRes.data.person_view.person.id)
+            .filter(c => c.creator.id === banRes.data.person_view.person.id)
             .forEach(c => (c.creator.banned = banRes.data.banned));
         }
         return s;
@@ -851,7 +863,7 @@ export class Community extends Component<
 
   updateCommunity(res: RequestState<CommunityResponse>) {
     this.setState(s => {
-      if (s.communityRes.state == "success" && res.state == "success") {
+      if (s.communityRes.state === "success" && res.state === "success") {
         s.communityRes.data.community_view = res.data.community_view;
         s.communityRes.data.discussion_languages =
           res.data.discussion_languages;
@@ -862,7 +874,7 @@ export class Community extends Component<
 
   updateCommunityFull(res: RequestState<GetCommunityResponse>) {
     this.setState(s => {
-      if (s.communityRes.state == "success" && res.state == "success") {
+      if (s.communityRes.state === "success" && res.state === "success") {
         s.communityRes.data.community_view = res.data.community_view;
         s.communityRes.data.moderators = res.data.moderators;
       }
@@ -871,7 +883,7 @@ export class Community extends Component<
   }
 
   purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
-    if (purgeRes.state == "success") {
+    if (purgeRes.state === "success") {
       toast(I18NextService.i18n.t("purge_success"));
       this.context.router.history.push(`/`);
     }
@@ -879,10 +891,10 @@ export class Community extends Component<
 
   findAndUpdateComment(res: RequestState<CommentResponse>) {
     this.setState(s => {
-      if (s.commentsRes.state == "success" && res.state == "success") {
+      if (s.commentsRes.state === "success" && res.state === "success") {
         s.commentsRes.data.comments = editComment(
           res.data.comment_view,
-          s.commentsRes.data.comments
+          s.commentsRes.data.comments,
         );
         s.finished.set(res.data.comment_view.comment.id, true);
       }
@@ -892,13 +904,13 @@ export class Community extends Component<
 
   createAndUpdateComments(res: RequestState<CommentResponse>) {
     this.setState(s => {
-      if (s.commentsRes.state == "success" && res.state == "success") {
+      if (s.commentsRes.state === "success" && res.state === "success") {
         s.commentsRes.data.comments.unshift(res.data.comment_view);
 
         // Set finished for the parent
         s.finished.set(
           getCommentParentId(res.data.comment_view.comment) ?? 0,
-          true
+          true,
         );
       }
       return s;
@@ -907,10 +919,10 @@ export class Community extends Component<
 
   findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
     this.setState(s => {
-      if (s.commentsRes.state == "success" && res.state == "success") {
+      if (s.commentsRes.state === "success" && res.state === "success") {
         s.commentsRes.data.comments = editWith(
           res.data.comment_reply_view,
-          s.commentsRes.data.comments
+          s.commentsRes.data.comments,
         );
       }
       return s;
@@ -919,10 +931,10 @@ export class Community extends Component<
 
   findAndUpdatePost(res: RequestState<PostResponse>) {
     this.setState(s => {
-      if (s.postsRes.state == "success" && res.state == "success") {
+      if (s.postsRes.state === "success" && res.state === "success") {
         s.postsRes.data.posts = editPost(
           res.data.post_view,
-          s.postsRes.data.posts
+          s.postsRes.data.posts,
         );
       }
       return s;
@@ -932,7 +944,7 @@ export class Community extends Component<
   updateModerators(res: RequestState<AddModToCommunityResponse>) {
     // Update the moderators
     this.setState(s => {
-      if (s.communityRes.state == "success" && res.state == "success") {
+      if (s.communityRes.state === "success" && res.state === "success") {
         s.communityRes.data.moderators = res.data.moderators;
       }
       return s;