From e6a2c1adcf578ab4c573cd1176a77e39e0473df5 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Fri, 15 Nov 2024 11:17:31 -0500
Subject: [PATCH] refactor and add gif to prettier ignore

---
 .prettierignore                               |  3 +-
 src/components/Icons/index.tsx                | 16 ++--
 .../SentimentTracking/SentimentButton.tsx     | 42 ++++++++++
 src/components/SentimentTracking/index.tsx    | 82 ++++++-------------
 4 files changed, 76 insertions(+), 67 deletions(-)
 create mode 100644 src/components/SentimentTracking/SentimentButton.tsx

diff --git a/.prettierignore b/.prettierignore
index 3e1358bbc..af1f7c669 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,4 +7,5 @@
 **/.hg
 *.mdx
 *.md
-*.hbs
\ No newline at end of file
+*.hbs
+*.gif
\ No newline at end of file
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 22d0842bf..3730b48a2 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -218,7 +218,7 @@ export const Happy: FC<{
         cy="10"
         r="9"
         className={cn({
-          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/happy:stroke-light-neutral-1 group-hover/happy:dark:stroke-dark-neutral-1 group-[.selected]/happy:fill-light-status-success-1 group-[.selected]/happy:dark:fill-dark-status-success-1 group-[.selected]/happy:stroke-light-neutral-1 group-[.selected]/happy:dark:stroke-dark-neutral-1':
+          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/positive:stroke-light-neutral-1 group-hover/positive:dark:stroke-dark-neutral-1 group-[.selected]/positive:fill-light-status-success-1 group-[.selected]/positive:dark:fill-dark-status-success-1 group-[.selected]/positive:stroke-light-neutral-1 group-[.selected]/positive:dark:stroke-dark-neutral-1':
             color === 'neutral-2',
         })}
         strokeWidth="2"
@@ -228,7 +228,7 @@ export const Happy: FC<{
         cy="8"
         r="1"
         className={cn({
-          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/happy:fill-light-neutral-1 group-hover/happy:dark:fill-dark-neutral-1 group-[.selected]/happy:fill-light-neutral-1 group-[.selected]/happy:dark:fill-dark-neutral-1':
+          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/positive:fill-light-neutral-1 group-hover/positive:dark:fill-dark-neutral-1 group-[.selected]/positive:fill-light-neutral-1 group-[.selected]/positive:dark:fill-dark-neutral-1':
             color === 'neutral-2',
         })}
       />
@@ -237,14 +237,14 @@ export const Happy: FC<{
         cy="8"
         r="1"
         className={cn({
-          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/happy:fill-light-neutral-1 group-hover/happy:dark:fill-dark-neutral-1 group-[.selected]/happy:fill-light-neutral-1 group-[.selected]/happy:dark:fill-dark-neutral-1':
+          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/positive:fill-light-neutral-1 group-hover/positive:dark:fill-dark-neutral-1 group-[.selected]/positive:fill-light-neutral-1 group-[.selected]/positive:dark:fill-dark-neutral-1':
             color === 'neutral-2',
         })}
       />
       <path
         d="M6 12C6 12 7.29032 14 10 14C12.7097 14 14 12 14 12"
         className={cn({
-          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/happy:stroke-light-neutral-1 group-hover/happy:dark:stroke-dark-neutral-1 group-[.selected]/happy:stroke-light-neutral-1 group-[.selected]/happy:dark:stroke-dark-neutral-1':
+          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/positive:stroke-light-neutral-1 group-hover/positive:dark:stroke-dark-neutral-1 group-[.selected]/positive:stroke-light-neutral-1 group-[.selected]/positive:dark:stroke-dark-neutral-1':
             color === 'neutral-2',
         })}
         strokeWidth="2"
@@ -312,7 +312,7 @@ export const Sad: FC<{
         cy="10"
         r="9"
         className={cn({
-          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/sad:stroke-light-neutral-1 group-hover/sad:dark:stroke-dark-neutral-1 group-[.selected]/sad:fill-light-status-critical-1 group-[.selected]/sad:dark:fill-dark-status-critical-1 group-[.selected]/sad:stroke-light-neutral-1 group-[.selected]/sad:dark:stroke-dark-neutral-1':
+          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/negative:stroke-light-neutral-1 group-hover/negative:dark:stroke-dark-neutral-1 group-[.selected]/negative:fill-light-status-critical-1 group-[.selected]/negative:dark:fill-dark-status-critical-1 group-[.selected]/negative:stroke-light-neutral-1 group-[.selected]/negative:dark:stroke-dark-neutral-1':
             color === 'neutral-2',
         })}
         strokeWidth="2"
@@ -322,7 +322,7 @@ export const Sad: FC<{
         cy="8"
         r="1"
         className={cn({
-          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/sad:fill-light-neutral-1 group-hover/sad:dark:fill-dark-neutral-1 group-[.selected]/sad:fill-light-neutral-1 group-[.selected]/sad:dark:fill-dark-neutral-1':
+          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/negative:fill-light-neutral-1 group-hover/negative:dark:fill-dark-neutral-1 group-[.selected]/negative:fill-light-neutral-1 group-[.selected]/negative:dark:fill-dark-neutral-1':
             color === 'neutral-2',
         })}
       />
@@ -331,14 +331,14 @@ export const Sad: FC<{
         cy="8"
         r="1"
         className={cn({
-          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/sad:fill-light-neutral-1 group-hover/sad:dark:fill-dark-neutral-1 group-[.selected]/sad:fill-light-neutral-1 group-[.selected]/sad:dark:fill-dark-neutral-1':
+          'fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover/negative:fill-light-neutral-1 group-hover/negative:dark:fill-dark-neutral-1 group-[.selected]/negative:fill-light-neutral-1 group-[.selected]/negative:dark:fill-dark-neutral-1':
             color === 'neutral-2',
         })}
       />
       <path
         d="M14 13C14 13 12.7097 11 10 11C7.29032 11 6 13 6 13"
         className={cn({
-          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/sad:stroke-light-neutral-1 group-hover/sad:dark:stroke-dark-neutral-1 group-[.selected]/sad:stroke-light-neutral-1 group-[.selected]/sad:dark:stroke-dark-neutral-1':
+          'stroke-light-neutral-2 dark:stroke-dark-neutral-2 group-hover/negative:stroke-light-neutral-1 group-hover/negative:dark:stroke-dark-neutral-1 group-[.selected]/negative:stroke-light-neutral-1 group-[.selected]/negative:dark:stroke-dark-neutral-1':
             color === 'neutral-2',
         })}
         strokeWidth="2"
diff --git a/src/components/SentimentTracking/SentimentButton.tsx b/src/components/SentimentTracking/SentimentButton.tsx
new file mode 100644
index 000000000..3ddc4e3f0
--- /dev/null
+++ b/src/components/SentimentTracking/SentimentButton.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Sentiment } from '.'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, DocsSentiment, DocsSentimentSection, SharedEventName } from '@uniswap/analytics-events'
+import cn from 'classnames'
+
+interface SentimentButtonProps {
+  sentiment: Sentiment
+  icon: React.ReactNode
+  selected: boolean
+  onSelect: (sentiment: Sentiment) => void
+  analyticsSection: DocsSentimentSection
+}
+
+const SentimentButton: React.FC<SentimentButtonProps> = ({ sentiment, icon, selected, onSelect, analyticsSection }) => {
+  const sentimentMap: Record<Sentiment, DocsSentiment> = {
+    [Sentiment.POSITIVE]: DocsSentiment.POSITIVE_SENTIMENT,
+    [Sentiment.NEUTRAL]: DocsSentiment.NEUTRAL_SENTIMENT,
+    [Sentiment.NEGATIVE]: DocsSentiment.NEGATIVE_SENTIMENT,
+  }
+
+  const handleClick = () => onSelect(sentiment)
+
+  return (
+    <TraceEvent
+      element={sentimentMap[sentiment]}
+      name={SharedEventName.SENTIMENT_SUBMITTED}
+      events={[BrowserEvent.onClick]}
+      section={analyticsSection}
+    >
+      <button
+        onClick={handleClick}
+        className={cn(`group/${sentiment.toLowerCase()}`, { selected })}
+        aria-label={`Rate as ${sentiment.toLowerCase()}`}
+      >
+        {icon}
+      </button>
+    </TraceEvent>
+  )
+}
+
+export default SentimentButton
diff --git a/src/components/SentimentTracking/index.tsx b/src/components/SentimentTracking/index.tsx
index 84b4f5d62..675882828 100644
--- a/src/components/SentimentTracking/index.tsx
+++ b/src/components/SentimentTracking/index.tsx
@@ -1,10 +1,9 @@
-import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, DocsSentiment, DocsSentimentSection, SharedEventName } from '@uniswap/analytics-events'
+import { DocsSentimentSection } from '@uniswap/analytics-events'
 import React, { useCallback, useState } from 'react'
 import { Happy, Sad, Neutral } from '../Icons'
-import cn from 'classnames'
+import SentimentButton from './SentimentButton'
 
-enum Sentiment {
+export enum Sentiment {
   NEGATIVE = 'NEGATIVE',
   NEUTRAL = 'NEUTRAL',
   POSITIVE = 'POSITIVE',
@@ -22,60 +21,27 @@ export default function SentimentTracking({ analyticsSection }: { analyticsSecti
     <div className="flex flex-row space-x-4">
       <div className="Sentiment__question">Was this helpful?</div>
       <div className="flex flex-row space-x-1">
-        <TraceEvent
-          element={DocsSentiment.POSITIVE_SENTIMENT}
-          name={SharedEventName.SENTIMENT_SUBMITTED}
-          events={[BrowserEvent.onClick]}
-          section={analyticsSection}
-        >
-          <button
-            aria-label="Rate as positive"
-            onClick={() => {
-              setSelectedSentiment(Sentiment.POSITIVE)
-            }}
-            className={cn('group/happy', {
-              selected: isSentimentSelected(Sentiment.POSITIVE),
-            })}
-          >
-            <Happy className="h-5 w-5 group/happy" />
-          </button>
-        </TraceEvent>
-        <TraceEvent
-          element={DocsSentiment.NEUTRAL_SENTIMENT}
-          name={SharedEventName.SENTIMENT_SUBMITTED}
-          events={[BrowserEvent.onClick]}
-          section={analyticsSection}
-        >
-          <button
-            aria-label="Rate as neutral"
-            onClick={() => {
-              setSelectedSentiment(Sentiment.NEUTRAL)
-            }}
-            className={cn('group/neutral', {
-              selected: isSentimentSelected(Sentiment.NEUTRAL),
-            })}
-          >
-            <Neutral className="h-5 w-5" />
-          </button>
-        </TraceEvent>
-        <TraceEvent
-          element={DocsSentiment.NEGATIVE_SENTIMENT}
-          name={SharedEventName.SENTIMENT_SUBMITTED}
-          events={[BrowserEvent.onClick]}
-          section={analyticsSection}
-        >
-          <button
-            aria-label="Rate as negative"
-            onClick={() => {
-              setSelectedSentiment(Sentiment.NEGATIVE)
-            }}
-            className={cn('group/sad', {
-              selected: isSentimentSelected(Sentiment.NEGATIVE),
-            })}
-          >
-            <Sad className="h-5 w-5" />
-          </button>
-        </TraceEvent>
+        <SentimentButton
+          sentiment={Sentiment.POSITIVE}
+          icon={<Happy className="h-5 w-5 group/positive" />}
+          selected={isSentimentSelected(Sentiment.POSITIVE)}
+          onSelect={setSelectedSentiment}
+          analyticsSection={analyticsSection}
+        />
+        <SentimentButton
+          sentiment={Sentiment.NEUTRAL}
+          icon={<Neutral className="h-5 w-5 group/neutral" />}
+          selected={isSentimentSelected(Sentiment.NEUTRAL)}
+          onSelect={setSelectedSentiment}
+          analyticsSection={analyticsSection}
+        />
+        <SentimentButton
+          sentiment={Sentiment.NEGATIVE}
+          icon={<Sad className="h-5 w-5 group/negative" />}
+          selected={isSentimentSelected(Sentiment.NEGATIVE)}
+          onSelect={setSelectedSentiment}
+          analyticsSection={analyticsSection}
+        />
       </div>
     </div>
   )