Added routing and basic board component.

client/src/pages/white-board/white-board.page.container.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Query, Mutation } from "react-apollo";
+
+import WhiteBoardPage from "./white-board.page";
+import Spin from "../../components/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 }) => {
+        if (loading) return <Spin />;
+        if (error) return error.message;
+        console.log('data from getwhiteboardquery', data)
+        return <WhiteBoardPage />;
+      }}
+    </Query>
+  );
+}

client/src/pages/white-board/white-board.page.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Board from "react-trello";
+import WhiteBoardCard from "../../components/white-board-card/white-board-card.component";
+import { Layout, Icon, Menu } from "antd";
+
+export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
+  const 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: []
+      }
+    ]
+  };
+
+  const { Sider, Content } = Layout;
+  return (
+    <Layout>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth="0"
+        onBreakpoint={broken => {
+          //console.log(broken);
+        }}
+        onCollapse={(collapsed, type) => {
+          //console.log(collapsed, type);
+        }}
+      >
+        <div className="logo" />
+        <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
+          <Menu.Item key="1">
+            <Icon type="user" />
+            <span className="nav-text">nav 1</span>
+          </Menu.Item>
+          <Menu.Item key="2">
+            <Icon type="video-camera" />
+            <span className="nav-text">nav 2</span>
+          </Menu.Item>
+          <Menu.Item key="3">
+            <Icon type="upload" />
+            <span className="nav-text">nav 3</span>
+          </Menu.Item>
+          <Menu.Item key="4">
+            <Icon type="user" />
+            <span className="nav-text">nav 4</span>
+          </Menu.Item>
+        </Menu>
+      </Sider>
+
+      <Content>
+        <Board
+          tagStyle={{ fontSize: "80%" }}
+          data={data}
+          draggable
+          components={{ Card: WhiteBoardCard }}
+          onCardClick={(cardId, metadata) =>
+            alert(
+              `Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`
+            )
+          }
+        />
+      </Content>
+    </Layout>
+  );
+}