adding conversation context

net/web/src/App.js

@@ -1,5 +1,6 @@
 import login from './login.png';
 import { AppContextProvider } from './AppContext/AppContext';
+import { ConversationContextProvider } from './ConversationContext/ConversationContext';
 import { Home } from './Home/Home';
 import { Login } from './Login/Login';
 import { Create } from './Create/Create';
@@ -26,8 +27,16 @@ function App() {
             <Route path="/user" element={ <User /> }>
               <Route path="profile" element={<Profile />} />
               <Route path="contact/:guid" element={<Contact />} />
-              <Route path="conversation/:card/:channel" element={<Conversation />} />
+              <Route path="conversation/:card/:channel" element={
-              <Route path="conversation/:channel" element={<Conversation />} />
+                <ConversationContextProvider>
+                  <Conversation />
+                </ConversationContextProvider>
+              } />
+              <Route path="conversation/:channel" element={
+                <ConversationContextProvider>
+                  <Conversation />
+                </ConversationContextProvider>
+              } />
             </Route>
           </Routes>
         </Router>   

net/web/src/ConversationContext/ConversationContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useConversationContext } from './useConversationContext.hook';
+
+export const ConversationContext = createContext({});
+
+export function ConversationContextProvider({ children }) {
+  const { state, actions } = useConversationContext();
+  return (
+    <ConversationContext.Provider value={{ state, actions }}>
+      {children}
+    </ConversationContext.Provider>
+  );
+}
+

net/web/src/ConversationContext/useConversationContext.hook.js

@@ -0,0 +1,20 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useConversationContext() {
+  const [state, setState] = useState({});
+
+  useEffect(() => {
+    console.log("CREATED CONVERSATION");
+  }, []);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  const actions = {
+  }
+
+  return { state, actions }
+}
+
+

net/web/src/User/Conversation/Conversation.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { ConversationContextProvider } from '../../ConversationContext/ConversationContext';
 import { CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
 import { Button, Checkbox, Modal } from 'antd'
 import { ConversationWrapper, CloseButton, ListItem } from './Conversation.styled';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import { AddTopic } from './AddTopic/AddTopic';
-import { VirtualList } from '../..//VirtualList/VirtualList';
+import { VirtualList } from '../../VirtualList/VirtualList';
 import { TopicItem } from './TopicItem/TopicItem';
 
 export function Conversation() {

net/web/src/User/Conversation/TopicItem/TopicItem.jsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { TopicItemWrapper } from './TopicItem.styled';
 import ReactResizeDetector from 'react-resize-detector';
+import { useTopicItem } from './useTopicItem.hook';
 
 export function TopicItem({ topic }) {
 
+  const { state, actions } = useTopicItem();
   const [ text, setText ] = useState(null);
 
   useEffect(() => {

net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js

@@ -0,0 +1,20 @@
+import { useContext, useState, useEffect, useRef } from 'react';
+import { AppContext } from '../../../AppContext/AppContext';
+import { ConversationContext } from '../../../ConversationContext/ConversationContext';
+
+export function useTopicItem() {
+
+  const [state, setState] = useState({});
+
+  const app = useContext(AppContext);
+  const conversation = useContext(ConversationContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+  };
+
+  return { state, actions };
+}

net/web/src/User/Conversation/useConversation.hook.js

@@ -5,6 +5,7 @@ import { getChannelTopics } from '../../Api/getChannelTopics';
 import { getChannelTopic } from '../../Api/getChannelTopic';
 import { getContactChannelTopics } from '../../Api/getContactChannelTopics';
 import { getContactChannelTopic } from '../../Api/getContactChannelTopic';
+import { ConversationContext } from '../../ConversationContext/ConversationContext';
 
 export function useConversation() {
   
@@ -15,6 +16,7 @@ export function useConversation() {
   const { card, channel } = useParams();
   const navigate = useNavigate();
   const app = useContext(AppContext);
+  const conversation = useContext(ConversationContext);
   const topics = useRef(new Map());
 
   const updateState = (value) => {

net/web/src/VirtualList/VirtualList.jsx

@@ -289,7 +289,7 @@ export function VirtualList({ items, itemRenderer }) {
       <VirtualItem style={{ top: container.top, paddingTop: GUTTER, paddingBottom: GUTTER }}>
         <ReactResizeDetector handleHeight={true}>
           {({ height }) => {
-            if (typeof height !== 'undefined' && height > 0) {
+            if (typeof height !== 'undefined') {
               onItemHeight(container, height);
             }
             return itemRenderer(items[container.index]);