fix: fix i18next null translations, enable turbotrace on hobbies

City-of-Helsinki · Mar 1, 2023 · 1d6ad35 · 1d6ad35
1 parent 073d69d
commit 1d6ad35
Show file tree

Hide file tree

Showing 22 changed files with 127 additions and 83 deletions.
diff --git a/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx b/apps/events-helsinki/src/domain/event/eventCard/EventCard.tsx
@@ -143,7 +143,23 @@ const EventCard: React.FC<Props> = ({ event }) => {
                 showKeywords={false}
               />
             </div>
+<<<<<<< HEAD
           </BackgroundImage>
+=======
+          </div>
+          <div className={styles.buttonWrapper}>
+            <div ref={button}>
+              <IconButton
+                ariaLabel={t<string>('eventCard.ariaLabelLink', {
+                  name,
+                })}
+                icon={<IconArrowRight aria-hidden />}
+                onClick={goToEventPage}
+                size="default"
+              />
+            </div>
+          </div>
+>>>>>>> 3a115588 (fix: fix i18next null translations, enable turbotrace on hobbies)
         </div>
       </LinkBox>
     </div>

diff --git a/apps/hobbies-helsinki/next.config.js b/apps/hobbies-helsinki/next.config.js
@@ -176,14 +176,10 @@ const nextConfig = {
   output: 'standalone',
 
   experimental: {
-    outputFileTracingRoot: path.resolve(__dirname, '../..'),
-    /*
     turbotrace: {
       contextDirectory: path.resolve(__dirname, '../..'),
-      processCwd: path.resolve(__dirname, '../..'),
       logDetail: true,
     },
-    */
     // Prefer loading of ES Modules over CommonJS
     // @link {https://nextjs.org/blog/next-11-1#es-modules-support|Blog 11.1.0}
     // @link {https://github.com/vercel/next.js/discussions/27876|Discussion}

diff --git a/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx b/apps/hobbies-helsinki/src/domain/event/eventDetails/EventDetails.tsx
@@ -39,7 +39,7 @@ const EventDetails: React.FC<EventDetailsProps> = (props) => {
                 end: endTime,
                 locale,
                 includeTime: true,
-                timeAbbreviation: t('timeAbbreviation') ?? '',
+                timeAbbreviation: t('timeAbbreviation'),
               })}
             </div>
           </div>

diff --git a/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx b/apps/hobbies-helsinki/src/domain/event/eventHero/EventHero.tsx
@@ -147,7 +147,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                             locale,
                             includeTime: true,
                             timeAbbreviation:
-                              commonTranslation('timeAbbreviation') ?? '',
+                              commonTranslation('timeAbbreviation'),
                           })
                         )}
                       </InfoWithIcon>
