[Content] Resolve relational field zuids with the actual field values

src/apps/content-editor/src/app/views/ItemList/TableCells/OneToManyCell.tsx

@@ -29,22 +29,14 @@ type OneToManyCellProps = {
   items: any[];
 };
 export const OneToManyCell = ({ items }: OneToManyCellProps) => {
-  const dispatch = useDispatch();
   const allItems = useSelector((state: AppState) => state.content);
   const chipContainerRef = useRef<HTMLDivElement>();
-  const [lastValidIndex, setLastValidIndex] = useState(allItems?.length - 1);
+  const [lastValidIndex, setLastValidIndex] = useState(
+    Object.keys(allItems)?.length - 1
+  );
   const parentWidth = chipContainerRef.current?.parentElement?.clientWidth;
   const hiddenItems = items?.length - lastValidIndex - 1;
 
-  useEffect(() => {
-    items?.forEach((item) => {
-      // If value starts with '7-', that means it was unable to find the item in the store so we need to fetch it
-      if (item?.startsWith("7-")) {
-        dispatch(searchItems(item));
-      }
-    });
-  }, [items, dispatch]);
-
   useEffect(() => {
     setLastValidIndex(
       getNumOfItemsToRender(parentWidth, chipContainerRef.current?.children)
@@ -54,15 +46,11 @@ export const OneToManyCell = ({ items }: OneToManyCellProps) => {
   return (
     <>
       <Box display="flex" gap={0.5}>
-        {items?.slice(0, lastValidIndex + 1)?.map((id: string) => {
-          return (
-            <Chip
-              key={id}
-              label={allItems?.[id]?.web?.metaTitle || id}
-              size="small"
-            />
-          );
-        })}
+        {items
+          ?.slice(0, lastValidIndex + 1)
+          ?.map((id: string, index: number) => {
+            return <Chip key={index} label={id} size="small" />;
+          })}
         {!!hiddenItems && (
           <Tooltip
             title={`${items?.slice(lastValidIndex + 1)?.join(", ")}`}
@@ -74,14 +62,8 @@ export const OneToManyCell = ({ items }: OneToManyCellProps) => {
       </Box>
       {/** Element below is only needed to calculate the actual chip widths */}
       <Box visibility="hidden" display="flex" gap={0.5} ref={chipContainerRef}>
-        {items?.map((id: string) => {
-          return (
-            <Chip
-              key={id}
-              label={allItems?.[id]?.web?.metaTitle || id}
-              size="small"
-            />
-          );
+        {items?.map((id: string, index: number) => {
+          return <Chip key={index} label={id} size="small" />;
         })}
       </Box>
     </>

src/apps/content-editor/src/app/views/ItemList/TableCells/SingleRelationshipCell.tsx

@@ -1,20 +1,10 @@
 import { GridRenderCellParams } from "@mui/x-data-grid-pro";
 import { Chip } from "@mui/material";
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { searchItems } from "../../../../../../../shell/store/content";
 
 export const SingleRelationshipCell = ({
   params,
 }: {
   params: GridRenderCellParams;
 }) => {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    // If value starts with '7-', that means it was unable to find the item in the store so we need to fetch it
-    if (params.value?.startsWith("7-")) {
-      dispatch(searchItems(params.value));
-    }
-  }, [params.value, dispatch]);
   return <Chip label={params.value} size="small" />;
 };

src/apps/content-editor/src/app/views/ItemList/index.tsx

@@ -9,7 +9,14 @@ import {
 import { theme } from "@zesty-io/material";
 import { ItemListEmpty } from "./ItemListEmpty";
 import { ItemListActions } from "./ItemListActions";
-import { useEffect, useMemo, useRef, useState, useContext } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useContext,
+  useCallback,
+} from "react";
 import { SearchRounded, RestartAltRounded } from "@mui/icons-material";
 import noSearchResults from "../../../../../../../public/images/noSearchResults.svg";
 import { ItemListFilters } from "./ItemListFilters";
@@ -29,9 +36,11 @@ import { useGetUsersQuery } from "../../../../../../shell/services/accounts";
 import {
   ContentItem,
   ContentItemWithDirtyAndPublishing,
+  ContentModelFieldDataType,
 } from "../../../../../../shell/services/types";
 import { fetchItems } from "../../../../../../shell/store/content";
 import { TableSortContext } from "./TableSortProvider";
+import { fetchFields } from "../../../../../../shell/store/fields";
 
 const formatDateTime = (source: string) => {
   const dateObj = new Date(source);
@@ -94,6 +103,7 @@ export const ItemList = () => {
   const items = useSelector((state: AppState) =>
     selectFilteredItems(state, modelZUID, activeLangId, !hasMounted)
   );
+  const allFields = useSelector((state: AppState) => state.fields);
   const { data: users, isFetching: isUsersFetching } = useGetUsersQuery();
 
   const [isModelItemsFetching, setIsModelItemsFetching] = useState(true);
@@ -114,7 +124,44 @@ export const ItemList = () => {
   }, [params]);
   const userFilter = params.get("user");
 
+  const resolveFieldRelationshipTitle = useCallback(
+    (
+      fieldName: string,
+      fieldDataType: ContentModelFieldDataType,
+      relatedContentItemZUID: string
+    ) => {
+      if (
+        !fields?.length ||
+        !allFields ||
+        !allItems ||
+        !fieldName ||
+        !fieldDataType ||
+        !relatedContentItemZUID
+      ) {
+        return;
+      }
+
+      // Finds the related field zuid that's stored in the specific field's data
+      const fieldData = fields?.find(
+        (field) =>
+          field.name === fieldName &&
+          !field.deletedAt &&
+          field.datatype === fieldDataType
+      );
+
+      // Gets the data of the related field determined above
+      const relatedFieldData = allFields?.[fieldData?.relatedFieldZUID];
+
+      return (
+        allItems?.[relatedContentItemZUID]?.data?.[relatedFieldData?.name] ??
+        relatedContentItemZUID
+      );
+    },
+    [allItems, fields, allFields, modelZUID]
+  );
+
   useEffect(() => {
+    dispatch(fetchFields(modelZUID));
     setTimeout(() => {
       setHasMounted(true);
     }, 0);
@@ -215,12 +262,16 @@ export const ItemList = () => {
             break;
           case "internal_link":
           case "one_to_one":
-            clonedItem.data[key] = allItems?.[value]?.web?.metaTitle || value;
+            clonedItem.data[key] = resolveFieldRelationshipTitle(
+              key,
+              fieldType,
+              value
+            );
             break;
           case "one_to_many":
             clonedItem.data[key] = value
               ?.split(",")
-              ?.map((id) => allItems?.[id]?.web?.metaTitle || id)
+              ?.map((id) => resolveFieldRelationshipTitle(key, fieldType, id))
               ?.join(",");
             break;
           case "date":