74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { IAppModule } from "../../Models/IAppModule";
|
|
import { IMessage } from "../../Models/IMessage";
|
|
import Message from "./Message";
|
|
import CreateMessage from "./CreateMessage";
|
|
|
|
interface IMessagesPageProps {
|
|
module: IAppModule;
|
|
}
|
|
|
|
const MessagesPage: React.FC<IMessagesPageProps> = (props) => {
|
|
const [messages, setMessages] = React.useState<IMessage[]>([]);
|
|
const [showAddMessage, setShowAddMessage] = React.useState(false);
|
|
|
|
const refreshMessages = () => {
|
|
props.module.service.getMessages(
|
|
(data) => {
|
|
setMessages(data);
|
|
},
|
|
(error) => {
|
|
console.error(error);
|
|
}
|
|
);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
refreshMessages();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="d-flex flex-row-reverse mb-4">
|
|
{props.module.security.CanMessage && (
|
|
<div>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setShowAddMessage(true);
|
|
}}
|
|
>
|
|
{props.module.resources.Add}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="messages">
|
|
{messages.map((message) => (
|
|
<Message
|
|
key={message.MessageId}
|
|
message={message}
|
|
module={props.module}
|
|
onDelete={() => {
|
|
setMessages(messages.filter((m) => m.MessageId !== message.MessageId));
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
{showAddMessage && (
|
|
<CreateMessage
|
|
module={props.module}
|
|
shown={showAddMessage}
|
|
dismiss={() => setShowAddMessage(false)}
|
|
addNewMessage={(message) => {
|
|
setMessages([message, ...messages]);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MessagesPage;
|