62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Switch, Route, useParams } from 'react-router-dom';
|
|
import { ClusterName, TopicName } from 'redux/interfaces';
|
|
import EditContainer from 'components/Topics/Topic/Edit/EditContainer';
|
|
import DetailsContainer from 'components/Topics/Topic/Details/DetailsContainer';
|
|
import PageLoader from 'components/common/PageLoader/PageLoader';
|
|
|
|
import SendMessage from './SendMessage/SendMessage';
|
|
|
|
interface RouterParams {
|
|
clusterName: ClusterName;
|
|
topicName: TopicName;
|
|
}
|
|
|
|
interface TopicProps {
|
|
isTopicFetching: boolean;
|
|
resetTopicMessages: () => void;
|
|
fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => void;
|
|
}
|
|
|
|
const Topic: React.FC<TopicProps> = ({
|
|
isTopicFetching,
|
|
fetchTopicDetails,
|
|
resetTopicMessages,
|
|
}) => {
|
|
const { clusterName, topicName } = useParams<RouterParams>();
|
|
|
|
React.useEffect(() => {
|
|
fetchTopicDetails(clusterName, topicName);
|
|
}, [fetchTopicDetails, clusterName, topicName]);
|
|
|
|
React.useEffect(() => {
|
|
return () => {
|
|
resetTopicMessages();
|
|
};
|
|
}, []);
|
|
|
|
if (isTopicFetching) {
|
|
return <PageLoader />;
|
|
}
|
|
|
|
return (
|
|
<Switch>
|
|
<Route
|
|
exact
|
|
path="/ui/clusters/:clusterName/topics/:topicName/edit"
|
|
component={EditContainer}
|
|
/>
|
|
<Route
|
|
exact
|
|
path="/ui/clusters/:clusterName/topics/:topicName/message"
|
|
component={SendMessage}
|
|
/>
|
|
<Route
|
|
path="/ui/clusters/:clusterName/topics/:topicName"
|
|
component={DetailsContainer}
|
|
/>
|
|
</Switch>
|
|
);
|
|
};
|
|
|
|
export default Topic;
|