diff --git a/web/src/components/CityContentToolbar.tsx b/web/src/components/CityContentToolbar.tsx
index 1c34472296..33b982ad36 100644
--- a/web/src/components/CityContentToolbar.tsx
+++ b/web/src/components/CityContentToolbar.tsx
@@ -73,7 +73,8 @@ const CityContentToolbar = (props: CityContentToolbarProps) => {
id='copy-icon'
/>
- {hasFeedbackOption && }
+ {hasFeedbackOption && }
+ {hasFeedbackOption && }
)
}
diff --git a/web/src/components/FeedbackContainer.tsx b/web/src/components/FeedbackContainer.tsx
index 083be2fc8a..b0df6bae2c 100644
--- a/web/src/components/FeedbackContainer.tsx
+++ b/web/src/components/FeedbackContainer.tsx
@@ -15,8 +15,7 @@ type FeedbackContainerProps = {
noResults?: boolean
slug?: string
onSubmit?: () => void
- isPositiveRating: boolean | null
- setIsPositiveRating?: (isPositiveFeedback: boolean | null) => void
+ initialRating: boolean | null
}
export type SendingStatusType = 'idle' | 'sending' | 'failed' | 'successful'
@@ -30,9 +29,9 @@ export const FeedbackContainer = ({
slug,
onClose,
onSubmit,
- isPositiveRating,
- setIsPositiveRating,
+ initialRating,
}: FeedbackContainerProps): ReactElement => {
+ const [isPositiveRating, setIsPositiveRating] = useState(initialRating)
const [comment, setComment] = useState('')
const [contactMail, setContactMail] = useState('')
const [sendingStatus, setSendingStatus] = useState('idle')
diff --git a/web/src/components/FeedbackToolbarItem.tsx b/web/src/components/FeedbackToolbarItem.tsx
index 0bf40d9bf6..40fed293d6 100644
--- a/web/src/components/FeedbackToolbarItem.tsx
+++ b/web/src/components/FeedbackToolbarItem.tsx
@@ -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(null)
const { t } = useTranslation('feedback')
const title = isSubmitted ? t('thanksHeadline') : t('headline')
@@ -34,26 +34,14 @@ const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactEl
cityCode={cityCode}
language={languageCode}
slug={slug}
- isPositiveRating={isPositiveRating}
- setIsPositiveRating={setIsPositiveRating}
+ initialRating={positive}
/>
)}
{
- setIsFeedbackOpen(true)
- setIsPositiveRating(true)
- }}
- />
- {
- setIsFeedbackOpen(true)
- setIsPositiveRating(false)
- }}
+ icon={positive ? HappySmileyIcon : SadSmileyIcon}
+ text={t(positive ? 'useful' : 'notUseful')}
+ onClick={() => setIsFeedbackOpen(true)}
/>
>
)
diff --git a/web/src/components/SearchFeedback.tsx b/web/src/components/SearchFeedback.tsx
index 30cfb58d32..3d3d261108 100644
--- a/web/src/components/SearchFeedback.tsx
+++ b/web/src/components/SearchFeedback.tsx
@@ -35,7 +35,7 @@ const SearchFeedback = ({ cityCode, languageCode, query, noResults }: SearchFeed
routeType={SEARCH_ROUTE}
query={query}
noResults={noResults}
- isPositiveRating={null}
+ initialRating={null}
/>
)
diff --git a/web/src/components/__tests__/FeedbackContainer.spec.tsx b/web/src/components/__tests__/FeedbackContainer.spec.tsx
index c09da48195..cc7694663d 100644
--- a/web/src/components/__tests__/FeedbackContainer.spec.tsx
+++ b/web/src/components/__tests__/FeedbackContainer.spec.tsx
@@ -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(
- ,
+ ,
)
const button = getByRole('button', {
name: 'feedback:send',
diff --git a/web/src/components/__tests__/FeedbackToolbarItem.spec.tsx b/web/src/components/__tests__/FeedbackToolbarItem.spec.tsx
index 7806782a44..bd6b84cf35 100644
--- a/web/src/components/__tests__/FeedbackToolbarItem.spec.tsx
+++ b/web/src/components/__tests__/FeedbackToolbarItem.spec.tsx
@@ -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(
- ,
+ ,
)
expect(queryByText('feedback:headline')).toBeFalsy()