Skip to content

Commit

Permalink
Merge pull request #199 from ctc-uci/187-volunteer-side-view-bugs-+-m…
Browse files Browse the repository at this point in the history 
…issing-features

187 volunteer side view bugs + missing features
  • Loading branch information
@NwinNwin
NwinNwin authored May 7, 2024
2 parents a1d1676 + e594ac9 commit f2b984c
Show file tree
Hide file tree
Showing 9 changed files with 301 additions and 182 deletions.
1 change: 1 addition & 0 deletions src/components/Events/EventCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ const EventCard = ({
<Box
width={sideBySideCard ? undefined : '100%'}
maxW={{ base: '100px', md: '150px', lg: '275px' }}
// maxW={sideBySideCard ? '100%' : '86%'}
alignSelf={'center'}
justifySelf={'center'}
gap={'18px'}
Expand Down
1 change: 1 addition & 0 deletions src/components/Events/EventFilteredGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
lineHeight="normal"
fontStyle="normal"
fontSize={{ base: '18px', xl: '32px' }}
fontFamily={'Avenir'}
color={'rgba(0, 0, 0, 0.75)'}
>
All Upcoming Events
Expand Down
21 changes: 19 additions & 2 deletions src/components/Events/FeaturedDashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@ import EventCard from './EventCard';
import { RxCaretLeft } from 'react-icons/rx';
import PropTypes from 'prop-types';

const FeaturedDashboard = ({ onOpen, showOpenDrawerButton, isOpen }) => {
const FeaturedDashboard = ({
setCurrentEventId,
setIsOpen,
setShowOpenDrawerButton,
onOpen,
isOpen,
showOpenDrawerButton,
}) => {
const [featuredEvents, setFeaturedEvents] = useState([]);
const numEvents = useBreakpointValue({ base: 1, md: 2, xl: 2 });

Expand Down Expand Up @@ -85,7 +92,14 @@ const FeaturedDashboard = ({ onOpen, showOpenDrawerButton, isOpen }) => {
gap={6}
>
{featuredEvents.map(element => (
<GridItem key={element.id}>
<GridItem
key={element.id}
onClick={() => {
setCurrentEventId(element.id);
setIsOpen(true);
setShowOpenDrawerButton(false);
}}
>
<EventCard
{...element}
isSelected={false}
Expand All @@ -105,6 +119,9 @@ FeaturedDashboard.propTypes = {
isOpen: PropTypes.bool,
onOpen: PropTypes.func,
showOpenDrawerButton: PropTypes.bool,
setCurrentEventId: PropTypes.func.isRequired,
setIsOpen: PropTypes.func.isRequired,
setShowOpenDrawerButton: PropTypes.func.isRequired,
};

export default FeaturedDashboard;
16 changes: 14 additions & 2 deletions src/components/Events/VolunteerImpactSummary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import {
TotalTrashIcon,
LargestTrashIcon,
} from '../../Assets/impact_summary/ImpactSummaryIcons';
import PropTypes from 'prop-types';

const VolunteerImpactSummary = () => {
const VolunteerImpactSummary = ({ showLargestItemCollected }) => {
const [events, setEvents] = useState(0);
const [total, setTotalPounds] = useState(0);
const [largestItem, setLargestItem] = useState(0);
Expand Down Expand Up @@ -114,7 +115,14 @@ const VolunteerImpactSummary = () => {
}
/>
</Flex>
<Flex display={{ base: currentIndex === 2 ? 'block' : 'none', md: 'block' }} width="100%">
<Flex
display={
showLargestItemCollected
? { base: currentIndex === 2 ? 'block' : 'none', md: 'block' }
: 'none'
}
width="100%"
>
<DataCard
index={3}
amount={largestItem + ' lbs'}
Expand All @@ -139,4 +147,8 @@ const VolunteerImpactSummary = () => {
);
};

VolunteerImpactSummary.propTypes = {
showLargestItemCollected: PropTypes.bool.isRequired,
};

export default VolunteerImpactSummary;
22 changes: 12 additions & 10 deletions src/components/VolunteerSideView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
useDisclosure,
} from '@chakra-ui/react';
import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
import { useState, useEffect, useContext } from 'react';
import { Icon } from '@chakra-ui/react';
import { getEventById } from '../utils/eventsUtils';
import { EditIcon, CalendarIcon } from '@chakra-ui/icons';
Expand All @@ -21,12 +21,19 @@ import { IoMdLink } from 'react-icons/io';
import { RxCaretRight } from 'react-icons/rx';
import HappeningInChip from '../components/HappeningInChip/HappeningInChip';
import RegistrationFlowController from '../components/EventRegistration/RegistrationFlowController.jsx';
import UserContext from '../utils/UserContext.jsx';
import { getEventDataVolunteerId } from '../utils/eventsUtils';

const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
const [eventData, setEventData] = useState([]);
const [isReadMore, setIsReadMore] = useState(false);
const [calendarSelected, setCalendarSelected] = useState(false);
const [mapSelected, setMapSelected] = useState(false);
const [eventDataVolunteer, setEventDataVolunteer] = useState([]);
const { user } = useContext(UserContext);
console.log('users', user);
console.log('eventid', eventDataVolunteer[0]);

// const [dateObj, setDateObj] = useState(new Date());
const dateObj = new Date(Date.parse(eventData.date));
// console.log(eventData);
Expand All @@ -39,18 +46,13 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {

useEffect(() => {
getEventById(eventId).then(data => setEventData(data));
getEventDataVolunteerId(user.id, eventId).then(data => setEventDataVolunteer(data));
// setDateObj(new Date(Date.parse(eventData.date)))
}, [eventId]);

// const handleClose = () => {
// onClose(); // Ensure onClose is always called to close the view
// setShowOpenDrawerButton(true);
// };

// console.log('e', eventData);
// console.log('d', dateObj)
// console.log(eventId)

function formatDate(dateString) {
const months = [
'Jan',
Expand Down Expand Up @@ -144,7 +146,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
gap={'0.3em'}
>
<IoPeopleSharp color="purple" />
<Text>Group</Text>
<Text>{eventDataVolunteer[0]?.number_in_party > 1 ? 'Group' : 'Individual'}</Text>
</Flex>
</Flex>
<Flex justify={'space-between'} alignItems={'center'}>
Expand All @@ -160,12 +162,12 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
gap={'0.3em'}
>
<CalendarIcon color="purple" />
<Text>Registered</Text>
<Text>{eventDataVolunteer[0]?.is_checked_in ? 'Checked-in' : 'Registered'}</Text>
</Flex>
</Flex>
<Flex justify={'space-between'} alignItems={'center'}>
<Text>Party size</Text>
<Text fontWeight={'bold'}>12 people</Text>
<Text fontWeight={'bold'}>{eventDataVolunteer[0]?.number_in_party}</Text>
</Flex>
</Box>

Expand Down
122 changes: 71 additions & 51 deletions src/components/VolunteerSideViewDrawer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import {
DrawerContent,
DrawerCloseButton,
DrawerBody,
useDisclosure,
} from '@chakra-ui/react';
import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
import { useState, useEffect, useContext } from 'react';
import { Icon } from '@chakra-ui/react';
import { getEventById } from '../utils/eventsUtils';
import { EditIcon, CalendarIcon } from '@chakra-ui/icons';
Expand All @@ -17,24 +18,36 @@ import { IoPeopleSharp } from 'react-icons/io5';
import { IoMdLink } from 'react-icons/io';
import { RxCaretRight } from 'react-icons/rx';
import HappeningInChip from './HappeningInChip/HappeningInChip';
import { getEventDataVolunteerId } from '../utils/eventsUtils';
import UserContext from '../utils/UserContext.jsx';
import RegistrationFlowController from '../components/EventRegistration/RegistrationFlowController.jsx';

const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }) => {
const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }) => {
const [eventData, setEventData] = useState([]);
const [isReadMore, setIsReadMore] = useState(false);
const [calendarSelected, setCalendarSelected] = useState(false);
const [mapSelected, setMapSelected] = useState(false);
const [eventDataVolunteer, setEventDataVolunteer] = useState([]);
const { user } = useContext(UserContext);
console.log('users', user);
console.log('eventid', eventDataVolunteer[0]);

// const [dateObj, setDateObj] = useState(new Date());
const dateObj = new Date(Date.parse(eventData.date));
// console.log(eventData);

const {
isOpen: isRegistrationFlowOpen,
onOpen: onRegistrationFlowOpen,
onClose: onRegistrationFlowClose,
} = useDisclosure();

useEffect(() => {
getEventById(eventId).then(data => setEventData(data));
getEventDataVolunteerId(user.id, eventId).then(data => setEventDataVolunteer(data));
// setDateObj(new Date(Date.parse(eventData.date)))
}, [eventId]);

// console.log('e', eventData);
// console.log('d', dateObj)

function formatDate(dateString) {
const months = [
'Jan',
Expand Down Expand Up @@ -83,13 +96,15 @@ const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }
borderColor="#EFEFEF"
bg="white"
variant={'outline'}
borderWidth={'2px'}
borderWidth={'0.2em'}
h="40px"
w="40px"
icon={<RxCaretRight size={22} />}
onClick={() => {
onClose();
setShowOpenDrawerButton(true);
}}
/>
></IconButton>
<Flex
bg="#EFEFEF"
borderRadius="md"
Expand All @@ -116,12 +131,12 @@ const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }
p={'0.8em'}
borderWidth={'0.2em'}
borderRadius="lg"
my={'0.8em'}
marginY={'0.8em'}
borderColor={'#EFEFEF'}
>
<Flex justify={'space-between'} alignItems={'center'}>
<Text fontWeight={'bold'}>Your event status</Text>
<Box px={'0.4em'} borderRadius={'md'} bg="gray.200">
<Box px={'0.4em'} borderRadius={'md'} bg="gray.200" mb={'0.3em'}>
<EditIcon />
</Box>
</Flex>
Expand All @@ -132,12 +147,13 @@ const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }
px={'0.4em'}
borderRadius={'md'}
bg="gray.200"
mb={'0.3em'}
justifyContent={'center'}
alignItems={'center'}
gap={'0.3em'}
>
<IoPeopleSharp color="purple" />
<Text>Group</Text>
<Text>{eventDataVolunteer[0]?.number_in_party > 1 ? 'Group' : 'Individual'}</Text>
</Flex>
</Flex>
<Flex justify={'space-between'} alignItems={'center'}>
Expand All @@ -147,56 +163,59 @@ const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }
px={'0.4em'}
borderRadius={'md'}
borderWidth={'0.15em'}
mb={'0.3em'}
justifyContent={'center'}
alignItems={'center'}
gap={'0.3em'}
>
<CalendarIcon color="purple" />
<Text>Registered</Text>
<Text>{eventDataVolunteer[0]?.is_checked_in ? 'Checked-in' : 'Registered'}</Text>
</Flex>
</Flex>
<Flex justify={'space-between'} alignItems={'center'}>
<Text>Party size</Text>
<Text fontWeight={'bold'}>12 people</Text>
<Text fontWeight={'bold'}>{eventDataVolunteer[0]?.number_in_party}</Text>
</Flex>
</Box>

<VStack spacing={4} mb={'0.5em'}>
<Image
h={{ base: '200px', md: '400px' }}
w="100%"
fit={'cover'}
borderRadius="md"
src={eventData.image_url}
/>
<Text
fontWeight={'bold'}
fontSize={{ base: '24px', md: '28px' }}
textAlign={'start'}
w={'100%'}
>
<VStack mb={'0.5em'} gap={'0.6em'}>
<Flex justifyContent={'center'} alignItems={'center'} borderRadius={'md'} w={'100%'}>
<Image
h="400px"
w="100%"
fit={'cover'}
borderRadius="md"
src={eventData.image_url}
></Image>
</Flex>
<Text fontWeight={'bold'} fontSize={28} textAlign={'start'} width={'full'}>
{eventData.name}
</Text>
<Text
fontWeight={'medium'}
color={'gray.500'}
fontSize={{ base: '14px', md: '15px' }}
color={'gray'}
fontSize={15}
textAlign={'start'}
w={'100%'}
width={'full'}
>
{formatDate(eventData.date)}
{formatDate(dateObj)}
</Text>
<Text noOfLines={isReadMore ? null : 3} w={'100%'}>
{eventData.description}
</Text>
<Button
size="sm"
variant="link"
colorScheme="blue"
onClick={() => setIsReadMore(!isReadMore)}
>
{isReadMore ? 'Read less...' : 'Read more...'}
</Button>
<Text noOfLines={isReadMore ? null : 3}>{eventData.description}</Text>
<Flex w={'100%'}>
{!isReadMore && (
<Text
color={'#0075FF'}
fontWeight={600}
textAlign={'start'}
_hover={{
cursor: 'pointer',
}}
onClick={() => setIsReadMore(true)}
>
Read more...
</Text>
)}
</Flex>
</VStack>

<Flex
Expand Down Expand Up @@ -252,27 +271,28 @@ const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }
</HStack>
</Flex>

<Button
w="full"
backgroundColor={'#0075FF'}
color={'white'}
_hover={{ bg: 'blue.500' }}
size="lg"
>
Check-In
<Button backgroundColor={'#0075FF'} color={'white'} onClick={onRegistrationFlowOpen}>
Register
</Button>
{isRegistrationFlowOpen && (
<RegistrationFlowController
isOpen={isRegistrationFlowOpen}
onClose={onRegistrationFlowClose}
eventId={eventId}
/>
)}
</Flex>
</DrawerBody>
</DrawerContent>
</Drawer>
);
};

VolunteerSideView.propTypes = {
VolunteerSideViewDrawer.propTypes = {
eventId: PropTypes.string.isRequired,
isOpen: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
setShowOpenDrawerButton: PropTypes.func.isRequired,
};

export default VolunteerSideView;
export default VolunteerSideViewDrawer;
Loading

0 comments on commit f2b984c

Please sign in to comment.