Fix map shipping translations to translation entities (#5303)

* Fix map shipping translations to translation entities

* Add changeset

* Exort sumCompleted

.changeset/sixty-stingrays-breathe.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Adding tranalstions to shipping methods no more cause error

src/translations/views/EntityLists/TranslationsShippingMethodList.tsx

@@ -1,13 +1,11 @@
-// @ts-strict-ignore
 import { useShippingMethodTranslationsQuery } from "@dashboard/graphql";
 import usePaginator, { PaginatorContext } from "@dashboard/hooks/usePaginator";
 import TranslationsEntitiesList from "@dashboard/translations/components/TranslationsEntitiesList";
 import { languageEntityUrl, TranslatableEntities } from "@dashboard/translations/urls";
-import { mapEdgesToItems } from "@dashboard/utils/maps";
 import React from "react";
 
 import { TranslationsEntityListProps } from "./types";
-import { sumCompleted } from "./utils";
+import { mapTranslationsToEntities } from "./utils";
 
 const TranslationsShippingMethodList: React.FC<TranslationsEntityListProps> = ({
   params,
@@ -27,17 +25,7 @@ const TranslationsShippingMethodList: React.FC<TranslationsEntityListProps> = ({
     <PaginatorContext.Provider value={paginationValues}>
       <TranslationsEntitiesList
         disabled={loading}
-        entities={mapEdgesToItems(data?.translations)?.map(
-          node =>
-            node.__typename === "ShippingMethodTranslatableContent" && {
-              completion: {
-                current: sumCompleted([node.translation?.name, node.translation?.description]),
-                max: 2,
-              },
-              id: node?.shippingMethod.id,
-              name: node?.name,
-            },
-        )}
+        entities={mapTranslationsToEntities(data)}
         getRowHref={id =>
           languageEntityUrl(variables.language, TranslatableEntities.shippingMethods, id)
         }

src/translations/views/EntityLists/utils.test.ts

@@ -0,0 +1,117 @@
+import { ShippingMethodTranslationsQuery } from "@dashboard/graphql";
+
+import { mapTranslationsToEntities } from "./utils";
+
+describe("mapTranslationsToEntities", () => {
+  it("should return empty array if data is undefined", () => {
+    // Arrange
+    const data = undefined;
+
+    // Act
+    const result = mapTranslationsToEntities(data);
+
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array if translations is undefined", () => {
+    // Arrange
+    const data = {
+      translations: undefined,
+    } as unknown as ShippingMethodTranslationsQuery;
+
+    // Act
+    const result = mapTranslationsToEntities(data);
+
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array if items is undefined", () => {
+    // Arrange
+    const data = {
+      translations: {
+        edges: undefined,
+      },
+    } as unknown as ShippingMethodTranslationsQuery;
+
+    // Act
+    const result = mapTranslationsToEntities(data);
+
+    // Assert
+    expect(result).toEqual([]);
+  });
+
+  it("should return correct array", () => {
+    // Arrange
+    const data = {
+      translations: {
+        edges: [
+          {
+            node: {
+              __typename: "ShippingMethodTranslatableContent",
+              translation: {
+                name: "name",
+                description: "description",
+              },
+              shippingMethod: {
+                id: "id",
+              },
+              name: "name",
+            },
+          },
+        ],
+      },
+    } as ShippingMethodTranslationsQuery;
+
+    // Act
+    const result = mapTranslationsToEntities(data);
+
+    // Assert
+    expect(result).toEqual([
+      {
+        completion: {
+          current: 2,
+          max: 2,
+        },
+        id: "id",
+        name: "name",
+      },
+    ]);
+  });
+
+  it("should return empty string when no shipping method", () => {
+    // Arrange
+    const data = {
+      translations: {
+        edges: [
+          {
+            node: {
+              __typename: "ShippingMethodTranslatableContent",
+              translation: {
+                name: "name",
+                description: "description",
+              },
+              name: "name",
+            },
+          },
+        ],
+      },
+    } as ShippingMethodTranslationsQuery;
+
+    // Act
+    const result = mapTranslationsToEntities(data);
+
+    // Assert
+    expect(result).toEqual([
+      {
+        completion: {
+          current: 2,
+          max: 2,
+        },
+        id: "",
+        name: "name",
+      },
+    ]);
+  });
+});

src/translations/views/EntityLists/utils.ts

@@ -1,3 +1,36 @@
+import { ShippingMethodTranslationsQuery } from "@dashboard/graphql";
+import { TranslatableEntity } from "@dashboard/translations/components/TranslationsEntitiesList";
+import { mapEdgesToItems } from "@dashboard/utils/maps";
+
+export function mapTranslationsToEntities(
+  data: ShippingMethodTranslationsQuery | undefined,
+): TranslatableEntity[] {
+  if (!data?.translations) {
+    return [];
+  }
+
+  const items = mapEdgesToItems(data.translations);
+
+  if (!items) {
+    return [];
+  }
+
+  return items.reduce((acc, node) => {
+    if (node.__typename === "ShippingMethodTranslatableContent") {
+      acc.push({
+        completion: {
+          current: sumCompleted([node.translation?.name, node.translation?.description]),
+          max: 2,
+        },
+        id: node?.shippingMethod?.id ?? "",
+        name: node?.name,
+      });
+    }
+
+    return acc;
+  }, [] as TranslatableEntity[]);
+}
+
 export function sumCompleted(list: any[]): number {
   return list.reduce((acc, field) => acc + (field ? 1 : 0), 0);
 }