From 9553062045d0a79cb301a0f4746d3bc9de659189 Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Sat, 25 Jan 2020 09:33:17 -0800
Subject: [PATCH] Adding chat window.

---
 client/src/App/App.css                        | 28 ++++++++++++++++++-
 .../chat-window/chat-window.component.jsx     |  5 ++++
 .../chat-window/chat-window.container.jsx     | 18 ++++++++++++
 .../components/footer/footer.component.jsx    |  5 ++--
 client/src/pages/manage/manage.page.jsx       | 12 ++++----
 5 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/chat-window/chat-window.component.jsx
 create mode 100644 client/src/components/chat-window/chat-window.container.jsx

diff --git a/client/src/App/App.css b/client/src/App/App.css
index 3cb918ee2..a4b0e7a43 100644
--- a/client/src/App/App.css
+++ b/client/src/App/App.css
@@ -1 +1,27 @@
-@import '~antd/dist/antd.css';
\ No newline at end of file
+@import "~antd/dist/antd.css";
+
+.ant-layout-header {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 5vh;
+  right: 0px;
+  overflow: hidden;
+}
+.ant-layout-content {
+  position: absolute;
+  top: 5vh;
+  bottom: 3vh;
+  left: 0px;
+  right: 0px;
+  overflow: auto;
+}
+
+.ant-layout-footer {
+  position: absolute;
+  bottom: 0px;
+  height: 3vh;
+  left: 0px;
+  right: 0px;
+  overflow: hidden;
+}
diff --git a/client/src/components/chat-window/chat-window.component.jsx b/client/src/components/chat-window/chat-window.component.jsx
new file mode 100644
index 000000000..e4fd51848
--- /dev/null
+++ b/client/src/components/chat-window/chat-window.component.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ChatWindowComponent() {
+  return <div>Chat Windows and more</div>;
+}
diff --git a/client/src/components/chat-window/chat-window.container.jsx b/client/src/components/chat-window/chat-window.container.jsx
new file mode 100644
index 000000000..cd70e1060
--- /dev/null
+++ b/client/src/components/chat-window/chat-window.container.jsx
@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import ChatWindowComponent from "./chat-window.component";
+import { Button } from "antd";
+
+export default function ChatWindowContainer() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div style={{ position: "absolute", zIndex: 1000 }}>
+      {visible ? <ChatWindowComponent /> : null}
+      <Button
+        onClick={() => {
+          setVisible(!visible);
+        }}>
+        Open!
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/components/footer/footer.component.jsx b/client/src/components/footer/footer.component.jsx
index 36532e88d..9061616ef 100644
--- a/client/src/components/footer/footer.component.jsx
+++ b/client/src/components/footer/footer.component.jsx
@@ -1,5 +1,6 @@
-import React from "react";
-import { Row, Col } from "antd";
+import React, { useState } from "react";
+import { Row, Col, Button } from "antd";
+import ChatWindowContainer from "../chat-window/chat-window.container";
 
 export default function FooterComponent() {
   return (
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 56f4e47f0..9e450f058 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -8,18 +8,19 @@ import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
-import './manage.page.styles.scss'
+import "./manage.page.styles.scss";
+import ChatWindowContainer from "../../components/chat-window/chat-window.container";
 
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
-const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
+const JobsDetailPage = lazy(() =>
+  import("../jobs-detail/jobs-detail.page.container")
+);
 const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 const JobsDocumentsPage = lazy(() =>
   import("../../components/jobs-documents/jobs-documents.container")
 );
 
-
-
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
@@ -35,7 +36,7 @@ export default function Manage({ match }) {
         <HeaderContainer />
       </Header>
 
-      <Content className="content-container">
+      <Content className='content-container'>
         <ErrorBoundary>
           <Suspense
             fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
@@ -62,6 +63,7 @@ export default function Manage({ match }) {
       </Content>
 
       <Footer>
+        <ChatWindowContainer />
         <FooterComponent />
       </Footer>
       <BackTop />