diff --git a/src/hooks/api/authenticated-query.ts b/src/hooks/api/authenticated-query.ts index 66aeb6791..194482360 100644 --- a/src/hooks/api/authenticated-query.ts +++ b/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'; diff --git a/src/hooks/api/user.ts b/src/hooks/api/user.ts index 0713382cf..ead2c360c 100644 --- a/src/hooks/api/user.ts +++ b/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'; diff --git a/src/pages/PictureUploadBox.tsx b/src/pages/PictureUploadBox.tsx index 804dd268b..9832989ed 100644 --- a/src/pages/PictureUploadBox.tsx +++ b/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'; diff --git a/src/pages/VideoUploadBox.tsx b/src/pages/VideoUploadBox.tsx index f0db0b337..b6d4fcf93 100644 --- a/src/pages/VideoUploadBox.tsx +++ b/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'; diff --git a/src/pages/api/auth/[...auth0].api.ts b/src/pages/api/auth/[...auth0].api.ts index 2df9fd603..badcb5a8c 100644 --- a/src/pages/api/auth/[...auth0].api.ts +++ b/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'; diff --git a/src/pages/create/OfferForm.tsx b/src/pages/create/OfferForm.tsx index eec03c5c6..7600cfbe9 100644 --- a/src/pages/create/OfferForm.tsx +++ b/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'; diff --git a/src/pages/login/[language].page.tsx b/src/pages/login/[language].page.tsx index c4eb82731..1cc32ab4e 100644 --- a/src/pages/login/[language].page.tsx +++ b/src/pages/login/[language].page.tsx @@ -33,10 +33,10 @@ const 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 ( diff --git a/src/pages/organizers/create/steps/NameStep.tsx b/src/pages/organizers/create/steps/NameStep.tsx index 61d1fab4f..7990cd6ff 100644 --- a/src/pages/organizers/create/steps/NameStep.tsx +++ b/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 ( @@ -41,7 +41,7 @@ const NameStep = ({ name: (event.target as HTMLInputElement).value, }); }} - onBlur={(event: FormEvent) => { + onBlur={(event: FocusEvent) => { field.onChange({ ...field.value, name: (event.target as HTMLInputElement).value, diff --git a/src/pages/organizers/create/steps/UrlStep.tsx b/src/pages/organizers/create/steps/UrlStep.tsx index 89f611b73..8da79be27 100644 --- a/src/pages/organizers/create/steps/UrlStep.tsx +++ b/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( diff --git a/src/pages/steps/AdditionalInformationStep/BookingInfoStep.tsx b/src/pages/steps/AdditionalInformationStep/BookingInfoStep.tsx index 243f3891e..66ce46503 100644 --- a/src/pages/steps/AdditionalInformationStep/BookingInfoStep.tsx +++ b/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) => { diff --git a/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx b/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx index 9ea5fc944..272372cfc 100644 --- a/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx +++ b/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx @@ -109,7 +109,6 @@ function LabelsStep({ setLabels(uniq([...labels, label])); ref.current.clear(); }} - customFilter={() => true} /> } maxWidth={'100%'} diff --git a/src/pages/steps/AdditionalInformationStep/OrganizerPicker.tsx b/src/pages/steps/AdditionalInformationStep/OrganizerPicker.tsx index 1baed1b33..0ef244e7a 100644 --- a/src/pages/steps/AdditionalInformationStep/OrganizerPicker.tsx +++ b/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'; diff --git a/src/pages/steps/CalendarStep/CalendarOpeninghoursModal.tsx b/src/pages/steps/CalendarStep/CalendarOpeninghoursModal.tsx index dc6801961..507367661 100644 --- a/src/pages/steps/CalendarStep/CalendarOpeninghoursModal.tsx +++ b/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'; diff --git a/src/pages/steps/CalendarStep/useCalendarType.tsx b/src/pages/steps/CalendarStep/useCalendarType.tsx index dd4752fca..dd3940116 100644 --- a/src/pages/steps/CalendarStep/useCalendarType.tsx +++ b/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, diff --git a/src/pages/steps/LocationStep.tsx b/src/pages/steps/LocationStep.tsx index 01b19ee4a..d3b951ffd 100644 --- a/src/pages/steps/LocationStep.tsx +++ b/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, diff --git a/src/pages/steps/PlaceStep.tsx b/src/pages/steps/PlaceStep.tsx index 90abda507..801cd68b7 100644 --- a/src/pages/steps/PlaceStep.tsx +++ b/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) } diff --git a/src/pages/steps/ProductionStep.tsx b/src/pages/steps/ProductionStep.tsx index 9269c6ba0..ef89a150b 100644 --- a/src/pages/steps/ProductionStep.tsx +++ b/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, diff --git a/src/pages/steps/ScopeStep.tsx b/src/pages/steps/ScopeStep.tsx index 6ccbaad5b..a7d66a8c6 100644 --- a/src/pages/steps/ScopeStep.tsx +++ b/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'; diff --git a/src/pages/steps/Steps.tsx b/src/pages/steps/Steps.tsx index 79e592ebc..7c18191cc 100644 --- a/src/pages/steps/Steps.tsx +++ b/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'; diff --git a/src/pages/steps/TimeTableStep.tsx b/src/pages/steps/TimeTableStep.tsx index 12fff25d4..74a2d9c28 100644 --- a/src/pages/steps/TimeTableStep.tsx +++ b/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'; diff --git a/src/pages/steps/hooks/usePublishOffer.ts b/src/pages/steps/hooks/usePublishOffer.ts index 59eef2f35..e818a1bfe 100644 --- a/src/pages/steps/hooks/usePublishOffer.ts +++ b/src/pages/steps/hooks/usePublishOffer.ts @@ -1,4 +1,3 @@ -import { useMemo } from 'react'; import { useQueryClient } from 'react-query'; import { OfferTypes } from '@/constants/OfferType'; diff --git a/src/test/e2e/events/create-uitpas-event.spec.ts b/src/test/e2e/events/create-uitpas-event.spec.ts index 17f0966d2..252125503 100644 --- a/src/test/e2e/events/create-uitpas-event.spec.ts +++ b/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 = { diff --git a/src/ui/Alert.stories.mdx b/src/ui/Alert.stories.mdx index cca7d0b49..284a9d161 100644 --- a/src/ui/Alert.stories.mdx +++ b/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'; diff --git a/src/ui/Box.tsx b/src/ui/Box.tsx index 8a1a360dc..b46a03dff 100644 --- a/src/ui/Box.tsx +++ b/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 | string>, - props: Record, - ) => boolean); - newSelectionPrefix: string; - renderMenuItemChildren?: (option: unknown, { text }) => JSX.Element; - inputProps: HTMLProps; - defaultInputValue: string; -}; - -type SpecificComponentProps = InlineProps & +type SpecificComponentProps = InlineProps & Omit & TitleProps & ListProps & @@ -129,7 +103,7 @@ type SpecificComponentProps = InlineProps & ImageProps & SvgProps & ProgressBarProps & - TypeaheadProps; + Omit, 'id' | 'size' | 'onChange' | 'selected'>; type EventHandlerProps = { onBlur: (event: ChangeEvent) => void; @@ -142,7 +116,6 @@ type EventHandlerProps = { onInputChange: (value: string) => void; onMouseOver: (event: MouseEvent) => void; onPaste: (event: ClipboardEvent) => void; - onSearch: (search: string) => void; onSubmit: (event: FormEvent) => void; onDragOver: (event: DragEvent) => void; onDrop: (event: DragEvent) => void; @@ -245,8 +218,8 @@ type UIProps = { zIndex: UIProp; }; -type BoxProps = Partial< - UIProps & GeneralProps & SpecificComponentProps & EventHandlerProps +type BoxProps = Partial< + UIProps & GeneralProps & SpecificComponentProps & 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( diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx index 415e6a847..280295829 100644 --- a/src/ui/Button.tsx +++ b/src/ui/Button.tsx @@ -271,6 +271,7 @@ const Button = ({ :focus { outline: auto; } + :focus:not(:focus-visible) { outline: none; box-shadow: none; @@ -298,6 +299,7 @@ const Button = ({ :focus { outline: auto; } + :focus:not(:focus-visible) { outline: none; box-shadow: none; diff --git a/src/ui/DatePicker.tsx b/src/ui/DatePicker.tsx index 482eb3dd4..b5e6d4985 100644 --- a/src/ui/DatePicker.tsx +++ b/src/ui/DatePicker.tsx @@ -25,7 +25,7 @@ registerLocale('de', de); const getValue = getValueFromTheme('datePicker'); -type Props = Omit & { +type Props = Omit & { id: string; selected?: Date; minDate?: Date; diff --git a/src/ui/Input.tsx b/src/ui/Input.tsx index e7520b4d3..79e9d1d90 100644 --- a/src/ui/Input.tsx +++ b/src/ui/Input.tsx @@ -1,7 +1,6 @@ -import type { ChangeEvent } from 'react'; +import type { ChangeEvent, HTMLProps } from 'react'; import { forwardRef } from 'react'; import { Form } from 'react-bootstrap'; -import { css } from 'styled-components'; import type { BoxProps } from './Box'; import { Box, getBoxProps } from './Box'; @@ -38,19 +37,12 @@ type InputType = | 'url' | 'week'; -type InputProps = { - type?: InputType; - id?: string; - placeholder?: string; +type InputProps = HTMLProps & { value?: string; onChange?: (event: ChangeEvent) => void; - name?: string; - isInvalid?: boolean; - accept?: string; - disabled?: boolean; }; -type Props = Omit & InputProps; +type Props = Omit & InputProps; const Input = forwardRef( ( diff --git a/src/ui/Tabs.tsx b/src/ui/Tabs.tsx index 53f6434aa..17f534857 100644 --- a/src/ui/Tabs.tsx +++ b/src/ui/Tabs.tsx @@ -1,4 +1,4 @@ -import type { ReactNode, SyntheticEvent } from 'react'; +import type { ReactNode } from 'react'; import { Children } from 'react'; import { Tab as BootstrapTab, diff --git a/src/ui/TimeSpanPicker.tsx b/src/ui/TimeSpanPicker.tsx index 30b86d35d..857546c7a 100644 --- a/src/ui/TimeSpanPicker.tsx +++ b/src/ui/TimeSpanPicker.tsx @@ -1,4 +1,3 @@ -import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; @@ -51,6 +50,7 @@ const dropDownCss = css` input { text-align: center; } + .rbt-menu.dropdown-menu.show { min-width: 0; max-height: 300px !important; @@ -62,6 +62,7 @@ const dropDownCss = css` text-align: center; } } + .rbt-input-hint { display: none; } @@ -95,10 +96,9 @@ const TimeSpanPicker = ({ inputRequired={true} name="startTime" id={`${idPrefix}-start`} - customFilter={timeSlots} + filterBy={timeSlots} defaultInputValue={startTime} options={hourOptions} - labelKey={(option) => option} onBlur={(event) => onChangeStartTime(event.target.value)} onChange={([newValue]: string[]) => { if (!newValue) return; @@ -118,10 +118,9 @@ const TimeSpanPicker = ({ inputRequired={true} name="endTime" id={`${idPrefix}-end`} - customFilter={timeSlots} + filterBy={timeSlots} defaultInputValue={endTime} options={hourOptions} - labelKey={(option) => option} onBlur={(event) => onChangeEndTime(event.target.value)} onChange={([newValue]: string[]) => { if (!newValue) return; diff --git a/src/ui/Typeahead.tsx b/src/ui/Typeahead.tsx index 60b862998..40501ee4e 100644 --- a/src/ui/Typeahead.tsx +++ b/src/ui/Typeahead.tsx @@ -1,13 +1,15 @@ import 'react-bootstrap-typeahead/css/Typeahead.css'; -import type { ForwardedRef, ReactElement } from 'react'; +import type { ForwardedRef } from 'react'; import { forwardRef } from 'react'; +import type { TypeaheadModel } from 'react-bootstrap-typeahead'; import { AsyncTypeahead as BootstrapTypeahead } from 'react-bootstrap-typeahead'; import { useTranslation } from 'react-i18next'; +import { InputType } from '@/ui/Input'; + import type { BoxProps } from './Box'; import { Box, getBoxProps } from './Box'; -import { InputType } from './Input'; import { getGlobalBorderRadius, getGlobalFormInputHeight, @@ -26,185 +28,143 @@ const isNewEntry = (value: any): value is NewEntry => { return !!value?.customOption; }; -type TypeaheadProps = { - id?: string; - name?: string; - options: T[]; - labelKey: ((option: T) => string) | string; - renderMenuItemChildren?: (option: T, { text }) => JSX.Element; - disabled?: boolean; - placeholder?: string; - emptyLabel?: string; - minLength?: number; +type Props = BoxProps & { + isInvalid?: boolean; inputType?: InputType; inputRequired?: boolean; - customFilter?: (option: T, props?: Record) => boolean; - onChange?: (value: (T | NewEntry)[]) => void; - defaultInputValue?: string; - allowNew?: - | boolean - | (( - results: Array | string>, - props: Record, - ) => boolean); hideNewInputText?: boolean; - newSelectionPrefix?: string; - selected?: T[]; - positionFixed?: boolean; -}; - -type Props = Omit & - TypeaheadProps & { isInvalid?: boolean }; - -type TypeaheadFunc = (( - props: Props & { ref?: ForwardedRef }, -) => ReactElement) & { - displayName?: string; - defaultProps?: { [key: string]: unknown }; }; -const Typeahead: TypeaheadFunc = forwardRef( - ( - { - id, - name, - inputType, - inputRequired, - options, - labelKey, - renderMenuItemChildren, - disabled, - placeholder, - emptyLabel, - minLength, - className, - onInputChange, - defaultInputValue, - onBlur, - onFocus, - onSearch, - onChange, - isInvalid, - selected, - allowNew, - customFilter, - hideNewInputText, - newSelectionPrefix, - positionFixed, - isLoading, - ...props - }: Props, - ref: ForwardedRef, - ) => { - const { t } = useTranslation(); - - return ( - theme.colors.grey1}; - } - - .dropdown-item > .rbt-highlight-text { - display: initial; - } - - .rbt-menu-custom-option { - padding: 1rem 1.5rem; - } - - .dropdown-item.rbt-menu-custom-option > .rbt-highlight-text { - display: ${hideNewInputText ? 'none' : 'initial'}; - } +const TypeaheadInner = ( + { + id, + name, + inputType = 'text', + inputRequired, + options, + labelKey, + renderMenuItemChildren, + disabled = false, + placeholder, + emptyLabel, + minLength = 3, + className, + onInputChange, + defaultInputValue, + onBlur, + onFocus, + onSearch = async () => {}, + onChange, + isInvalid, + selected, + allowNew, + filterBy, + hideNewInputText, + newSelectionPrefix, + positionFixed, + isLoading, + ...props + }: Props, + ref: ForwardedRef, +) => { + const { t } = useTranslation(); + + return ( + theme.colors.grey1}; + } + + .dropdown-item > .rbt-highlight-text { + display: initial; + } + + .rbt-menu-custom-option { + padding: 1rem 1.5rem; + } + + .dropdown-item.rbt-menu-custom-option > .rbt-highlight-text { + display: ${hideNewInputText ? 'none' : 'initial'}; + } + + .dropdown-item.active, + .dropdown-item:active { + color: ${getValue('active.color')}; + background-color: ${getValue('active.backgroundColor')}; - .dropdown-item.active, - .dropdown-item:active { + .rbt-highlight-text { color: ${getValue('active.color')}; - background-color: ${getValue('active.backgroundColor')}; - - .rbt-highlight-text { - color: ${getValue('active.color')}; - } } + } - .dropdown-item.hover, - .dropdown-item:hover { - color: ${getValue('hover.color')}; - background-color: ${getValue('hover.backgroundColor')}; - - .rbt-highlight-text { - color: ${getValue('hover.color')}; - } - } + .dropdown-item.hover, + .dropdown-item:hover { + color: ${getValue('hover.color')}; + background-color: ${getValue('hover.backgroundColor')}; .rbt-highlight-text { - font-weight: ${getValue('highlight.fontWeight')}; - background-color: ${getValue('highlight.backgroundColor')}; + color: ${getValue('hover.color')}; } - `} - onSearch={onSearch} - onInputChange={onInputChange} - onChange={onChange} - placeholder={placeholder} - emptyLabel={emptyLabel ?? t('typeahead.no_results')} - searchText={t('typeahead.search_text')} - minLength={minLength} - delay={275} - highlightOnlyResult={!allowNew} - isInvalid={isInvalid} - selected={selected} - defaultInputValue={defaultInputValue} - onBlur={onBlur} - onFocus={onFocus} - positionFixed={positionFixed} - inputProps={{ - id, - type: inputType, - required: inputRequired, - }} - {...(customFilter && { filterBy: customFilter })} - {...getBoxProps(props)} - /> - ); - }, -); - -Typeahead.displayName = 'Typeahead'; - -const typeaheadDefaultProps = { - labelKey: (item) => item, - onSearch: async () => {}, - disabled: false, - minLength: 3, - inputType: 'text', + } + + .rbt-highlight-text { + font-weight: ${getValue('highlight.fontWeight')}; + background-color: ${getValue('highlight.backgroundColor')}; + } + `} + onSearch={onSearch} + onInputChange={onInputChange} + onChange={onChange} + placeholder={placeholder} + emptyLabel={emptyLabel ?? t('typeahead.no_results')} + searchText={t('typeahead.search_text')} + minLength={minLength} + delay={275} + highlightOnlyResult={!allowNew} + isInvalid={isInvalid} + selected={selected} + defaultInputValue={defaultInputValue} + onBlur={onBlur} + onFocus={onFocus} + positionFixed={positionFixed} + inputProps={{ + id, + type: inputType, + required: inputRequired, + }} + filterBy={filterBy ?? (() => true)} + {...getBoxProps(props)} + /> + ); }; -Typeahead.defaultProps = { - ...typeaheadDefaultProps, -}; +const Typeahead = forwardRef(TypeaheadInner) as ( + props: Props & { ref?: ForwardedRef }, +) => ReturnType>; -export type { NewEntry, TypeaheadProps }; -export { isNewEntry, Typeahead, typeaheadDefaultProps }; +export type { NewEntry }; +export { isNewEntry, Typeahead }; diff --git a/src/utils/getApplicationServerSideProps.js b/src/utils/getApplicationServerSideProps.js index 26e1be804..e51cdd33c 100644 --- a/src/utils/getApplicationServerSideProps.js +++ b/src/utils/getApplicationServerSideProps.js @@ -5,13 +5,12 @@ import { QueryClient } from 'react-query'; import { generatePath, matchPath } from 'react-router'; import UniversalCookies from 'universal-cookie'; -import { useGetUserQuery, useGetUserQueryServerSide } from '@/hooks/api/user'; +import { useGetUserQueryServerSide } from '@/hooks/api/user'; import { defaultCookieOptions } from '@/hooks/useCookiesWithOptions'; import { isFeatureFlagEnabledInCookies } from '@/hooks/useFeatureFlag'; import { getRedirects } from '../redirects'; import { FetchError } from './fetchFromApi'; -import { isTokenValid } from './isTokenValid'; class Cookies extends UniversalCookies { toString() {