Pass kanbn to react via webview message

src/App.tsx

@@ -1,37 +1,30 @@
-// import * as vscode from 'vscode';
 import Board from './Board';
 import Header from './Header';
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
-function App(props) {
-  // const [cwd, setCwd] = useState('initialcwd');
-  // const [index, setIndex] = useState({});
-  // const [tasks, setTasks] = useState([]);
+const zip = (a: Array<any>, b: Array<any>): Array<[any, any]> => a.map((v: any, i: number): [any, any] => [v, b[i]]);
 
-  // useEffect(() => {
-  //   // process.chdir(vscode!.workspace.workspaceFolders[0].uri.fsPath);
-  //   import('@basementuniverse/kanbn/src/main').then(kanbn => {
-  //     vscode.postMessage({
-  //       command: 'error',
-  //       text: 'hello!'
-  //     });
-  //   });
-  // });
-  // console.log(vscode!.workspace.workspaceFolders[0].uri.fsPath);
+function App() {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [columns, setColumns] = useState({});
 
-  // window.addEventListener('message', event => {
-  //   const message = event.data; // The JSON data our extension sent
-  //   switch (message.command) {
-  //     case 'test':
-  //       setCwd(message.cwd);
-  //       break;
-  //   }
-  // });
+  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]))
+      )
+    ));
+  });
 
   return (
     <div>
-      <Header />
-      <Board />
+      <Header name={name} description={description} />
+      <Board columns={columns} />
     </div>
   );
 }

src/Board.tsx

@@ -1,33 +1,10 @@
 import React, { useState } from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
-import uuid from "uuid/v4";
 
-const itemsFromBackend = [
-  { id: uuid(), content: "First task" },
-  { id: uuid(), content: "Second task" },
-  { id: uuid(), content: "Third task" },
-  { id: uuid(), content: "Fourth task" },
-  { id: uuid(), content: "Fifth task" }
-];
-
-const columnsFromBackend = {
-  [uuid()]: {
-    name: "Requested",
-    items: itemsFromBackend
-  },
-  [uuid()]: {
-    name: "To do",
-    items: []
-  },
-  [uuid()]: {
-    name: "In Progress",
-    items: []
-  },
-  [uuid()]: {
-    name: "Done",
-    items: []
-  }
-};
+export type task = {
+  id: string,
+  name: string
+}
 
 const onDragEnd = (result, columns, setColumns) => {
   if (!result.destination) return;
@@ -66,14 +43,15 @@ const onDragEnd = (result, columns, setColumns) => {
   }
 };
 
-function Board() {
-  const [columns, setColumns] = useState(columnsFromBackend);
+const Board = ({ columns }) => {
+  // const [columns, setColumns] = useState(props.columns);
   return (
     <div style={{ display: "flex", justifyContent: "center", height: "100%" }}>
-      <DragDropContext
+      {/* <DragDropContext
         onDragEnd={result => onDragEnd(result, columns, setColumns)}
-      >
-        {Object.entries(columns).map(([columnId, column], index) => {
+      > */}
+      <DragDropContext>
+        {Object.entries(columns).map(([columnId, column]) => {
           return (
             <div
               style={{
@@ -83,7 +61,7 @@ function Board() {
               }}
               key={columnId}
             >
-              <h2>{column.name}</h2>
+              <h2>{columnId}</h2>
               <div style={{ margin: 8 }}>
                 <Droppable droppableId={columnId} key={columnId}>
                   {(provided, snapshot) => {
@@ -100,7 +78,7 @@ function Board() {
                           minHeight: 500
                         }}
                       >
-                        {column.items.map((item, index) => {
+                        {(column as task[]).map((item, index) => {
                           return (
                             <Draggable
                               key={item.id}
@@ -125,7 +103,7 @@ function Board() {
                                       ...provided.draggableProps.style
                                     }}
                                   >
-                                    {item.content}
+                                    {item.name}
                                   </div>
                                 );
                               }}

src/Header.tsx

@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 
-function Header() {
+const Header = ({ name, description }) => {
   return (
     <div>
-      Header
+      <h1>{name}</h1>
+      <p>
+        {description}
+      </p>
+      <hr />
     </div>
   );
 }

src/index.css

@@ -1,5 +1,5 @@
 body {
   margin: 0;
-  padding: 0;
+  padding: 1em;
   font-family: sans-serif;
 }

src/uuid.v4.d.ts

@@ -1 +0,0 @@
-declare module 'uuid/v4';