Showing / hiding scores based on setting. Fixes #241

2024-11-21 22:27:11 +00:00 · 2021-04-09 12:23:30 -04:00 · 2021-04-09 12:23:30 -04:00 · 6f1fb6b3bf
parent 0d5228d050
commit 6f1fb6b3bf
7 changed files with 122 additions and 63 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit f05562455f5260d266d72b6130abb6f633e88a02
+Subproject commit f36cf2332878286378303d0ce9629728b3889ac9
--- a/package.json
+++ b/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",
--- a/src/shared/components/comment-node.tsx
+++ b/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,6 +201,8 @@ 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>
+              {showScores() && (
+                <>
                  <a
                    className={`unselectable pointer ${this.scoreColor}`}
                    onClick={linkEvent(node, this.handleCommentUpvote)}
@ -215,6 +218,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                    </span>
                  </a>
                  <span className="mr-1">•</span>
+                </>
+              )}
              <span>
                <MomentTime data={cv.comment} />
              </span>
@ -281,7 +286,8 @@ 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() &&
+                          this.state.upvotes !== this.state.score && (
                            <span class="ml-1">{this.state.upvotes}</span>
                          )}
                      </button>
@ -297,7 +303,8 @@ 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() &&
+                            this.state.upvotes !== this.state.score && (
                              <span class="ml-1">{this.state.downvotes}</span>
                            )}
                        </button>
--- a/src/shared/components/person.tsx
+++ b/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 =
--- a/src/shared/components/post-listing.tsx
+++ b/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>
+        {showScores() ? (
          <div
            class={`unselectable pointer font-weight-bold text-muted px-1`}
            data-tippy-content={this.pointsTippy}
          >
            {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,6 +518,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        {mobile && (
          <>
            <div>
+              {showScores() ? (
                <button
                  className={`btn-animate btn py-0 px-1 ${
                    this.state.my_vote == 1 ? "text-info" : "text-muted"
@ -524,7 +530,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                  <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
                  {this.state.upvotes}
                </button>
-              {this.props.enableDownvotes && (
+              ) : (
+                <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"
@ -538,7 +556,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                      <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"
--- a/src/shared/utils.ts
+++ b/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
--- a/yarn.lock
+++ b/yarn.lock
@ -5125,10 +5125,10 @@ lcid@^1.0.0:
  dependencies:
    invert-kv "^1.0.0"

-lemmy-js-client@0.11.0-rc.4:
-  version "0.11.0-rc.4"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.4.tgz#bd5652538309efac686aa10329b3a04fac6f85c2"
-  integrity sha512-7pCEEWkmaOoxxJ9+QSTVQFwThdjIWFp/mSs4c82TYs6tKAJsmfqzBkvSK9QVpSA2OOeYVWoThklKcrlmNV2d6A==
+lemmy-js-client@0.11.0-rc.6:
+  version "0.11.0-rc.6"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
+  integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==

 levn@^0.4.1:
  version "0.4.1"