Refactor: delete option (#61)

Co-authored-by: 조준호 <[email protected]>

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 && <EventTransactionResults groupId={groupId} eventId={selectedEvent._id} />}
         </Wrapper>
     )
 }
@@ -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)`

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

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 (
         <Wrapper>
             <EventTransaction groupId={groupId} />
-            <SearchOtion />
         </Wrapper>
     )
 }