centurion/frontend/src/components/Feed.tsx

import React, {useState} from 'react';
import {Col, Timeline} from "antd"
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";
import {useSocket} from "use-socketio/lib";

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

interface Event extends TimestampEvent {
    key: number
}

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

    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="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" reverse={true}>
                {feedItems.map(item =>
                    <Timeline.Item>
                        {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
                        {item.text[0]} - {item.text[1]}
                    </Timeline.Item>
                )}

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

export default Feed;