diff --git a/apps/web/components/availability/Schedule.tsx b/apps/web/components/availability/Schedule.tsx index 1369f4809c..b910d72cfd 100644 --- a/apps/web/components/availability/Schedule.tsx +++ b/apps/web/components/availability/Schedule.tsx @@ -62,7 +62,8 @@ const useOptions = () => { const filter = useCallback( ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => { if (current) { - setFilteredOptions([options.find((option) => option.value === dayjs(current).toDate().valueOf())!]); + const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf()); + if (currentOption) setFilteredOptions([currentOption]); } else setFilteredOptions( options.filter((option) => { diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx index d8eede0680..b0b777e9f7 100644 --- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx +++ b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx @@ -35,7 +35,7 @@ const CustomInputTypeForm: FC = (props) => { defaultValues, }); const selectedInputType = useWatch({ name: "type", control }); - const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value)!; + const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value); const onCancel = () => { props.onCancel(); diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx index 0580eac550..4983bd233e 100644 --- a/apps/web/components/team/MemberChangeRoleModal.tsx +++ b/apps/web/components/team/MemberChangeRoleModal.tsx @@ -1,6 +1,5 @@ import { MembershipRole } from "@prisma/client"; -import { useState } from "react"; -import React, { SyntheticEvent, useEffect } from "react"; +import { SyntheticEvent, useMemo, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; @@ -11,12 +10,10 @@ import ModalContainer from "@components/ui/ModalContainer"; import Select from "@components/ui/form/Select"; type MembershipRoleOption = { + label: string; value: MembershipRole; - label?: string; }; -const options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }]; - export default function MemberChangeRoleModal(props: { isOpen: boolean; currentMember: MembershipRole; @@ -25,18 +22,32 @@ export default function MemberChangeRoleModal(props: { initialRole: MembershipRole; onExit: () => void; }) { - useEffect(() => { - options.forEach((option, i) => { - options[i].label = t(option.value.toLowerCase()); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + const { t } = useLocale(); - const [role, setRole] = useState( - options.find((option) => option.value === props.initialRole || MembershipRole.MEMBER)! + const options = useMemo(() => { + return [ + { + label: t("member"), + value: MembershipRole.MEMBER, + }, + { + label: t("admin"), + value: MembershipRole.ADMIN, + }, + { + label: t("owner"), + value: MembershipRole.OWNER, + }, + ].filter(({ value }) => value !== MembershipRole.OWNER || props.currentMember === MembershipRole.OWNER); + }, [t, props.currentMember]); + + const [role, setRole] = useState( + options.find((option) => option.value === props.initialRole) || { + label: t("member"), + value: MembershipRole.MEMBER, + } ); const [errorMessage, setErrorMessage] = useState(""); - const { t } = useLocale(); const utils = trpc.useContext(); const changeRoleMutation = trpc.useMutation("viewer.teams.changeMemberRole", { @@ -76,7 +87,7 @@ export default function MemberChangeRoleModal(props: { {/* - needs dialog to confirm change of ownership */}