diff --git a/src/Components/Tables/EventTransaction.js b/src/Components/Tables/EventTransaction.js index cb0d3ce..9f0e3fb 100644 --- a/src/Components/Tables/EventTransaction.js +++ b/src/Components/Tables/EventTransaction.js @@ -2,29 +2,28 @@ import React, { useEffect, useState } from 'react' import { getEvent } from '../../apis/event' import { Table } from 'antd' import styled from 'styled-components' -import { useEventStore } from '../../store/event' +import EventTransactionResults from './EventTransactionResults' const EventTransaction = ({ groupId }) => { const [events, setEvents] = useState([]) - const [selectedRowKeys, setSelectedRowKeys] = useState([]) - const setSelectedEventId = useEventStore((state) => state.setEventId) + const [selectedRowKeys, setSelectedRowKeys] = useState([0]) + const [selectedEvent, setSelectedEvent] = useState(null) useEffect(() => { - getEvent(groupId).then((data) => { - setEvents(data.filter((event) => event !== null)) - }) - }, [groupId]) - - useEffect(() => { - if (events.length > 0 && selectedRowKeys.length === 0) { - setSelectedRowKeys([0]) // Automatically select the first row + const fetchEvents = async () => { + const data = await getEvent(groupId) + const filteredEvents = data.filter((event) => event !== null) + setEvents(filteredEvents) + + if (filteredEvents.length > 0) { + setSelectedRowKeys([0]) // Automatically select the first row + setSelectedEvent(filteredEvents[0]) // Automatically select the first event + console.log(filteredEvents[0]) + } } - }, [events, selectedRowKeys, setSelectedRowKeys]) - useEffect(() => { - const ids = selectedRowKeys.map((key) => events[key]?._id) - setSelectedEventId(ids) - }, [selectedRowKeys, events, setSelectedEventId]) + fetchEvents() + }, [groupId]) const columns = [ { @@ -49,11 +48,8 @@ const EventTransaction = ({ groupId }) => { const handleRowClick = (record) => { const { key } = record - if (selectedRowKeys.includes(key)) { - setSelectedRowKeys([]) - } else { - setSelectedRowKeys([key]) - } + setSelectedRowKeys([key]) + setSelectedEvent(events[key]) } const rowClassName = (record) => { @@ -72,6 +68,7 @@ const EventTransaction = ({ groupId }) => { })} rowClassName={rowClassName} /> + {selectedEvent && } ) } @@ -80,8 +77,7 @@ export default EventTransaction const Wrapper = styled.div` display: flex; - flex-direction: column; - align-items: center; + flex-direction: row; ` const StyledTable = styled(Table)` diff --git a/src/Components/Tables/EventTransactionResults.js b/src/Components/Tables/EventTransactionResults.js index 725f11f..1782298 100644 --- a/src/Components/Tables/EventTransactionResults.js +++ b/src/Components/Tables/EventTransactionResults.js @@ -1,15 +1,10 @@ import React, { useEffect, useState } from 'react' -import { useDayStore, useSort } from '../../store/event' import { getTransactions } from '../../apis/tranaction' import { Table } from 'antd' import styled from 'styled-components' -import moment from 'moment' import KakaoMessage from '../Kakao/KakaoMessage' -const EventTransactionResults = ({ eventId }) => { - const groupId = window.location.href.split('/')[4] - const { startDate, endDate } = useDayStore() - const { sort } = useSort() +const EventTransactionResults = ({ groupId, eventId }) => { const [members, setMembers] = useState([]) const [paidMembers, setPaidMembers] = useState([]) const [unpaidMembers, setUnpaidMembers] = useState([]) @@ -21,30 +16,11 @@ const EventTransactionResults = ({ eventId }) => { const paidMembersList = response.filter((member) => member.isPaid) const unpaidMembersList = response.filter((member) => !member.isPaid) - const filteredPaidMembers = paidMembersList.filter((member) => { - const memberTimestamp = moment(member.timestamp[0]) - const isWithinDateRange = - startDate && endDate - ? memberTimestamp.isSameOrAfter(startDate) && memberTimestamp.isSameOrBefore(endDate) - : true - if (!isWithinDateRange) unpaidMembersList.push(member) - return isWithinDateRange - }) - - const sortedPaidMembers = filteredPaidMembers.sort((a, b) => { - if (sort === 'descend') { - return new Date(b.timestamp[0]) - new Date(a.timestamp[0]) - } else { - return new Date(a.timestamp[0]) - new Date(b.timestamp[0]) - } - }) - - const finalMembersList = unpaidMembersList.concat(sortedPaidMembers) - setMembers(finalMembersList) - setPaidMembers(sortedPaidMembers) + setPaidMembers(paidMembersList) setUnpaidMembers(unpaidMembersList) + setMembers(paidMembersList.concat(unpaidMembersList)) }) - }, [groupId, eventId, startDate, endDate, sort]) + }, [groupId, eventId]) const handleRowSelectChange = (selectedRowKeys) => { // Filter the selected row keys to include only those that correspond to unpaid members diff --git a/src/Pages/ShowEventResult/index.js b/src/Pages/ShowEventResult/index.js index db78d9c..f0c033c 100644 --- a/src/Pages/ShowEventResult/index.js +++ b/src/Pages/ShowEventResult/index.js @@ -1,6 +1,5 @@ import React from 'react' import EventTransaction from '../../Components/Tables/EventTransaction' -import SearchOtion from '../../Components/Options/SearchOption' import styled from 'styled-components' const ShowEventResult = () => { @@ -9,7 +8,6 @@ const ShowEventResult = () => { return ( - ) }