2548: Refactoring

web/src/components/Feedback.tsx

@@ -46,7 +46,7 @@ type FeedbackProps = {
   contactMail: string
   onCommentChanged: (comment: string) => void
   onContactMailChanged: (contactMail: string) => void
-  onFeedbackChanged: (isPositiveFeedback: boolean | null) => void
+  onFeedbackChanged?: (isPositiveFeedback: boolean | null) => void
   onSubmit: () => void
   sendingStatus: SendingStatusType
   noResults: boolean | undefined
@@ -94,7 +94,7 @@ const Feedback = ({
           </InputSection>
         </>
       ) : (
-        <FeedbackButtons isPositive={isPositiveFeedback} onRatingChange={onFeedbackChanged} />
+        onFeedbackChanged && <FeedbackButtons isPositive={isPositiveFeedback} onRatingChange={onFeedbackChanged} />
       )}
 
       <InputSection

web/src/components/FeedbackContainer.tsx

@@ -15,7 +15,8 @@ type FeedbackContainerProps = {
   noResults?: boolean
   slug?: string
   onSubmit?: () => void
-  isPositive: boolean | null
+  isPositiveRating: boolean | null
+  setIsPositiveRating?: (isPositiveFeedback: boolean | null) => void
 }
 
 export type SendingStatusType = 'idle' | 'sending' | 'failed' | 'successful'
@@ -29,9 +30,9 @@ export const FeedbackContainer = ({
   slug,
   onClose,
   onSubmit,
-  isPositive,
+  isPositiveRating,
+  setIsPositiveRating,
 }: FeedbackContainerProps): ReactElement => {
-  const [isPositiveRating, setIsPositiveRating] = useState<boolean | null>(isPositive)
   const [comment, setComment] = useState<string>('')
   const [contactMail, setContactMail] = useState<string>('')
   const [sendingStatus, setSendingStatus] = useState<SendingStatusType>('idle')

web/src/components/FeedbackToolbarItem.tsx

@@ -19,7 +19,7 @@ const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactEl
   const { cityCode, languageCode } = useCityContentParams()
   const [isFeedbackOpen, setIsFeedbackOpen] = useState(false)
   const [isSubmitted, setIsSubmitted] = useState(false)
-  const [isPositive, setIsPositive] = useState<boolean | null>(null)
+  const [isPositiveRating, setIsPositiveRating] = useState<boolean | null>(null)
   const { t } = useTranslation('feedback')
   const title = isSubmitted ? t('thanksHeadline') : t('headline')
 
@@ -34,7 +34,8 @@ const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactEl
             cityCode={cityCode}
             language={languageCode}
             slug={slug}
-            isPositive={isPositive}
+            isPositiveRating={isPositiveRating}
+            setIsPositiveRating={setIsPositiveRating}
           />
         </Modal>
       )}
@@ -43,15 +44,15 @@ const FeedbackToolbarItem = ({ route, slug }: FeedbackToolbarItemProps): ReactEl
         text={t('useful')}
         onClick={() => {
           setIsFeedbackOpen(true)
-          setIsPositive(true)
+          setIsPositiveRating(true)
         }}
       />
       <ToolbarItem
         icon={SadSmileyIcon}
         text={t('notUseful')}
         onClick={() => {
           setIsFeedbackOpen(true)
-          setIsPositive(false)
+          setIsPositiveRating(false)
         }}
       />
     </>

web/src/components/SearchFeedback.tsx

@@ -35,7 +35,7 @@ const SearchFeedback = ({ cityCode, languageCode, query, noResults }: SearchFeed
           routeType={SEARCH_ROUTE}
           query={query}
           noResults={noResults}
-          isPositive={null}
+          isPositiveRating={null}
         />
       </Container>
     )

web/src/components/__tests__/FeedbackContainer.spec.tsx

@@ -34,15 +34,13 @@ describe('FeedbackContainer', () => {
     language,
     onClose: closeModal,
     query,
-    isPositive: null,
+    isPositiveRating: null,
   })
 
   it('should display thanks message for modal', async () => {
-    const { getByRole, findByText } = renderWithTheme(<FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} />)
-    const buttonRating = getByRole('button', {
-      name: 'feedback:useful',
-    })
-    fireEvent.click(buttonRating)
+    const { getByRole, findByText } = renderWithTheme(
+      <FeedbackContainer {...buildDefaultProps(CATEGORIES_ROUTE)} isPositiveRating />,
+    )
     const button = getByRole('button', {
       name: 'feedback:send',
     })