Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2548: Split feedback toolbar item component #3015

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+15 −27
Open

2548: Split feedback toolbar item component #3015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion web/src/components/CityContentToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ const CityContentToolbar = (props: CityContentToolbarProps) => {
id='copy-icon'
/>
</Tooltip>
{hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} />}
{hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} positive />}
{hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} positive={false} />}
</Toolbar>
)
}
Expand Down
7 changes: 3 additions & 4 deletions web/src/components/FeedbackContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ type FeedbackContainerProps = {
noResults?: boolean
slug?: string
onSubmit?: () => void
isPositiveRating: boolean | null
setIsPositiveRating?: (isPositiveFeedback: boolean | null) => void
initialRating: boolean | null
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍 Great naming!

}

export type SendingStatusType = 'idle' | 'sending' | 'failed' | 'successful'
Expand All @@ -30,9 +29,9 @@ export const FeedbackContainer = ({
slug,
onClose,
onSubmit,
isPositiveRating,
setIsPositiveRating,
initialRating,
}: FeedbackContainerProps): ReactElement => {
const [isPositiveRating, setIsPositiveRating] = useState<boolean | null>(initialRating)
const [comment, setComment] = useState<string>('')
const [contactMail, setContactMail] = useState<string>('')
const [sendingStatus, setSendingStatus] = useState<SendingStatusType>('idle')
Expand Down
24 changes: 6 additions & 18 deletions web/src/components/FeedbackToolbarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import ToolbarItem from './ToolbarItem'
type FeedbackToolbarItemProps = {
route: RouteType
slug?: string
positive: boolean
}

const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactElement => {
const FeedbackToolbarItem = ({ route, slug, positive }: FeedbackToolbarItemProps): ReactElement => {
const { cityCode, languageCode } = useCityContentParams()
const [isFeedbackOpen, setIsFeedbackOpen] = useState(false)
const [isSubmitted, setIsSubmitted] = useState(false)
const [isPositiveRating, setIsPositiveRating] = useState<boolean | null>(null)
const { t } = useTranslation('feedback')
const title = isSubmitted ? t('thanksHeadline') : t('headline')

Expand All @@ -34,26 +34,14 @@ const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactEl
cityCode={cityCode}
language={languageCode}
slug={slug}
isPositiveRating={isPositiveRating}
setIsPositiveRating={setIsPositiveRating}
initialRating={positive}
/>
</Modal>
)}
<ToolbarItem
icon={HappySmileyIcon}
text={t('useful')}
onClick={() => {
setIsFeedbackOpen(true)
setIsPositiveRating(true)
}}
/>
<ToolbarItem
icon={SadSmileyIcon}
text={t('notUseful')}
onClick={() => {
setIsFeedbackOpen(true)
setIsPositiveRating(false)
}}
icon={positive ? HappySmileyIcon : SadSmileyIcon}
text={t(positive ? 'useful' : 'notUseful')}
onClick={() => setIsFeedbackOpen(true)}
/>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/SearchFeedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const SearchFeedback = ({ cityCode, languageCode, query, noResults }: SearchFeed
routeType={SEARCH_ROUTE}
query={query}
noResults={noResults}
isPositiveRating={null}
initialRating={null}
/>
</Container>
)
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/__tests__/FeedbackContainer.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ describe('FeedbackContainer', () => {
language,
onClose: closeModal,
query,
isPositiveRating: null,
initialRating: null,
})

it('should display thanks message for modal', async () => {
const { getByRole, findByText } = renderWithTheme(
<FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} isPositiveRating />,
<FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} initialRating />,
)
const button = getByRole('button', {
name: 'feedback:send',
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/__tests__/FeedbackToolbarItem.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ jest.mock('focus-trap-react', () => ({ children }: { children: ReactElement }) =
describe('FeedbackToolbarItem', () => {
it('should open and update title on submit feedback', async () => {
const { queryByText, findByText, getByText } = renderWithRouterAndTheme(
<FeedbackToolbarItem route={CATEGORIES_ROUTE} slug='my-slug' />,
<FeedbackToolbarItem route={CATEGORIES_ROUTE} slug='my-slug' positive />,
)

expect(queryByText('feedback:headline')).toBeFalsy()
Expand Down
Loading