Merge pull request #24 from ctc-uci/18-create-csv

18-create-csv

package.json

@@ -17,12 +17,14 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "axios": "^1.6.5",
+    "csv-writer": "^1.6.0",
     "dotenv": "^16.3.1",
+    "firebase": "^10.7.1",
     "framer-motion": "^10.18.0",
     "fuse.js": "^7.0.0",
-    "firebase": "^10.7.1",
     "lint-staged": "^14.0.1",
     "react": "^18.2.0",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.37.0",
     "react-router-dom": "^6.21.1",

src/components/ExportCSVButton/ExportButton.jsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/prop-types */
+import { Flex } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
+import Backend from '../../utils/utils';
+import { CSVLink } from 'react-csv';
+import { useState, useEffect } from 'react';
+
+function ExportButton({ eventId }) {
+  const header = [
+    { key: 'event_id', label: 'EVENT_ID' },
+    { key: 'id', label: 'ID' },
+    { key: 'is_checked_in', label: 'IS_CHECKED_IN' },
+    { key: 'number_in_party', label: 'NUMBER_IN_PARTY' },
+    { key: 'ounces', label: 'OUNCES' },
+    { key: 'pounds', label: 'POUNDS' },
+    { key: 'unusual_items', label: 'UNUSUAL_ITEMS' },
+    { key: 'volunteer_id', label: 'VOLUNTEER_ID' },
+  ];
+
+  const [eventIdData, setEventIdData] = useState([]);
+
+  useEffect(() => {
+    const getEventId = async () => {
+      try {
+        if (eventId == -1) {
+          const eventIdData = await Backend.get(`/data/`);
+          setEventIdData(eventIdData.data);
+        } else {
+          const eventIdData = await Backend.get(`/data/${eventId}`);
+          setEventIdData(eventIdData.data);
+        }
+      } catch (err) {
+        console.log(`Error getting event ${eventId}: `, err.message);
+      }
+    };
+
+    getEventId();
+  }, []);
+
+  return (
+    <Flex>
+      <Button>
+        <CSVLink data={eventIdData} filename="./data.csv" headers={header}>
+          Export
+        </CSVLink>
+      </Button>
+    </Flex>
+  );
+}
+
+export default ExportButton;

src/components/Playground/Playground.jsx

@@ -1,7 +1,13 @@
+import ExportButton from '../ExportCSVButton/ExportButton';
+
 const Playground = () => {
-    return (
-        <p>Use this page to test out the look of any of your components!</p>
-    );
-}
+  return (
+    <div>
+      <p>Use this page to test out the look of any of your components!</p>
+      <ExportButton eventId={19} />
+      <ExportButton eventId={-1} />
+    </div>
+  );
+};
 
-export default Playground;
+export default Playground;

src/pages/DummySuccessfulLogin.jsx

@@ -1,6 +1,5 @@
 const DummySuccessfulLogin = () => {
-    return <p>Placeholder for the successful login page</p>;
-  };
-  
+  return <p>Placeholder for the successful login page</p>;
+};
+
 export default DummySuccessfulLogin;
-

src/pages/EventCardTest.jsx

@@ -1,7 +1,5 @@
 const EventCardTest = () => {
-    return (
-        <p>Placeholder page for the EventCard components</p>
-    );
-}
+  return <p>Placeholder page for the EventCard components</p>;
+};
 
-export default EventCardTest;
+export default EventCardTest;

src/utils/firebaseAuthUtils.js

@@ -1,7 +1,11 @@
 import { initializeApp } from 'firebase/app';
-import { createUserWithEmailAndPassword, getAuth, sendPasswordResetEmail, signInWithEmailAndPassword, signOut } from 'firebase/auth';
-
-
+import {
+  createUserWithEmailAndPassword,
+  getAuth,
+  sendPasswordResetEmail,
+  signInWithEmailAndPassword,
+  signOut,
+} from 'firebase/auth';
 
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_APIKEY,
@@ -24,16 +28,16 @@ const auth = getAuth(app);
  * @param {hook} navigate useNavigate hook
  */
 export const createUserInFirebase = async (email, password, redirect, navigate) => {
-  console.log(email, password)
+  console.log(email, password);
   try {
-    const user = await createUserWithEmailAndPassword(auth, email, password)
+    const user = await createUserWithEmailAndPassword(auth, email, password);
     navigate(redirect);
 
-    return user.user
+    return user.user;
   } catch (error) {
     console.log(`${error.code}: ${error.message}`);
-    throw error
-  } 
+    throw error;
+  }
 };
 
 /**
@@ -45,10 +49,10 @@ export const createUserInFirebase = async (email, password, redirect, navigate)
  */
 export const logInWithEmailAndPassWord = async (email, password, redirect, navigate) => {
   try {
-    await signInWithEmailAndPassword(auth, email, password)
+    await signInWithEmailAndPassword(auth, email, password);
   } catch (error) {
     console.log(`${error.code}: ${error.message}`);
-    throw error
+    throw error;
   }
   navigate(redirect);
 };
@@ -88,8 +92,8 @@ export const logout = async (redirect, navigate) => {
     });
 };
 
-export const sendResetPasswordPrompt = async (email) => {
+export const sendResetPasswordPrompt = async email => {
   // Success will return null, and falure will raise an error that should
   // be caught by UI layer.
   await sendPasswordResetEmail(auth, email);
-}
+};

src/utils/fuseUtils.js

@@ -8,7 +8,6 @@ const fetchEvents = async () => {
   return data.data;
 };
 
-
 /*
     fetches joined data from all tables
 */

yarn.lock

@@ -2330,6 +2330,11 @@ csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+csv-writer@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/csv-writer/-/csv-writer-1.6.0.tgz#d0cea44b6b4d7d3baa2ecc6f3f7209233514bcf9"
+  integrity sha512-NOx7YDFWEsM/fTRAJjRpPp8t+MKRVvniAg9wQlUKx20MFrPs73WLJhFf5iteqrxNYnsy924K3Iroh3yNHeYd2g==
+
 [email protected], debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -3899,6 +3904,11 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-csv@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.2.2.tgz#5bbf0d72a846412221a14880f294da9d6def9bfb"
+  integrity sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"