maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

* Remaining typefixes done
This commit is contained in:
Alex van Andel 2021-10-28 23:45:58 +01:00 committed by GitHub
parent 265b76083a
commit 41382caa6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
pages/settings/profile.tsx
View File

@ -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 { ComponentProps, FormEvent, RefObject, useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
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;