[people,events] Added ResourceExportButton, cleaned export code

.eslintrc.json

@@ -12,7 +12,7 @@
         "ecmaFeatures": {
             "jsx": true
         },
-        "ecmaVersion": 13,
+        "ecmaVersion": 12,
         "sourceType": "module"
     },
     "plugins": [

src/components/ResourceExportButton.js

+import GetAppIcon from '@material-ui/icons/GetApp';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { Button, useDataProvider, useNotify } from 'react-admin';
+
+const download = (data, filename, type) => {
+  let file = new Blob([data], { type: type });
+  let a = document.createElement('a'),
+    url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(function () {
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, 0);
+};
+
+const ResourceExportButton = ({ record, mime, file, ...rest }) => {
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+
+  const onClick = () => {
+    dataProvider.export('people', { id: record.id }).then((response) => {
+      download(JSON.stringify(response), file, mime);
+      notify('ra.notification.exported');
+    });
+  };
+
+  return (
+    <Button label="Exporter" {...rest} onClick={onClick}>
+      <GetAppIcon />
+    </Button>
+  );
+};
+
+ResourceExportButton.propTypes = {
+  record: PropTypes.any,
+  mime: PropTypes.string,
+  file: PropTypes.string
+};
+
+ResourceExportButton.defaulProps = {
+  mime: 'application/json',
+  file: 'export.json'
+};
+
+export default ResourceExportButton;

src/resources/Events.js

@@ -19,6 +19,7 @@ import { DateTimeInput } from '../components/DateTimeInput';
 import { CreateDialog, ShowDialog } from '../components/DialogForm';
 import MoneyField from '../components/MoneyField';
 import MoneyInput from '../components/MoneyInput';
+import ResourceExportButton from '../components/ResourceExportButton';
 
 const EventsFilters = [
   <TextInput key={0} source="name" />,
@@ -40,6 +41,7 @@ const Events = (props) => {
             <TextField source="location" />
             <DateField source="start" />
             <ShowButton />
+            <ResourceExportButton file="export.csv" mime="text/csv" />
           </Datagrid>
         ) : (
           <SimpleList

src/resources/People.js

 import { useMediaQuery } from '@material-ui/core';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import PropTypes from 'prop-types';
 import * as React from 'react';
-import { Button, Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput, useDataProvider, useNotify } from 'react-admin';
+import { Datagrid, EditButton, List, SimpleForm, SimpleList, SimpleShowLayout, TextField, TextInput } from 'react-admin';
 import DateField from '../components/DateField';
 import DateInput from '../components/DateInput';
 import { CreateDialog, EditDialog, ShowDialog } from '../components/DialogForm';
+import ResourceExportButton from '../components/ResourceExportButton';
 
 const PeopleFilters = [<TextInput key={0} source="firstname" />, <TextInput key={1} source="lastname" />, <TextInput key={2} source="discord_id" />];
 
-const download = (data, filename, type) => {
-  let file = new Blob([data], { type: type });
-  let a = document.createElement('a'),
-    url = URL.createObjectURL(file);
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  setTimeout(function () {
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-  }, 0);
-};
-
-const PeopleExportButton = ({ record, ...rest }) => {
-  const dataProvider = useDataProvider();
-  const notify = useNotify();
-
-  const onClick = () => {
-    dataProvider.export('people', { id: record.id }).then((response) => {
-      download(JSON.stringify(response), 'export.json', 'application/json');
-      notify('ra.notification.exported');
-    });
-  };
-
-  return (
-    <Button label="Exporter" {...rest} onClick={onClick}>
-      <GetAppIcon />
-    </Button>
-  );
-};
-
 const People = (props) => {
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'));
   return (
@@ -53,7 +20,7 @@ const People = (props) => {
             <TextField source="lastname" />
             <TextField source="discord_id" />
             <EditButton />
-            <PeopleExportButton />
+            <ResourceExportButton />
           </Datagrid>
         ) : (
           <SimpleList
@@ -94,10 +61,6 @@ const People = (props) => {
   );
 };
 
-PeopleExportButton.propTypes = {
-  record: PropTypes.any
-};
-
 const people = {
   list: People,
   create: People,