Refactor translation fields code

saleor · Nov 2, 2022 · c50643c · c50643c
1 parent 20eb6dd
commit c50643c
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 249 deletions.
diff --git a/src/fragments/translations.ts b/src/fragments/translations.ts
@@ -1,5 +1,31 @@
 import { gql } from "@apollo/client";
 
+export const attributeValueTranslatableFragment = gql`
+  fragment AttributeValueTranslatable on AttributeValueTranslatableContent {
+    id
+    name
+    plainText
+    richText
+    attributeValue {
+      id
+    }
+    attribute {
+      id
+      name
+    }
+    translation(languageCode: $language) {
+      id
+      name
+      plainText
+      richText
+      language {
+        code
+        language
+      }
+    }
+  }
+`;
+
 export const categoryTranslationFragment = gql`
   fragment CategoryTranslation on CategoryTranslatableContent {
     translation(languageCode: $language) {
@@ -64,27 +90,7 @@ export const productTranslationFragment = gql`
       }
     }
     attributeValues {
-      id
-      name
-      plainText
-      richText
-      attributeValue {
-        id
-      }
-      attribute {
-        id
-        name
-      }
-      translation(languageCode: $language) {
-        id
-        name
-        plainText
-        richText
-        language {
-          code
-          language
-        }
-      }
+      ...AttributeValueTranslatable
     }
   }
 `;
@@ -104,27 +110,7 @@ export const productVariantTranslationFragment = gql`
       }
     }
     attributeValues {
-      id
-      name
-      plainText
-      richText
-      attributeValue {
-        id
-      }
-      attribute {
-        id
-        name
-      }
-      translation(languageCode: $language) {
-        id
-        name
-        plainText
-        richText
-        language {
-          code
-          language
-        }
-      }
+      ...AttributeValueTranslatable
     }
   }
 `;
@@ -203,27 +189,7 @@ export const pageTranslationFragment = gql`
       }
     }
     attributeValues {
-      id
-      name
-      plainText
-      richText
-      attributeValue {
-        id
-      }
-      attribute {
-        id
-        name
-      }
-      translation(languageCode: $language) {
-        id
-        name
-        plainText
-        richText
-        language {
-          code
-          language
-        }
-      }
+      ...AttributeValueTranslatable
     }
   }
 `;
@@ -311,28 +277,6 @@ export const attributeTranslationDetailsFragment = gql`
   }
 `;
 
-export const attributeValueTranslatableContentFragment = gql`
-  fragment AttributeValueTranslatableContent on AttributeTranslatableContent {
-    translation(languageCode: $language) {
-      id
-      name
-    }
-    attribute {
-      id
-      name
-      inputType
-      choices(
-        first: $firstValues
-        after: $afterValues
-        last: $lastValues
-        before: $beforeValues
-      ) {
-        ...AttributeChoicesTranslation
-      }
-    }
-  }
-`;
-
 export const menuItemTranslationFragment = gql`
   fragment MenuItemTranslation on MenuItemTranslatableContent {
     translation(languageCode: $language) {

diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
@@ -2437,6 +2437,31 @@ export const CollectionTranslationFragmentDoc = gql`
   }
 }
     `;
+export const AttributeValueTranslatableFragmentDoc = gql`
+    fragment AttributeValueTranslatable on AttributeValueTranslatableContent {
+  id
+  name
+  plainText
+  richText
+  attributeValue {
+    id
+  }
+  attribute {
+    id
+    name
+  }
+  translation(languageCode: $language) {
+    id
+    name
+    plainText
+    richText
+    language {
+      code
+      language
+    }
+  }
+}
+    `;
 export const ProductTranslationFragmentDoc = gql`
     fragment ProductTranslation on ProductTranslatableContent {
   product {
@@ -2458,30 +2483,10 @@ export const ProductTranslationFragmentDoc = gql`
     }
   }
   attributeValues {
-    id
-    name
-    plainText
-    richText
-    attributeValue {
-      id
-    }
-    attribute {
-      id
-      name
-    }
-    translation(languageCode: $language) {
-      id
-      name
-      plainText
-      richText
-      language {
-        code
-        language
-      }
-    }
+    ...AttributeValueTranslatable
   }
 }
-    `;
+    ${AttributeValueTranslatableFragmentDoc}`;
 export const ProductVariantTranslationFragmentDoc = gql`
     fragment ProductVariantTranslation on ProductVariantTranslatableContent {
   productVariant {
@@ -2497,30 +2502,10 @@ export const ProductVariantTranslationFragmentDoc = gql`
     }
   }
   attributeValues {
-    id
-    name
-    plainText
-    richText
-    attributeValue {
-      id
-    }
-    attribute {
-      id
-      name
-    }
-    translation(languageCode: $language) {
-      id
-      name
-      plainText
-      richText
-      language {
-        code
-        language
-      }
-    }
+    ...AttributeValueTranslatable
   }
 }
