Skip to content

Commit

Permalink
refactor and add gif to prettier ignore
Browse files Browse the repository at this point in the history
  • Loading branch information
nahbee10 committed Nov 15, 2024
1 parent 608d53d commit e6a2c1a
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 67 deletions.
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
**/.hg
*.mdx
*.md
*.hbs
*.hbs
*.gif
16 changes: 8 additions & 8 deletions src/components/Icons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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',
})}
/>
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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',
})}
/>
Expand All @@ -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"
Expand Down
42 changes: 42 additions & 0 deletions src/components/SentimentTracking/SentimentButton.tsx
Original file line number Diff line number Diff line change
@@ -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
82 changes: 24 additions & 58 deletions src/components/SentimentTracking/index.tsx
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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>
)
Expand Down

0 comments on commit e6a2c1a

Please sign in to comment.