Merge pull request #1101 from brave/master

Production Release 2024-02-22

src/auth/hooks/mutations/useGetLink.ts

@@ -1,7 +1,6 @@
 import { useCallback, useState } from "react";
 import { getLink } from "auth/lib";
-import { useLingui } from "@lingui/react";
-import { msg } from "@lingui/macro";
+import { t } from "@lingui/macro";
 
 interface Options {
   onError?: (message: string) => void;
@@ -11,11 +10,10 @@ interface Options {
 export function useGetLink({ onError, onSuccess }: Options = {}) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
-  const { _ } = useLingui();
 
   const requestLink = useCallback(async (email: string) => {
     if (email.trim() === "") {
-      setError(_(msg`Please enter an email.`));
+      setError(t`Please enter an email.`);
       return;
     }
 

src/checkout/hooks/useCreatePaymentSession.ts

@@ -2,13 +2,11 @@ import { createPaymentSession } from "checkout/lib";
 import { useCallback, useState } from "react";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { useHistory } from "react-router-dom";
-import { useLingui } from "@lingui/react";
-import { msg } from "@lingui/macro";
+import { t } from "@lingui/macro";
 
 export function useCreatePaymentSession() {
   const [loading, setLoading] = useState(false);
   const history = useHistory();
-  const { _ } = useLingui();
 
   const { advertiser } = useAdvertiser();
   const replaceSession = useCallback(async (campaignId: string) => {
@@ -18,7 +16,7 @@ export function useCreatePaymentSession() {
         window.location.replace(url);
       })
       .catch(() => {
-        alert(_(msg`Unable to create payment session. Please try again.`));
+        alert(t`Unable to create payment session. Please try again.`);
         setLoading(false);
         history.push(`/user/main/adsmanager/advanced/${campaignId}/review`);
       });

src/components/Assets/hooks/useGetImagePreviewUrl.ts

@@ -5,37 +5,37 @@
 
 // FROM: https://github.com/brave/brave-core/blob/976e81322aab22de9bb3670f2cec23da76a1600f/components/brave_extension/extension/brave_extension/background/today/privateCDN.ts
 
-import { useEffect, useMemo, useState } from "react";
-import { useLingui } from "@lingui/react";
-import { msg } from "@lingui/macro";
+import { useEffect, useRef, useState } from "react";
+import { t } from "@lingui/macro";
 
 export function useGetImagePreviewUrl(props: { url: string }) {
   const [data, setData] = useState<string>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>();
-  const { _ } = useLingui();
+  const tries = useRef(0);
 
-  const fetchImageResource: Promise<ArrayBuffer> = useMemo(async () => {
+  const fetchImageResource = async (): Promise<ArrayBuffer | null> => {
     const result = await fetchResource(props.url);
     if (result.ok) {
       return await result.arrayBuffer();
     }
 
-    return await new Promise((resolve, reject) => {
+    return await new Promise((resolve) => {
       const intrvl = setInterval(async () => {
         const result = await fetchResource(props.url);
         if (result.status === 200) {
           clearInterval(intrvl);
           resolve(await result.arrayBuffer());
         }
 
-        if (result.status !== 403) {
+        tries.current = tries.current + 1;
+        if (result.status !== 403 || tries.current > 10) {
           clearInterval(intrvl);
-          reject(new Error(_(msg`Unable to fetch image`)));
+          resolve(null);
         }
       }, 2000);
     });
-  }, [props.url]);
+  };
 
   useEffect(() => {
     async function fetchImage(url: string) {
@@ -45,11 +45,10 @@ export function useGetImagePreviewUrl(props: { url: string }) {
       }
       setLoading(true);
 
-      let blob;
-      try {
-        blob = await fetchImageResource;
-      } catch (e: any) {
-        setError(e.message);
+      const blob = await fetchImageResource();
+      if (!blob) {
+        setError(t`Failed to load image`);
+        setLoading(false);
         return;
       }
 

src/components/Assets/hooks/useUploadFile.ts

@@ -8,8 +8,7 @@ import {
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import { CampaignFormat } from "graphql/types";
 import { UploadConfig } from "components/Assets/UploadImage";
-import { useLingui } from "@lingui/react";
-import { msg } from "@lingui/macro";
+import { t } from "@lingui/macro";
 
 interface PutUploadResponse {
   // the pre-signed url to which the file should be uploaded to
@@ -29,7 +28,6 @@ export const useUploadFile = ({ onComplete }: Props = {}) => {
   const [step, setStep] = useState<number>(0);
   const [state, setState] = useState<string>();
   const [loading, setLoading] = useState(false);
-  const { _: lingui } = useLingui();
 
   const [mutate] = useUploadAdvertiserImageMutation({
     refetchQueries: [
@@ -43,15 +41,15 @@ export const useUploadFile = ({ onComplete }: Props = {}) => {
     onCompleted(data) {
       const fileName = data.createAdvertiserImage.name;
       setStep(2);
-      setState(lingui(msg`File upload complete for "${fileName}"`));
+      setState(t`File upload complete for "${fileName}"`);
       setLoading(false);
       if (onComplete && url) onComplete(url);
     },
   });
 
   const uploadFile = useCallback(async (file: File, format: CampaignFormat) => {
     setLoading(true);
-    setState(lingui(msg`Preparing file for upload...`));
+    setState(t`Preparing file for upload...`);
 
     let upload: PutUploadResponse;
     try {
@@ -65,7 +63,7 @@ export const useUploadFile = ({ onComplete }: Props = {}) => {
     }
 
     try {
-      setState(lingui(msg`Uploading file...`));
+      setState(t`Uploading file...`);
       await putFile(file, upload);
       setStep(1);
     } catch (e: any) {
@@ -108,7 +106,6 @@ async function prepareForUpload(
   extension: string,
   advertiserId: string,
 ): Promise<PutUploadResponse> {
-  const { _: lingui } = useLingui();
   const resp = await fetch(
     buildAdServerEndpoint(
       `/internal/image-upload/${extension}?advertiser_id=${encodeURIComponent(
@@ -124,7 +121,7 @@ async function prepareForUpload(
       },
     },
   );
-  const unableToUpload = lingui(msg`Unable to upload image`);
+  const unableToUpload = t`Unable to upload image`;
   if (!resp.ok) {
     throw new Error(unableToUpload);
   }
@@ -137,7 +134,6 @@ async function prepareForUpload(
 }
 
 async function putFile(file: File, uploadTarget: PutUploadResponse) {
-  const { _: lingui } = useLingui();
   try {
     const resp = await fetch(uploadTarget.uploadUrl, {
       method: "PUT",
@@ -146,18 +142,17 @@ async function putFile(file: File, uploadTarget: PutUploadResponse) {
     });
 
     if (!resp.ok) {
-      throw new Error(lingui(msg`Failed to upload image`));
+      throw new Error(t`Failed to upload image`);
     }
   } catch (e: any) {
     if (e.message === "Failed to fetch") {
-      throw new Error(lingui(msg`Failed to Fetch`));
+      throw new Error(t`Failed to Fetch`);
     }
     throw e;
   }
 }
 
 const configForFormat = (format: CampaignFormat): UploadConfig => {
-  const { _: lingui } = useLingui();
   if (format === CampaignFormat.NewsDisplayAd) {
     return {
       targetHost: () => getEnvConfig().pcdnHost,
@@ -166,5 +161,5 @@ const configForFormat = (format: CampaignFormat): UploadConfig => {
     };
   }
 
-  throw new Error(lingui(msg`Invalid format`));
+  throw new Error(t`Invalid format`);
 };

src/locales/en.po

@@ -824,19 +824,23 @@ msgstr "Example - https://brave.com/brave-rewards/"
 msgid "Export"
 msgstr "Export"
 
-#: src/components/Assets/hooks/useUploadFile.ts:153
+#: src/components/Assets/hooks/useUploadFile.ts:149
 msgid "Failed to Fetch"
 msgstr "Failed to Fetch"
 
-#: src/components/Assets/hooks/useUploadFile.ts:149
+#: src/components/Assets/hooks/useGetImagePreviewUrl.ts:50
+msgid "Failed to load image"
+msgstr "Failed to load image"
+
+#: src/components/Assets/hooks/useUploadFile.ts:145
 msgid "Failed to upload image"
 msgstr "Failed to upload image"
 
 #: src/components/Button/AlwaysOnFormButton.tsx:34
 msgid "Feedback"
 msgstr "Feedback"
 
-#: src/components/Assets/hooks/useUploadFile.ts:46
+#: src/components/Assets/hooks/useUploadFile.ts:44
 msgid "File upload complete for \"{fileName}\""
 msgstr "File upload complete for \"{fileName}\""
 
@@ -1020,7 +1024,7 @@ msgstr "Include campaigns that ended over 6 months ago"
 msgid "Incremental"
 msgstr "Incremental"
 
-#: src/components/Assets/hooks/useUploadFile.ts:169
+#: src/components/Assets/hooks/useUploadFile.ts:164
 msgid "Invalid format"
 msgstr "Invalid format"
 
@@ -1390,7 +1394,7 @@ msgstr "Please enter a valid URL, for example https://brave.com"
 msgid "Please enter a valid URL, for example https://brave.com/product/*"
 msgstr "Please enter a valid URL, for example https://brave.com/product/*"
 
-#: src/auth/hooks/mutations/useGetLink.ts:18
+#: src/auth/hooks/mutations/useGetLink.ts:16
 msgid "Please enter an email."
 msgstr "Please enter an email."
 
@@ -1438,7 +1442,7 @@ msgstr "Post-View: Viewed ad and converted by visiting site on their own."
 msgid "Powerful ad formats"
 msgstr "Powerful ad formats"
 
-#: src/components/Assets/hooks/useUploadFile.ts:54
+#: src/components/Assets/hooks/useUploadFile.ts:52
 msgid "Preparing file for upload..."
 msgstr "Preparing file for upload..."
 
@@ -1838,15 +1842,15 @@ msgstr "Type"
 msgid "Unable to clone campaign"
 msgstr "Unable to clone campaign"
 
-#: src/user/hooks/useAdvertiserWithPrices.tsx:39
+#: src/user/hooks/useAdvertiserWithPrices.tsx:37
 msgid "Unable to create a new campaign"
 msgstr "Unable to create a new campaign"
 
 #: src/user/views/adsManager/views/advanced/components/form/NewCampaign.tsx:67
 msgid "Unable to Create Campaign."
 msgstr "Unable to Create Campaign."
 
-#: src/checkout/hooks/useCreatePaymentSession.ts:21
+#: src/checkout/hooks/useCreatePaymentSession.ts:19
 msgid "Unable to create payment session. Please try again."
 msgstr "Unable to create payment session. Please try again."
 
@@ -1859,8 +1863,8 @@ msgid "Unable to download CSV"
 msgstr "Unable to download CSV"
 
 #: src/components/Assets/hooks/useGetImagePreviewUrl.ts:34
-msgid "Unable to fetch image"
-msgstr "Unable to fetch image"
+#~ msgid "Unable to fetch image"
+#~ msgstr "Unable to fetch image"
 
 #: src/components/Creatives/CreativeCampaigns.tsx:33
 msgid "Unable to get campaign information for ad"
@@ -1911,7 +1915,7 @@ msgstr "Unable to update Advertiser."
 msgid "Unable to Update Campaign."
 msgstr "Unable to Update Campaign."
 
-#: src/components/Assets/hooks/useUploadFile.ts:127
+#: src/components/Assets/hooks/useUploadFile.ts:124
 msgid "Unable to upload image"
 msgstr "Unable to upload image"
 
@@ -1949,7 +1953,7 @@ msgstr "Upload new image"
 msgid "Uploaded images can be shared across different ad sets within a Campaign. For best quality, upload images at 900x750px resolution. Images will be automatically scaled to this size."
 msgstr "Uploaded images can be shared across different ad sets within a Campaign. For best quality, upload images at 900x750px resolution. Images will be automatically scaled to this size."
 
-#: src/components/Assets/hooks/useUploadFile.ts:68
+#: src/components/Assets/hooks/useUploadFile.ts:66
 msgid "Uploading file..."
 msgstr "Uploading file..."