Feature/mark post as read button

package.json

@@ -1,8 +1,7 @@
 {
   "name": "lemmy-ui",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "description": "An isomorphic UI for lemmy",
-  "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
   "author": "Dessalines <[email protected]>",
   "scripts": {

src/shared/components/community/create-community.tsx

@@ -1,7 +1,9 @@
 import { Component } from "inferno";
+import { Redirect } from "inferno-router";
 import { CommunityView, GetSiteResponse } from "lemmy-js-client";
 import { Subscription } from "rxjs";
 import { i18n } from "../../i18next";
+import { UserService } from "../../services/UserService";
 import {
   enableNsfw,
   isBrowser,
@@ -48,6 +50,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
   render() {
     return (
       <div className="container-lg">
+        {!UserService.Instance.myUserInfo && <Redirect to="/login" />}
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/modlog.tsx

@@ -770,7 +770,6 @@ export class Modlog extends Component<
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-
         <div>
           <div
             className="alert alert-warning text-sm-start text-xs-center"

src/shared/components/post/create-post.tsx

@@ -1,4 +1,5 @@
 import { Component } from "inferno";
+import { Redirect } from "inferno-router";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   GetCommunity,
@@ -12,7 +13,7 @@ import {
 import { Subscription } from "rxjs";
 import { InitialFetchRequest, PostFormParams } from "shared/interfaces";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
+import { UserService, WebSocketService } from "../../services";
 import {
   Choice,
   QueryParams,
@@ -143,6 +144,7 @@ export class CreatePost extends Component<
 
     return (
       <div className="container-lg">
+        {!UserService.Instance.myUserInfo && <Redirect to="/login" />}
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/post/post-listing.tsx

@@ -14,6 +14,7 @@ import {
   FeaturePost,
   Language,
   LockPost,
+  MarkPostAsRead,
   PersonView,
   PostView,
   PurgePerson,
@@ -610,6 +611,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <>
         {this.saveButton}
+        {this.markReadButton}
         {this.crossPostButton}
         {mobile && this.showMoreButton}
         {(!mobile || this.state.showAdvanced) && (
@@ -750,6 +752,25 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
+  get markReadButton() {
+    const read = this.props.post_view.read;
+    const label = read ? i18n.t("mark read") : i18n.t("mark unread");
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleMarkReadPostClick)}
+        data-tippy-content={label}
+        aria-label={label}
+      >
+        <Icon
+          icon="file-text"
+          classes={classNames({ "text-warning": read })}
+          inline
+        />
+      </button>
+    );
+  }
+
   get crossPostButton() {
     return (
       <Link
@@ -1497,6 +1518,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     }
   }
 
+  handleMarkReadPostClick(i: PostListing) {
+    const auth = myAuth();
+    if (auth) {
+      const read =
+        i.props.post_view.read == undefined ? true : !i.props.post_view.read;
+      const form: MarkPostAsRead = {
+        post_id: i.props.post_view.post.id,
+        read,
+        auth,
+      };
+      WebSocketService.Instance.send(wsClient.markPostAsRead(form));
+    }
+  }
+
   get crossPostParams(): PostFormParams {
     const queryParams: PostFormParams = {};
     const { name, url } = this.props.post_view.post;

src/shared/components/post/post.tsx

@@ -689,13 +689,20 @@ export class Post extends Component<any, PostState> {
       op == UserOperation.RemovePost ||
       op == UserOperation.LockPost ||
       op == UserOperation.FeaturePost ||
-      op == UserOperation.SavePost
+      op == UserOperation.SavePost ||
+      op == UserOperation.MarkPostAsRead
     ) {
       const data = wsJsonToRes<PostResponse>(msg);
       const res = this.state.postRes;
       if (res) {
         res.post_view = data.post_view;
-        this.setState(this.state);
+        this.setState(prevState => {
+          if (prevState.postRes) {
+            prevState.postRes.post_view = data.post_view;
+          }
+
+          return prevState;
+        });
         setupTippy();
       }
     } else if (

src/shared/utils.ts

@@ -1036,6 +1036,7 @@ export function editPostRes(data: PostView, post: PostView) {
     post.post.body = data.post.body;
     post.post.locked = data.post.locked;
     post.saved = data.saved;
+    post.read = data.read;
   }
 }