import React, { useState } from 'react'
|
import { is, fromJS } from 'immutable'
|
import update from 'immutability-helper'
|
|
import Card from './card'
|
// import './index.scss'
|
|
const Container = ({ list, handleList, handleMenu, deleteMenu }) => {
|
const [cards, setCards] = useState(list)
|
const moveCard = (id, atIndex) => {
|
const { card, index } = findCard(id)
|
const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
|
handleList(_cards)
|
}
|
|
if (!is(fromJS(cards), fromJS(list))) {
|
setCards(list)
|
}
|
|
const findCard = id => {
|
const card = cards.filter(c => c.MenuID === id)[0]
|
return {
|
card,
|
index: cards.indexOf(card),
|
}
|
}
|
|
const editCard = id => {
|
const { card } = findCard(id)
|
handleMenu(card)
|
}
|
|
const delCard = id => {
|
const { card } = findCard(id)
|
deleteMenu(card)
|
}
|
|
return (
|
<div className="menu">
|
{cards.map(card => {
|
return (
|
<Card
|
id={card.MenuID}
|
key={card.MenuID}
|
card={card}
|
moveCard={moveCard}
|
editCard={editCard}
|
delCard={delCard}
|
findCard={findCard}
|
/>
|
)
|
})}
|
</div>
|
)
|
}
|
export default Container
|