[feat] don't show downvotes if disabled on instance

mrurlwin · Nov 3, 2023 · 5ad55cb · 5ad55cb
1 parent eb96c50
commit 5ad55cb
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 29 deletions.
diff --git a/src/components/Comment/components/CommentMetrics.tsx b/src/components/Comment/components/CommentMetrics.tsx
@@ -1,5 +1,9 @@
 import React, { useMemo } from 'react';
-import { useCommentPublished, useShowTotalScore } from '@src/state';
+import {
+  useCommentPublished,
+  useDownvotesAllowed,
+  useShowTotalScore,
+} from '@src/state';
 import { Text, XStack } from 'tamagui';
 import ScoreIcon from '@components/Common/Icons/ScoreIcon';
 import { ArrowDown, ArrowUp, Clock } from '@tamagui/lucide-icons';
@@ -12,6 +16,8 @@ interface IProps {
 }
 
 function CommentMetrics({ itemId }: IProps): React.JSX.Element {
+  const downvotesAllowed = useDownvotesAllowed();
+
   const commentPublished = useCommentPublished(itemId);
   const voting = useCommentVoting(itemId, true);
   const showTotalScore = useShowTotalScore();
@@ -56,17 +62,19 @@ function CommentMetrics({ itemId }: IProps): React.JSX.Element {
             {voting.upvotes}
           </Text>
         </XStack>
-        <XStack
-          space="$1"
-          onPress={voting.downvote}
-          hitSlop={3}
-          alignItems="center"
-        >
-          <ArrowDown size={14} color={metricsColors.downvoteColor} />
-          <Text fontSize="$2" color={metricsColors.downvoteColor}>
-            {voting.downvotes}
-          </Text>
-        </XStack>
+        {downvotesAllowed && (
+          <XStack
+            space="$1"
+            onPress={voting.downvote}
+            hitSlop={3}
+            alignItems="center"
+          >
+            <ArrowDown size={14} color={metricsColors.downvoteColor} />
+            <Text fontSize="$2" color={metricsColors.downvoteColor}>
+              {voting.downvotes}
+            </Text>
+          </XStack>
+        )}
         <XStack space="$1.5" alignItems="center">
           <Clock size={14} color="$secondary" />
           <Text fontSize="$2" color="$secondary">

diff --git a/src/components/Common/PostCard/PostMetrics.tsx b/src/components/Common/PostCard/PostMetrics.tsx
@@ -6,6 +6,7 @@ import {
   MessageSquare,
 } from '@tamagui/lucide-icons';
 import {
+  useDownvotesAllowed,
   usePostCommentCount,
   usePostCounts,
   usePostMyVote,
@@ -23,6 +24,8 @@ interface IProps {
 function PostMetrics({ itemId }: IProps): React.JSX.Element {
   const showTotalScore = useSettingsStore((state) => state.totalScore);
 
+  const downvotesAllowed = useDownvotesAllowed();
+
   const postCounts = usePostCounts(itemId);
   const postCommentCount = usePostCommentCount(itemId);
   const postMyVote = usePostMyVote(itemId);
@@ -65,12 +68,14 @@ function PostMetrics({ itemId }: IProps): React.JSX.Element {
               {postCounts?.upvotes}
             </Text>
           </XStack>
-          <XStack space="$1" alignItems="center">
-            <ArrowDown size={14} color={downvoteColor} />
-            <Text color={downvoteColor} fontSize="$2">
-              {postCounts?.downvotes}
-            </Text>
-          </XStack>
+          {downvotesAllowed && (
+            <XStack space="$1" alignItems="center">
+              <ArrowDown size={14} color={downvoteColor} />
+              <Text color={downvoteColor} fontSize="$2">
+                {postCounts?.downvotes}
+              </Text>
+            </XStack>
+          )}
         </XStack>
       )}
 

diff --git a/src/components/Inbox/components/InboxReplyMetrics.tsx b/src/components/Inbox/components/InboxReplyMetrics.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import {
+  useDownvotesAllowed,
   useMentionPublished,
   useReplyPublished,
   useSettingsStore,
@@ -21,6 +22,8 @@ function InboxReplyMetrics({
   commentId,
   type,
 }: IProps): React.JSX.Element {
+  const downvotesAllowed = useDownvotesAllowed();
+
   const voting = useInboxReplyVoting(itemId, commentId, type);
 
   const published =
@@ -83,17 +86,19 @@ function InboxReplyMetrics({
             {voting.upvotes}
           </Text>
         </XStack>
-        <XStack
-          space="$1"
-          onPress={voting.downvote}
-          hitSlop={3}
-          alignItems="center"
-        >
-          <ArrowDown size={14} color={downvoteColor} />
-          <Text fontSize="$2" color={downvoteColor}>
-            {voting.downvotes}
-          </Text>
-        </XStack>
+        {downvotesAllowed && (
+          <XStack
+            space="$1"
+            onPress={voting.downvote}
+            hitSlop={3}
+            alignItems="center"
+          >
+            <ArrowDown size={14} color={downvoteColor} />
+            <Text fontSize="$2" color={downvoteColor}>
+              {voting.downvotes}
+            </Text>
+          </XStack>
+        )}
         <XStack space="$1.5" alignItems="center">
           <Clock size={14} color="$secondary" />
           <Text fontSize="$2" color="$secondary">

diff --git a/src/state/data/site/selectors.ts b/src/state/data/site/selectors.ts
@@ -39,3 +39,8 @@ export const useBlockedPersons = (): PersonBlockView[] | undefined =>
 
 export const useBlockedCommunities = (): CommunityBlockView[] | undefined =>
   useDataStore((state) => state.site.site?.my_user?.community_blocks);
+
+export const useDownvotesAllowed = (): boolean =>
+  useDataStore(
+    (state) => state.site.site?.site_view.local_site.enable_downvotes ?? false,
+  );