fix: navigator.language should be used as fallback lang (#91)

src/components/molecules/Settings/Account/AccountSection/index.tsx

@@ -8,6 +8,7 @@ import PasswordModal from "@reearth/components/molecules/Settings/Account/Passwo
 import Field from "@reearth/components/molecules/Settings/Field";
 import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem";
 import Section from "@reearth/components/molecules/Settings/Section";
+import { localesWithLabel } from "@reearth/locale";
 import { styled } from "@reearth/theme";
 
 export type Theme = "DARK" | "LIGHT";
@@ -22,12 +23,8 @@ export type Props = {
   updateTheme?: (theme: string) => void;
 };
 
-const items = [
-  { key: "ja", label: "日本語" },
-  { key: "en", label: "English" },
-];
-
 const ProfileSection: React.FC<Props> = ({
+  lang,
   email,
   appTheme,
   hasPassword,
@@ -38,6 +35,17 @@ const ProfileSection: React.FC<Props> = ({
   const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
 
+  const langItems = useMemo(
+    () => [
+      { key: "und", label: intl.formatMessage({ defaultMessage: "Auto" }) },
+      ...Object.keys(localesWithLabel).map(l => ({
+        key: l as keyof typeof localesWithLabel,
+        label: localesWithLabel[l as keyof typeof localesWithLabel],
+      })),
+    ],
+    [intl],
+  );
+
   const themeItems: { key: Theme; label: string; icon: string }[] = useMemo(
     () => [
       { key: "DARK", label: intl.formatMessage({ defaultMessage: "Dark theme" }), icon: "moon" },
@@ -52,8 +60,8 @@ const ProfileSection: React.FC<Props> = ({
   );
 
   const currentLang = useMemo(
-    () => items.find(item => item.key === intl.locale)?.label,
-    [intl.locale],
+    () => langItems.find(item => item.key === lang)?.label,
+    [lang, langItems],
   );
 
   const handleUpdatePassword = useCallback(
@@ -76,8 +84,8 @@ const ProfileSection: React.FC<Props> = ({
         <EditableItem
           title={intl.formatMessage({ defaultMessage: "Service language" })}
           dropdown
-          dropdownItems={items}
-          currentItem={intl.locale}
+          dropdownItems={langItems}
+          currentItem={lang || "und"}
           body={currentLang}
           onSubmit={updateLanguage}
         />

src/components/molecules/Visualizer/Layers/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import P from "../Primitive";
 
-import LayerStore from "./store";
+import { LayerStore } from "./store";
 
 export type { Layer } from "../Primitive";
 
@@ -18,7 +18,7 @@ export type Props = {
   isLayerHidden?: (id: string) => boolean;
 };
 
-export { default as LayerStore, empty as emptyLayerStore } from "./store";
+export { LayerStore, empty as emptyLayerStore } from "./store";
 
 export default function Layers({
   pluginProperty,

src/components/molecules/Visualizer/Layers/store.test.ts

@@ -1,5 +1,5 @@
 /* eslint-disable testing-library/await-async-query */
-import LayerStore from "./store";
+import { LayerStore } from "./store";
 
 test("findById", () => {
   const root = {

src/components/molecules/Visualizer/Layers/store.ts

@@ -5,7 +5,7 @@ import type { Layer } from "../Primitive";
 // Layer objects but optimized for plugins
 type PluginLayer = Readonly<Layer>;
 
-export default class LayerStore {
+export class LayerStore {
   constructor(root: Layer) {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;

src/components/molecules/Visualizer/index.tsx

@@ -20,7 +20,6 @@ import WidgetAlignSystem, {
 export type { SceneProperty } from "./Engine";
 export type { InfoboxProperty, Block } from "./Infobox";
 export type { Layer } from "./Layers";
-export { LayerStore } from "./Layers";
 export type {
   Widget,
   Alignment,
@@ -32,6 +31,7 @@ export type {
   WidgetZone,
   WidgetLayoutConstraint,
 } from "./WidgetAlignSystem";
+export { LayerStore };
 
 export type Props = PropsWithChildren<
   {

src/components/organisms/EarthEditor/CanvasArea/hooks.ts

@@ -1,4 +1,5 @@
 import { useMemo, useEffect, useCallback } from "react";
+import { useIntl } from "react-intl";
 
 import {
   Location,
@@ -32,6 +33,7 @@ import { valueTypeToGQL, ValueType, ValueTypes, valueToGQL } from "@reearth/util
 import { convertLayers, convertWidgets, convertToBlocks, convertProperty } from "./convert";
 
 export default (isBuilt?: boolean) => {
+  const intl = useIntl();
   const [sceneId] = useSceneId();
   const [isCapturing, onIsCapturingChange] = useIsCapturing();
   const [camera, onCameraChange] = useCamera();
@@ -51,10 +53,11 @@ export default (isBuilt?: boolean) => {
           layerId: selected.layerId,
           infoboxFieldId: id,
           index: toIndex,
+          lang: intl.locale,
         },
       });
     },
-    [moveInfoboxField, selected],
+    [intl.locale, moveInfoboxField, selected],
   );
 
   const onBlockRemove = useCallback(
@@ -64,18 +67,19 @@ export default (isBuilt?: boolean) => {
         variables: {
           layerId: selected.layerId,
           infoboxFieldId: id,
+          lang: intl.locale,
         },
       });
     },
-    [removeInfoboxField, selected],
+    [intl.locale, removeInfoboxField, selected],
   );
 
   const { data: layerData } = useGetLayersQuery({
-    variables: { sceneId: sceneId ?? "" },
+    variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
   const { data: widgetData } = useGetEarthWidgetsQuery({
-    variables: { sceneId: sceneId ?? "" },
+    variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
 
@@ -126,10 +130,11 @@ export default (isBuilt?: boolean) => {
           fieldId: fid,
           type: gvt,
           value: valueToGQL(v, vt),
+          lang: intl.locale,
         },
       });
     },
-    [changePropertyValue, selectedLayer?.infobox?.blocks],
+    [changePropertyValue, intl.locale, selectedLayer?.infobox?.blocks],
   );
 
   const onFovChange = useCallback(
@@ -140,7 +145,7 @@ export default (isBuilt?: boolean) => {
   // block selector
   const [addInfoboxField] = useAddInfoboxFieldMutation();
   const { data: blockData } = useGetBlocksQuery({
-    variables: { sceneId: sceneId ?? "" },
+    variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
   const blocks = useMemo(() => convertToBlocks(blockData), [blockData]);
@@ -153,6 +158,7 @@ export default (isBuilt?: boolean) => {
           pluginId: b.pluginId,
           extensionId: b.extensionId,
           index: p ? i + (p === "bottom" ? 1 : 0) : undefined,
+          lang: intl.locale,
         },
       });
     }

src/components/organisms/EarthEditor/CanvasArea/queries.ts

@@ -1,3 +1,4 @@
+/* eslint-disable graphql/template-strings */
 import { gql } from "@apollo/client";
 
 import { layerFragment, propertyFragment, widgetAlignSysFragment } from "@reearth/gql/fragments";
@@ -146,7 +147,7 @@ const fragments = gql`
 `;
 
 export const GET_LAYERS = gql`
-  query GetLayers($sceneId: ID!) {
+  query GetLayers($sceneId: ID!, $lang: String) {
     node(id: $sceneId, type: SCENE) {
       id
       ... on Scene {
@@ -162,7 +163,7 @@ export const GET_LAYERS = gql`
 `;
 
 export const GET_EARTH_WIDGETS = gql`
-  query GetEarthWidgets($sceneId: ID!) {
+  query GetEarthWidgets($sceneId: ID!, $lang: String) {
     node(id: $sceneId, type: SCENE) {
       id
       ... on Scene {
@@ -249,7 +250,7 @@ export const UPDATE_WIDGET_ALIGN_SYSTEM = gql`
 `;
 
 export const MOVE_INFOBOX_FIELD = gql`
-  mutation moveInfoboxField($layerId: ID!, $infoboxFieldId: ID!, $index: Int!) {
+  mutation moveInfoboxField($layerId: ID!, $infoboxFieldId: ID!, $index: Int!, $lang: String) {
     moveInfoboxField(input: { layerId: $layerId, infoboxFieldId: $infoboxFieldId, index: $index }) {
       layer {
         id
@@ -262,7 +263,7 @@ export const MOVE_INFOBOX_FIELD = gql`
 `;
 
 export const REMOVE_INFOBOX_FIELD = gql`
-  mutation removeInfoboxField($layerId: ID!, $infoboxFieldId: ID!) {
+  mutation removeInfoboxField($layerId: ID!, $infoboxFieldId: ID!, $lang: String) {
     removeInfoboxField(input: { layerId: $layerId, infoboxFieldId: $infoboxFieldId }) {
       layer {
         id
@@ -275,7 +276,7 @@ export const REMOVE_INFOBOX_FIELD = gql`
 `;
 
 export const GET_BLOCKS = gql`
-  query getBlocks($sceneId: ID!) {
+  query getBlocks($sceneId: ID!, $lang: String) {
     node(id: $sceneId, type: SCENE) {
       id
       ... on Scene {
@@ -287,6 +288,8 @@ export const GET_BLOCKS = gql`
               type
               name
               description
+              translatedName(lang: $lang)
+              translatedDescription(lang: $lang)
               icon
             }
           }
@@ -302,6 +305,7 @@ export const ADD_INFOBOX_FIELD = gql`
     $pluginId: PluginID!
     $extensionId: PluginExtensionID!
     $index: Int
+    $lang: String
   ) {
     addInfoboxField(
       input: { layerId: $layerId, pluginId: $pluginId, extensionId: $extensionId, index: $index }

src/components/organisms/EarthEditor/DataSourcePane/hooks.ts

@@ -59,6 +59,7 @@ export default () => {
                           pluginId,
                           extensionId,
                           index,
+                          lang: intl.locale,
                         },
                         refetchQueries: ["GetLayers"],
                       });
@@ -68,7 +69,7 @@ export default () => {
             )
             .filter((e): e is DatasetSchema => !!e)
         : [],
-    [addLayerGroupFromDatasetSchemaMutation, data],
+    [addLayerGroupFromDatasetSchemaMutation, data, intl.locale],
   );
 
   // dataset sync

src/components/organisms/EarthEditor/DataSourcePane/queries.ts

@@ -1,3 +1,4 @@
+/* eslint-disable graphql/template-strings */
 import { gql } from "@apollo/client";
 
 import { layerFragment } from "@reearth/gql/fragments";
@@ -87,6 +88,7 @@ export const ADD_LAYER_GROUP_FROM_DATASET_SCHEMA = gql`
     $extensionId: PluginExtensionID
     $datasetSchemaId: ID
     $index: Int
+    $lang: String
   ) {
     addLayerGroup(
       input: {

src/components/organisms/EarthEditor/OutlinePane/hooks.tsx

@@ -60,7 +60,7 @@ export default () => {
   });
 
   const { loading: WidgetLoading, data: widgetData } = useGetWidgetsQuery({
-    variables: { sceneId: sceneId ?? "" },
+    variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
 

src/components/organisms/EarthEditor/OutlinePane/queries.ts

@@ -161,7 +161,7 @@ export const ADD_LAYER_GROUP = gql`
 `;
 
 export const GET_WIDGETS = gql`
-  query GetWidgets($sceneId: ID!) {
+  query GetWidgets($sceneId: ID!, $lang: String) {
     node(id: $sceneId, type: SCENE) {
       id
       ... on Scene {
@@ -172,8 +172,8 @@ export const GET_WIDGETS = gql`
               extensionId
               description
               name
-              translatedDescription
-              translatedName
+              translatedDescription(lang: $lang)
+              translatedName(lang: $lang)
               icon
               type
               widgetLayout {

src/components/organisms/EarthEditor/PrimitiveHeader/hooks.ts

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useIntl } from "react-intl";
 
 import { useGetPrimitivesQuery, useAddLayerItemFromPrimitiveMutation } from "@reearth/gql";
 import { useSceneId, useSelected } from "@reearth/state";
@@ -7,11 +8,12 @@ import { useSceneId, useSelected } from "@reearth/state";
 const hiddenExtensions = ["reearth/polyline", "reearth/polygon", "reearth/rect"];
 
 export default () => {
+  const intl = useIntl();
   const [sceneId] = useSceneId();
   const [, select] = useSelected();
 
   const { loading, data } = useGetPrimitivesQuery({
-    variables: { sceneId: sceneId ?? "" },
+    variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
 
@@ -58,6 +60,7 @@ export default () => {
                       lng: location.lng,
                     }
                   : {}),
+                lang: intl.locale,
               },
               refetchQueries: ["GetLayers"],
             });
@@ -68,7 +71,7 @@ export default () => {
             }
           },
         })),
-    [addLayerItemFromPrimitiveMutation, data?.node, sceneId, select],
+    [addLayerItemFromPrimitiveMutation, data?.node, sceneId, select, intl.locale],
   );
 
   return {

src/components/organisms/EarthEditor/PrimitiveHeader/queries.ts

@@ -1,9 +1,10 @@
+/* eslint-disable graphql/template-strings */
 import { gql } from "@apollo/client";
 
 import { layerFragment } from "@reearth/gql/fragments";
 
 export const GET_PRIMITIVES = gql`
-  query GetPrimitives($sceneId: ID!) {
+  query GetPrimitives($sceneId: ID!, $lang: String) {
     node(id: $sceneId, type: SCENE) {
       id
       ... on Scene {
@@ -12,8 +13,8 @@ export const GET_PRIMITIVES = gql`
             id
             extensions {
               extensionId
-              translatedDescription
-              translatedName
+              translatedDescription(lang: $lang)
+              translatedName(lang: $lang)
               icon
               type
             }
@@ -33,6 +34,7 @@ export const ADD_LAYER_ITEM_FROM_PRIMITIVE = gql`
     $lat: Float
     $lng: Float
     $index: Int
+    $lang: String
   ) {
     addLayerItem(
       input: {