Refactor Translations Page (#1451) (#1470)

* refactoring

* rename parameter

* update messages

* changes after review

* change imports

Co-authored-by: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>

locale/defaultMessages.json

@@ -7340,10 +7340,6 @@
   "src_dot_translations_dot_components_dot_TranslationFields_dot_3793796047": {
     "string": "No translation yet"
   },
-  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_1567737068": {
-    "context": "attribute values",
-    "string": "Value {number}"
-  },
   "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_2642976392": {
     "string": "Attribute Name"
   },
@@ -7351,6 +7347,10 @@
     "context": "header",
     "string": "Translation Attribute \"{attribute}\" - {languageCode}"
   },
+  "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_valueNumber": {
+    "context": "attribute values",
+    "string": "Value {number}"
+  },
   "src_dot_translations_dot_components_dot_TranslationsAttributesPage_dot_values": {
     "context": "section name",
     "string": "Values"

src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx

@@ -7,23 +7,15 @@ import { AttributeTranslationDetailsFragment } from "@saleor/fragments/types/Att
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder } from "@saleor/misc";
-import {
+import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
-  TranslationField,
-  TranslationsEntitiesPageProps
-} from "@saleor/translations/types";
 import { ListSettings } from "@saleor/types";
 import React from "react";
-import { defineMessages, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { LanguageCodeEnum } from "../../../types/globalTypes";
+import { getTranslationFields } from "../../utils";
 import TranslationFields from "../TranslationFields";
-
+import { transtionsAttributesPageFieldsMessages as messages } from "./messages";
-export const messages = defineMessages({
-  values: {
-    defaultMessage: "Values",
-    description: "section name"
-  }
-});
 
 export interface TranslationsAttributesPageProps
   extends TranslationsEntitiesPageProps {
@@ -119,29 +111,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
           disabled={disabled}
           initialState={true}
           title={intl.formatMessage(messages.values)}
-          fields={
+          fields={getTranslationFields(data?.attribute?.choices, intl)}
-            data?.attribute?.choices?.edges?.map(
-              ({ node: attributeValue }, attributeValueIndex) => {
-                const displayName = intl.formatMessage(
-                  {
-                    defaultMessage: "Value {number}",
-                    description: "attribute values"
-                  },
-                  {
-                    number: attributeValueIndex + 1
-                  }
-                );
-
-                return {
-                  displayName,
-                  name: `${fieldNames.value}:${attributeValue.id}`,
-                  translation: attributeValue?.translation?.name || null,
-                  type: "short" as TranslationField["type"],
-                  value: attributeValue?.name
-                };
-              }
-            ) || []
-          }
           saveButtonState={saveButtonState}
           richTextResetKey={languageCode}
           pagination={{

src/translations/components/TranslationsAttributesPage/messages.ts

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+
+export const transtionsAttributesPageFieldsMessages = defineMessages({
+  values: {
+    defaultMessage: "Values",
+    description: "section name"
+  },
+
+  valueNumber: {
+    defaultMessage: "Value {number}",
+    description: "attribute values"
+  }
+});

src/translations/utils.ts

@@ -1,6 +1,12 @@
 import { OutputData } from "@editorjs/editorjs";
+import { AttributeTranslationDetailsFragment_attribute_choices } from "@saleor/fragments/types/AttributeTranslationDetailsFragment";
+import { TranslationField } from "@saleor/translations/types";
+import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getParsedDataForJsonStringField } from "@saleor/utils/richText/misc";
+import { IntlShape } from "react-intl";
 
+import { fieldNames } from "./components/TranslationsAttributesPage";
+import { transtionsAttributesPageFieldsMessages as messages } from "./components/TranslationsAttributesPage/messages";
 import {
   PageTranslationInputFieldName,
   TranslationInputFieldName
@@ -26,3 +32,23 @@ export const getParsedTranslationInputData = ({
 
   return { [fieldName]: data as string };
 };
+
+export const getTranslationFields = (
+  fields: AttributeTranslationDetailsFragment_attribute_choices,
+  intl: IntlShape
+) =>
+  mapEdgesToItems(fields).map(
+    ({ id, name, translation }, attributeValueIndex) => {
+      const displayName = intl.formatMessage(messages.valueNumber, {
+        number: attributeValueIndex + 1
+      });
+
+      return {
+        displayName,
+        name: `${fieldNames.value}:${id}`,
+        translation: translation?.name || null,
+        type: "short" as TranslationField["type"],
+        value: name
+      };
+    }
+  ) || [];