Export guests as csv

3 files changed, 29 insertions, 25 deletions

diff --git a/client/src/components/BlurryLoadDiv.tsx b/client/src/components/BlurryLoadDiv.tsx
deleted file mode 100644
index 1dfe07e..0000000
--- a/client/src/components/BlurryLoadDiv.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { ClassAttributes, ImgHTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import { useBlurryLoad } from '../useBlurryLoad.ts';
-import { useMediaQuery } from '@mui/material';
-
-export const BlurryLoadDiv = (
-  props: JSX.IntrinsicAttributes &
-    ClassAttributes<HTMLImageElement> &
-    ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string }
-) => {
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  let blurry = '';
-  if (!isMobile) {
-    useBlurryLoad();
-    blurry = 'blurry-load';
-  }
-  return (
-    <div alt="" {...props} className={`${blurry} ${props.className}`}></div>
-  );
-};
diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx
index 119fc5d..8b005df 100644
--- a/client/src/components/Dashboard.tsx
+++ b/client/src/components/Dashboard.tsx
@@ -6,7 +6,8 @@ import {
   type MRT_ColumnDef,
 } from 'material-react-table';
 import type { Guest } from '../models';
-import { createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { Button, createTheme, ThemeProvider, useTheme } from '@mui/material';
+import { mkConfig, generateCsv, download } from 'export-to-csv';
 
 function Dashboard() {
   const tableTheme = createTheme({
@@ -52,9 +53,34 @@ function Dashboard() {
     ],
     []
   );
+
+  const csvConfig = mkConfig({
+    fieldSeparator: ',',
+    decimalSeparator: '.',
+    useKeysAsHeaders: true,
+  });
+
+  const handleExportData = () => {
+    let data = guests.map(({ id, partyList, ...guest }) => guest);
+    guests.forEach((guest) => {
+      const { attendance, partySize } = guest;
+      guest?.partyList?.forEach((partyGuest) =>
+        data.push({ ...partyGuest, attendance, partySize })
+      );
+    });
+    download(csvConfig)(generateCsv(csvConfig)(data));
+  };
+
   const table = useMaterialReactTable({
     columns,
     data: guests,
+    renderTopToolbarCustomActions: () => (
+      <div style={{ marginLeft: 'auto' }}>
+        <Button variant="outlined" size="small" onClick={handleExportData}>
+          Export
+        </Button>
+      </div>
+    ),
     muiPaginationProps: {
       color: 'primary',
       shape: 'rounded',
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index dfe4a30..fc1fb64 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -9,7 +9,6 @@ import {
 import InsertInvitationIcon from '@mui/icons-material/InsertInvitation';
 import { useAppDispatch } from '../hooks';
 import { showDialog } from '../slices/uiSlice';
-import { BlurryLoadDiv } from './BlurryLoadDiv';
 
 function Schedule() {
   const dispatch = useAppDispatch();
@@ -21,7 +20,7 @@ function Schedule() {
   };
 
   return (
-    <BlurryLoadDiv
+    <div
       style={{
         height: '100%',
         display: 'flex',
@@ -104,7 +103,7 @@ function Schedule() {
           </div>
         </div>
       </Paper>
-    </BlurryLoadDiv>
+    </div>
   );
 }