Kopie van https://gitlab.com/studieverenigingvia/ict/centurion met een paar aanpassingen
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.1 KiB
73 lines
2.1 KiB
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) {
|
|
// 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 () => {
|
|
socket.off("tick_event");
|
|
}
|
|
}, [feedItems]);
|
|
|
|
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;
|
|
|