Topics.tsx 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. import React from 'react';
  2. import { ClusterId } from 'types';
  3. import {
  4. Switch,
  5. Route,
  6. } from 'react-router-dom';
  7. import ListContainer from './List/ListContainer';
  8. import DetailsContainer from './Details/DetailsContainer';
  9. import PageLoader from 'components/common/PageLoader/PageLoader';
  10. import NewContainer from './New/NewContainer';
  11. interface Props {
  12. clusterId: string;
  13. isFetched: boolean;
  14. fetchBrokers: (clusterId: ClusterId) => void;
  15. fetchTopicList: (clusterId: ClusterId) => void;
  16. }
  17. const Topics: React.FC<Props> = ({
  18. clusterId,
  19. isFetched,
  20. fetchTopicList,
  21. }) => {
  22. React.useEffect(() => { fetchTopicList(clusterId); }, [fetchTopicList, clusterId]);
  23. if (isFetched) {
  24. return (
  25. <Switch>
  26. <Route exact path="/clusters/:clusterId/topics" component={ListContainer} />
  27. <Route exact path="/clusters/:clusterId/topics/new" component={NewContainer} />
  28. <Route path="/clusters/:clusterId/topics/:topicName" component={DetailsContainer} />
  29. </Switch>
  30. );
  31. }
  32. return (<PageLoader />);
  33. }
  34. export default Topics;