Fix usage of Lingui

V4 required some migration steps that had been missed (https://lingui.dev/releases/migration-4), namely: - Use useLingui() hook when using `t` macro in React components - When using `t` macros outside of React components, use the `msg` (`defineMessage`) macro instead Also upgrade to latest Lingui version.
IFRCGo · Sep 3, 2023 · 22ae2d5 · 22ae2d5
1 parent b8c0045
commit 22ae2d5
Show file tree

Hide file tree

Showing 43 changed files with 604 additions and 488 deletions.
diff --git a/components/ConnectToAlertingAuthorityForm.tsx b/components/ConnectToAlertingAuthorityForm.tsx
@@ -5,12 +5,14 @@ import { Button, Form, InputPicker, Loader, Message } from "rsuite";
 import { HandledError } from "../lib/helpers.client";
 import { useToasterI18n } from "../lib/useToasterI18n";
 import ErrorMessage from "./ErrorMessage";
+import { useLingui } from "@lingui/react";
 
 type RegisterData = {
   alertingAuthorityId: string;
 };
 
 export default function ConnectToAlertingAuthorityForm() {
+  useLingui();
   const toaster = useToasterI18n();
   const [alertingAuthorities, setAlertingAuthorities] = useState([]);
   const [finishedLoading, setFinishedLoading] = useState(false);

diff --git a/components/KeyValueInput.tsx b/components/KeyValueInput.tsx
@@ -4,6 +4,7 @@ import { Button, Form, Stack, Uploader } from "rsuite";
 import { useToasterI18n } from "../lib/useToasterI18n";
 import ErrorMessage from "./ErrorMessage";
 import { HandledError } from "../lib/helpers.client";
+import { useLingui } from "@lingui/react";
 
 export default function KeyValueInput({
   keyLabel,
@@ -24,6 +25,7 @@ export default function KeyValueInput({
   disabled?: boolean;
   allowImageUploadValue?: boolean;
 }) {
+  useLingui();
   const toaster = useToasterI18n();
   const [showForm, setShowForm] = useState(false);
   const [newKey, setNewKey] = useState("");

diff --git a/components/RegisterForm.tsx b/components/RegisterForm.tsx
@@ -7,13 +7,15 @@ import { HandledError, updateState } from "../lib/helpers.client";
 import { useToasterI18n } from "../lib/useToasterI18n";
 import styles from "../styles/components/AuthenticateForm.module.css";
 import ErrorMessage from "./ErrorMessage";
+import { useLingui } from "@lingui/react";
 
 type RegisterData = {
   name: string;
   email: string;
 };
 
 export default function RegisterForm({ email = "" }) {
+  useLingui();
   const toaster = useToasterI18n();
   const [formData, setFormData] = useState<RegisterData>({ name: "", email });
 

diff --git a/components/UpdateAlertingAuthorityDetailsForm.tsx b/components/UpdateAlertingAuthorityDetailsForm.tsx
@@ -7,6 +7,7 @@ import { fetcher, HandledError } from "../lib/helpers.client";
 import { useToasterI18n } from "../lib/useToasterI18n";
 import ErrorMessage from "./ErrorMessage";
 import useSWR from "swr";
+import { useLingui } from "@lingui/react";
 
 type Data = {
   defaultTimezone: string;
@@ -18,6 +19,7 @@ export default function UpdateAlertingAuthorityDetailsForm({
 }: {
   alertingAuthorityId: string;
 }) {
+  useLingui();
   const toaster = useToasterI18n();
   const router = useRouter();
   const {

diff --git a/components/UpdatePersonalDetailsForm.tsx b/components/UpdatePersonalDetailsForm.tsx
@@ -7,9 +7,11 @@ import { HandledError } from "../lib/helpers.client";
 import { useToasterI18n } from "../lib/useToasterI18n";
 import ErrorMessage from "./ErrorMessage";
 import { useSession } from "next-auth/react";
+import { useLingui } from "@lingui/react";
 
 type Data = { name: string };
 export default function UpdatePersonalDetailsForm() {
+  useLingui();
   const { data: session } = useSession();
   const toaster = useToasterI18n();
   const router = useRouter();
@@ -45,7 +47,7 @@ export default function UpdatePersonalDetailsForm() {
               toaster.push(
                 <ErrorMessage
                   error={err}
-                  action="updating your personal details"
+                  action={t`updating your personal details`}
                 />
               )
             );

diff --git a/components/editor/EditorSinglePage.tsx b/components/editor/EditorSinglePage.tsx
@@ -32,9 +32,10 @@ import {
 } from "./fields";
 import SeverityCertaintyMatrix from "./SeverityCertaintyMatrix";
 import XMLPreview from "./XMLPreview";
+import { useLingui } from "@lingui/react";
 
 const STEPS = ["metadata", "category", "map", "data", "text", "summary"];
-export type Step = typeof STEPS[number];
+export type Step = (typeof STEPS)[number];
 
 export type FormAlertData = {
   // Only present if an Alert is being edited (instead of created)
@@ -86,6 +87,7 @@ type Props = {
 };
 
 export default function EditorSinglePage(props: Props) {
+  useLingui();
   const [alertData, setAlertData] = useState(props.defaultAlertData);
   const isNewLanguageDraft = !!props.multiLanguageGroupId;
   const onUpdate = (data: Partial<FormAlertData>) =>
@@ -151,7 +153,7 @@ export default function EditorSinglePage(props: Props) {
               className={styles.shareIcon}
               onClick={() => {
                 const email = window.prompt(
-                  "Please enter the email address of the user you wish to invite to collaborate"
+                  t`Please enter the email address of the user you wish to invite to collaborate`
                 );
                 if (!email) return;
 

diff --git a/components/editor/XMLPreview.tsx b/components/editor/XMLPreview.tsx
@@ -6,6 +6,7 @@ import { useDebounce } from "usehooks-ts";
 import { UserAlertingAuthority } from "../../lib/types/types";
 import { FormAlertData } from "./EditorSinglePage";
 import { formatDate } from "../../lib/helpers.client";
+import { useLingui } from "@lingui/react";
 
 export default function XMLPreview({
   alertingAuthority,
@@ -16,6 +17,8 @@ export default function XMLPreview({
   alertData: FormAlertData;
   multiLanguageGroupId?: string;
 }) {
+  useLingui();
+
   // Debounce alertData, so we only send preview API request every second
   const debouncedAlertData = useDebounce(alertData, 1000);
   const [xmlPreview, setXmlPreview] = useState("");

diff --git a/components/editor/fields/Category.tsx b/components/editor/fields/Category.tsx
@@ -1,31 +1,34 @@
 import { t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import { DropdownField, FieldProps } from "./common";
 
-const CATEGORIES = [
-  { label: t`Geophysical (e.g., landslide)`, value: "Geo" },
-  { label: t`Meteorological (inc. flood)`, value: "Met" },
-  { label: t`General emergency & public safety`, value: "Safety" },
-  {
-    label: t`Law enforcement, military, homeland & local/private security`,
-    value: "Security",
-  },
-  { label: t`Rescue & recovery`, value: "Rescue" },
-  { label: t`Fire supression & rescue`, value: "Fire" },
-  { label: t`Medical & public health`, value: "Health" },
-  { label: t`Pollution & other environmental`, value: "Env" },
-  { label: t`Public & private transportation`, value: "Transport" },
-  {
-    label: t`Utility, telecommunication & other non-transport infrastructure`,
-    value: "Infra",
-  },
-  {
-    label: t`Chemical, Biological, Radiological, Nuclear or High-Yield Explosive threat or attack`,
-    value: "CBRNE",
-  },
-  { label: t`Other`, value: "Other" },
-];
-
 export default function Category(props: FieldProps) {
+  useLingui();
+
+  const CATEGORIES = [
+    { label: t`Geophysical (e.g., landslide)`, value: "Geo" },
+    { label: t`Meteorological (inc. flood)`, value: "Met" },
+    { label: t`General emergency & public safety`, value: "Safety" },
+    {
+      label: t`Law enforcement, military, homeland & local/private security`,
+      value: "Security",
+    },
+    { label: t`Rescue & recovery`, value: "Rescue" },
+    { label: t`Fire supression & rescue`, value: "Fire" },
+    { label: t`Medical & public health`, value: "Health" },
+    { label: t`Pollution & other environmental`, value: "Env" },
+    { label: t`Public & private transportation`, value: "Transport" },
+    {
+      label: t`Utility, telecommunication & other non-transport infrastructure`,
+      value: "Infra",
+    },
+    {
+      label: t`Chemical, Biological, Radiological, Nuclear or High-Yield Explosive threat or attack`,
+      value: "CBRNE",
+    },
+    { label: t`Other`, value: "Other" },
+  ];
+
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Certainty.tsx b/components/editor/fields/Certainty.tsx
@@ -1,8 +1,10 @@
 import { t } from "@lingui/macro";
 import { DropdownField, FieldProps } from "./common";
 import { iso6393 } from "iso-639-3";
+import { useLingui } from "@lingui/react";
 
 export default function Certainty(props: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Contact.tsx b/components/editor/fields/Contact.tsx
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 import { FieldProps, TextField } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Contact({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <TextField
       onUpdate={onUpdate}

diff --git a/components/editor/fields/Description.tsx b/components/editor/fields/Description.tsx
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 import { FieldProps, TextField } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Description({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <TextField
       onUpdate={onUpdate}

diff --git a/components/editor/fields/Event.tsx b/components/editor/fields/Event.tsx
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 import { FieldProps, TextField } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Event({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <TextField
       onUpdate={onUpdate}

diff --git a/components/editor/fields/Expires.tsx b/components/editor/fields/Expires.tsx
@@ -1,6 +1,8 @@
 import { t } from "@lingui/macro";
 import { DateTimeField, FieldProps } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Expires(props: FieldProps) {
+  useLingui();
   return <DateTimeField {...props} label={t`Expires`} fieldName="expires" />;
 }
diff --git a/components/editor/fields/Headline.tsx b/components/editor/fields/Headline.tsx
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 import { FieldProps, TextField } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Headline({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <TextField
       onUpdate={onUpdate}

diff --git a/components/editor/fields/Instruction.tsx b/components/editor/fields/Instruction.tsx
@@ -9,6 +9,7 @@ import { useState } from "react";
 import { HandledError, camelise } from "../../../lib/helpers.client";
 import ErrorMessage from "../../ErrorMessage";
 import { Button, Modal, Nav, Panel, PanelGroup } from "rsuite";
+import { useLingui } from "@lingui/react";
 
 const WhatNowMessage = ({
   message,
@@ -78,6 +79,8 @@ export default function Instruction({
   alertData,
   alertingAuthority,
 }: FieldProps & { alertingAuthority: UserAlertingAuthority }) {
+  useLingui();
+
   const toaster = useToasterI18n();
   const [whatNowMessages, setWhatNowMessages] = useState<WhatNowResponse[]>([]);
   const [showWhatNowModal, setShowWhatNowModal] = useState(false);

diff --git a/components/editor/fields/Language.tsx b/components/editor/fields/Language.tsx
@@ -1,8 +1,10 @@
 import { t } from "@lingui/macro";
 import { DropdownField, FieldProps } from "./common";
 import { iso6393 } from "iso-639-3";
+import { useLingui } from "@lingui/react";
 
 export default function Language({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       onUpdate={onUpdate}

diff --git a/components/editor/fields/MapForm.tsx b/components/editor/fields/MapForm.tsx
@@ -14,6 +14,7 @@ import KeyValueInput from "../../KeyValueInput";
 import Map from "../map/Map";
 import { FieldProps, Textarea } from "./common";
 import styles from "../../../styles/components/editor/EditorSinglePage.module.css";
+import { useLingui } from "@lingui/react";
 
 const POSITIVE_COORDINATE_REGEX = /\d+(\.\d{1,3})?/;
 const COORDINATE_REGEX = /-?\d+(\.\d{1,3})?/;
@@ -24,6 +25,8 @@ export default function MapForm({
   disabled,
   alertingAuthority,
 }: FieldProps & { alertingAuthority: UserAlertingAuthority }) {
+  useLingui();
+
   const toaster = useToasterI18n();
   const [countries, setCountries] = useState([]);
   const [selectedRegion, setSelectedRegion] = useState("");

diff --git a/components/editor/fields/MessageType.tsx b/components/editor/fields/MessageType.tsx
@@ -1,8 +1,10 @@
 import { t } from "@lingui/macro";
 import { DropdownField, FieldProps } from "./common";
 import { iso6393 } from "iso-639-3";
+import { useLingui } from "@lingui/react";
 
 export default function MessageType(props: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Onset.tsx b/components/editor/fields/Onset.tsx
@@ -1,6 +1,8 @@
 import { t } from "@lingui/macro";
 import { DateTimeField, FieldProps } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Onset(props: FieldProps) {
+  useLingui();
   return <DateTimeField {...props} label={t`Onset`} fieldName="onset" />;
 }
diff --git a/components/editor/fields/References.tsx b/components/editor/fields/References.tsx
@@ -5,12 +5,15 @@ import { useToasterI18n } from "../../../lib/useToasterI18n";
 import { useState } from "react";
 import { HandledError } from "../../../lib/helpers.client";
 import ErrorMessage from "../../ErrorMessage";
+import { useLingui } from "@lingui/react";
 
 export default function References({
   onUpdate,
   alertData,
   alertingAuthorityId,
 }: FieldProps & { alertingAuthorityId: string }) {
+  useLingui();
+
   const toaster = useToasterI18n();
   const [referenceOptions, setReferenceOptions] = useState<Alert[]>([]);
   const fetchReferenceOptions = () => {

diff --git a/components/editor/fields/Resources.tsx b/components/editor/fields/Resources.tsx
@@ -4,8 +4,10 @@ import { HandledError } from "../../../lib/helpers.client";
 import { useToasterI18n } from "../../../lib/useToasterI18n";
 import KeyValueInput from "../../KeyValueInput";
 import { FieldProps } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Resources({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   const toaster = useToasterI18n();
 
   const getMimeType = async (url: string): Promise<string> => {
@@ -21,8 +23,8 @@ export default function Resources({ onUpdate, alertData }: FieldProps) {
       <Form.ControlLabel>
         <Trans>Resources</Trans>{" "}
         <KeyValueInput
-          keyLabel="Description"
-          valueLabel="URL"
+          keyLabel={t`Description`}
+          valueLabel={t`URL`}
           addLabel={t`Add URL?`}
           allowImageUploadValue
           emptyLabel={

diff --git a/components/editor/fields/ResponseType.tsx b/components/editor/fields/ResponseType.tsx
@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro";
 import { DropdownField, FieldProps } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function ResponseType(props: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Severity.tsx b/components/editor/fields/Severity.tsx
@@ -1,8 +1,9 @@
 import { t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import { DropdownField, FieldProps } from "./common";
-import { iso6393 } from "iso-639-3";
 
 export default function Severity(props: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Status.tsx b/components/editor/fields/Status.tsx
@@ -1,8 +1,9 @@
 import { t } from "@lingui/macro";
 import { DropdownField, FieldProps } from "./common";
-import { iso6393 } from "iso-639-3";
+import { useLingui } from "@lingui/react";
 
 export default function Status(props: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       {...props}

diff --git a/components/editor/fields/Timezone.tsx b/components/editor/fields/Timezone.tsx
@@ -1,8 +1,10 @@
 import { t } from "@lingui/macro";
 import timezones from "timezones.json";
 import { DropdownField, FieldProps } from "./common";
+import { useLingui } from "@lingui/react";
 
 export default function Timezone({ onUpdate, alertData }: FieldProps) {
+  useLingui();
   return (
     <DropdownField
       onUpdate={onUpdate}