Created DynamicTable component

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
+import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+
+const DynamicTable = ({ canDelete, contentTypeName, isLoading, layout, rows }) => {
+  const { runHookWaterfall } = useStrapiApp();
+
+  const tableHeaders = useMemo(() => {
+    const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, {
+      displayedHeaders: layout.contentType.layouts.list,
+      layout,
+    });
+
+    return headers.displayedHeaders;
+  }, [runHookWaterfall, layout]);
+
+  return (
+    <Table
+      contentType={contentTypeName}
+      isLoading={isLoading}
+      headers={tableHeaders}
+      // rows={data}
+      rows={rows}
+      withBulkActions
+      withMainAction={canDelete}
+    >
+      {/* TODO */}
+    </Table>
+  );
+};
+
+DynamicTable.propTypes = {
+  canDelete: PropTypes.bool.isRequired,
+  contentTypeName: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  layout: PropTypes.exact({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      attributes: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      info: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired,
+      layouts: PropTypes.shape({
+        list: PropTypes.array.isRequired,
+        editRelations: PropTypes.array,
+      }).isRequired,
+      options: PropTypes.object.isRequired,
+      settings: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+  rows: PropTypes.array.isRequired,
+};
+
+export default DynamicTable;

packages/core/admin/admin/src/content-manager/pages/ListView/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
@@ -12,7 +12,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import isEqual from 'react-fast-compare';
 import { stringify } from 'qs';
 import {
-  DynamicTable,
+  // DynamicTable,
   NoPermissions,
   // CheckPermissions,
   // PopUpWarning,
@@ -20,7 +20,6 @@ import {
   useQueryParams,
   useNotification,
   useRBACProvider,
-  useStrapiApp,
   useTracking,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/parts/Main';
@@ -31,7 +30,7 @@ import Add from '@strapi/icons/Add';
 import axios from 'axios';
 import { axiosInstance } from '../../../core/utils';
 // import { InjectionZone } from '../../../shared/components';
-import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import DynamicTable from '../../components/DynamicTable';
 // import permissions from '../../../permissions';
 import {
   // formatFiltersFromQuery,
@@ -92,7 +91,6 @@ function ListView({
   // toggleModalDelete,
   // toggleModalDeleteAll,
   data,
-  displayedHeaders,
   getData,
   getDataSucceeded,
   isLoading,
@@ -109,7 +107,7 @@ function ListView({
   //     // settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
   //   },
   // } = layout;
-  console.log({ data });
+
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { refetchPermissions } = useRBACProvider();
@@ -119,13 +117,13 @@ function ListView({
 
   useFocusWhenNavigate();
 
-  const { runHookWaterfall } = useStrapiApp();
+  // const { runHookWaterfall } = useStrapiApp();
 
-  const tableHeaders = useMemo(() => {
+  // const tableHeaders = useMemo(() => {
-    const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, { displayedHeaders, layout });
+  //   const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, { displayedHeaders, layout });
 
-    return headers.displayedHeaders;
+  //   return headers.displayedHeaders;
-  }, [runHookWaterfall, displayedHeaders, layout]);
+  // }, [runHookWaterfall, displayedHeaders, layout]);
 
   // const [{ query }, setQuery] = useQueryParams();
   const [{ query }] = useQueryParams();
@@ -139,6 +137,7 @@ function ListView({
   // const [idToDelete, setIdToDelete] = useState(null);
   const contentType = layout.contentType;
   const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false);
+  // TODO
   // const allAllowedHeaders = useMemo(() => getAllAllowedHeaders(attributes), [attributes]);
 
   // const filters = useMemo(() => {
@@ -148,10 +147,6 @@ function ListView({
   // const sort = query.sort;
   // const _q = query._q || '';
 
-  // const firstSortableHeader = useMemo(() => getFirstSortableHeader(displayedHeaders), [
-  //   displayedHeaders,
-  // ]);
-
   // Using a ref to avoid requests being fired multiple times on slug on change
   // We need it because the hook as mulitple dependencies so it may run before the permissions have checked
   const requestUrlRef = useRef('');
@@ -399,13 +394,12 @@ function ListView({
       <ContentLayout>
         {canRead ? (
           <DynamicTable
-            contentType={headerLayoutTitle}
+            canDelete={canDelete}
+            contentTypeName={headerLayoutTitle}
             isLoading={isLoading}
-            headers={tableHeaders}
+            // FIXME: remove the layout props drilling
-            // rows={data}
+            layout={layout}
-            rows={[]}
+            rows={data}
-            withBulkActions
-            withMainAction={canDelete}
           >
             {/* TODO */}
           </DynamicTable>
@@ -568,7 +562,6 @@ ListView.propTypes = {
   canDelete: PropTypes.bool.isRequired,
   canRead: PropTypes.bool.isRequired,
   // canUpdate: PropTypes.bool.isRequired,
-  displayedHeaders: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
   // didDeleteData: PropTypes.bool.isRequired,
   // entriesToDelete: PropTypes.array.isRequired,