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.
45 lines
1.3 KiB
45 lines
1.3 KiB
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;
|
|
|