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 (
-
)
}