You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate, useSearchParams } from 'react-router-dom'
|
|
import { Space, Typography } from 'antd'
|
|
import useHotelStore from '@/stores/Hotel'
|
|
import dayjs from 'dayjs'
|
|
import { HotelList, SearchForm } from './HotelComponents'
|
|
import { isEmpty } from '@/utils/commons'
|
|
const { Title } = Typography
|
|
|
|
const List = () => {
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
let searchForm = null
|
|
const [searchByCriteria, hotelList, selectHotel] =
|
|
useHotelStore(state =>
|
|
[state.searchByCriteria, state.hotelList, state.selectHotel])
|
|
|
|
const navigate = useNavigate()
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
|
|
const hotelName = searchParams.get('hotel')
|
|
const checkinDateString = searchParams.get('checkin')
|
|
const checkoutDateString = searchParams.get('checkout')
|
|
|
|
useEffect(() => {
|
|
console.info(searchForm)
|
|
// http://localhost:5175/hotel/list?hotel=s&checkin=2024-8-20&checkout=2024-8-21
|
|
if (isEmpty(hotelName) || isEmpty(checkinDateString) || isEmpty(checkoutDateString)) {
|
|
console.info('criteria is null')
|
|
} else {
|
|
searchForm.setFieldsValue({
|
|
dataRange: [dayjs(checkinDateString), dayjs(checkoutDateString)],
|
|
hotelName: hotelName
|
|
})
|
|
setLoading(true)
|
|
searchByCriteria(searchForm.getFieldValue())
|
|
.finally(() => setLoading(false))
|
|
}
|
|
}, [])
|
|
|
|
const handelSearch = (formValue) => {
|
|
setSearchParams({
|
|
hotel: formValue.hotelName,
|
|
checkin: formValue.dataRange[0].format('YYYY-MM-DD'),
|
|
checkout: formValue.dataRange[1].format('YYYY-MM-DD')
|
|
})
|
|
|
|
setLoading(true)
|
|
searchByCriteria(formValue)
|
|
.finally(() => setLoading(false))
|
|
}
|
|
|
|
const handleHotelChange = (hotel) => {
|
|
selectHotel(hotel)
|
|
navigate(`/hotel/${hotel.hotel_id}/${searchForm.getFieldValue().dataRange[0].format('YYYY-MM-DD')}/${searchForm.getFieldValue().dataRange[1].format('YYYY-MM-DD')}`)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Space direction='vertical' className='w-full'>
|
|
<Title level={3}>酒店列表</Title>
|
|
<SearchForm
|
|
onSearch={handelSearch}
|
|
onInit={form => searchForm = form}
|
|
>
|
|
</SearchForm>
|
|
<HotelList loading={loading} dataSource={hotelList} onChange={h => handleHotelChange(h)}></HotelList>
|
|
</Space>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default List
|