get historybooking

src/App.css

@@ -5,3 +5,9 @@
 .ant-input-affix-wrapper {
     border-radius: 6px;
 }
+.ant-input {
+    border-radius: 6px;
+}
+.ant-select-selector {
+    border-radius: 6px !important;
+}

src/Layout/ProfileLayout/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { NavLink } from 'react-router-dom'
-import { Row, Col, Avatar, Upload } from 'antd'
+import { Row, Col, Avatar } from 'antd'
+import { UserOutlined } from '@ant-design/icons'
 import styled from 'styled-components'
 
+import { AuthContext } from '../../contexts/AuthProvider'
 import DefaultLayout from '../DefaultLayout'
-import { UserOutlined } from '@ant-design/icons'
 
 const contentStyle = {
     maxWidth: 1100,
@@ -29,6 +30,11 @@ const AvatarStyled = styled(Avatar)`
 `
 
 function Profile({ children }) {
+    const {
+        authState: {
+            user: { avatar },
+        },
+    } = useContext(AuthContext)
     return (
         <DefaultLayout>
             <Row gutter={[24, 24]} style={{ ...contentStyle }}>
@@ -38,7 +44,7 @@ function Profile({ children }) {
                             <AvatarStyled
                                 icon={<UserOutlined />}
                                 size="large"
-                                src="https://joeschmoe.io/api/v1/random"
+                                src={avatar} //"https://joeschmoe.io/api/v1/random"
                             />
                         </Col>
                         <Col span={18} offset={4}>

src/components/CreateBooking/index.jsx

@@ -66,7 +66,7 @@ const SelectComponent = ({ title, options, style, ...props }) => (
             {title}
         </div>
         <Select
-            defaultValue=""
+            defaultValue={options[0]?.displayName || ''}
             style={{ width: 'auto', minWidth: 120, ...style }}
             {...props}
         >

src/contexts/BookingProvider.jsx

@@ -39,7 +39,33 @@ function BookingProvider({ children }) {
         return data
     }
 
-    const value = { bookingState, checkBooking, confirmBooking }
+    const getHistoryBooking = async (userId) => {
+        dispatch({
+            type: types.SET_LOADING,
+            payload: true,
+        })
+
+        const data = await services.getHistoryBooking(userId)
+        console.log(`bookings data: `, data)
+        if (data.success) {
+            dispatch({
+                type: types.LOAD_SUCCESS,
+                payload: data.bookings,
+            })
+        } else {
+            dispatch({
+                type: types.LOAD_FAILED,
+            })
+        }
+        return data
+    }
+
+    const value = {
+        bookingState,
+        checkBooking,
+        confirmBooking,
+        getHistoryBooking,
+    }
     return (
         <BookingContext.Provider value={value}>
             {children}

src/core/services/booking/booking.service.js

@@ -56,4 +56,17 @@ const confirmBooking = async ({
     }
 }
 
-export { checkBooking, confirmBooking }
+const getHistoryBooking = async (userId) => {
+    const token = getCookie(ACCESS_TOKEN_NAME)
+    setHeaderToken(token)
+    try {
+        const res = await axios.get(
+            `${API_BASE_URL}/booking?customerId=${userId}`
+        )
+        return successHandler(res)
+    } catch (error) {
+        return errorHandler(error)
+    }
+}
+
+export { checkBooking, confirmBooking, getHistoryBooking }

src/pages/Checkout.jsx

@@ -73,7 +73,7 @@ function Checkout() {
                 duration: 5,
                 description: 'Đặt sân thành công!',
             })
-            navigate('/profile')
+            navigate('/mybooking')
         }
     }
 

src/pages/MyBooking.jsx

@@ -1,6 +1,8 @@
-import React from 'react'
-import { Row, Col, Table } from 'antd'
+import React, { useContext, useEffect } from 'react'
+import { Row, Col, Table, Spin } from 'antd'
 import ProfileLayout from '../layout/ProfileLayout'
+import { AuthContext } from '../contexts/AuthProvider'
+import { BookingContext } from '../contexts/BookingProvider'
 
 const columns = [
     {
@@ -49,17 +51,32 @@ const contentStyle = {
 }
 
 function MyBooking() {
-    const isLoading = true
+    const {
+        authState: { user, isLoading },
+    } = useContext(AuthContext)
+    const {
+        bookingState: { bookings, isLoading: isLoadingBooking },
+        getHistoryBooking,
+    } = useContext(BookingContext)
+
+    console.log(`history booking: `, bookings)
+
+    useEffect(() => {
+        getHistoryBooking(user._id)
+    }, [])
+
+    if (isLoading) return <Spin />
+
     return (
         <ProfileLayout>
             <Row style={contentStyle}>
                 <Col span={24} style={{ textAlign: 'center' }}>
                     <h3>Lịch sử đặt sân</h3>
                     <Table
                         columns={columns}
-                        dataSource={dataSource}
+                        dataSource={bookings}
                         pagination={pagination}
-                        loading={isLoading}
+                        loading={isLoadingBooking}
                     />
                 </Col>
             </Row>