fuse/src/views/scene/list.tsx

import { SceneType } from "constant"
import { Table } from 'antd'
import { getTypeColumns } from './table-cloumns'
import style from './style.module.scss'
import { useEffect } from "react"
import { 
  useDispatch,
  useSelector, 
  fetchScenes,
  scenesSelector
} from 'store'


export type SceneListProps = {type: SceneType}

export const SceneList = ({ type }: SceneListProps) => {
  const dispatch = useDispatch()
  const scenes = useSelector(scenesSelector)

  useEffect(() => {
    dispatch(fetchScenes(type))
  }, [dispatch, type])

  return (
    <div className={style['table-body']}>
      <Table columns={getTypeColumns(type)} dataSource={scenes} rowKey="title" />
    </div>
  )
}

export default SceneList