Move showReactionControl outside component to control padding rendering

CitizenLabDotCo · Nov 20, 2023 · 512b286 · 512b286
1 parent d5ba2b1
commit 512b286
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 72 deletions.
diff --git a/front/app/components/ReactionControl/index.tsx b/front/app/components/ReactionControl/index.tsx
@@ -145,10 +145,6 @@ const ReactionControl = ({
   const ideaAttributes = idea.data.attributes;
   const reactingActionDescriptor =
     ideaAttributes.action_descriptor.reacting_idea;
-  const reactingFutureEnabled = !!(
-    reactingActionDescriptor.up.future_enabled ||
-    reactingActionDescriptor.down.future_enabled
-  );
   const cancellingEnabled = reactingActionDescriptor.cancelling_enabled;
 
   // participationContext
@@ -169,26 +165,11 @@ const ReactionControl = ({
   const participationContextId = isContinuousProject
     ? project?.data.id || null
     : latestRelevantIdeaPhase?.id || null;
-  const participationContext = isContinuousProject
-    ? project.data || null
-    : latestRelevantIdeaPhase;
-  const isVotingContext =
-    participationContext?.attributes.participation_method === 'voting';
 
   // Reactions count
   const likesCount = ideaAttributes.likes_count;
   const dislikesCount = ideaAttributes.dislikes_count;
 
-  const showReactionControl = !!(
-    !isVotingContext &&
-    (reactingActionDescriptor.enabled ||
-      isFixableByAuthentication(reactingActionDescriptor.disabled_reason) ||
-      cancellingEnabled ||
-      reactingFutureEnabled ||
-      likesCount > 0 ||
-      dislikesCount > 0)
-  );
-
   const onClickLike = (event: MouseEvent | KeyboardEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -250,64 +231,60 @@ const ReactionControl = ({
     return;
   };
 
-  if (idea && showReactionControl) {
-    // Only when disliking is explicitly disabled,
-    // we don't show the dislike button
-    const showDislike =
-      reactingActionDescriptor.down.enabled === true ||
-      (reactingActionDescriptor.down.enabled === false &&
-        reactingActionDescriptor.down.disabled_reason !==
-          'reacting_dislike_disabled');
-
-    return (
-      <>
-        <ScreenReaderContent
-          likesCount={likesCount}
-          dislikesCount={dislikesCount}
+  // Only when disliking is explicitly disabled,
+  // we don't show the dislike button
+  const showDislike =
+    reactingActionDescriptor.down.enabled === true ||
+    (reactingActionDescriptor.down.enabled === false &&
+      reactingActionDescriptor.down.disabled_reason !==
+        'reacting_dislike_disabled');
+
+  return (
+    <>
+      <ScreenReaderContent
+        likesCount={likesCount}
+        dislikesCount={dislikesCount}
+      />
+      <Container
+        className={[
+          className,
+          'e2e-reaction-controls',
+          myReactionMode === null ? 'neutral' : myReactionMode,
+        ]
+          .filter((item) => item)
+          .join(' ')}
+        aria-hidden={ariaHidden}
+      >
+        <ReactionButton
+          buttonReactionMode="up"
+          userReactionMode={myReactionMode}
+          onClick={onClickLike}
+          className={reactingAnimation === 'up' ? 'reactionClick' : ''}
+          ariaHidden={ariaHidden}
+          styleType={styleType}
+          size={size}
+          iconName="vote-up"
+          reactionsCount={likesCount}
+          ideaId={idea.data.id}
         />
-        <Container
-          className={[
-            className,
-            'e2e-reaction-controls',
-            myReactionMode === null ? 'neutral' : myReactionMode,
-          ]
-            .filter((item) => item)
-            .join(' ')}
-          aria-hidden={ariaHidden}
-        >
+
+        {showDislike && (
           <ReactionButton
-            buttonReactionMode="up"
+            buttonReactionMode="down"
             userReactionMode={myReactionMode}
-            onClick={onClickLike}
-            className={reactingAnimation === 'up' ? 'reactionClick' : ''}
+            onClick={onClickDislike}
+            className={reactingAnimation === 'down' ? 'reactionClick' : ''}
             ariaHidden={ariaHidden}
             styleType={styleType}
             size={size}
-            iconName="vote-up"
-            reactionsCount={likesCount}
+            iconName="vote-down"
+            reactionsCount={dislikesCount}
             ideaId={idea.data.id}
           />
-
-          {showDislike && (
-            <ReactionButton
-              buttonReactionMode="down"
-              userReactionMode={myReactionMode}
-              onClick={onClickDislike}
-              className={reactingAnimation === 'down' ? 'reactionClick' : ''}
-              ariaHidden={ariaHidden}
-              styleType={styleType}
-              size={size}
-              iconName="vote-down"
-              reactionsCount={dislikesCount}
-              ideaId={idea.data.id}
-            />
-          )}
-        </Container>
-      </>
-    );
-  }
-
-  return null;
+        )}
+      </Container>
+    </>
+  );
 };
 
 export default ReactionControl;
diff --git a/front/app/containers/IdeasShow/components/RightColumnDesktop/index.tsx b/front/app/containers/IdeasShow/components/RightColumnDesktop/index.tsx
@@ -24,6 +24,7 @@ import {
   getCurrentParticipationContext,
   isIdeaInParticipationContext,
 } from 'api/phases/utils';
+import { isFixableByAuthentication } from 'utils/actionDescriptors';
 
 interface Props {
   ideaId: string;
@@ -62,6 +63,25 @@ const RightColumnDesktop = ({
   const commentingEnabled =
     !!idea?.data.attributes.action_descriptor.commenting_idea.enabled;
 
+  // showReactionControl
+  const reactingActionDescriptor =
+    idea.data.attributes.action_descriptor.reacting_idea;
+  const reactingFutureEnabled = !!(
+    reactingActionDescriptor.up.future_enabled ||
+    reactingActionDescriptor.down.future_enabled
+  );
+  const cancellingEnabled = reactingActionDescriptor.cancelling_enabled;
+  const likesCount = idea.data.attributes.likes_count;
+  const dislikesCount = idea.data.attributes.dislikes_count;
+  const showReactionControl =
+    participationContext?.attributes.participation_method !== 'voting' &&
+    (reactingActionDescriptor.enabled ||
+      isFixableByAuthentication(reactingActionDescriptor.disabled_reason) ||
+      cancellingEnabled ||
+      reactingFutureEnabled ||
+      likesCount > 0 ||
+      dislikesCount > 0);
+
   return (
     <Box
       flex={`0 0 ${rightColumnWidthDesktop}px`}
@@ -80,9 +100,15 @@ const RightColumnDesktop = ({
         >
           {(ideaIsInParticipationContext || commentingEnabled) && (
             <>
-              <Box pb="23px" mb="23px">
-                <ReactionControl styleType="shadow" ideaId={ideaId} size="4" />
-              </Box>
+              {showReactionControl && (
+                <Box pb="23px" mb="23px">
+                  <ReactionControl
+                    styleType="shadow"
+                    ideaId={ideaId}
+                    size="4"
+                  />
+                </Box>
+              )}
               <Box pb="23px" mb="23px" borderBottom="solid 1px #ccc">
                 {participationContext &&
                   ideaIsInParticipationContext &&