-    `;
+    ${AttributeValueTranslatableFragmentDoc}`;
 export const SaleTranslationFragmentDoc = gql`
     fragment SaleTranslation on SaleTranslatableContent {
   sale {
@@ -2594,30 +2579,10 @@ export const PageTranslationFragmentDoc = gql`
     }
   }
   attributeValues {
-    id
-    name
-    plainText
-    richText
-    attributeValue {
-      id
-    }
-    attribute {
-      id
-      name
-    }
-    translation(languageCode: $language) {
-      id
-      name
-      plainText
-      richText
-      language {
-        code
-        language
-      }
-    }
+    ...AttributeValueTranslatable
   }
 }
-    `;
+    ${AttributeValueTranslatableFragmentDoc}`;
 export const PageTranslatableFragmentDoc = gql`
     fragment PageTranslatable on PageTranslatableContent {
   id
@@ -2698,27 +2663,6 @@ export const AttributeTranslationDetailsFragmentDoc = gql`
   }
 }
     ${AttributeChoicesTranslationFragmentDoc}`;
-export const AttributeValueTranslatableContentFragmentDoc = gql`
-    fragment AttributeValueTranslatableContent on AttributeTranslatableContent {
-  translation(languageCode: $language) {
-    id
-    name
-  }
-  attribute {
-    id
-    name
-    inputType
-    choices(
-      first: $firstValues
-      after: $afterValues
-      last: $lastValues
-      before: $beforeValues
-    ) {
-      ...AttributeChoicesTranslation
-    }
-  }
-}
-    ${AttributeChoicesTranslationFragmentDoc}`;
 export const MenuItemTranslationFragmentDoc = gql`
     fragment MenuItemTranslation on MenuItemTranslatableContent {
   translation(languageCode: $language) {

diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
@@ -6821,6 +6821,8 @@ export type TaxTypeFragment = { __typename: 'TaxType', description: string | nul
 
 export type TimePeriodFragment = { __typename: 'TimePeriod', amount: number, type: TimePeriodTypeEnum };
 
+export type AttributeValueTranslatableFragment = { __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string }, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
+
 export type CategoryTranslationFragment = { __typename: 'CategoryTranslatableContent', translation: { __typename: 'CategoryTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null, category: { __typename: 'Category', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null };
 
 export type CollectionTranslationFragment = { __typename: 'CollectionTranslatableContent', collection: { __typename: 'Collection', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null, translation: { __typename: 'CollectionTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null };
@@ -6845,8 +6847,6 @@ export type AttributeTranslationFragment = { __typename: 'AttributeTranslatableC
 
 export type AttributeTranslationDetailsFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, withChoices: boolean, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null };
 
-export type AttributeValueTranslatableContentFragment = { __typename: 'AttributeTranslatableContent', translation: { __typename: 'AttributeTranslation', id: string, name: string } | null, attribute: { __typename: 'Attribute', id: string, name: string | null, inputType: AttributeInputTypeEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', id: string, name: string | null, plainText: string | null, richText: any | null, inputType: AttributeInputTypeEnum | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null } | null } }> } | null } | null };
-
 export type MenuItemTranslationFragment = { __typename: 'MenuItemTranslatableContent', translation: { __typename: 'MenuItemTranslation', id: string, name: string, language: { __typename: 'LanguageDisplay', language: string } } | null, menuItem: { __typename: 'MenuItem', id: string, name: string } | null };
 
 export type WarehouseFragment = { __typename: 'Warehouse', id: string, name: string };

diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx
@@ -14,7 +14,10 @@ import {
   IconButton,
   makeStyles,
 } from "@saleor/macaw-ui";
-import { TranslationField } from "@saleor/translations/types";
+import {
+  TranslationField,
+  TranslationFieldType,
+} from "@saleor/translations/types";
 import { ListProps } from "@saleor/types";
 import classNames from "classnames";
 import React from "react";
@@ -178,7 +181,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                 </div>
                 <div className={classes.content}>
                   {field && field.value !== undefined ? (
-                    field.type === "short" ? (
+                    field.type === TranslationFieldType.SHORT ? (
                       <TranslationFieldsShort
                         disabled={disabled}
                         edit={false}
@@ -187,7 +190,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                         onDiscard={onDiscard}
                         onSubmit={undefined}
                       />
-                    ) : field.type === "long" ? (
+                    ) : field.type === TranslationFieldType.LONG ? (
                       <TranslationFieldsLong
                         disabled={disabled}
                         edit={false}
@@ -213,7 +216,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                 </div>
                 <Typography className={classes.content}>
                   {field && field.translation !== undefined ? (
-                    field.type === "short" ? (
+                    field.type === TranslationFieldType.SHORT ? (
                       <TranslationFieldsShort
                         disabled={disabled}
                         edit={activeField === field.name}
@@ -222,7 +225,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                         onDiscard={onDiscard}
                         onSubmit={data => onSubmit(field, data)}
                       />
-                    ) : field.type === "long" ? (
+                    ) : field.type === TranslationFieldType.LONG ? (
                       <TranslationFieldsLong
                         disabled={disabled}
                         edit={activeField === field.name}