From 0b8f07fc4a187632ae2036448e6cd3e17e984227 Mon Sep 17 00:00:00 2001
From: steffenkleinle <steffen.kleinle@mailbox.org>
Date: Tue, 3 Dec 2024 21:29:58 +0100
Subject: [PATCH] 2548: Split feedback toolbar item component

---
 web/src/components/CityContentToolbar.tsx     |  3 ++-
 web/src/components/FeedbackContainer.tsx      |  7 +++---
 web/src/components/FeedbackToolbarItem.tsx    | 24 +++++--------------
 web/src/components/SearchFeedback.tsx         |  2 +-
 .../__tests__/FeedbackContainer.spec.tsx      |  4 ++--
 .../__tests__/FeedbackToolbarItem.spec.tsx    |  2 +-
 6 files changed, 15 insertions(+), 27 deletions(-)

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'
         />
       </Tooltip>
-      {hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} />}
+      {hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} positive />}
+      {hasFeedbackOption && <FeedbackToolbarItem route={route} slug={feedbackTarget} positive={false} />}
     </Toolbar>
   )
 }
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<boolean | null>(initialRating)
   const [comment, setComment] = useState<string>('')
   const [contactMail, setContactMail] = useState<string>('')
   const [sendingStatus, setSendingStatus] = useState<SendingStatusType>('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<boolean | null>(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}
           />
         </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)}
       />
     </>
   )
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}
         />
       </Container>
     )
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(
-      <FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} isPositiveRating />,
+      <FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} initialRating />,
     )
     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(
-      <FeedbackToolbarItem route={CATEGORIES_ROUTE} slug='my-slug' />,
+      <FeedbackToolbarItem route={CATEGORIES_ROUTE} slug='my-slug' positive />,
     )
 
     expect(queryByText('feedback:headline')).toBeFalsy()