Refactors useLocale (#908)

* Removes unused component

* Refactors useLocale

We don't need to pass the locale prop everywhere

* Fixes syntax error

* Adds warning for missing localeProps

* Simplify i18n utils

* Update components/I18nLanguageHandler.tsx

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>

* Type fixes

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>
This commit is contained in:
Omar López 2021-10-12 07:11:33 -06:00 committed by GitHub
parent 7dd6fdde7a
commit cfd70172f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 366 additions and 440 deletions

View file

@ -1,22 +0,0 @@
import Link from "next/link";
import { useRouter } from "next/router";
import React, { Children } from "react";
const ActiveLink = ({ children, activeClassName, ...props }) => {
const { asPath } = useRouter();
const child = Children.only(children);
const childClassName = child.props.className || "";
const className =
asPath === props.href || asPath === props.as
? `${childClassName} ${activeClassName}`.trim()
: childClassName;
return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
};
ActiveLink.defaultProps = {
activeClassName: "active",
} as Partial<Props>;
export default ActiveLink;

View file

@ -0,0 +1,22 @@
import { useTranslation } from "next-i18next";
import { useRouter } from "next/router";
interface Props {
localeProp: string;
}
const I18nLanguageHandler = ({ localeProp }: Props): null => {
const { i18n } = useTranslation("common");
const router = useRouter();
const { pathname } = router;
if (!localeProp)
console.warn(
`You may forgot to return 'localeProp' from 'getServerSideProps' or 'getStaticProps' in ${pathname}`
);
if (i18n.language !== localeProp) {
i18n.changeLanguage(localeProp);
}
return null;
};
export default I18nLanguageHandler;

View file

@ -11,7 +11,6 @@ import { useSlots } from "@lib/hooks/useSlots";
import Loader from "@components/Loader";
type AvailableTimesProps = {
localeProp: string;
workingHours: {
days: number[];
startTime: number;
@ -29,7 +28,6 @@ type AvailableTimesProps = {
};
const AvailableTimes: FC<AvailableTimesProps> = ({
localeProp,
date,
eventLength,
eventTypeId,
@ -39,7 +37,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
users,
schedulingType,
}) => {
const { t } = useLocale({ localeProp: localeProp });
const { t } = useLocale();
const router = useRouter();
const { rescheduleUid } = router.query;
@ -68,7 +66,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
{!loading &&
slots?.length > 0 &&
slots.map((slot) => {
const bookingUrl = {
type BookingURL = {
pathname: string;
query: Record<string, string | number | string[] | undefined>;
};
const bookingUrl: BookingURL = {
pathname: "book",
query: {
...router.query,
@ -78,7 +80,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
};
if (rescheduleUid) {
bookingUrl.query.rescheduleUid = rescheduleUid;
bookingUrl.query.rescheduleUid = rescheduleUid as string;
}
if (schedulingType === SchedulingType.ROUND_ROBIN) {

View file

@ -6,7 +6,7 @@ import { useMutation } from "react-query";
import { HttpError } from "@lib/core/http/error";
import { inferQueryOutput, trpc } from "@lib/trpc";
import TableActions from "@components/ui/TableActions";
import TableActions, { ActionType } from "@components/ui/TableActions";
type BookingItem = inferQueryOutput<"viewer.bookings">[number];
@ -34,7 +34,7 @@ function BookingListItem(booking: BookingItem) {
const isUpcoming = new Date(booking.endTime) >= new Date();
const isCancelled = booking.status === BookingStatus.CANCELLED;
const pendingActions = [
const pendingActions: ActionType[] = [
{
id: "reject",
label: "Reject",
@ -52,7 +52,7 @@ function BookingListItem(booking: BookingItem) {
},
];
const bookedActions = [
const bookedActions: ActionType[] = [
{
id: "cancel",
label: "Cancel",

View file

@ -14,7 +14,6 @@ dayjs.extend(utc);
dayjs.extend(timezone);
const DatePicker = ({
localeProp,
weekStart,
onDatePicked,
workingHours,
@ -28,7 +27,7 @@ const DatePicker = ({
periodCountCalendarDays,
minimumBookingNotice,
}) => {
const { t } = useLocale({ localeProp: localeProp });
const { t } = useLocale();
const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]);
const [selectedMonth, setSelectedMonth] = useState<number | null>(

View file

@ -9,7 +9,6 @@ import { useLocale } from "@lib/hooks/useLocale";
import { is24h, timeZone } from "../../lib/clock";
type Props = {
localeProp: string;
onSelectTimeZone: (selectedTimeZone: string) => void;
onToggle24hClock: (is24hClock: boolean) => void;
};
@ -17,7 +16,7 @@ type Props = {
const TimeOptions: FC<Props> = (props) => {
const [selectedTimeZone, setSelectedTimeZone] = useState("");
const [is24hClock, setIs24hClock] = useState(false);
const { t } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
useEffect(() => {
setIs24hClock(is24h());

View file

@ -30,11 +30,11 @@ dayjs.extend(customParseFormat);
type Props = AvailabilityTeamPageProps | AvailabilityPageProps;
const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Props) => {
const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
const router = useRouter();
const { rescheduleUid } = router.query;
const { isReady } = useTheme(profile.theme);
const { t, locale } = useLocale({ localeProp });
const { t } = useLocale();
const selectedDate = useMemo(() => {
const dateString = asStringOrNull(router.query.date);
@ -188,7 +188,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
<p className="mt-3 mb-8 text-gray-600 dark:text-gray-200">{eventType.description}</p>
</div>
<DatePicker
localeProp={locale}
date={selectedDate}
periodType={eventType?.periodType}
periodStartDate={eventType?.periodStartDate}
@ -208,7 +207,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
{selectedDate && (
<AvailableTimes
localeProp={locale}
workingHours={workingHours}
timeFormat={timeFormat}
minimumBookingNotice={eventType.minimumBookingNotice}
@ -241,11 +239,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours, localeProp }: Prop
)}
</Collapsible.Trigger>
<Collapsible.Content>
<TimeOptions
localeProp={locale}
onSelectTimeZone={handleSelectTimeZone}
onToggle24hClock={handleToggle24hClock}
/>
<TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
</Collapsible.Content>
</Collapsible.Root>
);

View file

@ -13,8 +13,6 @@ import { stringify } from "querystring";
import { useCallback, useEffect, useState } from "react";
import { FormattedNumber, IntlProvider } from "react-intl";
import { ReactMultiEmail } from "react-multi-email";
import PhoneInput from "react-phone-number-input";
import "react-phone-number-input/style.css";
import { createPaymentLink } from "@ee/lib/stripe/client";
@ -30,6 +28,7 @@ import { BookingCreateBody } from "@lib/types/booking";
import AvatarGroup from "@components/ui/AvatarGroup";
import { Button } from "@components/ui/Button";
import PhoneInput from "@components/ui/form/PhoneInput";
import { BookPageProps } from "../../../pages/[user]/book";
import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
@ -37,7 +36,7 @@ import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
type BookingPageProps = BookPageProps | TeamBookingPageProps;
const BookingPage = (props: BookingPageProps) => {
const { t } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const router = useRouter();
const { rescheduleUid } = router.query;
const { isReady } = useTheme(props.profile.theme);
@ -319,16 +318,7 @@ const BookingPage = (props: BookingPageProps) => {
{t("phone_number")}
</label>
<div className="mt-1">
<PhoneInput
name="phone"
placeholder={t("enter_phone_number")}
id="phone"
required
className="block w-full border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-gray-900 focus:ring-black focus:border-black sm:text-sm"
onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
}}
/>
<PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
</div>
</div>
)}

View file

@ -9,7 +9,6 @@ import { DialogClose, DialogContent } from "@components/Dialog";
import { Button } from "@components/ui/Button";
export type ConfirmationDialogContentProps = {
localeProp: string;
confirmBtnText?: string;
cancelBtnText?: string;
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@ -18,7 +17,7 @@ export type ConfirmationDialogContentProps = {
};
export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
const { t } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const {
title,
variety,

View file

@ -21,13 +21,12 @@ const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
export type EventTypeDescriptionProps = {
localeProp: string;
eventType: EventType;
className?: string;
};
export const EventTypeDescription = ({ localeProp, eventType, className }: EventTypeDescriptionProps) => {
const { t } = useLocale({ localeProp });
export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
const { t } = useLocale();
return (
<>

View file

@ -0,0 +1,183 @@
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon, ExternalLinkIcon, LinkIcon } from "@heroicons/react/solid";
import Link from "next/link";
import React, { Fragment } from "react";
import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale";
import showToast from "@lib/notification";
import { Tooltip } from "@components/Tooltip";
import EventTypeDescription from "@components/eventtype/EventTypeDescription";
import AvatarGroup from "@components/ui/AvatarGroup";
interface Props {
profile: { slug: string };
readOnly: boolean;
types: {
$disabled: boolean;
hidden: boolean;
id: number;
slug: string;
title: string;
users: {
name: string;
avatar: string;
}[];
};
}
const EventTypeList = ({ readOnly, types, profile }: Props): JSX.Element => {
const { t } = useLocale();
return (
<div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
<ul className="divide-y divide-neutral-200" data-testid="event-types">
{types.map((type) => (
<li
key={type.id}
className={classNames(
type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
)}
data-disabled={type.$disabled ? 1 : 0}>
<div
className={classNames(
"hover:bg-neutral-50 flex justify-between items-center ",
type.$disabled && "pointer-events-none"
)}>
<div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
<Link href={"/event-types/" + type.id}>
<a className="flex-grow text-sm truncate">
<div>
<span className="font-medium truncate text-neutral-900">{type.title}</span>
{type.hidden && (
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
{t("hidden")}
</span>
)}
{readOnly && (
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-gray-100 text-gray-800">
{t("readonly")}
</span>
)}
</div>
<EventTypeDescription eventType={type} />
</a>
</Link>
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
<div className="flex items-center space-x-2 overflow-hidden">
{type.users?.length > 1 && (
<AvatarGroup
size={8}
truncateAfter={4}
items={type.users.map((organizer) => ({
alt: organizer.name || "",
image: organizer.avatar || "",
}))}
/>
)}
<Tooltip content="Preview">
<a
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank"
rel="noreferrer"
className="btn-icon">
<ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
</a>
</Tooltip>
<Tooltip content="Copy link">
<button
onClick={() => {
showToast("Link copied!", "success");
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
);
}}
className="btn-icon">
<LinkIcon className="w-5 h-5 group-hover:text-black" />
</button>
</Tooltip>
</div>
</div>
</div>
<div className="flex flex-shrink-0 mr-5 sm:hidden">
<Menu as="div" className="inline-block text-left">
{({ open }) => (
<>
<div>
<Menu.Button className="p-2 mt-1 border border-transparent text-neutral-400 hover:border-gray-200">
<span className="sr-only">{t("open_options")}</span>
<DotsHorizontalIcon className="w-5 h-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
className="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none divide-neutral-100">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank"
rel="noreferrer"
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<ExternalLinkIcon
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("preview")}
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
onClick={() => {
showToast("Link copied!", "success");
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
);
}}
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<LinkIcon
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("copy_link")}
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</div>
</div>
</li>
))}
</ul>
</div>
);
};
export default EventTypeList;

View file

@ -0,0 +1,58 @@
// TODO: replace headlessui with radix-ui
import { UsersIcon } from "@heroicons/react/solid";
import Link from "next/link";
import React from "react";
import Avatar from "@components/ui/Avatar";
import Badge from "@components/ui/Badge";
interface Props {
profile: {
slug?: string | null;
name?: string | null;
image?: string | null;
};
membershipCount: number;
}
const EventTypeListHeading = ({ profile, membershipCount }: Props): JSX.Element => (
<div className="flex mb-4">
<Link href="/settings/teams">
<a>
<Avatar
alt={profile?.name || ""}
imageSrc={profile?.image || undefined}
size={8}
className="inline mt-1 mr-2"
/>
</a>
</Link>
<div>
<Link href="/settings/teams">
<a className="font-bold">{profile?.name || ""}</a>
</Link>
{membershipCount && (
<span className="relative ml-2 text-xs text-neutral-500 -top-px">
<Link href="/settings/teams">
<a>
<Badge variant="gray">
<UsersIcon className="inline w-3 h-3 mr-1 -mt-px" />
{membershipCount}
</Badge>
</a>
</Link>
</span>
)}
{profile?.slug && (
<Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}`}>
<a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_APP_URL?.replace(
"https://",
""
)}/${profile.slug}`}</a>
</Link>
)}
</div>
</div>
);
export default EventTypeListHeading;

View file

@ -5,13 +5,13 @@ import { useLocale } from "@lib/hooks/useLocale";
import Modal from "@components/Modal";
const ChangePasswordSection = ({ localeProp }: { localeProp: string }) => {
const ChangePasswordSection = () => {
const [oldPassword, setOldPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [successModalOpen, setSuccessModalOpen] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const { t } = useLocale({ localeProp });
const { t } = useLocale();
const errorMessages: { [key: string]: string } = {
[ErrorCode.IncorrectPassword]: t("current_incorrect_password"),

View file

@ -10,23 +10,17 @@ import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
import TwoFactorModalHeader from "./TwoFactorModalHeader";
interface DisableTwoFactorAuthModalProps {
/**
* Called when the user closes the modal without disabling two-factor auth
*/
/** Called when the user closes the modal without disabling two-factor auth */
onCancel: () => void;
/**
* Called when the user disables two-factor auth
*/
/** Called when the user disables two-factor auth */
onDisable: () => void;
localeProp: string;
}
const DisableTwoFactorAuthModal = ({ onDisable, onCancel, localeProp }: DisableTwoFactorAuthModalProps) => {
const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => {
const [password, setPassword] = useState("");
const [isDisabling, setIsDisabling] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const { t } = useLocale({ localeProp });
const { t } = useLocale();
async function handleDisable(e: SyntheticEvent) {
e.preventDefault();

View file

@ -19,7 +19,6 @@ interface EnableTwoFactorModalProps {
* Called when the user enables two-factor auth
*/
onEnable: () => void;
localeProp: string;
}
enum SetupStep {
@ -47,7 +46,7 @@ const WithStep = ({
return step === current ? children : null;
};
const EnableTwoFactorModal = ({ onEnable, onCancel, localeProp }: EnableTwoFactorModalProps) => {
const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
const [step, setStep] = useState(SetupStep.ConfirmPassword);
const [password, setPassword] = useState("");
const [totpCode, setTotpCode] = useState("");
@ -55,7 +54,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, localeProp }: EnableTwoFacto
const [secret, setSecret] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const { t } = useLocale({ localeProp });
const { t } = useLocale();
async function handleSetup(e: SyntheticEvent) {
e.preventDefault();

View file

@ -8,17 +8,11 @@ import Button from "@components/ui/Button";
import DisableTwoFactorModal from "./DisableTwoFactorModal";
import EnableTwoFactorModal from "./EnableTwoFactorModal";
const TwoFactorAuthSection = ({
twoFactorEnabled,
localeProp,
}: {
twoFactorEnabled: boolean;
localeProp: string;
}) => {
const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
const [enabled, setEnabled] = useState(twoFactorEnabled);
const [enableModalOpen, setEnableModalOpen] = useState(false);
const [disableModalOpen, setDisableModalOpen] = useState(false);
const { t, locale } = useLocale({ localeProp });
const { t } = useLocale();
return (
<>
@ -39,7 +33,6 @@ const TwoFactorAuthSection = ({
{enableModalOpen && (
<EnableTwoFactorModal
localeProp={locale}
onEnable={() => {
setEnabled(true);
setEnableModalOpen(false);
@ -50,7 +43,6 @@ const TwoFactorAuthSection = ({
{disableModalOpen && (
<DisableTwoFactorModal
localeProp={locale}
onDisable={() => {
setEnabled(false);
setDisableModalOpen(false);

View file

@ -17,11 +17,7 @@ import ErrorAlert from "@components/ui/alerts/Error";
import MemberList from "./MemberList";
export default function EditTeam(props: {
localeProp: string;
team: Team | undefined | null;
onCloseEdit: () => void;
}) {
export default function EditTeam(props: { team: Team | undefined | null; onCloseEdit: () => void }) {
const [members, setMembers] = useState([]);
const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
@ -35,7 +31,7 @@ export default function EditTeam(props: {
const [inviteModalTeam, setInviteModalTeam] = useState<Team | null | undefined>();
const [errorMessage, setErrorMessage] = useState("");
const [imageSrc, setImageSrc] = useState<string>("");
const { t, locale } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const loadMembers = () =>
fetch("/api/teams/" + props.team?.id + "/membership")
@ -235,12 +231,7 @@ export default function EditTeam(props: {
</div>
<div>
{!!members.length && (
<MemberList
localeProp={locale}
members={members}
onRemoveMember={onRemoveMember}
onChange={loadMembers}
/>
<MemberList members={members} onRemoveMember={onRemoveMember} onChange={loadMembers} />
)}
<hr className="mt-6" />
</div>
@ -278,7 +269,6 @@ export default function EditTeam(props: {
{t("disband_team")}
</DialogTrigger>
<ConfirmationDialogContent
localeProp={locale}
variety="danger"
title={t("disband_team")}
confirmBtnText={t("confirm_disband_team")}
@ -305,11 +295,7 @@ export default function EditTeam(props: {
handleClose={closeSuccessModal}
/>
{showMemberInvitationModal && (
<MemberInvitationModal
localeProp={locale}
team={inviteModalTeam}
onExit={onMemberInvitationModalExit}
/>
<MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} />
)}
</div>
</div>

View file

@ -6,13 +6,9 @@ import { Team } from "@lib/team";
import Button from "@components/ui/Button";
export default function MemberInvitationModal(props: {
localeProp: string;
team: Team | undefined | null;
onExit: () => void;
}) {
export default function MemberInvitationModal(props: { team: Team | undefined | null; onExit: () => void }) {
const [errorMessage, setErrorMessage] = useState("");
const { t } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const handleError = async (res: Response) => {
const responseData = await res.json();

View file

@ -1,16 +1,12 @@
import { useLocale } from "@lib/hooks/useLocale";
import { Member } from "@lib/member";
import MemberListItem from "./MemberListItem";
export default function MemberList(props: {
localeProp: string;
members: Member[];
onRemoveMember: (text: Member) => void;
onChange: (text: string) => void;
}) {
const { locale } = useLocale({ localeProp: props.localeProp });
const selectAction = (action: string, member: Member) => {
switch (action) {
case "remove":
@ -24,7 +20,6 @@ export default function MemberList(props: {
<ul className="px-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
{props.members.map((member) => (
<MemberListItem
localeProp={locale}
onChange={props.onChange}
key={member.id}
member={member}

View file

@ -12,13 +12,12 @@ import Button from "@components/ui/Button";
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/Dropdown";
export default function MemberListItem(props: {
localeProp: string;
member: Member;
onActionSelect: (text: string) => void;
onChange: (text: string) => void;
}) {
const [member] = useState(props.member);
const { t, locale } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
return (
member && (
@ -80,7 +79,6 @@ export default function MemberListItem(props: {
</Button>
</DialogTrigger>
<ConfirmationDialogContent
localeProp={locale}
variety="danger"
title={t("remove_member")}
confirmBtnText={t("confirm_remove_member")}

View file

@ -1,16 +1,12 @@
import { useLocale } from "@lib/hooks/useLocale";
import { Team } from "@lib/team";
import TeamListItem from "./TeamListItem";
export default function TeamList(props: {
localeProp: string;
teams: Team[];
onChange: () => void;
onEditTeam: (text: Team) => void;
}) {
const { locale } = useLocale({ localeProp: props.localeProp });
const selectAction = (action: string, team: Team) => {
switch (action) {
case "edit":
@ -34,7 +30,6 @@ export default function TeamList(props: {
<ul className="px-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
{props.teams.map((team: Team) => (
<TeamListItem
localeProp={locale}
onChange={props.onChange}
key={team.id}
team={team}

View file

@ -31,14 +31,13 @@ interface Team {
}
export default function TeamListItem(props: {
localeProp: string;
onChange: () => void;
key: number;
team: Team;
onActionSelect: (text: string) => void;
}) {
const [team, setTeam] = useState<Team | null>(props.team);
const { t, locale } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const acceptInvite = () => invitationResponse(true);
const declineInvite = () => invitationResponse(false);
@ -155,7 +154,6 @@ export default function TeamListItem(props: {
</Button>
</DialogTrigger>
<ConfirmationDialogContent
localeProp={locale}
variety="danger"
title="Disband Team"
confirmBtnText={t("confirm_disband_team")}

View file

@ -10,8 +10,8 @@ import Avatar from "@components/ui/Avatar";
import Button from "@components/ui/Button";
import Text from "@components/ui/Text";
const Team = ({ team, localeProp }) => {
const { t } = useLocale({ localeProp: localeProp });
const Team = ({ team }) => {
const { t } = useLocale();
const Member = ({ member }) => {
const classes = classnames(

View file

@ -7,7 +7,7 @@ import { SVGComponent } from "@lib/types/SVGComponent";
import Button from "./Button";
type ActionType = {
export type ActionType = {
id: string;
icon: SVGComponent;
label: string;

View file

@ -4,7 +4,7 @@ import "react-phone-number-input/style.css";
import classNames from "@lib/classNames";
export const PhoneInput = (props) => (
export const PhoneInput = (props: any /* FIXME */) => (
<BasePhoneInput
{...props}
className={classNames(

View file

@ -15,7 +15,7 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise<string> => {
const session = await getSession({ req });
const preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
const preferredLocale = getLocaleFromHeaders(req);
if (session?.user?.id) {
const user = await prisma.user.findUnique({
@ -31,32 +31,17 @@ export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promi
return user.locale;
}
if (preferredLocale) {
await prisma.user.update({
where: {
id: session.user.id,
},
data: {
locale: preferredLocale,
},
});
} else {
await prisma.user.update({
where: {
id: session.user.id,
},
data: {
locale: i18n.defaultLocale,
},
});
}
await prisma.user.update({
where: {
id: session.user.id,
},
data: {
locale: preferredLocale,
},
});
}
if (preferredLocale) {
return preferredLocale;
}
return i18n.defaultLocale;
return preferredLocale;
};
interface localeType {

View file

@ -1,19 +1,10 @@
import { useTranslation } from "next-i18next";
type LocaleProp = {
localeProp: string;
};
export const useLocale = (props: LocaleProp) => {
export const useLocale = () => {
const { i18n, t } = useTranslation("common");
if (i18n.language !== props.localeProp) {
i18n.changeLanguage(props.localeProp);
}
return {
i18n,
locale: props.localeProp,
t,
};
};

View file

@ -16,8 +16,8 @@ import Avatar from "@components/ui/Avatar";
export default function User(props: inferSSRProps<typeof getServerSideProps>) {
const { isReady } = useTheme(props.user.theme);
const { user, localeProp, eventTypes } = props;
const { t, locale } = useLocale({ localeProp });
const { user, eventTypes } = props;
const { t } = useLocale();
return (
<>
@ -50,7 +50,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
<Link href={`/${user.username}/${type.slug}`}>
<a className="block px-6 py-4">
<h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
<EventTypeDescription localeProp={locale} eventType={type} />
<EventTypeDescription eventType={type} />
</a>
</Link>
</div>

View file

@ -11,6 +11,8 @@ import superjson from "superjson";
import AppProviders from "@lib/app-providers";
import { seoConfig } from "@lib/config/next-seo.config";
import I18nLanguageHandler from "@components/I18nLanguageHandler";
import type { AppRouter } from "@server/routers/_app";
import "../styles/globals.css";
@ -26,6 +28,7 @@ function MyApp(props: AppProps) {
return (
<AppProviders {...props}>
<DefaultSeo {...seoConfig.defaultNextSeo} />
<I18nLanguageHandler localeProp={pageProps.localeProp} />
<Component {...pageProps} err={err} />
</AppProviders>
);

View file

@ -85,7 +85,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
const { eventType, locationOptions, availability, team, teamMembers, hasPaymentIntegration, currency } =
props;
const { t, locale } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const router = useRouter();
const [successModalOpen, setSuccessModalOpen] = useState(false);
@ -992,7 +992,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{t("delete")}
</DialogTrigger>
<ConfirmationDialogContent
localeProp={locale}
variety="danger"
title={t("delete_event_type")}
confirmBtnText={t("confirm_delete_event_type")}

View file

@ -1,28 +1,18 @@
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import {
ChevronDownIcon,
DotsHorizontalIcon,
ExternalLinkIcon,
LinkIcon,
PlusIcon,
UsersIcon,
} from "@heroicons/react/solid";
import { SchedulingType, Prisma } from "@prisma/client";
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
import { Prisma, SchedulingType } from "@prisma/client";
import { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useRef } from "react";
import { useMutation } from "react-query";
import { asStringOrNull } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import classNames from "@lib/classNames";
import { HttpError } from "@lib/core/http/error";
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
import { shouldShowOnboarding, ONBOARDING_NEXT_REDIRECT } from "@lib/getting-started";
import { ONBOARDING_NEXT_REDIRECT, shouldShowOnboarding } from "@lib/getting-started";
import { useLocale } from "@lib/hooks/useLocale";
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
import createEventType from "@lib/mutations/event-types/create-event-type";
@ -32,12 +22,10 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
import { Dialog, DialogClose, DialogContent } from "@components/Dialog";
import Shell from "@components/Shell";
import { Tooltip } from "@components/Tooltip";
import EventTypeDescription from "@components/eventtype/EventTypeDescription";
import EventTypeList from "@components/eventtype/EventTypeList";
import EventTypeListHeading from "@components/eventtype/EventTypeListHeading";
import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup";
import Badge from "@components/ui/Badge";
import { Button } from "@components/ui/Button";
import Dropdown, {
DropdownMenuContent,
@ -50,12 +38,10 @@ import * as RadioArea from "@components/ui/form/radio-area";
import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration";
type PageProps = inferSSRProps<typeof getServerSideProps>;
type EventType = PageProps["eventTypes"][number];
type Profile = PageProps["profiles"][number];
type MembershipCount = EventType["metadata"]["membershipCount"];
const EventTypesPage = (props: PageProps) => {
const { t, locale } = useLocale({ localeProp: props.localeProp });
const { t } = useLocale();
const CreateFirstEventTypeView = () => (
<div className="md:py-20">
@ -63,218 +49,11 @@ const EventTypesPage = (props: PageProps) => {
<div className="block mx-auto text-center md:max-w-screen-sm">
<h3 className="mt-2 text-xl font-bold text-neutral-900">{t("new_event_type_heading")}</h3>
<p className="mt-1 mb-2 text-md text-neutral-600">{t("new_event_type_description")}</p>
<CreateNewEventDialog
localeProp={locale}
canAddEvents={props.canAddEvents}
profiles={props.profiles}
/>
<CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} />
</div>
</div>
);
const EventTypeListHeading = ({
profile,
membershipCount,
}: {
profile?: Profile;
membershipCount: MembershipCount;
}) => (
<div className="flex mb-4">
<Link href="/settings/teams">
<a>
<Avatar
displayName={profile?.name || ""}
imageSrc={profile?.image || undefined}
size={8}
className="inline mt-1 mr-2"
/>
</a>
</Link>
<div>
<Link href="/settings/teams">
<a className="font-bold">{profile?.name || ""}</a>
</Link>
{membershipCount && (
<span className="relative ml-2 text-xs text-neutral-500 -top-px">
<Link href="/settings/teams">
<a>
<Badge variant="gray">
<UsersIcon className="inline w-3 h-3 mr-1 -mt-px" />
{membershipCount}
</Badge>
</a>
</Link>
</span>
)}
{profile?.slug && (
<Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}`}>
<a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_APP_URL?.replace(
"https://",
""
)}/${profile.slug}`}</a>
</Link>
)}
</div>
</div>
);
const EventTypeList = ({
readOnly,
types,
profile,
}: {
profile: PageProps["profiles"][number];
readOnly: boolean;
types: EventType["eventTypes"];
}) => (
<div className="mb-16 -mx-4 overflow-hidden bg-white border border-gray-200 rounded-sm sm:mx-0">
<ul className="divide-y divide-neutral-200" data-testid="event-types">
{types.map((type) => (
<li
key={type.id}
className={classNames(
type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
)}
data-disabled={type.$disabled ? 1 : 0}>
<div
className={classNames(
"hover:bg-neutral-50 flex justify-between items-center ",
type.$disabled && "pointer-events-none"
)}>
<div className="flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
<Link href={"/event-types/" + type.id}>
<a className="flex-grow text-sm truncate">
<div>
<span className="font-medium truncate text-neutral-900">{type.title}</span>
{type.hidden && (
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
{t("hidden")}
</span>
)}
{readOnly && (
<span className="ml-2 inline items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-gray-100 text-gray-800">
{t("readonly")}
</span>
)}
</div>
<EventTypeDescription localeProp={locale} eventType={type} />
</a>
</Link>
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
<div className="flex items-center space-x-2 overflow-hidden">
{type.users?.length > 1 && (
<AvatarGroup
size={8}
truncateAfter={4}
items={type.users.map((organizer) => ({
alt: organizer.name || "",
image: organizer.avatar || "",
}))}
/>
)}
<Tooltip content="Preview">
<a
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank"
rel="noreferrer"
className="btn-icon">
<ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
</a>
</Tooltip>
<Tooltip content="Copy link">
<button
onClick={() => {
showToast("Link copied!", "success");
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
);
}}
className="btn-icon">
<LinkIcon className="w-5 h-5 group-hover:text-black" />
</button>
</Tooltip>
</div>
</div>
</div>
<div className="flex flex-shrink-0 mr-5 sm:hidden">
<Menu as="div" className="inline-block text-left">
{({ open }) => (
<>
<div>
<Menu.Button className="p-2 mt-1 border border-transparent text-neutral-400 hover:border-gray-200">
<span className="sr-only">{t("open_options")}</span>
<DotsHorizontalIcon className="w-5 h-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
show={open}
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
<Menu.Items
static
className="absolute right-0 z-10 w-56 mt-2 origin-top-right bg-white divide-y rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none divide-neutral-100">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank"
rel="noreferrer"
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<ExternalLinkIcon
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("preview")}
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
onClick={() => {
showToast("Link copied!", "success");
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
);
}}
className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<LinkIcon
className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
{t("copy_link")}
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
</div>
</div>
</li>
))}
</ul>
</div>
);
return (
<div>
<Head>
@ -328,19 +107,11 @@ const EventTypesPage = (props: PageProps) => {
);
};
const CreateNewEventDialog = ({
profiles,
canAddEvents,
localeProp,
}: {
profiles: Profile[];
canAddEvents: boolean;
localeProp: string;
}) => {
const CreateNewEventDialog = ({ profiles, canAddEvents }: { profiles: Profile[]; canAddEvents: boolean }) => {
const router = useRouter();
const teamId: number | null = Number(router.query.teamId) || null;
const modalOpen = useToggleQuery("new");
const { t } = useLocale({ localeProp });
const { t } = useLocale();
const createMutation = useMutation(createEventType, {
onSuccess: async ({ eventType }) => {

View file

@ -13,7 +13,6 @@ import {
localeOptions,
OptionType,
} from "@lib/core/i18n/i18n.utils";
import { useLocale } from "@lib/hooks/useLocale";
import { isBrandingHidden } from "@lib/isBrandingHidden";
import prisma from "@lib/prisma";
import { trpc } from "@lib/trpc";
@ -92,7 +91,6 @@ function HideBrandingInput(props: {
}
export default function Settings(props: Props) {
const { locale } = useLocale({ localeProp: props.localeProp });
const mutation = trpc.useMutation("viewer.updateProfile");
const [successModalOpen, setSuccessModalOpen] = useState(false);
@ -101,14 +99,19 @@ export default function Settings(props: Props) {
const descriptionRef = useRef<HTMLTextAreaElement>();
const avatarRef = useRef<HTMLInputElement>(null);
const hideBrandingRef = useRef<HTMLInputElement>(null);
const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
const [selectedLanguage, setSelectedLanguage] = useState<OptionType>({
value: locale,
label: props.localeLabels[locale],
const [selectedTheme, setSelectedTheme] = useState<null | { value: string | null }>({
value: props.user.theme,
});
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar);
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({
value: props.user.weekStart,
label: "",
});
const [selectedLanguage, setSelectedLanguage] = useState<OptionType>({
value: props.localeProp,
label: props.localeLabels[props.localeProp],
});
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar || "");
const [hasErrors, setHasErrors] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
@ -117,7 +120,7 @@ export default function Settings(props: Props) {
props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null
);
setSelectedWeekStartDay({ value: props.user.weekStart, label: props.user.weekStart });
setSelectedLanguage({ value: locale, label: props.localeLabels[locale] });
setSelectedLanguage({ value: props.localeProp, label: props.localeLabels[props.localeProp] });
}, []);
const closeSuccessModal = () => {
@ -276,7 +279,7 @@ export default function Settings(props: Props) {
<div className="mt-1">
<Select
id="languageSelect"
value={selectedLanguage || locale}
value={selectedLanguage || props.localeProp}
onChange={setSelectedLanguage}
classNamePrefix="react-select"
className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
@ -327,7 +330,7 @@ export default function Settings(props: Props) {
defaultValue={selectedTheme || themeOptions[0]}
value={selectedTheme || themeOptions[0]}
onChange={setSelectedTheme}
className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
className="shadow-sm | { value: string } focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
options={themeOptions}
/>
</div>

View file

@ -1,3 +1,4 @@
import { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import React from "react";
@ -5,26 +6,26 @@ import { getSession } from "@lib/auth";
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
import { useLocale } from "@lib/hooks/useLocale";
import prisma from "@lib/prisma";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import SettingsShell from "@components/SettingsShell";
import Shell from "@components/Shell";
import ChangePasswordSection from "@components/security/ChangePasswordSection";
import TwoFactorAuthSection from "@components/security/TwoFactorAuthSection";
export default function Security({ user, localeProp }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { locale, t } = useLocale({ localeProp });
export default function Security({ user }: inferSSRProps<typeof getServerSideProps>) {
const { t } = useLocale();
return (
<Shell heading={t("security")} subtitle={t("manage_account_security")}>
<SettingsShell>
<ChangePasswordSection localeProp={locale} />
<TwoFactorAuthSection localeProp={locale} twoFactorEnabled={user.twoFactorEnabled} />
<ChangePasswordSection />
<TwoFactorAuthSection twoFactorEnabled={user.twoFactorEnabled} />
</SettingsShell>
</Shell>
);
}
export async function getServerSideProps(context) {
export async function getServerSideProps(context: GetServerSidePropsContext) {
const session = await getSession(context);
const locale = await getOrSetUserLocaleFromHeaders(context.req);
@ -44,6 +45,10 @@ export async function getServerSideProps(context) {
},
});
if (!user) {
return { redirect: { permanent: false, destination: "/auth/login" } };
}
return {
props: {
localeProp: locale,

View file

@ -8,7 +8,6 @@ import { useEffect, useRef, useState } from "react";
import { getSession } from "@lib/auth";
import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils";
import { useLocale } from "@lib/hooks/useLocale";
import { Member } from "@lib/member";
import { Team } from "@lib/team";
@ -20,7 +19,7 @@ import TeamList from "@components/team/TeamList";
import TeamListItem from "@components/team/TeamListItem";
import Button from "@components/ui/Button";
export default function Teams(props: { localeProp: string }) {
export default function Teams() {
const noop = () => undefined;
const [, loading] = useSession();
const [teams, setTeams] = useState([]);
@ -29,7 +28,6 @@ export default function Teams(props: { localeProp: string }) {
const [editTeamEnabled, setEditTeamEnabled] = useState(false);
const [teamToEdit, setTeamToEdit] = useState<Team | null>();
const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
const { locale } = useLocale({ localeProp: props.localeProp });
const handleErrors = async (resp: Response) => {
if (!resp.ok) {
@ -114,11 +112,7 @@ export default function Teams(props: { localeProp: string }) {
</div>
<div>
{!!teams.length && (
<TeamList
localeProp={locale}
teams={teams}
onChange={loadData}
onEditTeam={editTeam}></TeamList>
<TeamList teams={teams} onChange={loadData} onEditTeam={editTeam}></TeamList>
)}
{!!invites.length && (
@ -127,7 +121,6 @@ export default function Teams(props: { localeProp: string }) {
<ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
{invites.map((team: Team) => (
<TeamListItem
localeProp={locale}
onChange={loadData}
key={team.id}
team={team}
@ -140,7 +133,7 @@ export default function Teams(props: { localeProp: string }) {
</div>
</div>
)}
{!!editTeamEnabled && <EditTeam localeProp={locale} team={teamToEdit} onCloseEdit={onCloseEdit} />}
{!!editTeamEnabled && <EditTeam team={teamToEdit} onCloseEdit={onCloseEdit} />}
{showCreateTeamModal && (
<div
className="fixed inset-0 z-50 overflow-y-auto"

View file

@ -21,10 +21,10 @@ import AvatarGroup from "@components/ui/AvatarGroup";
import Button from "@components/ui/Button";
import Text from "@components/ui/Text";
function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>) {
function TeamPage({ team }: inferSSRProps<typeof getServerSideProps>) {
const { isReady } = useTheme();
const showMembers = useToggleQuery("members");
const { t, locale } = useLocale({ localeProp: localeProp });
const { t } = useLocale();
const eventTypes = (
<ul className="space-y-3">
@ -37,7 +37,7 @@ function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>
<a className="px-6 py-4 flex justify-between">
<div className="flex-shrink">
<h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
<EventTypeDescription localeProp={locale} className="text-sm" eventType={type} />
<EventTypeDescription className="text-sm" eventType={type} />
</div>
<div className="mt-1">
<AvatarGroup
@ -68,7 +68,7 @@ function TeamPage({ team, localeProp }: inferSSRProps<typeof getServerSideProps>
<Avatar alt={teamName} imageSrc={team.logo} className="mx-auto w-20 h-20 rounded-full mb-4" />
<Text variant="headline">{teamName}</Text>
</div>
{(showMembers.isOn || !team.eventTypes.length) && <Team localeProp={locale} team={team} />}
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
{!showMembers.isOn && team.eventTypes.length > 0 && (
<div className="mx-auto max-w-3xl">
{eventTypes}