Improve documentation

marmelab · Jul 1, 2024 · f254f21 · f254f21
1 parent 7f54479
commit f254f21
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -607,31 +607,32 @@ In many cases, you'll need more than simple object manipulation. You'll need to
 
 Here is an example for a Comments exporter, fetching related Posts:
 
-```jsx
+```tsx
 // in CommentList.js
 import { List, downloadCSV } from 'react-admin';
+import type { FetchRelatedRecords } from 'react-admin';
 import jsonExport from 'jsonexport/dist';
 
-const exporter = (records, fetchRelatedRecords) => {
-    // will call dataProvider.getMany('posts', { ids: records.map(record => record.post_id) }), ignoring duplicate and empty post_id
-    fetchRelatedRecords(records, 'post_id', 'posts').then(posts => {
-        const data = records.map(record => ({
-                ...record,
-                post_title: posts[record.post_id].title,
-        }));
-        return jsonExport(data, {
-            headers: ['id', 'post_id', 'post_title', 'body'],
-        }, (err, csv) => {
-            downloadCSV(csv, 'comments');
-        });
+const exporter = async (comments: Comments[], fetchRelatedRecords: FetchRelatedRecords) => {
+    // will call dataProvider.getMany('posts', { ids: records.map(record => record.post_id) }),
+    // ignoring duplicate and empty post_id
+    const posts = await fetchRelatedRecords<Post>(comments, 'post_id', 'posts')
+    const commentsWithPostTitle = comments.map(comment => ({
+            ...comment,
+            post_title: posts[comment.post_id].title,
+    }));
+    return jsonExport(commentsWithPostTitle, {
+        headers: ['id', 'post_id', 'post_title', 'body'],
+    }, (err, csv) => {
+        downloadCSV(csv, 'comments');
     });
 };
 
 const CommentList = () => (
     <List exporter={exporter}>
         ...
     </List>
-)
+);
 ```
 
 **Tip**: If you need to call another verb in the exporter, take advantage of the third parameter passed to the function: it's the `dataProvider` function.

diff --git a/examples/crm/src/contacts/ContactList.tsx b/examples/crm/src/contacts/ContactList.tsx
@@ -16,9 +16,8 @@ import {
     TopToolbar,
     useGetIdentity,
     useListContext,
-    number,
 } from 'react-admin';
-import type { FetchRelatedRecords, DataProvider } from 'react-admin';
+import type { FetchRelatedRecords } from 'react-admin';
 import {
     List,
     ListItem,
@@ -146,36 +145,23 @@ const ContactListActions = () => (
 
 const exporter = async (
     records: Contact[],
-    fetchRelatedRecords: FetchRelatedRecords,
-    dataProvider: DataProvider
+    fetchRelatedRecords: FetchRelatedRecords
 ) => {
     const companies = await fetchRelatedRecords<Company>(
         records,
         'company_id',
         'companies'
     );
     const sales = await fetchRelatedRecords<Sale>(records, 'sales_id', 'sales');
-    const tagIds = records.reduce<number[]>(
-        (acc, contact) => acc.concat(contact.tags as number[]),
-        []
-    );
-    const { data: tags } = await dataProvider.getMany<Tag>('tags', {
-        ids: Array.from(new Set(tagIds)),
-    });
-    const tagsById = tags.reduce<{ [key: number]: Tag }>((acc, tag) => {
-        acc[tag.id as number] = tag;
-        return acc;
-    }, {});
+    const tags = await fetchRelatedRecords<Tag>(records, 'tags', 'tags');
 
     const contacts = records.map(contact => ({
         ...contact,
         company: companies[contact.company_id as number].name,
         sales: `${sales[contact.sales_id as number].first_name} ${
             sales[contact.sales_id as number].last_name
         }`,
-        tags: contact.tags
-            .map(tagId => tagsById[tagId as number].name)
-            .join(', '),
+        tags: contact.tags.map(tagId => tags[tagId as number].name).join(', '),
     }));
     return jsonExport(contacts, {}, (_err: any, csv: string) => {
         downloadCSV(csv, 'contacts');