Fixed invalid types of i18n locales (string[]) (#1068)

* Fixed invalid types of i18n locales (string[])

* Remaining typefixes done

pages/settings/profile.tsx

@@ -1,10 +1,10 @@
 import { InformationCircleIcon } from "@heroicons/react/outline";
 import crypto from "crypto";
 import { GetServerSidePropsContext } from "next";
-import { i18n } from "next-i18next.config";
+import { useRouter } from "next/router";
-import { ComponentProps, FormEvent, RefObject, useEffect, useRef, useState } from "react";
+import { ComponentProps, FormEvent, RefObject, useEffect, useRef, useState, useMemo } from "react";
 import Select, { OptionTypeBase } from "react-select";
-import TimezoneSelect from "react-timezone-select";
+import TimezoneSelect, { ITimezone } from "react-timezone-select";
 
 import { QueryCell } from "@lib/QueryCell";
 import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
@@ -29,19 +29,10 @@ import { UsernameInput } from "@components/ui/UsernameInput";
 
 type Props = inferSSRProps<typeof getServerSideProps>;
 
-const getLocaleOptions = (displayLocale: string | string[]): OptionTypeBase[] => {
-  return i18n.locales.map((locale) => ({
-    value: locale,
-    // FIXME
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    label: new Intl.DisplayNames(displayLocale, { type: "language" }).of(locale),
-  }));
-};
-
 function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>; user: Props["user"] }) {
   const { t } = useLocale();
   const [modelOpen, setModalOpen] = useState(false);
+
   return (
     <>
       <input
@@ -106,6 +97,7 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject<HTMLInputElement>
 function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: string }) {
   const utils = trpc.useContext();
   const { t } = useLocale();
+  const router = useRouter();
   const mutation = trpc.useMutation("viewer.updateProfile", {
     onSuccess: () => {
       showToast(t("your_user_profile_updated_successfully"), "success");
@@ -121,20 +113,32 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
     },
   });
 
-  const localeOptions = getLocaleOptions(props.localeProp);
+  const localeOptions = useMemo(() => {
+    return (router.locales || []).map((locale) => ({
+      value: locale,
+      // FIXME
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      label: new Intl.DisplayNames(props.localeProp, { type: "language" }).of(locale),
+    }));
+  }, [props.localeProp, router.locales]);
 
   const themeOptions = [
     { value: "light", label: t("light") },
     { value: "dark", label: t("dark") },
   ];
-
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const usernameRef = useRef<HTMLInputElement>(null!);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const nameRef = useRef<HTMLInputElement>(null!);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const descriptionRef = useRef<HTMLTextAreaElement>(null!);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const avatarRef = useRef<HTMLInputElement>(null!);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const hideBrandingRef = useRef<HTMLInputElement>(null!);
   const [selectedTheme, setSelectedTheme] = useState<OptionTypeBase>();
-  const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
+  const [selectedTimeZone, setSelectedTimeZone] = useState<ITimezone>(props.user.timeZone);
   const [selectedWeekStartDay, setSelectedWeekStartDay] = useState<OptionTypeBase>({
     value: props.user.weekStart,
     label: nameOfDay(props.localeProp, props.user.weekStart === "Sunday" ? 0 : 1),
@@ -152,6 +156,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
     setSelectedTheme(
       props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : undefined
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   async function updateProfileHandler(event: FormEvent<HTMLFormElement>) {
@@ -161,7 +166,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
     const enteredName = nameRef.current.value;
     const enteredDescription = descriptionRef.current.value;
     const enteredAvatar = avatarRef.current.value;
-    const enteredTimeZone = selectedTimeZone.value;
+    const enteredTimeZone = typeof selectedTimeZone === "string" ? selectedTimeZone : selectedTimeZone.value;
     const enteredWeekStartDay = selectedWeekStartDay.value;
     const enteredHideBranding = hideBrandingRef.current.checked;
     const enteredLanguage = selectedLanguage.value;