kafka-ui/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
Robert Azizbekyan 6d8c6cace0
Refactoring Topics reducer into redux toolkit (#1939)
* WIP: creating topicSlice

* reformating reducer into toolkit slice and fixed tests

* removing unnecessary lines

* removing dismiss alert action and tests for actions

* removing unnecessary code

* adding tests for selectors

* adding test case for new topics

* adding test cases for topic reducer when fulfilled

* removing unnecessary code

* adding test cases for asyncthunks to increase coverage

* adding new test cases to cover topicSlice

* adding clear messsages fulfilled test case

* removing unnecessary code
2022-05-25 14:54:33 +04:00

65 lines
1.6 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: (payload: {
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;