Showing / hiding scores based on setting. Fixes #241

lemmy-translations

@@ -1 +1 @@
-Subproject commit f05562455f5260d266d72b6130abb6f633e88a02
+Subproject commit f36cf2332878286378303d0ce9629728b3889ac9

package.json

@@ -68,7 +68,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^6.0.0",
     "iso-639-1": "^2.1.9",
-    "lemmy-js-client": "0.11.0-rc.4",
+    "lemmy-js-client": "0.11.0-rc.6",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",

src/shared/components/comment-node.tsx

@@ -29,6 +29,7 @@ import {
   colorList,
   wsClient,
   authField,
+  showScores,
 } from "../utils";
 import moment from "moment";
 import { MomentTime } from "./moment-time";
@@ -200,21 +201,25 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </button>
               {/* This is an expanding spacer for mobile */}
               <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
-              <a
+              {showScores() && (
-                className={`unselectable pointer ${this.scoreColor}`}
+                <>
-                onClick={linkEvent(node, this.handleCommentUpvote)}
+                  <a
-                data-tippy-content={this.pointsTippy}
+                    className={`unselectable pointer ${this.scoreColor}`}
-              >
+                    onClick={linkEvent(node, this.handleCommentUpvote)}
-                <span
+                    data-tippy-content={this.pointsTippy}
-                  class="mr-1 font-weight-bold"
+                  >
-                  aria-label={i18n.t("number_of_points", {
+                    <span
-                    count: this.state.score,
+                      class="mr-1 font-weight-bold"
-                  })}
+                      aria-label={i18n.t("number_of_points", {
-                >
+                        count: this.state.score,
-                  {this.state.score}
+                      })}
-                </span>
+                    >
-              </a>
+                      {this.state.score}
-              <span className="mr-1">•</span>
+                    </span>
+                  </a>
+                  <span className="mr-1">•</span>
+                </>
+              )}
               <span>
                 <MomentTime data={cv.comment} />
               </span>
@@ -281,9 +286,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         aria-label={i18n.t("upvote")}
                       >
                         <Icon icon="arrow-up1" classes="icon-inline" />
-                        {this.state.upvotes !== this.state.score && (
+                        {showScores() &&
-                          <span class="ml-1">{this.state.upvotes}</span>
+                          this.state.upvotes !== this.state.score && (
-                        )}
+                            <span class="ml-1">{this.state.upvotes}</span>
+                          )}
                       </button>
                       {this.props.enableDownvotes && (
                         <button
@@ -297,9 +303,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           aria-label={i18n.t("downvote")}
                         >
                           <Icon icon="arrow-down1" classes="icon-inline" />
-                          {this.state.upvotes !== this.state.score && (
+                          {showScores() &&
-                            <span class="ml-1">{this.state.downvotes}</span>
+                            this.state.upvotes !== this.state.score && (
-                          )}
+                              <span class="ml-1">{this.state.downvotes}</span>
+                            )}
                         </button>
                       )}
                       <button

src/shared/components/person.tsx

@@ -108,15 +108,6 @@ export class Person extends Component<any, PersonState> {
     sort: Person.getSortTypeFromProps(this.props.match.sort),
     page: Person.getPageFromProps(this.props.match.page),
     saveUserSettingsForm: {
-      show_nsfw: null,
-      theme: null,
-      default_sort_type: null,
-      default_listing_type: null,
-      lang: null,
-      show_avatars: null,
-      send_notifications_to_email: null,
-      bio: null,
-      display_name: null,
       auth: authField(false),
     },
     changePasswordForm: {
@@ -773,6 +764,23 @@ export class Person extends Component<any, PersonState> {
               </div>
             </div>
           )}
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                class="form-check-input"
+                id="user-show-scores"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.show_scores}
+                onChange={linkEvent(
+                  this,
+                  this.handleUserSettingsShowScoresChange
+                )}
+              />
+              <label class="form-check-label" htmlFor="user-show-scores">
+                {i18n.t("show_scores")}
+              </label>
+            </div>
+          </div>
           <div class="form-group">
             <div class="form-check">
               <input
