Index.js 3.7 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
import React, { useState, useEffect } from 'react'
import ToolUserView from './View'
import {
    getListActions,
    changeStatusAction,
    deleteAction,
} from 'app/apis/Functions/action'
import { useHistory } from 'react-router-dom'
import KEY from '../../../assets/Key'
import { connect } from 'react-redux'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import useDebounce from 'app/hooks/useDebounce'

const ToolNotificate = (props) => {
    const [txtSearch, setTxtSearch] = useState('')
    const [activeSelected, setActiveSeleted] = useState(null)
    const [changeActive, setChangeActive] = useState(1)
    const searchDebount = useDebounce(txtSearch, 1000)

    const [pageIndex, setPageIndex] = useState(0)
    const [pageSize] = useState(10)
    const [totalRecords, setTotalRecord] = useState(0)

    const history = useHistory()

    const [data, setData] = useState([])
    const [permissions, setPermissions] = useState([])

    const handeChangeActive = async (id, status_id) => {
        props.showLoading()
        const res = await changeStatusAction({ id, status_id })
        props.hideLoading()
        if (res.data.code == 200) {
            getData()
            toast.success('Thay đổi trạng thái thành công!', {
                theme: 'colored',
            })
        } else {
            toast.error('Thay đổi trạng thái thất bại!', {
                theme: 'colored',
            })
        }
    }

    const getData = async () => {
        props.showLoading()
        const res = await getListActions({
            name: searchDebount,
            page_no: pageIndex + 1,
            page_size: pageSize,
        })

        props.hideLoading()

        if (res.data.code == 200 && res.data.data) {
            console.log(res.data)
            const newList = res.data.data.data.map((e, i) => {
                return { ...e, index: i + 1 + pageIndex * pageSize }
            })

            setData(newList)
            setTotalRecord(res.data.data.total_elements)
        } else if (res.data.code == 401) {
            localStorage.removeItem(KEY.API_TOKEN)
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    useEffect(() => {
        getData()
    }, [txtSearch, pageIndex])

    const removeItem = async (id) => {
        props.showLoading()
        const res = await deleteAction({ id })
        props.hideLoading()
        if (res.data.code == 200) {
            getData()
            toast.success('Xoá bản ghi thành công!', {
                theme: 'colored',
            })
        } else if (res.data.code == 401) {
            localStorage.removeItem(KEY.API_TOKEN)
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Xoá bản ghi thất bại!', {
                theme: 'colored',
            })
        }
    }

    return (
        <ToolUserView
            data={data}
            removeItem={removeItem}
            setTxtSearch={setTxtSearch}
            setActiveSeleted={setActiveSeleted}
            pageIndex={pageIndex}
            changeActive={changeActive}
            setChangeActive={setChangeActive}
            setPageIndex={setPageIndex}
            activeSelected={activeSelected}
            handeChangeActive={handeChangeActive}
            totalRecords={totalRecords}
            permissions={permissions}
        />
    )
}

const mapStateToProps = (state) => {
    return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
    ToolNotificate
)