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.
95 lines
2.5 KiB
95 lines
2.5 KiB
import React, { MouseEvent, useRef, useState } from "react";
|
|
|
|
import "../css/feed.css";
|
|
import connection, { useRoom } from "../lib/Connection";
|
|
import { Button, Input, Modal } from "antd";
|
|
import Ticker from "react-ticker";
|
|
|
|
const FeedTicker = (props: any) => {
|
|
const room = useRoom();
|
|
|
|
const [showTickerMessageModal, setShowTickerMessageModal] = useState(false);
|
|
const [tickerMessage, setTickerMessage] = useState("");
|
|
const [blockMessageInput, setBlockMessageInput] = useState(false);
|
|
const messageInput = useRef<Input>(null);
|
|
function handleTickerMessageButton(e: MouseEvent) {
|
|
if (blockMessageInput) return;
|
|
setShowTickerMessageModal(true);
|
|
|
|
setTimeout(function () {
|
|
messageInput.current?.focus();
|
|
}, 100);
|
|
}
|
|
|
|
function cancelTickerMessageModal() {
|
|
if (blockMessageInput) return;
|
|
setShowTickerMessageModal(false);
|
|
setTickerMessage("");
|
|
}
|
|
|
|
async function okTickerMessageModal() {
|
|
if (blockMessageInput) return;
|
|
if (tickerMessage) {
|
|
setBlockMessageInput(true);
|
|
|
|
try {
|
|
await connection.submitTickerMessage(tickerMessage);
|
|
setBlockMessageInput(false);
|
|
setShowTickerMessageModal(false);
|
|
setTickerMessage("");
|
|
if (messageInput.current) {
|
|
messageInput.current.input.value = "";
|
|
}
|
|
} catch {
|
|
setBlockMessageInput(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getForIndex(index: number) {
|
|
return room?.ticker[index % room.ticker.length];
|
|
}
|
|
|
|
return (
|
|
<div className="ticker-container">
|
|
<Modal
|
|
title="Stuur berichtje naar de ticker"
|
|
onCancel={cancelTickerMessageModal}
|
|
onOk={okTickerMessageModal}
|
|
visible={showTickerMessageModal}
|
|
>
|
|
<Input
|
|
value={tickerMessage}
|
|
ref={messageInput}
|
|
placeholder="Bericht"
|
|
onChange={(e) => setTickerMessage(e.target.value)}
|
|
onKeyPress={(e) => {
|
|
e.key === "Enter" && okTickerMessageModal();
|
|
}}
|
|
/>
|
|
</Modal>
|
|
|
|
<div className="ticker-outer">
|
|
<Ticker>
|
|
{({ index }) => (
|
|
<>
|
|
{room?.ticker && (
|
|
<span className="ticker-item">{getForIndex(index)}</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</Ticker>
|
|
|
|
<Button
|
|
className="ticker-message-button"
|
|
type="ghost"
|
|
onClick={handleTickerMessageButton}
|
|
>
|
|
+
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FeedTicker;
|
|
|