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.
|
|
|
import React, {useEffect, useState} from 'react';
|
|
|
|
import {Col, Row} from "antd"
|
|
|
|
import socket from "../util/socket";
|
|
|
|
import {Tick} from "../types/types";
|
|
|
|
|
|
|
|
|
|
|
|
const Feed = () => {
|
|
|
|
const [count, setCount] = useState(0);
|
|
|
|
const [feedItems, setFeedItems] = useState([{
|
|
|
|
title: "Ha1", body: "Doei", key: -1
|
|
|
|
}]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
socket.on("tick_event", (tick: Tick) => {
|
|
|
|
|
|
|
|
// console.log("Shot:", tick.nextShot?.timestamp, tick.nextShot?.count)
|
|
|
|
// setCount(c => c + 1);
|
|
|
|
// const newItems = feedItems;
|
|
|
|
// newItems.push({
|
|
|
|
// title: "Ha1", body: "Doei", key: count
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// setFeedItems(newItems);
|
|
|
|
});
|
|
|
|
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Feed;
|