In progress changes for Kanban Board and updated schema migrations. Performed some cleanup.

client/src/components/job-lines/job-lines.component.jsx

@@ -35,10 +35,11 @@ export default function JobLinesComponent({ loading, joblines }) {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const handleChange = event => {
-    const { value } = event.target;
-    setState({ ...state, filterinfo: { text: [value] } });
-  };
+  // const handleChange = event => {
+  //   const { value } = event.target;
+  //   setState({ ...state, filterinfo: { text: [value] } });
+  // };
+
 console.log('joblines', joblines)
   return (
     <Table

client/src/components/white-board-kanban/white-board-kanban.component.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Board from "react-trello";
+import WhiteBoardCard from "../white-board-card/white-board-card.component";
+
+export default function WhiteBoardKanBan({ data, eventBus }) {
+  const setEventBus = handle => {
+    eventBus = handle;
+  };
+
+  return (
+    <Board
+      tagStyle={{ fontSize: "80%" }}
+      data={data}
+      draggable
+      eventBusHandle={setEventBus}
+      components={{ Card: WhiteBoardCard }}
+      onCardClick={(cardId, metadata) =>
+        alert(`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`)
+      }
+    />
+  );
+}

client/src/components/white-board-kanban/white-board-kanban.container.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useSubscription, useQuery } from "@apollo/react-hooks";
+import { SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+import { GET_BODYSHOP } from "../../graphql/local.queries";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import Alert from "../../components/alert/alert.component";
+import WhiteBoardKanBan from "./white-board-kanban.component";
+
+export default function WhiteBoardKanBanContainer() {
+//   const HookBodyshopData = useQuery(GET_BODYSHOP);
+  const { loading, error, data } = useSubscription(
+    SUBSCRIPTION_JOBS_IN_PRODUCTION,
+    {
+      fetchPolicy: "network-only"
+    }
+  );
+
+  const static_data = {
+    lanes: [
+      {
+        id: "lane1",
+        title: "Planned Tasks",
+        label: "2/2",
+        cards: [
+          {
+            id: "Card1",
+            title: "Write Blog",
+            description: "Can AI make memes",
+            label: "30 mins"
+          },
+          {
+            id: "Card2",
+            title: "Pay Rent",
+            description: "Transfer via NEFT",
+            label: "5 mins",
+            metadata: { sha: "be312a1" }
+          }
+        ]
+      },
+      {
+        id: "lane2",
+        title: "Completed",
+        label: "0/0",
+        cards: []
+      }
+    ]
+  };
+
+//   if (HookBodyshopData.loading) return "Local query loading";
+//   if (HookBodyshopData.error) return "Local query error" + error.message;
+//   console.log("HookBodyshopData.data", HookBodyshopData.data);
+  if (loading) return <LoadingSpinner />;
+  if (error) return <Alert message={error.message} />;
+  let eventBus;
+  console.log("Sub data", data);
+  return <WhiteBoardKanBan eventBus={eventBus} data={static_data} />;
+}

client/src/components/white-board-left-sider/white-board-left-sider.container.jsx

@@ -1,20 +1,7 @@
 import React from "react";
-import { Query } from "react-apollo";
 
 import WhiteBoardLeftSiderComponent from "./white-board-left-sider.component";
-import Spin from "../loading-spinner/loading-spinner.component";
-import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
 
 export default function WhiteBoardPageContainer() {
-  return (
-    <Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
-      {({ loading, error, data: { whiteBoardLeftSiderVisible } }) => {
-        if (loading) return <Spin />;
-        if (error) return error.message;
-        return (
-          <WhiteBoardLeftSiderComponent visible={whiteBoardLeftSiderVisible} />
-        );
-      }}
-    </Query>
-  );
+  return <WhiteBoardLeftSiderComponent />;
 }