fix(ror): using locale or fallback on first name

Author: wilmouths

src/components/ExternalImport/ImportExternal.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { OrcidList, RorList, Metadore } from "./";
 import { useTranslation } from "react-i18next";
 
-function ImportExternal({ fragment, setFragment, externalImports = {} }) {
+function ImportExternal({ fragment, setFragment, externalImports = {}, locale }) {
   const { t } = useTranslation();
 
   const [importsState, setImportsState] = useState(
@@ -22,7 +22,7 @@ function ImportExternal({ fragment, setFragment, externalImports = {} }) {
 
   const externalImportComponent = (type, fragment, setFragment) => {
     const importComponents = {
-      ror: (fragment, setFragment, mapping) => <RorList key={`${type}-import-component`} fragment={fragment} setFragment={setFragment} mapping={mapping} />,
+      ror: (fragment, setFragment, mapping) => <RorList key={`${type}-import-component`} fragment={fragment} setFragment={setFragment} mapping={mapping} locale={locale} />,
       orcid: (fragment, setFragment, mapping) => <OrcidList key={`${type}-import-component`} fragment={fragment} setFragment={setFragment} mapping={mapping} />,
       metadore: (fragment, setFragment, mapping) => <Metadore key={`${type}-import-component`} fragment={fragment} setFragment={setFragment} mapping={mapping} />
     };

src/components/ExternalImport/RorList.jsx

@@ -11,7 +11,7 @@ import CustomError from "../Shared/CustomError";
 import Pagination from "../Shared/Pagination";
 import { flattenObject } from "../../utils/utils";
 
-function RorList({ fragment, setFragment, mapping = {} }) {
+function RorList({ fragment, setFragment, mapping = {}, locale }) {
   const { t } = useTranslation();
   const pageSize = 8;
   const [data, setData] = useState([]);
@@ -24,6 +24,8 @@ function RorList({ fragment, setFragment, mapping = {} }) {
   const [text, setText] = useState('');
   const [selectedCountry, setSelectedCountry] = useState(null);
 
+  const localeCode = locale.split('_').at(0);
+
   /**
    * The function `getData` makes an API call to get data, sets the retrieved data in state variables, and creates an array of distinct countries from the
    * data.
@@ -253,7 +255,7 @@ function RorList({ fragment, setFragment, mapping = {} }) {
                     }
                   </td>
                   <td>
-                    {el.name[Object.keys(el.name)[0]]}&nbsp;
+                    {el?.name?.[localeCode] || el?.name?.[Object.keys(el.name).at(0)]}&nbsp;
                     <a href={el.links[0]} target="_blank" rel="noopener noreferrer">
                       <FaLink></FaLink>
                     </a>

src/components/Forms/DynamicForm.jsx

@@ -167,7 +167,7 @@ function DynamicForm({
       {error && <p>error</p>}
       {!error && template && (
         <>
-          {!readonly && Object.keys(externalImports)?.length > 0 && <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} />}
+          {!readonly && Object.keys(externalImports)?.length > 0 && <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} locale={locale} />}
           {!readonly && !fragmentId && template.topics.includes('generic') && <FormSelector
             classname={className}
             dataType={dataType}

src/components/Forms/ModalForm.jsx

@@ -58,7 +58,7 @@ function ModalForm({ data, template, mainFormDataType, mainFormTopic, label, rea
         <Modal.Title style={{ color: "var(--rust)", fontWeight: "bold" }}>{label}</Modal.Title>
       </Modal.Header>
       <Modal.Body style={{ padding: "20px !important" }}>
-        {Object.keys(externalImports)?.length > 0 && <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} />}
+        {Object.keys(externalImports)?.length > 0 && <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} locale={locale} />}
         <FormProvider {...methods}>
           <form name="modal-form" id="modal-form" style={{ margin: '15px' }} onSubmit={(e) => handleModalSubmit(e)}>
             <FormBuilder

src/components/Forms/NestedForm.jsx

@@ -52,7 +52,7 @@ function NestedForm({ propName, data, template, mainFormDataType, mainFormTopic,
       <>
         {Object.keys(externalImports)?.length > 0 && (
           <div style={{ marginTop: '20px' }}>
-            <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} />
+            <ExternalImport fragment={methods} setFragment={setValues} externalImports={externalImports} locale={locale} />
           </div>
         )}
         <FormProvider {...methods}>