diff --git a/net/web/package.json b/net/web/package.json
index 45b580ab..584bd518 100644
--- a/net/web/package.json
+++ b/net/web/package.json
@@ -13,6 +13,7 @@
"react-easy-crop": "^4.1.4",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
+ "react-virtualized": "^9.22.3",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.0"
},
diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
index 2e8afc69..e90f8988 100644
--- a/net/web/src/User/Conversation/Conversation.jsx
+++ b/net/web/src/User/Conversation/Conversation.jsx
@@ -2,19 +2,67 @@ 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';
+import { ConversationWrapper, CloseButton, ListItem } from './Conversation.styled';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
export function Conversation() {
+ const [ scrollIndex, setScrollIndex ] = useState(null);
const { state, actions } = useConversation();
+ const cache = new CellMeasurerCache({
+ defaultHeight: 50,
+ fixedWidth: true
+ });
+
+ useEffect(() => {
+ })
+
+ const renderRow = ({ index, isScrolling, key, parent, style }) => {
+
+ return (
+
+ {({ measure, registerChild }) => (
+ // 'style' attribute required to position cell (within parent List)
+
+
+
+
+ )}
+
+ );
+ }
+
return (
-
+
+
+
+ {({height, width}) => (
+
+ )}
+
+
+