@@ -166,7 +166,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                   {showBuyButton && (
                     <div className={styles.buyButtonWrapper}>
                       <Button
-                        aria-label={t('hero.ariaLabelBuyTickets') ?? ''}
+                        aria-label={t('hero.ariaLabelBuyTickets')}
                         onClick={goToBuyTicketsPage}
                         iconRight={<IconLinkExternal aria-hidden />}
                         variant="success"
@@ -180,7 +180,7 @@ const EventHero: React.FC<Props> = ({ event, superEvent }) => {
                       <Button
                         theme="coat"
                         className={buttonStyles.buttonCoatBlue}
-                        aria-label={t('hero.ariaLabelEnrol') ?? ''}
+                        aria-label={t('hero.ariaLabelEnrol')}
                         onClick={() => window.open(registrationUrl)}
                       >
                         {t('hero.buttonEnrol') as string}

diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventInfo.tsx
@@ -121,15 +121,14 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
     if (startTime) {
       const domain = getDomain();
       const icsEvent: EventAttributes = {
-        description:
-          t('info.textCalendarLinkDescription', {
-            description: shortDescription,
-            link: `${domain}${routerHelper.getLocalizedCmsItemUrl(
-              ROUTES.COURSES,
-              { eventId: event.id },
-              locale
-            )}`,
-          }) ?? '',
+        description: t('info.textCalendarLinkDescription', {
+          description: shortDescription,
+          link: `${domain}${routerHelper.getLocalizedCmsItemUrl(
+            ROUTES.COURSES,
+            { eventId: event.id },
+            locale
+          )}`,
+        }),
         end: endTime ? getDateArray(endTime) : getDateArray(startTime),
         location: [locationName, streetAddress, district, addressLocality]
           .filter((e) => e)
@@ -154,7 +153,7 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
   return (
     <InfoWithIcon
       icon={<IconCalendarClock aria-hidden />}
-      title={t('info.labelDateAndTime') ?? ''}
+      title={t('info.labelDateAndTime')}
     >
       {!!startTime && (
         <>
@@ -163,7 +162,7 @@ const DateInfo: React.FC<{ event: EventFields }> = ({ event }) => {
             end: endTime,
             locale,
             includeTime: true,
-            timeAbbreviation: commonTranslation('timeAbbreviation') ?? '',
+            timeAbbreviation: commonTranslation('timeAbbreviation'),
           })}
           <button onClick={downloadIcsFile}>
             {t('info.buttonAddToCalendar')}
@@ -187,7 +186,7 @@ const LocationInfo: React.FC<{ event: EventFields }> = ({ event }) => {
   return (
     <InfoWithIcon
       icon={<IconLocation aria-hidden />}
-      title={t('info.labelLocation') ?? ''}
+      title={t('info.labelLocation')}
     >
       <Visible below="s">
         {[locationName, streetAddress, district, addressLocality]
@@ -223,7 +222,7 @@ const Audience: React.FC<{
   const { t } = useTranslation('event');
 
   return (
-    <InfoWithIcon icon={<IconGroup />} title={t('info.labelAudience') ?? ''}>
+    <InfoWithIcon icon={<IconGroup />} title={t('info.labelAudience')}>
       {(audienceMinAge || audienceMaxAge) && (
         <div>{getAudienceAgeText(t, audienceMinAge, audienceMaxAge)}</div>
       )}
@@ -240,7 +239,7 @@ const Languages: React.FC<{ languages: string[] }> = ({ languages }) => {
   return (
     <InfoWithIcon
       icon={<IconGlobe aria-hidden />}
-      title={t('info.labelLanguages') ?? ''}
+      title={t('info.labelLanguages')}
     >
       <div>{languages.join(', ')}</div>
     </InfoWithIcon>
@@ -259,7 +258,7 @@ const OtherInfo: React.FC<{
   return (
     <InfoWithIcon
       icon={<IconInfoCircle aria-hidden />}
-      title={t('info.labelOtherInfo') ?? ''}
+      title={t('info.labelOtherInfo')}
     >
       {[email, telephone]
         .filter((e) => e)
@@ -314,7 +313,7 @@ const Directions: React.FC<{
   return (
     <InfoWithIcon
       icon={<IconDirections aria-hidden />}
-      title={t('info.labelDirections') ?? ''}
+      title={t('info.labelDirections')}
     >
       <SecondaryLink className={styles.link} href={googleDirectionsLink}>
         {t('info.directionsGoogle')}
@@ -340,7 +339,7 @@ const PriceInfo: React.FC<{ event: EventFields }> = ({ event }) => {
       <Visible below="s">
         <InfoWithIcon
           icon={<IconTicket aria-hidden />}
-          title={t('info.labelPrice') ?? ''}
+          title={t('info.labelPrice')}
         >
           {eventPriceText || '-'}
         </InfoWithIcon>
@@ -350,7 +349,7 @@ const PriceInfo: React.FC<{ event: EventFields }> = ({ event }) => {
         <Visible below="s" className={styles.buyButtonWrapper}>
           <Button
             theme="coat"
-            aria-label={t('info.ariaLabelBuyTickets') ?? ''}
+            aria-label={t('info.ariaLabelBuyTickets')}
             fullWidth={true}
             onClick={moveToBuyTicketsPage}
           >

diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/EventsHierarchy.tsx
@@ -133,7 +133,7 @@ const SuperEvent: React.FC<{ superEvent: SuperEventResponse | undefined }> = ({
     <div className={styles.eventList}>
       <InfoWithIcon
         icon={<IconLayers aria-hidden />}
-        title={t('superEvent.title') ?? ''}
+        title={t('superEvent.title')}
       >
         <EventList id={superEventTestId} showName events={[superEvent.data]} />
       </InfoWithIcon>

diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/OrganizationInfo.tsx
@@ -32,18 +32,12 @@ const OrganizationInfo: React.FC<Props> = ({ event }) => {
   return (
     <>
       {provider && (
-        <InfoWithIcon
-          icon={<IconFaceSmile />}
-          title={t('info.labelOrganizer') ?? ''}
-        >
+        <InfoWithIcon icon={<IconFaceSmile />} title={t('info.labelOrganizer')}>
           <div>{provider}</div>
         </InfoWithIcon>
       )}
       {publisher && (
-        <InfoWithIcon
-          icon={<IconLayers />}
-          title={t('info.labelPublisher') ?? ''}
-        >
+        <InfoWithIcon icon={<IconLayers />} title={t('info.labelPublisher')}>
           <LoadingSpinner hasPadding={false} isLoading={loading}>
             {organizationName && (
               <>

diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/OtherEventTimes.tsx
@@ -46,7 +46,7 @@ const OtherEventTimes: React.FC<{ event: EventFields }> = ({ event }) => {
     <div className={styles.eventList}>
       <InfoWithIcon
         icon={<IconCalendarPlus aria-hidden />}
-        title={t('event:otherTimes.title') ?? ''}
+        title={t('event:otherTimes.title')}
       >
         <EventList
           id={otherEventTimesListTestId}
@@ -59,8 +59,8 @@ const OtherEventTimes: React.FC<{ event: EventFields }> = ({ event }) => {
             aria-expanded={isListOpen}
             aria-label={
               isListOpen
-                ? t('event:otherTimes.buttonHide.ariaLabel') ?? ''
-                : t('event:otherTimes.buttonShow.ariaLabel') ?? ''
+                ? t('event:otherTimes.buttonHide.ariaLabel')
+                : t('event:otherTimes.buttonShow.ariaLabel')
             }
           >
             {isListOpen

diff --git a/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx b/apps/hobbies-helsinki/src/domain/event/eventInfo/eventList/EventList.tsx
@@ -46,7 +46,7 @@ const EventList: React.FC<{
               end: event.endTime,
               includeTime: true,
               locale,
-              timeAbbreviation: commonTranslation('timeAbbreviation') ?? '',
+              timeAbbreviation: commonTranslation('timeAbbreviation'),
             })
           : '';
         return (
@@ -59,8 +59,8 @@ const EventList: React.FC<{
                 showDate
                   ? t('otherTimes.buttonReadMore', {
                       date,
-                    }) ?? ''
-                  : t('relatedEvents.buttonReadMore') ?? ''
+                    })
+                  : t('relatedEvents.buttonReadMore')
               }
             >
               <span>{`${showName ? name : ''} ${showDate ? date : ''}`}</span>

diff --git a/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx b/apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx
@@ -89,7 +89,7 @@ const SimilarEvents: React.FC<Props> = ({
           >
             <Collection
               type={type}
-              title={t('similarEvents.title') ?? ''}
+              title={t('similarEvents.title')}
               cards={cards}
               loading={loading}
             />

diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx b/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx
@@ -341,7 +341,7 @@ const AdvancedSearch: React.FC<Props> = ({
                     inputValue={placeInput}
                     name="places"
                     onChange={setSelectedPlaces}
-                    selectAllText={t('search.selectAllPlaces') ?? ''}
+                    selectAllText={t('search.selectAllPlaces')}
                     setInputValue={setPlaceInput}
                     showSearch={true}
                     showSelectAll={true}
@@ -360,9 +360,9 @@ const AdvancedSearch: React.FC<Props> = ({
                     maxInputEndValue={MAX_AGE.toString()}
                     name="ageLimitValues"
                     onChange={handleSetAgeValues}
-                    fixedValuesText={t('search.showOnlyAdultCourses') ?? ''}
+                    fixedValuesText={t('search.showOnlyAdultCourses')}
                     title={t('search.ageLimitValues')}
-                    header={t('search.ageLimitHeader') ?? ''}
+                    header={t('search.ageLimitHeader')}
                     value={[minAgeInput, maxAgeInput]}
                     withPlaceholders={false}
                   />

diff --git a/apps/hobbies-helsinki/src/i18n.ts b/apps/hobbies-helsinki/src/i18n.ts
@@ -0,0 +1,21 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+/*
+  i18next has changed the way it handles null values in translations. This file is required
+  to make the typescript compiler happy. See the following links for more information:
+  https://github.com/i18next/react-i18next/issues/1587
+  https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz
+*/
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}
+
+i18n.use(initReactI18next).init({
+  returnNull: false,
+});
+
+export default i18n;
diff --git a/apps/hobbies-helsinki/src/pages/articles/index.tsx b/apps/hobbies-helsinki/src/pages/articles/index.tsx
@@ -113,8 +113,8 @@ export default function ArticleArchive({
         navigation={<Navigation page={page} />}
         content={
           <SearchPageContent
-            title={t('cms:archiveSearch.title') ?? ''}
-            description={t('cms:archiveSearch.description') ?? ''}
+            title={t('cms:archiveSearch.title')}
+            description={t('cms:archiveSearch.description')}
             className="articlesArchive"
             noResults={!isLoading && articles?.length === 0}
             items={articles}

diff --git a/packages/components/src/components/dateRangePicker/DateRangePicker.tsx b/packages/components/src/components/dateRangePicker/DateRangePicker.tsx
@@ -134,7 +134,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         onChange={(date) => setInternalStartDateString(date)}
         errorText={
           errors.startDateIsInvalid
-            ? t('common:dateSelector.errorDateFormat') ?? ''
+            ? t('common:dateSelector.errorDateFormat')
             : undefined
         }
       />
@@ -156,9 +156,9 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
         onChange={(date) => setInternalEndDateString(date)}
         errorText={
           endDateIsBeforeStartDate
-            ? t('common:dateSelector.errorEndDateBeforeStartDate') ?? ''
+            ? t('common:dateSelector.errorEndDateBeforeStartDate')
             : errors.endDateIsInvalid
-            ? t('common:dateSelector.errorDateFormat') ?? ''
+            ? t('common:dateSelector.errorDateFormat')
             : undefined
         }
       />

diff --git a/packages/components/src/components/dateSelector/DateSelector.tsx b/packages/components/src/components/dateSelector/DateSelector.tsx
@@ -159,7 +159,7 @@ const DateSelector: FunctionComponent<DateSelectorProps> = ({
       <button
         aria-haspopup="true"
         aria-expanded={isMenuOpen}
-        aria-label={t('common:dateSelector.title') ?? ''}
+        aria-label={t('common:dateSelector.title')}
         className={styles.button}
         onClick={toggleMenu}
         type="button"

diff --git a/...s/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx b/...s/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx
@@ -21,8 +21,7 @@ function useEventEnrolmentStatus(event: EventFields) {
             locale,
             includeWeekday: false,
             includeTime: true,
-            timeAbbreviation:
-              commonTranslation('common:timeAbbreviation') ?? '',
+            timeAbbreviation: commonTranslation('common:timeAbbreviation'),
           })
         : '',
     }),