37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import Board from './Board';
|
|
import Header from './Header';
|
|
import React, { useState } from "react";
|
|
|
|
const zip = (a: Array<any>, b: Array<any>): Array<[any, any]> => a.map((v: any, i: number): [any, any] => [v, b[i]]);
|
|
|
|
function App() {
|
|
const [name, setName] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [columns, setColumns] = useState({});
|
|
const [startedColumns, setStartedColumns] = useState([]);
|
|
const [completedColumns, setCompletedColumns] = useState([]);
|
|
|
|
window.addEventListener('message', event => {
|
|
const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
|
|
setName(event.data.index.name);
|
|
setDescription(event.data.index.description);
|
|
setColumns(Object.fromEntries(
|
|
zip(
|
|
Object.keys(event.data.index.columns),
|
|
Object.values(event.data.index.columns).map(column => (column as string[]).map(taskId => tasks[taskId]))
|
|
)
|
|
));
|
|
setStartedColumns(event.data.startedColumns);
|
|
setCompletedColumns(event.data.completedColumns);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<Header name={name} description={description} />
|
|
<Board columns={columns} startedColumns={startedColumns} completedColumns={completedColumns} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|