merge conflict

src/components/DummyProfiles/GetByIdForm.jsx

@@ -0,0 +1,46 @@
+import { Flex, Input, Button, Text, VStack } from '@chakra-ui/react';
+import { getProfileById } from '../../../utils/profileUtils';
+import ProfileCard from './ProfileCard';
+import { useState } from 'react';
+
+const GetByIdForm = () => {
+  const [id, setId] = useState('');
+  const [profile, setProfile] = useState();
+
+  async function submitHandler(e) {
+    e.preventDefault();
+    try {
+      const response = await getProfileById(id);
+      setProfile(response);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={e => submitHandler(e)}>
+        <VStack spacing={5}>
+          <Text textAlign="center" fontWeight="bold">
+            Get Volunteer Profile by ID
+          </Text>
+          <Flex justify="space-between">
+            <Input
+              name="id"
+              focusBorderColor="blue"
+              placeholder="Please enter ID Number..."
+              value={id}
+              onChange={e => setId(e.target.value)}
+            />
+            <Button type="submit" colorScheme="blue">
+              Submit
+            </Button>
+          </Flex>
+        </VStack>
+      </form>
+      {profile && <ProfileCard profile={profile} />}
+    </>
+  );
+};
+
+export default GetByIdForm;

src/components/DummyProfiles/ProfileCard.jsx

@@ -0,0 +1,36 @@
+import { Card, CardBody, Text, Flex, Button } from '@chakra-ui/react';
+import { deleteProfile } from '../../../utils/profileUtils';
+import PropTypes from 'prop-types';
+
+const ProfileCard = ({ profile }) => {
+  const handleDelete = () => {
+    deleteProfile(profile.id);
+  };
+
+  return (
+    <Card>
+      <Flex justify="space-between">
+        <CardBody>
+          <Text>id: {profile.id}</Text>
+          <Text>first_name: {profile.first_name}</Text>
+          <Text>last_name: {profile.last_name}</Text>
+          <Text>email: {profile.email}</Text>
+        </CardBody>
+        <Button onClick={handleDelete} colorScheme="red">
+          Delete
+        </Button>
+      </Flex>
+    </Card>
+  );
+};
+
+ProfileCard.propTypes = {
+  profile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    first_name: PropTypes.string.isRequired,
+    last_name: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default ProfileCard;

src/components/DummyProfiles/ProfileForm.jsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Stack, Input, Button, Text } from '@chakra-ui/react';
+import { postProfile } from '../../../utils/profileUtils';
+
+const ProfileForm = () => {
+  const [profile, setProfile] = useState({
+    id: '',
+    email: '',
+    first_name: '',
+    last_name: '',
+  });
+
+  const handleInputChange = e => {
+    const { name, value } = e.target;
+    setProfile(prevProfile => ({
+      ...prevProfile,
+      [name]: value,
+    }));
+  };
+
+  async function submitHandler(e) {
+    e.preventDefault();
+    try {
+      const response = await postProfile(profile);
+      console.log(response);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+
+  return (
+    <form onSubmit={e => submitHandler(e)}>
+      <Stack spacing={3}>
+        <Text textAlign="center" fontWeight="bold">
+          Create new Volunteer Profile
+        </Text>
+        <Input
+          name="id"
+          focusBorderColor="blue"
+          placeholder="Please enter your ID Number..."
+          value={profile.id}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="email"
+          focusBorderColor="blue"
+          placeholder="Please enter your Email..."
+          value={profile.email}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="first_name"
+          focusBorderColor="blue"
+          placeholder="Please enter your First Name..."
+          value={profile.first_name}
+          onChange={handleInputChange}
+        />
+        <Input
+          name="last_name"
+          focusBorderColor="blue"
+          placeholder="Please enter your Last Name..."
+          value={profile.last_name}
+          onChange={handleInputChange}
+        />
+        <Button type="submit" colorScheme="blue">
+          Submit
+        </Button>
+      </Stack>
+    </form>
+  );
+};
+
+export default ProfileForm;

src/pages/DummyProfiles.jsx

@@ -1,5 +1,31 @@
+import { Button, VStack, StackDivider } from '@chakra-ui/react';
+import ProfileCard from '../components/DummyProfiles/ProfileCard';
+import ProfileForm from '../components/DummyProfiles/ProfileForm';
+import { getProfile } from '../../utils/profileUtils';
+import { useState } from 'react';
+import GetByIdForm from '../components/DummyProfiles/GetByIdForm';
+
 const DummyProfiles = () => {
-  return <p>Placeholder for the profiles page</p>;
+  const [profiles, setProfiles] = useState([]);
+  const [displayProfiles, setDisplayProfiles] = useState(false);
+
+  const viewProfile = async () => {
+    await getProfile().then(data => setProfiles(data));
+    setDisplayProfiles(prev => !prev);
+  };
+  return (
+    <VStack divider={<StackDivider borderColor="gray.200" />} spacing={10} align="stretch">
+      <ProfileForm />
+      <GetByIdForm />
+      <>
+        <Button onClick={viewProfile} colorScheme="blue">
+          View all profiles
+        </Button>
+        {displayProfiles &&
+          profiles.map(profile => <ProfileCard profile={profile} key={profile.id} />)}
+      </>
+    </VStack> // Add closing tag for Stack element
+  );
 };
 
 export default DummyProfiles;

src/pages/DummyVolunteerData.jsx

@@ -1,5 +1,182 @@
+/* eslint-disable  no-unused-vars */
+import Backend from '../../utils/utils';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Heading,
+  Text,
+  SimpleGrid,
+  Button,
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  FormControl,
+  Input,
+  FormLabel,
+} from '@chakra-ui/react';
+
+const VolunteerCard = ({ volunteer, onDelete }) => (
+  <Card key={volunteer.id}>
+    <CardHeader>
+      <Heading size="md">{volunteer.id}</Heading>
+    </CardHeader>
+    <CardBody>
+      <Text> Volunteer ID: {volunteer.volunteer_id}</Text>
+      <Text> Number of People in Party: {volunteer.number_in_party}</Text>
+      <Text>
+        {' '}
+        Collected: {volunteer.pounds} lbs | {volunteer.ounces} oz
+      </Text>
+      <Text> Unusual Items: {volunteer.unusual_items}</Text>
+      <Text> Event: {volunteer.event_id}</Text>
+      <Text> Checked In: {volunteer.is_checked_in ? 'Yes' : 'No'}</Text>
+    </CardBody>
+    <CardFooter>
+      <Button onClick={() => onDelete(volunteer.id)}>Delete</Button>
+    </CardFooter>
+  </Card>
+);
+
+VolunteerCard.propTypes = {
+  volunteer: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    volunteer_id: PropTypes.string.isRequired,
+    number_in_party: PropTypes.number.isRequired,
+    pounds: PropTypes.number.isRequired,
+    ounces: PropTypes.number.isRequired,
+    unusual_items: PropTypes.string.isRequired,
+    event_id: PropTypes.string.isRequired,
+    is_checked_in: PropTypes.bool.isRequired,
+  }).isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
 const DummyVolunteerData = () => {
-  return <p>Placeholder for the volunteer data page</p>;
+  const [volunteers, setVolunteers] = useState([]);
+  const [showCards, setShowCards] = useState(false);
+  const [volunteer_id, setVolunteerId] = useState([]);
+  const [number_in_party, setNumberInParty] = useState([]);
+  const [pounds, setPounds] = useState([]);
+  const [ounces, setOunces] = useState([]);
+  const [unusual_items, setUnusualItems] = useState([]);
+  const [event_id, setEventId] = useState([]);
+
+  const getVolunteerData = async () => {
+    try {
+      const { data } = await Backend.get('/data');
+      setVolunteers(data);
+    } catch (error) {
+      console.error('Error fetching volunteer data:', error.message);
+    }
+  };
+
+  const postVolunteerData = async (
+    volunteer_id,
+    number_in_party,
+    pounds,
+    ounces,
+    unusual_items,
+    event_id,
+  ) => {
+    try {
+      const postData = {
+        volunteer_id: volunteer_id,
+        number_in_party: number_in_party,
+        pounds: pounds,
+        ounces: ounces,
+        unusual_items: unusual_items,
+        event_id: event_id,
+        is_checked_in: false,
+      };
+
+      const { postStatus } = await Backend.post('/data', postData);
+      getVolunteerData();
+    } catch (error) {
+      console.error('Error creating new volunteer:', error.message);
+    }
+  };
+
+  const deleteVolunteerData = async id => {
+    try {
+      await Backend.delete(`/data/${id}`);
+      // After deletion, refresh the volunteer data
+      getVolunteerData();
+    } catch (error) {
+      console.error('Error deleting volunteer data:', error.message);
+    }
+  };
+
+  const renderVolunteerCards = () => {
+    return (
+      <SimpleGrid spacing={4} templateColumns="repeat(auto-fill, minmax(200px, 1fr))">
+        {volunteers.map(volunteer => (
+          <VolunteerCard key={volunteer.id} volunteer={volunteer} onDelete={deleteVolunteerData} />
+        ))}
+      </SimpleGrid>
+    );
+  };
+
+  useEffect(() => {
+    getVolunteerData();
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setShowCards(!showCards)}>
+        {showCards ? 'Hide Volunteers' : 'Show Volunteers'}
+      </Button>
+      {showCards && renderVolunteerCards()}
+
+      <form
+        onSubmit={() =>
+          postVolunteerData(volunteer_id, number_in_party, pounds, ounces, unusual_items, event_id)
+        }
+      >
+        <FormControl>
+          <FormLabel>Add New Volunteer</FormLabel>
+          <Input
+            type="string"
+            value={volunteer_id}
+            placeholder="Volunteer ID"
+            onChange={e => setVolunteerId(e.target.value)}
+          />
+          <Input
+            type="number"
+            value={number_in_party}
+            placeholder="Number of People in Party"
+            onChange={e => setNumberInParty(e.target.value)}
+          />
+          <Input
+            type="number"
+            value={pounds}
+            placeholder="Pounds Collected"
+            onChange={e => setPounds(e.target.value)}
+          />
+          <Input
+            type="number"
+            placeholder="Ounces Collected"
+            onChange={e => setOunces(e.target.value)}
+          />
+          <Input
+            type="string"
+            value={unusual_items}
+            placeholder="Unusual Items"
+            onChange={e => setUnusualItems(e.target.value)}
+          />
+          <Input
+            type="string"
+            value={event_id}
+            placeholder="Event ID"
+            onChange={e => setEventId(e.target.value)}
+          />
+        </FormControl>
+        <Button type="submit" mt={4}>
+          Submit
+        </Button>
+      </form>
+    </>
+  );
 };
 
 export default DummyVolunteerData;

utils/profileUtils.js

@@ -0,0 +1,23 @@
+import Backend from './utils';
+
+const getProfile = async () => {
+  const response = await Backend.get('/profiles');
+  return response.data;
+};
+
+const postProfile = async profile => {
+  const response = await Backend.post('/profiles', profile);
+  return response.data;
+};
+
+const deleteProfile = async id => {
+  const response = await Backend.delete(`/profiles/${id}`);
+  return response.data;
+};
+
+const getProfileById = async id => {
+  const response = await Backend.get(`/profiles/${id}`);
+  return response.data;
+};
+
+export { getProfile, postProfile, deleteProfile, getProfileById };