centurion/frontend/src/components/Feed.tsx

import React, {useState} from 'react';
import {Col, Timeline} from "antd"
import {Tick, TimestampEvent} from "../types/types";
import {useSocket} from "use-socketio/lib";
import FeedItem from "./FeedItem"
import { TransitionGroup, CSSTransition } from 'react-transition-group'

const Feed = () => {
    const [feedItems, setFeedItems] = useState<TimestampEvent[]>([]);

    useSocket("tick_event", async (tick: Tick) => {
        if (!tick.next) {
            return;
        }

        if (tick.current === tick.next.timestamp) {
            // Current tick is a new event.

            const newItems: any[] = [];
            for (let i = 0; i < feedItems.length; i++) {
                newItems.push(feedItems[i]);
            }
            for (let j = 0; j < tick.next.events.length; j++) {
                newItems.push(tick.next.events[j]);
            }

            // @ts-ignore
            setFeedItems(newItems);
        }
    });

    return (
        <Col className="time-feed" span={24} md={16}>
            <TransitionGroup className="feed-reverse">
                {feedItems.map((item, i) =>
                    <CSSTransition timeout={500} classNames="fade" key={i}>
                        <FeedItem {...item}/>
                    </CSSTransition>
                )}
            </TransitionGroup>
        </Col>
    );
};

export default Feed;