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>
2021-10-12 07:11:33 -06:00 · 2021-10-12 07:11:33 -06:00 · cfd70172f0
commit cfd70172f0
parent 7dd6fdde7a
35 changed files with 366 additions and 440 deletions
--- a/components/ActiveLink.tsx
+++ b/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;
--- a/components/I18nLanguageHandler.tsx
+++ b/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;
--- a/components/booking/AvailableTimes.tsx
+++ b/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) {
--- a/components/booking/BookingListItem.tsx
+++ b/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",
--- a/components/booking/DatePicker.tsx
+++ b/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>(
--- a/components/booking/TimeOptions.tsx
+++ b/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());
--- a/components/booking/pages/AvailabilityPage.tsx
+++ b/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
-            localeProp={locale}
-            onSelectTimeZone={handleSelectTimeZone}
-            onToggle24hClock={handleToggle24hClock}
-          />
+          <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
        </Collapsible.Content>
      </Collapsible.Root>
    );
--- a/components/booking/pages/BookingPage.tsx
+++ b/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
-                          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>
                  )}
--- a/components/dialog/ConfirmationDialogContent.tsx
+++ b/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,
--- a/components/eventtype/EventTypeDescription.tsx
+++ b/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) => {
-  const { t } = useLocale({ localeProp });
+export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
+  const { t } = useLocale();

  return (
    <>
--- a/components/eventtype/EventTypeList.tsx
+++ b/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;
--- a/components/eventtype/EventTypeListHeading.tsx
+++ b/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;
--- a/components/security/ChangePasswordSection.tsx
+++ b/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"),
--- a/components/security/DisableTwoFactorModal.tsx
+++ b/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();
--- a/components/security/EnableTwoFactorModal.tsx
+++ b/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();
--- a/components/security/TwoFactorAuthSection.tsx
+++ b/components/security/TwoFactorAuthSection.tsx
@ -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);
--- a/components/team/EditTeam.tsx
+++ b/components/team/EditTeam.tsx
@ -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>
--- a/components/team/MemberInvitationModal.tsx
+++ b/components/team/MemberInvitationModal.tsx
@ -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();
--- a/components/team/MemberList.tsx
+++ b/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}
--- a/components/team/MemberListItem.tsx
+++ b/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")}
--- a/components/team/TeamList.tsx
+++ b/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}
--- a/components/team/TeamListItem.tsx
+++ b/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")}
--- a/components/team/screens/Team.tsx
+++ b/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 { t } = useLocale({ localeProp: localeProp });
+const Team = ({ team }) => {
+  const { t } = useLocale();

  const Member = ({ member }) => {
    const classes = classnames(
--- a/components/ui/TableActions.tsx
+++ b/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;
--- a/components/ui/form/PhoneInput.tsx
+++ b/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(
--- a/lib/core/i18n/i18n.utils.ts
+++ b/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,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 {
--- a/lib/hooks/useLocale.ts
+++ b/lib/hooks/useLocale.ts
@ -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,
  };
 };
--- a/pages/[user].tsx
+++ b/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 { 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>
--- a/pages/_app.tsx
+++ b/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>
  );
--- a/pages/event-types/[type].tsx
+++ b/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")}
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@ -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 }) => {
--- a/pages/settings/profile.tsx
+++ b/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 [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>
--- a/pages/settings/security.tsx
+++ b/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 }) {
-  // 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,
--- a/pages/settings/teams.tsx
+++ b/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
-                    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"
--- a/pages/team/[slug].tsx
+++ b/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}