centurion/frontend/src/components/Feed.tsx

import React, {useRef} from 'react';
import {Col} from "antd"

import {TimelineItem} from "../types/types";

import FeedItem from "./FeedItem"
import connection, {roomTime, useRoom, useRoomRunningChanged, useTimeline} from "../lib/Connection";
import {useUpdateAfterDelay} from "../util/hooks";
import CSSTransition from "react-transition-group/CSSTransition";
import TransitionGroup from "react-transition-group/TransitionGroup";

const Feed = (props: any) => {
    const roomRunning = useRoomRunningChanged()?.running || false;
    const timeline = useTimeline();

    useUpdateAfterDelay(500)

    let liveFeed: TimelineItem[] = [];

    if (roomRunning && timeline != null) {
        liveFeed = timeline.feed.filter(item => {
            return item.timestamp * 1000 <= roomTime()
        });
    }

    return (
        <Col className="time-feed" span={24} md={16}>
            <TransitionGroup className="feed-reverse">
                {liveFeed.map((item, i) =>
                    item.events.map((event, j) =>
                        <CSSTransition timeout={500} classNames="fade" key={`${item.timestamp}.${j}`}>
                            <FeedItem item={event} key={`${item.timestamp}.${j}f`}/>
                        </CSSTransition>
                    )
                )}
            </TransitionGroup>
        </Col>
    );
};

export default Feed;