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>

components/ActiveLink.tsx

@@ -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;

components/I18nLanguageHandler.tsx

@@ -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;

components/booking/AvailableTimes.tsx

@@ -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) {

components/booking/BookingListItem.tsx

@@ -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",

components/booking/DatePicker.tsx

@@ -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>(

components/booking/TimeOptions.tsx

@@ -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());

components/booking/pages/AvailabilityPage.tsx

@@ -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
+          <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
-            localeProp={locale}
-            onSelectTimeZone={handleSelectTimeZone}
-            onToggle24hClock={handleToggle24hClock}
-          />
         </Collapsible.Content>
       </Collapsible.Root>
     );

components/booking/pages/BookingPage.tsx

@@ -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
+                        <PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
-                          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 */
-                          }}
-                        />
                       </div>
                     </div>
                   )}

components/dialog/ConfirmationDialogContent.tsx

@@ -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,

components/eventtype/EventTypeDescription.tsx

@@ -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) => {
+export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
-  const { t } = useLocale({ localeProp });
+  const { t } = useLocale();
 
   return (
     <>

components/eventtype/EventTypeList.tsx

@@ -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;

components/eventtype/EventTypeListHeading.tsx

@@ -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;

components/security/ChangePasswordSection.tsx

@@ -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"),

components/security/DisableTwoFactorModal.tsx

@@ -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();

components/security/EnableTwoFactorModal.tsx

@@ -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();

components/security/TwoFactorAuthSection.tsx

@@ -8,17 +8,11 @@ import Button from "@components/ui/Button";
 import DisableTwoFactorModal from "./DisableTwoFactorModal";
 import EnableTwoFactorModal from "./EnableTwoFactorModal";
 
-const TwoFactorAuthSection = ({
+const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
-  twoFactorEnabled,
-  localeProp,
-}: {
-  twoFactorEnabled: boolean;
-  localeProp: string;
-}) => {
   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);

components/team/EditTeam.tsx

@@ -17,11 +17,7 @@ import ErrorAlert from "@components/ui/alerts/Error";
 
 import MemberList from "./MemberList";
 
-export default function EditTeam(props: {
+export default function EditTeam(props: { team: Team | undefined | null; onCloseEdit: () => void }) {
-  localeProp: string;
-  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
+                    <MemberList members={members} onRemoveMember={onRemoveMember} onChange={loadMembers} />
-                      localeProp={locale}
-                      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
+          <MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} />
-            localeProp={locale}
-            team={inviteModalTeam}
-            onExit={onMemberInvitationModalExit}
-          />
         )}
       </div>
     </div>

components/team/MemberInvitationModal.tsx

@@ -6,13 +6,9 @@ import { Team } from "@lib/team";
 
 import Button from "@components/ui/Button";
 
-export default function MemberInvitationModal(props: {
+export default function MemberInvitationModal(props: { team: Team | undefined | null; onExit: () => void }) {
-  localeProp: string;
-  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();

components/team/MemberList.tsx

@@ -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}

components/team/MemberListItem.tsx

@@ -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")}

components/team/TeamList.tsx

@@ -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}

components/team/TeamListItem.tsx

@@ -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")}

components/team/screens/Team.tsx

@@ -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 Team = ({ team }) => {
-  const { t } = useLocale({ localeProp: localeProp });
+  const { t } = useLocale();
 
   const Member = ({ member }) => {
     const classes = classnames(

components/ui/TableActions.tsx

@@ -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;

components/ui/form/PhoneInput.tsx

@@ -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(

lib/core/i18n/i18n.utils.ts

@@ -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,7 +31,6 @@ export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promi
       return user.locale;
     }
 
-    if (preferredLocale) {
     await prisma.user.update({
       where: {
         id: session.user.id,
@@ -40,23 +39,9 @@ export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promi
         locale: preferredLocale,
       },
     });
-    } else {
-      await prisma.user.update({
-        where: {
-          id: session.user.id,
-        },
-        data: {
-          locale: i18n.defaultLocale,
-        },
-      });
-    }
   }
 
-  if (preferredLocale) {
   return preferredLocale;
-  }
-
-  return i18n.defaultLocale;
 };
 
 interface localeType {

lib/hooks/useLocale.ts

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

pages/[user].tsx

@@ -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 { user, eventTypes } = props;
-  const { t, locale } = useLocale({ localeProp });
+  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>

pages/_app.tsx

@@ -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>
   );

pages/event-types/[type].tsx

@@ -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")}

pages/event-types/index.tsx

@@ -1,28 +1,18 @@
 // TODO: replace headlessui with radix-ui
-import { Menu, Transition } from "@headlessui/react";
+import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
-import {
+import { Prisma, SchedulingType } from "@prisma/client";
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  PlusIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
-import { SchedulingType, Prisma } 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 EventTypeList from "@components/eventtype/EventTypeList";
-import EventTypeDescription from "@components/eventtype/EventTypeDescription";
+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
+        <CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} />
-          localeProp={locale}
-          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 = ({
+const CreateNewEventDialog = ({ profiles, canAddEvents }: { profiles: Profile[]; canAddEvents: boolean }) => {
-  profiles,
-  canAddEvents,
-  localeProp,
-}: {
-  profiles: Profile[];
-  canAddEvents: boolean;
-  localeProp: string;
-}) => {
   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 }) => {

pages/settings/profile.tsx

@@ -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 [selectedTheme, setSelectedTheme] = useState<null | { value: string | null }>({
-  const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
+    value: props.user.theme,
-  const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
-  const [selectedLanguage, setSelectedLanguage] = useState<OptionType>({
-    value: locale,
-    label: props.localeLabels[locale],
   });
-  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>

pages/settings/security.tsx

@@ -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 }) {
+export default function Security({ user }: inferSSRProps<typeof getServerSideProps>) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { t } = useLocale();
-  const { locale, t } = useLocale({ localeProp });
   return (
     <Shell heading={t("security")} subtitle={t("manage_account_security")}>
       <SettingsShell>
-        <ChangePasswordSection localeProp={locale} />
+        <ChangePasswordSection />
-        <TwoFactorAuthSection localeProp={locale} twoFactorEnabled={user.twoFactorEnabled} />
+        <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,

pages/settings/teams.tsx

@@ -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
+                  <TeamList teams={teams} onChange={loadData} onEditTeam={editTeam}></TeamList>
-                    localeProp={locale}
-                    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"

pages/team/[slug].tsx

@@ -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}