From 5da72353cd6a89bfc6c7ce5f7ec9369b58ecdbd4 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Sun, 10 Apr 2022 13:19:25 -0700
Subject: [PATCH] adding conversation page

---
 net/web/src/App.js                            |  2 +
 .../src/User/Conversation/Conversation.jsx    | 21 +++++++++
 .../User/Conversation/Conversation.styled.jsx | 47 +++++++++++++++++++
 .../User/Conversation/useConversation.hook.js | 32 +++++++++++++
 .../Channels/ChannelItem/ChannelItem.jsx      |  9 ++--
 .../ChannelItem/useChannelItem.hook.jsx       | 23 +++++++++
 .../Contacts/Channels/useChannels.hook.js     |  5 +-
 7 files changed, 132 insertions(+), 7 deletions(-)
 create mode 100644 net/web/src/User/Conversation/Conversation.jsx
 create mode 100644 net/web/src/User/Conversation/Conversation.styled.jsx
 create mode 100644 net/web/src/User/Conversation/useConversation.hook.js
 create mode 100644 net/web/src/User/SideBar/Contacts/Channels/ChannelItem/useChannelItem.hook.jsx

diff --git a/net/web/src/App.js b/net/web/src/App.js
index 24c6d6f1..e99f307c 100644
--- a/net/web/src/App.js
+++ b/net/web/src/App.js
@@ -6,6 +6,7 @@ import { Create } from './Create/Create';
 import { User } from './User/User';
 import { Profile } from './User/Profile/Profile';
 import { Contact } from './User/Contact/Contact';
+import { Conversation } from './User/Conversation/Conversation';
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import 'antd/dist/antd.min.css'; 
 
@@ -25,6 +26,7 @@ function App() {
             <Route path="/user" element={ <User /> }>
               <Route path="profile" element={<Profile />} />
               <Route path="contact/:guid" element={<Contact />} />
+              <Route path="conversation/:id" element={<Conversation />} />
             </Route>
           </Routes>
         </Router>   
diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
new file mode 100644
index 00000000..2e8afc69
--- /dev/null
+++ b/net/web/src/User/Conversation/Conversation.jsx
@@ -0,0 +1,21 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { CloseOutlined, UserOutlined } from '@ant-design/icons';
+import { useConversation } from './useConversation.hook';
+import { Button, Checkbox, Modal } from 'antd'
+import { ConversationWrapper, CloseButton } from './Conversation.styled';
+
+export function Conversation() {
+
+  const { state, actions } = useConversation();
+
+  return (
+    <ConversationWrapper>
+      <div class="header">
+        <div class="title">{ state.handle }</div>
+        <CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
+      </div>
+      <div class="container"></div>
+    </ConversationWrapper>
+  )
+}
+
diff --git a/net/web/src/User/Conversation/Conversation.styled.jsx b/net/web/src/User/Conversation/Conversation.styled.jsx
new file mode 100644
index 00000000..ca715e8c
--- /dev/null
+++ b/net/web/src/User/Conversation/Conversation.styled.jsx
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { Button, Spin } from 'antd';
+
+export const ConversationWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #f6f5ed;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+
+  .header {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    background-color: #888888;
+    height: 64px;
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .title {
+    height: 64px;
+    flex-grow: 1;
+    text-align: center;
+    font-size: 2em;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: flex-begin;
+    color: white;
+    padding-left: 16px;
+  }
+
+  .close {
+    font-size: 24px;
+    color: white;
+  }
+`;
+
+export const CloseButton = styled(Button)`
+  font-size: 24px;
+  color: white;
+`;
+
diff --git a/net/web/src/User/Conversation/useConversation.hook.js b/net/web/src/User/Conversation/useConversation.hook.js
new file mode 100644
index 00000000..55e7dfa0
--- /dev/null
+++ b/net/web/src/User/Conversation/useConversation.hook.js
@@ -0,0 +1,32 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from '../../AppContext/AppContext';
+import { useNavigate, useLocation, useParams } from "react-router-dom";
+
+export function useConversation() {
+  
+  const [state, setState] = useState({
+  });
+
+  const data = useLocation();
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const app = useContext(AppContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    close: () => {
+      navigate('/user')
+    },
+  };
+
+  useEffect(() => {
+    if (app?.state?.access === 'user') {
+      console.log("CONVERSATION:", id);
+    }
+  }, [app, id])
+
+  return { state, actions };
+}
diff --git a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelItem.jsx b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelItem.jsx
index 67d4afc4..f6fe4f5d 100644
--- a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelItem.jsx
+++ b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelItem.jsx
@@ -1,18 +1,15 @@
 import React, { useEffect, useState } from 'react'
+import { useChannelItem } from './useChannelItem.hook';
 import { ChannelItemWrapper } from './ChannelItem.styled';
 import { ChannelLogo } from './ChannelLogo/ChannelLogo';
 import { ChannelLabel } from './ChannelLabel/ChannelLabel';
 
 export function ChannelItem({ item }) {
 
-  // if 0 or 5+ render number in big border
-  // if 2 renber other in big border
-  // if 3 or 4 render others in small borders
-
-  // subject, hosting, username list, last msg, updated time, unread flag  
+  let { state, actions } = useChannelItem();
 
   const onSelect = () => {
-    console.log(item);
+    actions.select(item);
   }
 
   return (
diff --git a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/useChannelItem.hook.jsx b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/useChannelItem.hook.jsx
new file mode 100644
index 00000000..eb7912de
--- /dev/null
+++ b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/useChannelItem.hook.jsx
@@ -0,0 +1,23 @@
+import { useContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export function useChannelItem() {
+
+  const [state, setState] = useState({
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const navigate = useNavigate();
+
+  const actions = {
+    select: (item) => {
+      navigate(`/user/conversation/${item.channel.id}`);
+    },
+  };
+
+  return { state, actions };
+}
+
diff --git a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js b/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js
index 26cadfaa..3095fd92 100644
--- a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js
+++ b/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js
@@ -20,12 +20,15 @@ export function useChannels() {
   const app = useContext(AppContext);
 
   const actions = {
+    select: (channel) => {
+      navigate(`/user/channel/${channel.id}`);
+    },
     getCardImageUrl: app?.actions?.getCardImageurl,
     getCards: app?.actions?.getConnectedCards,
     setStartCards: (cards) => updateState({ startCards: cards }),
     setStartSubject: (value) => updateState({ startSubject: value }),
     setStartDescription: (value) => updateState({ startDescription: value }),
-    addChannel: async () => { 
+    addChannel: async () => {
       let done = false;
       if (!state.busy) {
         updateState({ busy: true });