@@ -963,6 +971,13 @@ export class Person extends Component<any, PersonState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsShowScoresChange(i: Person, event: any) {
+    i.state.saveUserSettingsForm.show_scores = event.target.checked;
+    UserService.Instance.localUserView.local_user.show_scores =
+      event.target.checked; // Just for instant updates
+    i.setState(i.state);
+  }
+
   handleUserSettingsSendNotificationsToEmailChange(i: Person, event: any) {
     i.state.saveUserSettingsForm.send_notifications_to_email =
       event.target.checked;
@@ -1134,6 +1149,8 @@ export class Person extends Component<any, PersonState> {
         UserService.Instance.localUserView.person.display_name;
       this.state.saveUserSettingsForm.show_avatars =
         UserService.Instance.localUserView.local_user.show_avatars;
+      this.state.saveUserSettingsForm.show_scores =
+        UserService.Instance.localUserView.local_user.show_scores;
       this.state.saveUserSettingsForm.email =
         UserService.Instance.localUserView.local_user.email;
       this.state.saveUserSettingsForm.bio =

src/shared/components/post-listing.tsx

@@ -39,6 +39,7 @@ import {
   previewLines,
   wsClient,
   authField,
+  showScores,
 } from "../utils";
 import { i18n } from "../i18next";
 import { externalHost } from "../env";
@@ -346,12 +347,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         >
           <Icon icon="arrow-up1" classes="upvote" />
         </button>
-        <div
+        {showScores() ? (
-          class={`unselectable pointer font-weight-bold text-muted px-1`}
+          <div
-          data-tippy-content={this.pointsTippy}
+            class={`unselectable pointer font-weight-bold text-muted px-1`}
-        >
+            data-tippy-content={this.pointsTippy}
-          {this.state.score}
+          >
-        </div>
+            {this.state.score}
+          </div>
+        ) : (
+          <div class="p-1"></div>
+        )}
         {this.props.enableDownvotes && (
           <button
             className={`btn-animate btn btn-link p-0 ${
@@ -477,7 +482,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {!mobile && (
           <>
-            {this.state.downvotes !== 0 && (
+            {this.state.downvotes !== 0 && showScores() && (
               <button
                 class="btn text-muted py-0 pr-0"
                 data-tippy-content={this.pointsTippy}
@@ -513,32 +518,55 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {mobile && (
           <>
             <div>
-              <button
+              {showScores() ? (
-                className={`btn-animate btn py-0 px-1 ${
-                  this.state.my_vote == 1 ? "text-info" : "text-muted"
-                }`}
-                data-tippy-content={this.pointsTippy}
-                onClick={linkEvent(this, this.handlePostLike)}
-                aria-label={i18n.t("upvote")}
-              >
-                <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
-                {this.state.upvotes}
-              </button>
-              {this.props.enableDownvotes && (
                 <button
-                  className={`ml-2 btn-animate btn py-0 pl-1 ${
+                  className={`btn-animate btn py-0 px-1 ${
-                    this.state.my_vote == -1 ? "text-danger" : "text-muted"
+                    this.state.my_vote == 1 ? "text-info" : "text-muted"
                   }`}
-                  onClick={linkEvent(this, this.handlePostDisLike)}
                   data-tippy-content={this.pointsTippy}
-                  aria-label={i18n.t("downvote")}
+                  onClick={linkEvent(this, this.handlePostLike)}
+                  aria-label={i18n.t("upvote")}
                 >
-                  <Icon icon="arrow-down1" classes="icon-inline small mr-2" />
+                  <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
-                  {this.state.downvotes !== 0 && (
+                  {this.state.upvotes}
-                    <span>{this.state.downvotes}</span>
+                </button>
-                  )}
+              ) : (
+                <button
+                  className={`btn-animate btn py-0 px-1 ${
+                    this.state.my_vote == 1 ? "text-info" : "text-muted"
+                  }`}
+                  onClick={linkEvent(this, this.handlePostLike)}
+                  aria-label={i18n.t("upvote")}
+                >
+                  <Icon icon="arrow-up1" classes="icon-inline small" />
                 </button>
               )}
+              {this.props.enableDownvotes &&
+                (showScores() ? (
+                  <button
+                    className={`ml-2 btn-animate btn py-0 pl-1 ${
+                      this.state.my_vote == -1 ? "text-danger" : "text-muted"
+                    }`}
+                    onClick={linkEvent(this, this.handlePostDisLike)}
+                    data-tippy-content={this.pointsTippy}
+                    aria-label={i18n.t("downvote")}
+                  >
+                    <Icon icon="arrow-down1" classes="icon-inline small mr-2" />
+                    {this.state.downvotes !== 0 && (
+                      <span>{this.state.downvotes}</span>
+                    )}
+                  </button>
+                ) : (
+                  <button
+                    className={`ml-2 btn-animate btn py-0 pl-1 ${
+                      this.state.my_vote == -1 ? "text-danger" : "text-muted"
+                    }`}
+                    onClick={linkEvent(this, this.handlePostDisLike)}
+                    aria-label={i18n.t("downvote")}
+                  >
+                    <Icon icon="arrow-down1" classes="icon-inline small" />
+                  </button>
+                ))}
             </div>
             <button
               class="btn btn-link btn-animate text-muted py-0 pl-1 pr-0"

src/shared/utils.ts

@@ -520,6 +520,13 @@ export function showAvatars(): boolean {
   );
 }
 
+export function showScores(): boolean {
+  return (
+    UserService.Instance.localUserView?.local_user.show_scores ||
+    !UserService.Instance.localUserView
+  );
+}
+
 export function isCakeDay(published: string): boolean {
   // moment(undefined) or moment.utc(undefined) returns the current date/time
   // moment(null) or moment.utc(null) returns null

yarn.lock

@@ -5125,10 +5125,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.11.0-rc.4:
+lemmy-js-client@0.11.0-rc.6:
-  version "0.11.0-rc.4"
+  version "0.11.0-rc.6"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.4.tgz#bd5652538309efac686aa10329b3a04fac6f85c2"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
-  integrity sha512-7pCEEWkmaOoxxJ9+QSTVQFwThdjIWFp/mSs4c82TYs6tKAJsmfqzBkvSK9QVpSA2OOeYVWoThklKcrlmNV2d6A==
+  integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
 
 levn@^0.4.1:
   version "0.4.1"