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