DataJPA_V2/src/components/Board/index.js
2020-05-17 18:12:36 +07:00

35 lines
808 B
JavaScript

import React, { useState } from 'react';
import produce from 'immer';
import { loadLists } from '../../services/api';
import BoardContext from './context';
import List from '../List';
import { Container } from './styles';
const data = loadLists();
export default function Board() {
const [lists, setLists] = useState(data);
function move(fromList, toList, from, to) {
setLists(produce(lists, draft => {
const dragged = draft[fromList].cards[from];
draft[fromList].cards.splice(from, 1);
draft[toList].cards.splice(to, 0, dragged);
}))
}
return(
<BoardContext.Provider value={{ lists, move }}>
<Container>
{lists.map((list, index) => <List key={list.title} index={index} data={list} />)}
</Container>
</BoardContext.Provider>
);
}