centurion/frontend/src/components/Feed.tsx

import React, {useEffect, useState} from 'react';
import {Col, Timeline} from "antd"
import socket from "../util/socket";
import {Tick, TimestampEvent} from "../types/types";
import shot from "../img/shot.png";
import song from "../img/song.png";
import talk from "../img/talk.png";
import time from "../img/time.png";

const images = {
    shot, song, talk, time
};

interface Event extends TimestampEvent {
    key: number
}

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

    useEffect(() => {
        socket.on("tick_event", (tick: Tick) => {
            if (!tick.next) {
                return;
            }

            if (tick.current === tick.next.timestamp) {
                const newItems = tick.next.events as Event[];

                const limit = Math.min(8, feedItems.length)
                for (let i = 0; i < limit; i++) {
                    newItems.push(feedItems[i]);
                }

                for (let j = 0; j < newItems.length; j++) {
                    newItems[j].key = j;
                }

                setFeedItems(newItems);
                console.log(newItems)
            }

            console.log(feedItems)
        });

        return () => {
            socket.off("tick_event");
        }
    });

    return (
        // <Col className="feed" span={16}>
        //     {feedItems.map(o =>
        //         <Row key={o.key} className="feed-item">
        //             <Col span={4}>Tijd</Col>
        //             <Col span={3} offset={5}>{o.title}</Col>
        //             <Col span={3}>Icoon</Col>
        //             <Col span={3}>{o.body}</Col>
        //         </Row>
        //     )}
        // </Col>
        <Col className="time-feed" span={16}>
            <Timeline mode="alternate">
                {feedItems.map(item =>
                    <Timeline.Item>
                        {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
                        {/*{item.text[0]} - {item.text[1]}*/}
                        {item}
                    </Timeline.Item>
                )}

            </Timeline>
        </Col>
    );
};

export default Feed;