From 1553dc146efa8f713c89cf1188cc4124325ab32d Mon Sep 17 00:00:00 2001
From: Graham Tackley <gtackley@brave.com>
Date: Fri, 20 Dec 2024 15:50:11 +0000
Subject: [PATCH] fix: exclude JP from targetable country list

Resolves https://github.com/brave/ads-serve/issues/4555

While I'm there, sort the list by name rather than code (because code just looks odd).

And fix one of the react warnings.
---
 src/components/Location/LocationPicker.tsx | 13 ++++++++++---
 src/components/Navigation/AccountMenu.tsx  |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Location/LocationPicker.tsx b/src/components/Location/LocationPicker.tsx
index caf9a6c72..b1fa6c808 100644
--- a/src/components/Location/LocationPicker.tsx
+++ b/src/components/Location/LocationPicker.tsx
@@ -8,6 +8,7 @@ import { useLingui } from "@lingui/react";
 import { msg, Trans } from "@lingui/macro";
 import { useQuery } from "@apollo/client";
 import { useIsEdit } from "@/form/FormikHelpers";
+import { useMemo } from "react";
 
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
@@ -15,9 +16,15 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 export const LocationPicker = () => {
   const { isDraft } = useIsEdit();
   const { data } = useQuery(ActiveGeocodesDocument, { skip: !isDraft });
-  const sorted = _.sortBy(
-    (data?.geocodes ?? []).filter((c) => c.code !== "OTHER"),
-    "code",
+  const sorted = useMemo(
+    () =>
+      _.sortBy(
+        (data?.geocodes ?? []).filter(
+          (c) => c.code !== "OTHER" && c.code !== "JP",
+        ),
+        "name",
+      ),
+    [data],
   );
   const [formProps, meta, helper] = useField<GeocodeInput[]>("geoTargets");
   const errorMessage = meta.error;
diff --git a/src/components/Navigation/AccountMenu.tsx b/src/components/Navigation/AccountMenu.tsx
index b35ec0a0d..ccb6237d0 100644
--- a/src/components/Navigation/AccountMenu.tsx
+++ b/src/components/Navigation/AccountMenu.tsx
@@ -121,6 +121,7 @@ export function AccountMenu() {
         )}
         {nonCurrentAdvertisers.map((a, idx) => (
           <MenuItem
+            key={a.id}
             onClick={() => {
               setActiveAdvertiser(a.id);
               setSessionUser({ ...user, id: user.userId, advertisers } as any);