From cdaf4e03d1c684306698542672f59d5d0933f501 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 22 Aug 2022 15:00:12 -0700
Subject: [PATCH] preparing add topic

---
 .../src/session/conversation/Conversation.jsx |  9 ++++
 .../conversation/Conversation.styled.js       | 17 +++++++
 .../conversation/addTopic/AddTopic.jsx        | 37 ++++++++++++++
 .../conversation/addTopic/AddTopic.styled.js  | 51 +++++++++++++++++++
 .../conversation/addTopic/useAddTopic.hook.js | 16 ++++++
 5 files changed, 130 insertions(+)
 create mode 100644 net/web/src/session/conversation/addTopic/AddTopic.jsx
 create mode 100644 net/web/src/session/conversation/addTopic/AddTopic.styled.js
 create mode 100644 net/web/src/session/conversation/addTopic/useAddTopic.hook.js

diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index 832348b6..4cce5336 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -2,6 +2,7 @@ import { ConversationWrapper } from './Conversation.styled';
 import { SettingOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
 import { Logo } from 'logo/Logo';
+import { AddTopic } from './addTopic/AddTopic';
 
 export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
 
@@ -29,6 +30,14 @@ console.log(state);
           </div>
         )}
       </div>
+      <div class="thread">
+      </div>
+      <div class="divider">
+        <div class="line" />
+      </div>
+      <div class="topic">
+        <AddTopic />
+      </div>
     </ConversationWrapper>
   );
 }
diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js
index de7ca7c6..0a06d787 100644
--- a/net/web/src/session/conversation/Conversation.styled.js
+++ b/net/web/src/session/conversation/Conversation.styled.js
@@ -49,4 +49,21 @@ export const ConversationWrapper = styled.div`
       padding-left: 16px;
     }
   }
+
+  .thread {
+    flex-grow: 1;
+  }
+
+  .divider {
+    padding-left: 16px;
+    padding-right: 16px;
+    
+    .line {
+      border-top: 1px solid ${Colors.divider};
+    }
+  }
+
+  .topic {
+    flex-shrink: 0;
+  }
 `
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx
new file mode 100644
index 00000000..930d2746
--- /dev/null
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@@ -0,0 +1,37 @@
+import { AddTopicWrapper } from './AddTopic.styled';
+import { useAddTopic } from './useAddTopic.hook';
+import { Input } from 'antd';
+import { useRef, useState } from 'react';
+import { FontColorsOutlined, FontSizeOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
+
+export function AddTopic() {
+
+  const [hint, setHint] = useState("send");
+  const msg = useRef();
+
+  const keyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      msg.current.blur();
+      console.log("SEND");
+    }
+  }
+
+  return (
+    <AddTopicWrapper>
+      <div class="carousel"></div>
+      <div class="message">
+        <Input.TextArea ref={msg} placeholder="New Message" spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
+            autocapitalize="none" enterkeyhint="send" onKeyDown={(e) => keyDown(e)} />
+      </div>
+      <div class="buttons">
+        <div class="button space"><PaperClipOutlined /></div>
+        <div class="button space"><FontSizeOutlined /></div>
+        <div class="button space"><FontColorsOutlined /></div>
+        <div class="end">
+          <div class="button"><SendOutlined /></div>
+        </div>
+      </div>
+    </AddTopicWrapper>
+  );
+}
+
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.styled.js b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
new file mode 100644
index 00000000..cdbb209d
--- /dev/null
+++ b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const AddTopicWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .message {
+    width: 100%;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .buttons {
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 16px;
+    width: 100%;
+    display: flex;
+    flex-direction: row; 
+    align-items: center;
+
+    .button {
+      display: flex;
+      flex-align: center;
+      justify-content: center;
+      align-items: center;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      border: 1px solid ${Colors.divider};
+      background-color: ${Colors.white};
+      font-size: 18px;
+      color: ${Colors.enabled};
+    }
+
+    .space {
+      margin-right: 8px;
+    }
+
+    .end {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+  }
+`
diff --git a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
new file mode 100644
index 00000000..1dea7d51
--- /dev/null
+++ b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
@@ -0,0 +1,16 @@
+import { useContext, useState } from 'react';
+
+export function useAddTopic() {
+  
+  const [state, setState] = useState({});
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  };
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+