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/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 = ({
-  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);