Fix PR feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js

@@ -9,9 +9,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useListView } from '../../hooks';
 import dateFormats from '../../utils/dateFormats';
 import CustomInputCheckbox from '../CustomInputCheckbox';
-import MediaPreviewList from '../MediaPreviewList';
+import { ActionContainer } from './styledComponents';
-import RelationPreviewList from '../RelationPreviewList';
+import RowCell from './RowCell';
-import { ActionContainer, Truncate, Truncated } from './styledComponents';
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
@@ -121,27 +120,15 @@ function Row({ canCreate, canDelete, canUpdate, isBulkable, row, headers, goTo }
           />
         </td>
       )}
-      {headers.map(({ key, name, fieldSchema: { type }, cellFormatter }) => {
+      {headers.map(({ key, name, fieldSchema: { type }, cellFormatter, metadatas }) => (
-        const isMedia = type === 'media';
-        const isRelation = type === 'relation';
-
-        return (
         <td key={key}>
-            {isMedia && <MediaPreviewList files={memoizedDisplayedValue(name, type)} />}
+          {cellFormatter ? (
-            {cellFormatter && cellFormatter(row)}
+            cellFormatter(row)
-            {!isMedia && !isRelation && !cellFormatter && (
+          ) : (
-              <Truncate>
+            <RowCell type={type} metadatas={metadatas} value={memoizedDisplayedValue(name, type)} />
-                <Truncated title={memoizedDisplayedValue(name, type)}>
-                  {memoizedDisplayedValue(name, type)}
-                </Truncated>
-              </Truncate>
-            )}
-            {isRelation && (
-              <RelationPreviewList name={name} value={memoizedDisplayedValue(name, type)} />
           )}
         </td>
-        );
+      ))}
-      })}
       <ActionContainer>
         <IconLinks links={links} />
       </ActionContainer>

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/RowCell.js

@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import MediaPreviewList from '../MediaPreviewList';
+import RelationPreviewList from '../RelationPreviewList';
+import { Truncate, Truncated } from './styledComponents';
+
+const RowCell = ({ metadatas, type, value }) => {
+  if (type === 'media') {
+    return <MediaPreviewList files={value} />;
+  }
+
+  if (type === 'relation') {
+    return <RelationPreviewList metadatas={metadatas} value={value} />;
+  }
+
+  return (
+    <Truncate>
+      <Truncated title={value}>{value}</Truncated>
+    </Truncate>
+  );
+};
+
+RowCell.defaultProps = {
+  type: null,
+  value: null,
+};
+
+RowCell.propTypes = {
+  metadatas: PropTypes.object.isRequired,
+  type: PropTypes.string,
+  value: PropTypes.any,
+};
+
+export default memo(RowCell);

packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js

@@ -1,41 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
 import { Flex, Padded, Count } from '@buffetjs/core';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
-import { useContentTypeLayout } from '../../hooks';
 import { Truncate, Truncated } from '../CustomTable/styledComponents';
 import CountWrapper from './CountWrapper';
 
-const RelationPreviewList = ({ name, value }) => {
+const RelationPreviewList = ({ metadatas: { mainField, relationType }, value }) => {
   const { formatMessage } = useIntl();
-  const { contentType } = useContentTypeLayout();
+  const isSingle = ['oneWay', 'oneToOne', 'manyToOne'].includes(relationType);
-  const mainField = get(contentType, ['metadatas', name, 'edit', 'mainField'], '');
 
-  return Array.isArray(value) ? (
+  if (isSingle) {
+    return (
+      <Truncate>
+        <Truncated>{value ? value[mainField] : '-'}</Truncated>
+      </Truncate>
+    );
+  }
+
+  const size = value ? value.length : 0;
+
+  return (
     <Truncate>
       <Flex>
         <CountWrapper>
-          <Count count={value.length} />
+          <Count count={size} />
         </CountWrapper>
         <Padded left size="xs" />
         <Truncated>
           {formatMessage({
             id: getTrad(
-              value.length > 1
+              size > 1 ? 'containers.ListPage.items.plural' : 'containers.ListPage.items.singular'
-                ? 'containers.ListPage.items.plural'
-                : 'containers.ListPage.items.singular'
             ),
           })}
         </Truncated>
       </Flex>
     </Truncate>
-  ) : (
-    <Truncate>
-      <Truncated>{value[mainField] || '-'}</Truncated>
-    </Truncate>
   );
 };
 
@@ -44,7 +45,7 @@ RelationPreviewList.defaultProps = {
 };
 
 RelationPreviewList.propTypes = {
-  name: PropTypes.string.isRequired,
+  metadatas: PropTypes.object.isRequired,
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 };
 

packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js

@@ -88,10 +88,18 @@ const listViewReducer = (state = initialState, action) =>
 
         if (!value) {
           const { metadatas, attributes } = state.contentType;
+          let metas = metadatas[name].list;
+
+          if (attributes[name].type === 'relation') {
+            const mainField = metadatas[name].edit.mainField;
+            const { relationType } = attributes[name];
+            metas = { ...metas, mainField, relationType };
+          }
+
           drafState.displayedHeaders.push({
             name,
             fieldSchema: attributes[name],
-            metadatas: metadatas[name].list,
+            metadatas: metas,
             key: `__${name}_key__`,
           });
         } else {

packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -82,7 +82,16 @@ const formatLayoutWithMetas = (obj, ctUid, models) => {
 const formatListLayoutWithMetas = obj => {
   const formatted = obj.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(obj, ['attributes', current], {});
-    const metadatas = get(obj, ['metadatas', current, 'list'], {});
+    let metadatas = get(obj, ['metadatas', current, 'list'], {});
+
+    const type = fieldSchema.type;
+
+    if (type === 'relation') {
+      metadatas = {
+        ...metadatas,
+        mainField: get(obj, ['metadatas', current, 'edit', 'mainField'], 'id'),
+      };
+    }
 
     acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });