Merge pull request #816 from cultuurnet/bugfix/III-5802

src/hooks/api/authenticated-query.ts

@@ -7,10 +7,12 @@ import { Cookies } from 'react-cookie';
 import {
   MutationFunction,
   QueryClient,
+  useMutation,
+  useQueries,
+  useQuery,
   useQueryClient,
   UseQueryResult,
 } from 'react-query';
-import { useMutation, useQueries, useQuery } from 'react-query';
 
 import { useCookiesWithOptions } from '@/hooks/useCookiesWithOptions';
 import type { CalendarSummaryFormat } from '@/utils/createEmbededCalendarSummaries';

src/hooks/api/user.ts

@@ -1,5 +1,4 @@
 import jwt_decode from 'jwt-decode';
-import getConfig from 'next/config';
 
 import { FetchError, fetchFromApi, isErrorObject } from '@/utils/fetchFromApi';
 

src/pages/PictureUploadBox.tsx

@@ -1,6 +1,5 @@
 import { DragEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
 import { Scope, ScopeTypes } from '@/constants/OfferType';
 import { Button, ButtonVariants } from '@/ui/Button';

src/pages/VideoUploadBox.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
 import { Button, ButtonVariants } from '@/ui/Button';
 import { Icons } from '@/ui/Icon';

src/pages/api/auth/[...auth0].api.ts

@@ -1,5 +1,4 @@
 import { handleAuth, handleLogin, handleLogout } from '@auth0/nextjs-auth0';
-import { serialize } from 'cookie';
 import { NextApiRequest } from 'next';
 import getConfig from 'next/config';
 

src/pages/create/OfferForm.tsx

@@ -24,15 +24,9 @@ import { Address, AddressInternal } from '@/types/Address';
 import { ContactPoint } from '@/types/ContactPoint';
 import { Country } from '@/types/Country';
 import { AttendanceMode, AudienceType, isEvent } from '@/types/Event';
-import {
-  BookingInfo,
-  Label,
-  MediaObject,
-  Offer,
-  PriceInfo,
-} from '@/types/Offer';
+import { BookingInfo, MediaObject, Offer, PriceInfo } from '@/types/Offer';
 import { Organizer } from '@/types/Organizer';
-import { isPlace, Place } from '@/types/Place';
+import { Place } from '@/types/Place';
 import { Values } from '@/types/Values';
 import { WorkflowStatus } from '@/types/WorkflowStatus';
 import { getLanguageObjectOrFallback } from '@/utils/getLanguageObjectOrFallback';

src/pages/login/[language].page.tsx

@@ -33,10 +33,10 @@ const Path = (props) => <Box as="path" {...props} />;
 
 const Animation = (props) => {
   const draw = keyframes`
-    to {
-      stroke-dashoffset: 0;
-    }
-  `;
+      to {
+        stroke-dashoffset: 0;
+      }
+    `;
 
   const drawAnimationLineLeft = css`
     ${draw} 2s 0.2s forwards linear;
@@ -47,32 +47,32 @@ const Animation = (props) => {
   `;
 
   const logoAnimate = keyframes`
-    0% {
-      transform: scale(1);
-      animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
-    }
-    10% {
-      transform: scale(0.8);
-      animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
-    }
-    100% {
-      transform: scale(1);
-    }
-  `;
+      0% {
+        transform: scale(1);
+        animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
+      }
+      10% {
+        transform: scale(0.8);
+        animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
+      }
+      100% {
+        transform: scale(1);
+      }
+    `;
 
   const publicAnimate = keyframes`
-    0% {
-      transform: scale(1);
-      animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
-    }
-    10% {
-      transform: scale(0.8);
-      animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
-    }
-    100% {
-      transform: scale(1);
-    }
-  `;
+      0% {
+        transform: scale(1);
+        animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
+      }
+      10% {
+        transform: scale(0.8);
+        animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
+      }
+      100% {
+        transform: scale(1);
+      }
+    `;
 
   return (
     <Svg {...props} width="100%">

src/pages/organizers/create/steps/NameStep.tsx

@@ -1,4 +1,4 @@
-import { FormEvent } from 'react';
+import { FocusEvent } from 'react';
 import { Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +18,7 @@ const NameStep = ({
   name,
   ...props
 }: NameStepProps) => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <Stack {...getStackProps(props)}>
@@ -41,7 +41,7 @@ const NameStep = ({
                         name: (event.target as HTMLInputElement).value,
                       });
                     }}
-                    onBlur={(event: FormEvent<HTMLInputElement>) => {
+                    onBlur={(event: FocusEvent<HTMLInputElement>) => {
                       field.onChange({
                         ...field.value,
                         name: (event.target as HTMLInputElement).value,

src/pages/organizers/create/steps/UrlStep.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import { FormEvent, useEffect, useState } from 'react';
-import { Controller, useWatch } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { useGetOrganizersByWebsiteQuery } from '@/hooks/api/organizers';
@@ -34,12 +34,6 @@ const UrlStep = ({
   const { t, i18n } = useTranslation();
 
   const [searchInput, setSearchInput] = useState('');
-
-  const [watchedUrl] = useWatch({
-    control,
-    name: ['nameAndUrl.url'],
-  });
-
   const debouncedSearchInput = useDebounce(searchInput, 275);
 
   const getOrganizersByWebsiteQuery = useGetOrganizersByWebsiteQuery(

src/pages/steps/AdditionalInformationStep/BookingInfoStep.tsx

@@ -485,9 +485,7 @@ const BookingInfoStep = ({
           as="form"
           width="45%"
           spacing={4}
-          onBlur={handleSubmit((data) => {
-            handleAddBookingInfoMutation(data);
-          })}
+          onBlur={() => handleAddBookingInfoMutation(getValues())}
           ref={formComponent}
         >
           {Object.keys(ContactInfoType).map((key, index) => {

src/pages/steps/AdditionalInformationStep/LabelsStep.tsx

@@ -109,7 +109,6 @@ function LabelsStep({
                 setLabels(uniq([...labels, label]));
                 ref.current.clear();
               }}
-              customFilter={() => true}
             />
           }
           maxWidth={'100%'}

src/pages/steps/AdditionalInformationStep/OrganizerPicker.tsx

@@ -18,10 +18,9 @@ import { ButtonCard } from '@/ui/ButtonCard';
 import { FormElement } from '@/ui/FormElement';
 import { Icon, Icons } from '@/ui/Icon';
 import { Inline } from '@/ui/Inline';
-import { Paragraph } from '@/ui/Paragraph';
 import { getStackProps, Stack, StackProps } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
+import { getValueFromTheme } from '@/ui/theme';
 import { isNewEntry, NewEntry, Typeahead } from '@/ui/Typeahead';
 import { parseOfferId } from '@/utils/parseOfferId';
 import { valueToArray } from '@/utils/valueToArray';

src/pages/steps/CalendarStep/CalendarOpeninghoursModal.tsx

@@ -1,6 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ChangeEvent } from 'react';
-import { useEffect } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';

src/pages/steps/CalendarStep/useCalendarType.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 
 import { CalendarType } from '@/constants/CalendarType';
-import { Values } from '@/types/Values';
 
 import {
   useIsIdle,

src/pages/steps/LocationStep.tsx

@@ -7,12 +7,7 @@ import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
 
 import { EventTypes } from '@/constants/EventTypes';
-import {
-  OfferType,
-  OfferTypes,
-  Scope,
-  ScopeTypes,
-} from '@/constants/OfferType';
+import { OfferTypes, Scope, ScopeTypes } from '@/constants/OfferType';
 import {
   useChangeAttendanceModeMutation,
   useChangeAudienceMutation,

src/pages/steps/PlaceStep.tsx

@@ -160,7 +160,7 @@ const PlaceStep = ({
                       isLoading={useGetPlacesQuery.isLoading}
                       options={places}
                       onInputChange={debounce(setSearchInput, 275)}
-                      customFilter={filterByCallback}
+                      filterBy={filterByCallback}
                       labelKey={(place) =>
                         getPlaceName(place.name, place.mainLanguage)
                       }

src/pages/steps/ProductionStep.tsx

@@ -8,11 +8,11 @@ import {
   useChangeNameMutation,
   useGetEventByIdQuery,
 } from '@/hooks/api/events';
-import { useGetProductionsQuery } from '@/hooks/api/productions';
 import {
   useAddEventByIdMutation as useAddEventToProductionByIdMutation,
   useCreateWithEventsMutation as useCreateProductionWithEventsMutation,
   useDeleteEventByIdMutation as useDeleteEventFromProductionByIdMutation,
+  useGetProductionsQuery,
 } from '@/hooks/api/productions';
 import type {
   FormDataUnion,

src/pages/steps/ScopeStep.tsx

@@ -4,7 +4,6 @@ import { Controller, ControllerRenderProps, Path } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { OfferType, OfferTypes } from '@/constants/OfferType';
-import { Values } from '@/types/Values';
 import { parseSpacing } from '@/ui/Box';
 import { getInlineProps, Inline, InlineProps } from '@/ui/Inline';
 import { ToggleBox } from '@/ui/ToggleBox';

src/pages/steps/Steps.tsx

@@ -9,9 +9,8 @@ import type {
 } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { OfferType, OfferTypes, Scope } from '@/constants/OfferType';
+import { Scope } from '@/constants/OfferType';
 import { SupportedLanguage } from '@/i18n/index';
-import { Values } from '@/types/Values';
 import type { BoxProps } from '@/ui/Box';
 import { Box } from '@/ui/Box';
 import type { StackProps } from '@/ui/Stack';

src/pages/steps/TimeTableStep.tsx

@@ -8,11 +8,11 @@ import { Alert, AlertVariants } from '@/ui/Alert';
 import { Box } from '@/ui/Box';
 import type { StackProps } from '@/ui/Stack';
 import { getStackProps, Stack } from '@/ui/Stack';
-import { TimeTableValue } from '@/ui/TimeTable';
 import {
   areAllTimeSlotsValid,
   isTimeTableEmpty,
   TimeTable,
+  TimeTableValue,
 } from '@/ui/TimeTable';
 import { formatDateToISO } from '@/utils/formatDateToISO';
 

src/pages/steps/hooks/usePublishOffer.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useQueryClient } from 'react-query';
 
 import { OfferTypes } from '@/constants/OfferType';

src/test/e2e/events/create-uitpas-event.spec.ts

@@ -1,4 +1,3 @@
-import { faker } from '@faker-js/faker';
 import { expect, test } from '@playwright/test';
 
 const dummyEvent = {

src/ui/Alert.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Alert, AlertVariants } from './Alert';
 
 <Meta title="Components/Alert" component={Alert} />

src/ui/Box.tsx

@@ -6,12 +6,12 @@ import type {
   DragEvent,
   FocusEvent,
   FormEvent,
-  HTMLProps,
   KeyboardEvent,
   MouseEvent,
   ReactNode,
 } from 'react';
 import { forwardRef } from 'react';
+import { AsyncTypeaheadProps, TypeaheadModel } from 'react-bootstrap-typeahead';
 import { ReactDatePickerProps } from 'react-datepicker';
 import type {
   FlattenInterpolation,
@@ -94,33 +94,7 @@ type ProgressBarProps = {
   now: number;
 };
 
-type TypeaheadProps = {
-  options: unknown[];
-  labelKey: ((option: unknown) => string) | string;
-  isLoading: boolean;
-  disabled: boolean;
-  placeholder: string;
-  emptyLabel: string;
-  minLength: number;
-  delay: number;
-  highlightOnlyResult: boolean;
-  isInvalid: boolean;
-  promptText: string;
-  searchText: string;
-  positionFixed: boolean;
-  allowNew:
-    | boolean
-    | ((
-        results: Array<Record<string, unknown> | string>,
-        props: Record<string, unknown>,
-      ) => boolean);
-  newSelectionPrefix: string;
-  renderMenuItemChildren?: (option: unknown, { text }) => JSX.Element;
-  inputProps: HTMLProps<HTMLInputElement>;
-  defaultInputValue: string;
-};
-
-type SpecificComponentProps = InlineProps &
+type SpecificComponentProps<T extends TypeaheadModel> = InlineProps &
   Omit<ReactDatePickerProps, 'onChange' | 'onSelect' | 'value' | 'selected'> &
   TitleProps &
   ListProps &
@@ -129,7 +103,7 @@ type SpecificComponentProps = InlineProps &
   ImageProps &
   SvgProps &
   ProgressBarProps &
-  TypeaheadProps;
+  Omit<AsyncTypeaheadProps<T>, 'id' | 'size' | 'onChange' | 'selected'>;
 
 type EventHandlerProps = {
   onBlur: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -142,7 +116,6 @@ type EventHandlerProps = {
   onInputChange: (value: string) => void;
   onMouseOver: (event: MouseEvent<HTMLFormElement>) => void;
   onPaste: (event: ClipboardEvent<HTMLFormElement>) => void;
-  onSearch: (search: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   onDragOver: (event: DragEvent<HTMLElement>) => void;
   onDrop: (event: DragEvent<HTMLElement>) => void;
@@ -245,8 +218,8 @@ type UIProps = {
   zIndex: UIProp<number>;
 };
 
-type BoxProps = Partial<
-  UIProps & GeneralProps & SpecificComponentProps & EventHandlerProps
+type BoxProps<T extends TypeaheadModel = any> = Partial<
+  UIProps & GeneralProps & SpecificComponentProps<T> & EventHandlerProps
 >;
 
 const remInPixels = 15;
@@ -341,7 +314,7 @@ const parseProperty =
       ])
       .sort(([valueA], [valueB]) => valueA - valueB);
 
-    return parsedBreakpoints.reduce((acc, [breakpoint, val], index) => {
+    return parsedBreakpoints.reduce((acc, [breakpoint, val]) => {
       if (!breakpoint || val === undefined) return acc;
       return css`
         ${wrapStatementWithBreakpoint(