Logs scrolling and appearing again

web/src/components/logs/index.tsx

@@ -15,7 +15,7 @@ export default function Logs() {
   useEffect(() => {
     if (ulRef.current) {
       const { children } = ulRef.current;
-      children[children.length - 1]?.scrollIntoView();
+      children[children.length - 1]?.scrollIntoView({behavior:'smooth'});
     }
   }, [logs]);
 

web/src/components/trades/index.tsx

@@ -1,17 +1,21 @@
-import { useEffect, useState, Fragment } from 'react';
+import { useEffect, useState,  useRef } from 'react';
 import Trade from './trade';
 import socket from '../../services/socket';
 
 export default function Trades() {
-  let [trades, setTrades] = useState<JSX.Element[]>([]);
+  const [trades, setTrades] = useState<JSX.Element[]>([]);
+  const ulRef = useRef<HTMLUListElement>(null);
 
   useEffect(() => {
     socket.on('trade', (trade: any) => {
-      if (trades.length >= 50) trades = trades.slice(1, 50);
-      trades.push(<Trade trade={trade} />);
-      setTrades(trades);
+      setTrades((trades) => [...trades, <Trade trade={trade} />]);
+      console.log(trade)
+      if (ulRef.current) {
+        const { children } = ulRef.current;
+        children[children.length - 1]?.scrollIntoView({behavior:'smooth'});
+      }
     });
   }, []);
 
-  return <Fragment>{trades}</Fragment>;
+  return <ul ref={ulRef}>{trades}</ul>;
 }

web/src/components/trades/item.tsx

@@ -1,22 +1,48 @@
-import { Item, getItemName, getImageUrl } from './util';
-import { GiftFill } from 'react-bootstrap-icons';
+import { Item as IItem, getItemName, getImageUrl } from './util';
 
-export default function ItemFrame({ item, received }: { item: Item; received: boolean }) {
+export default function Item({ item, received }: { item: IItem; received: boolean }) {
   const name = getItemName(item);
   return (
-    <img
-      className={`alert shadow-sm border-2 alert-${received ? 'success' : 'danger'} p-1 m-1`}
-      src={getImageUrl(item)}
-      alt={name}
-      height="50px"
-      width="50px"
-      data-bs-toggle="tooltip"
-      data-bs-placement="top"
-      title={name}
-    />
+    <li className="list-inline-item m-0">
+      <img
+        className={`alert shadow-sm border-2 alert-${received ? 'success' : 'danger'} p-1 m-1`}
+        src={getImageUrl(item)}
+        alt={name}
+        height="50px"
+        width="50px"
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title={name}
+      />
+    </li>
   );
 }
 
-export function EmptyItemFrame() {
-  return <GiftFill className="alert shadow-sm border-2 alert-secondary text-secondary p-1 m-1" height="50px" width="50px" />;
+export function EmptyItem({ received }: any) {
+  return (
+    <li className="list-inline-item m-0">
+      <img
+        className={`alert shadow-sm border-2 alert-${received ? 'success' : 'danger'} p-1 m-1`}
+        alt=""
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // Empty 1px image
+        height="50px"
+        width="50px"
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="No items on this side"
+      />
+    </li>
+  );
+}
+
+export function ItemSet({ items, received = false }: any) {
+  return (
+    <ul className="list-inline text-center mb-0" style={{ maxWidth: '48%' }}>
+      {items.length === 0 ? (
+        <EmptyItem received={received} />
+      ) : (
+        items.map((item: any) => <Item item={item} received={received} />)
+      )}
+    </ul>
+  );
 }

web/src/components/trades/trade.tsx

@@ -1,33 +1,14 @@
-import ItemFrame, { EmptyItemFrame } from './item';
-import { Item, Trade as ITrade } from './util';
+import { ItemSet } from './item';
+import { Trade as ITrade } from './util';
 import { ArrowLeftRight } from 'react-bootstrap-icons';
 
 export default function Trade({ trade }: { trade: ITrade }) {
+  const title = `Profit: ${trade.profit} - Partner: ${trade.partner} - Trade Id: ${trade.offerId}`;
   return (
-    <div
-      className="d-flex justify-content-between align-items-center my-1 py-1"
-      data-bs-toggle="tooltip"
-      data-bs-html="true"
-      title={`Profit: ${trade.profit} - Partner: ${trade.partner} - Trade Id: ${trade.offerId}`}>
+    <li className="d-flex justify-content-between align-items-center my-1 py-1" data-bs-toggle="tooltip" title={title}>
       <ItemSet items={trade.theirItems} received={true} />
       <ArrowLeftRight className="text-secondary mx-5" size="40px" />
       <ItemSet items={trade.ourItems} />
-    </div>
-  );
-}
-
-function mapItems(items: Item[], received: boolean) {
-  return items.map((item) => (
-    <li className="list-inline-item m-0">
-      <ItemFrame item={item} received={received} />
     </li>
-  ));
-}
-
-function ItemSet({ items, received = false }: any) {
-  return (
-    <ul className="list-inline text-center mb-0" style={{ maxWidth: '48%' }}>
-      {items.length > 0 ? mapItems(items, received) : <EmptyItemFrame />}
-    </ul>
   );
 }