Update the file structure

src/components/AppContainer.tsx

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 import {
   fetchClustersList,
-} from 'redux/reducers/clusters/thunks';
+} from 'redux/actions';
 import App from './App';
 import { getIsClusterListFetched } from 'redux/reducers/clusters/selectors';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),

src/components/Brokers/Brokers.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'lib/interfaces';
+import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'redux/interfaces';
 import useInterval from 'lib/hooks/useInterval';
 import formatBytes from 'lib/utils/formatBytes';
 import cx from 'classnames';

src/components/Brokers/BrokersContainer.ts

@@ -2,10 +2,10 @@ import { connect } from 'react-redux';
 import {
   fetchBrokers,
   fetchBrokerMetrics,
-} from 'redux/reducers/brokers/thunks';
+} from 'redux/actions';
 import Brokers from './Brokers';
 import * as brokerSelectors from 'redux/reducers/brokers/selectors';
-import { RootState, ClusterId } from 'lib/interfaces';
+import { RootState, ClusterId } from 'redux/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

src/components/Dashboard/ClustersWidget/ClusterWidget.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cluster, ClusterStatus } from 'lib/interfaces';
+import { Cluster, ClusterStatus } from 'redux/interfaces';
 import formatBytes from 'lib/utils/formatBytes';
 import { NavLink } from 'react-router-dom';
 import { clusterBrokersPath } from 'lib/paths';

src/components/Dashboard/ClustersWidget/ClustersWidget.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { chunk } from 'lodash';
-import { Cluster } from 'lib/interfaces';
+import { Cluster } from 'redux/interfaces';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 import ClusterWidget from './ClusterWidget';

src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts

@@ -5,7 +5,7 @@ import {
   getOnlineClusters,
   getOfflineClusters,
 } from 'redux/reducers/clusters/selectors';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 
 const mapStateToProps = (state: RootState) => ({
   clusters: getClusterList(state),

src/components/Nav/ClusterMenu.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Cluster } from 'lib/interfaces';
+import { Cluster } from 'redux/interfaces';
 import { NavLink } from 'react-router-dom';
 import { clusterBrokersPath, clusterTopicsPath } from 'lib/paths';
 

src/components/Nav/Nav.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cluster } from 'lib/interfaces';
+import { Cluster } from 'redux/interfaces';
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
 import ClusterMenu from './ClusterMenu';

src/components/Nav/NavConatiner.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import Nav from './Nav';
 import { getIsClusterListFetched, getClusterList } from 'redux/reducers/clusters/selectors';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),

src/components/Topics/Details/Details.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, Topic, TopicDetails, TopicName } from 'lib/interfaces';
+import { ClusterId, Topic, TopicDetails, TopicName } from 'redux/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { NavLink, Switch, Route } from 'react-router-dom';
 import { clusterTopicsPath, clusterTopicSettingsPath, clusterTopicPath, clusterTopicMessagesPath } from 'lib/paths';

src/components/Topics/Details/DetailsContainer.ts

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Details from './Details';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

src/components/Topics/Details/Messages/Messages.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, TopicName } from 'lib/interfaces';
+import { ClusterId, TopicName } from 'redux/interfaces';
 
 interface Props {
   clusterId: ClusterId;

src/components/Topics/Details/Messages/MessagesContainer.ts

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Messages from './Messages';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

src/components/Topics/Details/Overview/Overview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, Topic, TopicDetails, TopicName } from 'lib/interfaces';
+import { ClusterId, Topic, TopicDetails, TopicName } from 'redux/interfaces';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 

src/components/Topics/Details/Overview/OverviewContainer.ts

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import {
   fetchTopicDetails,
-} from 'redux/reducers/topics/thunks';
+} from 'redux/actions';
 import Overview from './Overview';
-import { RootState, TopicName, ClusterId } from 'lib/interfaces';
+import { RootState, TopicName, ClusterId } from 'redux/interfaces';
 import { getTopicByName, getIsTopicDetailsFetched } from 'redux/reducers/topics/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 

src/components/Topics/Details/Settings/Settings.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, TopicName, TopicConfig } from 'lib/interfaces';
+import { ClusterId, TopicName, TopicConfig } from 'redux/interfaces';
 
 interface Props {
   clusterId: ClusterId;

src/components/Topics/Details/Settings/SettingsContainer.ts

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { RootState, ClusterId, TopicName } from 'lib/interfaces';
+import { RootState, ClusterId, TopicName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   fetchTopicConfig,
-} from 'redux/reducers/topics/thunks';
+} from 'redux/actions';
 import Settings from './Settings';
 import {
   getTopicConfig,

src/components/Topics/List/List.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TopicWithDetailedInfo, ClusterId } from 'lib/interfaces';
+import { TopicWithDetailedInfo, ClusterId } from 'redux/interfaces';
 import ListItem from './ListItem';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { NavLink } from 'react-router-dom';

src/components/Topics/List/ListContainer.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 import { getTopicList, getExternalTopicList } from 'redux/reducers/topics/selectors';
 import List from './List';
 import { withRouter, RouteComponentProps } from 'react-router-dom';

src/components/Topics/List/ListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { NavLink } from 'react-router-dom';
-import { TopicWithDetailedInfo } from 'lib/interfaces';
+import { TopicWithDetailedInfo } from 'redux/interfaces';
 
 const ListItem: React.FC<TopicWithDetailedInfo> = ({
   name,

src/components/Topics/New/New.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId, CleanupPolicy, TopicFormData, TopicName } from 'lib/interfaces';
+import { ClusterId, CleanupPolicy, TopicFormData, TopicName } from 'redux/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
 import { useForm, ErrorMessage } from 'react-hook-form';

src/components/Topics/New/NewContainer.ts

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { RootState, ClusterId, TopicFormData, TopicName, Action } from 'lib/interfaces';
+import { RootState, ClusterId, TopicFormData, TopicName, Action } from 'redux/interfaces';
 import New from './New';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { createTopic } from 'redux/reducers/topics/thunks';
+import { createTopic } from 'redux/actions';
 import { getTopicCreated } from 'redux/reducers/topics/selectors';
 import { clusterTopicPath } from 'lib/paths';
 import { ThunkDispatch } from 'redux-thunk';

src/components/Topics/Topics.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClusterId } from 'lib/interfaces';
+import { ClusterId } from 'redux/interfaces';
 import {
   Switch,
   Route,

src/components/Topics/TopicsContainer.ts

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { fetchTopicList } from 'redux/reducers/topics/thunks';
+import { fetchTopicList } from 'redux/actions';
 import Topics from './Topics';
 import { getIsTopicListFetched } from 'redux/reducers/topics/selectors';
-import { RootState, ClusterId } from 'lib/interfaces';
+import { RootState, ClusterId } from 'redux/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 
 interface RouteProps {

src/lib/constants.ts

@@ -9,5 +9,7 @@ export const BASE_PARAMS: RequestInit = {
 export const BASE_URL = process.env.REACT_APP_API_URL;
 
 export const TOPIC_NAME_VALIDATION_PATTERN = RegExp(/^[.,A-Za-z0-9_-]+$/);
+
 export const MILLISECONDS_IN_DAY = 86_400_000;
+
 export const BYTES_IN_GB = 1_073_741_824;

src/lib/paths.ts

@@ -1,4 +1,7 @@
-import { ClusterId, TopicName } from 'lib/interfaces';
+import {
+  ClusterId,
+  TopicName,
+} from 'redux/interfaces';
 
 const clusterPath = (clusterId: ClusterId) => `/clusters/${clusterId}`;
 

src/redux/reducers/topics/actionType.ts → src/redux/actionType.ts

@@ -1,4 +1,16 @@
-enum ActionType {
+export enum ActionType {
+  GET_CLUSTERS__REQUEST = 'GET_CLUSTERS__REQUEST',
+  GET_CLUSTERS__SUCCESS = 'GET_CLUSTERS__SUCCESS',
+  GET_CLUSTERS__FAILURE = 'GET_CLUSTERS__FAILURE',
+
+  GET_BROKERS__REQUEST = 'GET_BROKERS__REQUEST',
+  GET_BROKERS__SUCCESS = 'GET_BROKERS__SUCCESS',
+  GET_BROKERS__FAILURE = 'GET_BROKERS__FAILURE',
+
+  GET_BROKER_METRICS__REQUEST = 'GET_BROKER_METRICS__REQUEST',
+  GET_BROKER_METRICS__SUCCESS = 'GET_BROKER_METRICS__SUCCESS',
+  GET_BROKER_METRICS__FAILURE = 'GET_BROKER_METRICS__FAILURE',
+
   GET_TOPICS__REQUEST = 'GET_TOPICS__REQUEST',
   GET_TOPICS__SUCCESS = 'GET_TOPICS__SUCCESS',
   GET_TOPICS__FAILURE = 'GET_TOPICS__FAILURE',
@@ -14,6 +26,4 @@ enum ActionType {
   POST_TOPIC__REQUEST = 'POST_TOPIC__REQUEST',
   POST_TOPIC__SUCCESS = 'POST_TOPIC__SUCCESS',
   POST_TOPIC__FAILURE = 'POST_TOPIC__FAILURE',
-}
-
-export default ActionType;
+};

src/redux/reducers/topics/actions.ts → src/redux/actions/actions.ts

@@ -1,6 +1,32 @@
 import { createAsyncAction} from 'typesafe-actions';
-import ActionType from './actionType';
-import { Topic, TopicDetails, TopicName, TopicConfig} from 'lib/interfaces';
+import { ActionType } from 'redux/actionType';
+import {
+  Broker,
+  BrokerMetrics,
+  Cluster,
+  Topic,
+  TopicConfig,
+  TopicDetails,
+  TopicName,
+} from 'redux/interfaces';
+
+export const fetchBrokersAction = createAsyncAction(
+  ActionType.GET_BROKERS__REQUEST,
+  ActionType.GET_BROKERS__SUCCESS,
+  ActionType.GET_BROKERS__FAILURE,
+)<undefined, Broker[], undefined>();
+
+export const fetchBrokerMetricsAction = createAsyncAction(
+  ActionType.GET_BROKER_METRICS__REQUEST,
+  ActionType.GET_BROKER_METRICS__SUCCESS,
+  ActionType.GET_BROKER_METRICS__FAILURE,
+)<undefined, BrokerMetrics, undefined>();
+
+export const fetchClusterListAction = createAsyncAction(
+  ActionType.GET_CLUSTERS__REQUEST,
+  ActionType.GET_CLUSTERS__SUCCESS,
+  ActionType.GET_CLUSTERS__FAILURE,
+)<undefined, Cluster[], undefined>();
 
 export const fetchTopicListAction = createAsyncAction(
   ActionType.GET_TOPICS__REQUEST,

src/redux/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './actions';
+export * from './thunks';

src/redux/actions/thunks.ts

@@ -0,0 +1,79 @@
+import * as api from 'redux/api';
+import * as actions from './actions';
+import {
+  PromiseThunk,
+  Cluster,
+  ClusterId,
+  TopicFormData,
+  TopicName,
+} from 'redux/interfaces';
+
+export const fetchBrokers = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchBrokersAction.request());
+  try {
+    const payload = await api.getBrokers(clusterId);
+    dispatch(actions.fetchBrokersAction.success(payload));
+  } catch (e) {
+    dispatch(actions.fetchBrokersAction.failure());
+  }
+}
+
+export const fetchBrokerMetrics = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchBrokerMetricsAction.request());
+  try {
+    const payload = await api.getBrokerMetrics(clusterId);
+    dispatch(actions.fetchBrokerMetricsAction.success(payload));
+  } catch (e) {
+    dispatch(actions.fetchBrokerMetricsAction.failure());
+  }
+}
+
+export const fetchClustersList = (): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchClusterListAction.request());
+  try {
+    const clusters: Cluster[] = await api.getClusters();
+    dispatch(actions.fetchClusterListAction.success(clusters));
+  } catch (e) {
+    dispatch(actions.fetchClusterListAction.failure());
+  }
+}
+
+export const fetchTopicList = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchTopicListAction.request());
+  try {
+    const topics = await api.getTopics(clusterId);
+    dispatch(actions.fetchTopicListAction.success(topics));
+  } catch (e) {
+    dispatch(actions.fetchTopicListAction.failure());
+  }
+}
+
+export const fetchTopicDetails = (clusterId: ClusterId, topicName: TopicName): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchTopicDetailsAction.request());
+  try {
+    const topicDetails = await api.getTopicDetails(clusterId, topicName);
+    dispatch(actions.fetchTopicDetailsAction.success({ topicName, details: topicDetails }));
+  } catch (e) {
+    dispatch(actions.fetchTopicDetailsAction.failure());
+  }
+}
+
+export const fetchTopicConfig = (clusterId: ClusterId, topicName: TopicName): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.fetchTopicConfigAction.request());
+  try {
+    const config = await api.getTopicConfig(clusterId, topicName);
+    dispatch(actions.fetchTopicConfigAction.success({ topicName, config }));
+  } catch (e) {
+    dispatch(actions.fetchTopicConfigAction.failure());
+  }
+}
+
+export const createTopic = (clusterId: ClusterId, form: TopicFormData): PromiseThunk<void> => async (dispatch) => {
+  dispatch(actions.createTopicAction.request());
+  try {
+    await api.postTopic(clusterId, form);
+    dispatch(actions.createTopicAction.success());
+  } catch (e) {
+    dispatch(actions.createTopicAction.failure());
+  }
+}

src/lib/api/brokers.ts → src/redux/api/brokers.ts

@@ -2,7 +2,7 @@ import {
   Broker,
   ClusterId,
   BrokerMetrics,
-} from 'lib/interfaces';
+} from 'redux/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

src/lib/api/clusters.ts → src/redux/api/clusters.ts

@@ -1,6 +1,6 @@
 import {
   Cluster,
-} from 'lib/interfaces';
+} from 'redux/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

src/lib/api/topics.ts → src/redux/api/topics.ts

@@ -5,7 +5,7 @@ import {
   TopicDetails,
   TopicConfig,
   TopicFormData,
-} from 'lib/interfaces';
+} from 'redux/interfaces';
 import {
   BASE_URL,
   BASE_PARAMS,

src/lib/interfaces/index.ts → src/redux/interfaces/index.ts

@@ -2,9 +2,7 @@ import { AnyAction } from 'redux';
 import { ActionType } from 'typesafe-actions';
 import { ThunkAction } from 'redux-thunk';
 
-import * as topicsActions from 'redux/reducers/topics/actions';
-import * as clustersActions from 'redux/reducers/clusters/actions';
-import * as brokersActions from 'redux/reducers/brokers/actions';
+import * as actions from 'redux/actions/actions';
 
 import { TopicsState } from './topic';
 import { Cluster } from './cluster';
@@ -30,6 +28,6 @@ export interface RootState {
   loader: LoaderState;
 }
 
-export type Action = ActionType<typeof topicsActions | typeof clustersActions | typeof brokersActions>;
+export type Action = ActionType<typeof actions>;
 
 export type PromiseThunk<T> = ThunkAction<Promise<T>, RootState, undefined, AnyAction>;

src/lib/interfaces/loader.ts → src/redux/interfaces/loader.ts

@@ -1,4 +1,4 @@
-import { FetchStatus } from 'lib/interfaces';
+import { FetchStatus } from 'redux/interfaces';
 
 export interface LoaderState {
   [key: string]: FetchStatus;

src/redux/reducers/actionType.ts

@@ -1,9 +0,0 @@
-import topicsActionType from './topics/actionType';
-import clustersActionType from './clusters/actionType';
-import brokersActionType from './brokers/actionType';
-
-export default {
-  ...topicsActionType,
-  ...clustersActionType,
-  ...brokersActionType,
-};

src/redux/reducers/brokers/actionType.ts

@@ -1,11 +0,0 @@
-enum ActionType {
-  GET_BROKERS__REQUEST = 'GET_BROKERS__REQUEST',
-  GET_BROKERS__SUCCESS = 'GET_BROKERS__SUCCESS',
-  GET_BROKERS__FAILURE = 'GET_BROKERS__FAILURE',
-
-  GET_BROKER_METRICS__REQUEST = 'GET_BROKER_METRICS__REQUEST',
-  GET_BROKER_METRICS__SUCCESS = 'GET_BROKER_METRICS__SUCCESS',
-  GET_BROKER_METRICS__FAILURE = 'GET_BROKER_METRICS__FAILURE',
-}
-
-export default ActionType;

src/redux/reducers/brokers/actions.ts

@@ -1,15 +0,0 @@
-import { createAsyncAction} from 'typesafe-actions';
-import ActionType from './actionType';
-import { Broker, BrokerMetrics } from 'lib/interfaces';
-
-export const fetchBrokersAction = createAsyncAction(
-  ActionType.GET_BROKERS__REQUEST,
-  ActionType.GET_BROKERS__SUCCESS,
-  ActionType.GET_BROKERS__FAILURE,
-)<undefined, Broker[], undefined>();
-
-export const fetchBrokerMetricsAction = createAsyncAction(
-  ActionType.GET_BROKER_METRICS__REQUEST,
-  ActionType.GET_BROKER_METRICS__SUCCESS,
-  ActionType.GET_BROKER_METRICS__FAILURE,
-)<undefined, BrokerMetrics, undefined>();

src/redux/reducers/brokers/reducer.ts

@@ -1,5 +1,12 @@
-import { Action, BrokersState, ZooKeeperStatus, BrokerMetrics } from 'lib/interfaces';
-import actionType from 'redux/reducers/actionType';
+import {
+  Action,
+  BrokersState,
+  ZooKeeperStatus,
+  BrokerMetrics,
+} from 'redux/interfaces';
+import {
+  ActionType,
+} from 'redux/actionType';
 
 export const initialState: BrokersState =  {
   items: [],
@@ -32,14 +39,14 @@ const updateBrokerSegmentSize = (state: BrokersState, payload: BrokerMetrics) =>
 
 const reducer = (state = initialState, action: Action): BrokersState => {
   switch (action.type) {
-    case actionType.GET_BROKERS__REQUEST:
+    case ActionType.GET_BROKERS__REQUEST:
       return initialState;
-    case actionType.GET_BROKERS__SUCCESS:
+    case ActionType.GET_BROKERS__SUCCESS:
       return {
         ...state,
         items: action.payload,
       };
-    case actionType.GET_BROKER_METRICS__SUCCESS:
+    case ActionType.GET_BROKER_METRICS__SUCCESS:
       return updateBrokerSegmentSize(state, action.payload);
     default:
       return state;

src/redux/reducers/brokers/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { RootState, FetchStatus, BrokersState } from 'lib/interfaces';
+import { RootState, FetchStatus, BrokersState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const brokersState = ({ brokers }: RootState): BrokersState => brokers;
@@ -29,7 +29,6 @@ export const getMinDiskUsage = createSelector(
     if (brokers.length === 0) {
       return 0;
     }
-
     return Math.min(...brokers.map(({ segmentSize }) => segmentSize));
   },
 );
@@ -40,7 +39,6 @@ export const getMaxDiskUsage = createSelector(
     if (brokers.length === 0) {
       return 0;
     }
-
     return Math.max(...brokers.map(({ segmentSize }) => segmentSize));
   },
 );

src/redux/reducers/brokers/thunks.ts

@@ -1,27 +0,0 @@
-import { getBrokers, getBrokerMetrics } from 'lib/api';
-import {
-  fetchBrokersAction,
-  fetchBrokerMetricsAction,
-} from './actions';
-import { PromiseThunk, ClusterId } from 'lib/interfaces';
-
-
-export const fetchBrokers = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchBrokersAction.request());
-  try {
-    const payload = await getBrokers(clusterId);
-    dispatch(fetchBrokersAction.success(payload));
-  } catch (e) {
-    dispatch(fetchBrokersAction.failure());
-  }
-}
-
-export const fetchBrokerMetrics = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchBrokerMetricsAction.request());
-  try {
-    const payload = await getBrokerMetrics(clusterId);
-    dispatch(fetchBrokerMetricsAction.success(payload));
-  } catch (e) {
-    dispatch(fetchBrokerMetricsAction.failure());
-  }
-}

src/redux/reducers/clusters/actionType.ts

@@ -1,7 +0,0 @@
-enum ActionType {
-  GET_CLUSTERS__REQUEST = 'GET_CLUSTERS__REQUEST',
-  GET_CLUSTERS__SUCCESS = 'GET_CLUSTERS__SUCCESS',
-  GET_CLUSTERS__FAILURE = 'GET_CLUSTERS__FAILURE',
-}
-
-export default ActionType;

src/redux/reducers/clusters/actions.ts

@@ -1,9 +0,0 @@
-import { createAsyncAction} from 'typesafe-actions';
-import ActionType from './actionType';
-import { Cluster } from 'lib/interfaces';
-
-export const fetchClusterListAction = createAsyncAction(
-  ActionType.GET_CLUSTERS__REQUEST,
-  ActionType.GET_CLUSTERS__SUCCESS,
-  ActionType.GET_CLUSTERS__FAILURE,
-)<undefined, Cluster[], undefined>();

src/redux/reducers/clusters/reducer.ts

@@ -1,11 +1,11 @@
-import { Cluster, Action } from 'lib/interfaces';
-import actionType from 'redux/reducers/actionType';
+import { Cluster, Action } from 'redux/interfaces';
+import { ActionType } from 'redux/actionType';
 
 export const initialState: Cluster[] = [];
 
 const reducer = (state = initialState, action: Action): Cluster[] => {
   switch (action.type) {
-    case actionType.GET_CLUSTERS__SUCCESS:
+    case ActionType.GET_CLUSTERS__SUCCESS:
       return action.payload;
     default:
       return state;

src/redux/reducers/clusters/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { Cluster, RootState, FetchStatus, ClusterStatus } from 'lib/interfaces';
+import { Cluster, RootState, FetchStatus, ClusterStatus } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const clustersState = ({ clusters }: RootState): Cluster[] => clusters;

src/redux/reducers/clusters/thunks.ts

@@ -1,19 +0,0 @@
-import {
-  getClusters,
-} from 'lib/api';
-import {
-  fetchClusterListAction,
-} from './actions';
-import { Cluster, PromiseThunk } from 'lib/interfaces';
-
-export const fetchClustersList = (): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchClusterListAction.request());
-
-  try {
-    const clusters: Cluster[] = await getClusters();
-
-    dispatch(fetchClusterListAction.success(clusters));
-  } catch (e) {
-    dispatch(fetchClusterListAction.failure());
-  }
-}

src/redux/reducers/index.ts

@@ -3,7 +3,7 @@ import topics from './topics/reducer';
 import clusters from './clusters/reducer';
 import brokers from './brokers/reducer';
 import loader from './loader/reducer';
-import { RootState } from 'lib/interfaces';
+import { RootState } from 'redux/interfaces';
 
 export default combineReducers<RootState>({
   topics,

src/redux/reducers/loader/reducer.ts

@@ -1,10 +1,14 @@
-import { FetchStatus, Action, LoaderState } from 'lib/interfaces';
+import {
+  FetchStatus,
+  Action,
+  LoaderState,
+} from 'redux/interfaces';
 
 export const initialState: LoaderState = {};
 
 const reducer = (state = initialState, action: Action): LoaderState => {
   const { type } = action;
-  const matches = /(.*)__(REQUEST|SUCCESS|FAILURE)/.exec(type);
+  const matches = /(.*)__(REQUEST|SUCCESS|FAILURE)$/.exec(type);
 
   // not a *__REQUEST / *__SUCCESS /  *__FAILURE actions, so we ignore them
   if (!matches) return state;

src/redux/reducers/loader/selectors.ts

@@ -1,4 +1,4 @@
-import { RootState, FetchStatus } from 'lib/interfaces';
+import { RootState, FetchStatus } from 'redux/interfaces';
 
 export const createFetchingSelector = (action: string) =>
   (state: RootState) => (state.loader[action] || FetchStatus.notFetched);

src/redux/reducers/topics/reducer.ts

@@ -1,5 +1,5 @@
-import { Action, TopicsState, Topic } from 'lib/interfaces';
-import actionType from 'redux/reducers/actionType';
+import { Action, TopicsState, Topic } from 'redux/interfaces';
+import { ActionType } from 'redux/actionType';
 
 export const initialState: TopicsState = {
   byName: {},
@@ -29,9 +29,9 @@ const updateTopicList = (state: TopicsState, payload: Topic[]) => {
 
 const reducer = (state = initialState, action: Action): TopicsState => {
   switch (action.type) {
-    case actionType.GET_TOPICS__SUCCESS:
+    case ActionType.GET_TOPICS__SUCCESS:
       return updateTopicList(state, action.payload);
-    case actionType.GET_TOPIC_DETAILS__SUCCESS:
+    case ActionType.GET_TOPIC_DETAILS__SUCCESS:
       return {
         ...state,
         byName: {
@@ -42,7 +42,7 @@ const reducer = (state = initialState, action: Action): TopicsState => {
           }
         }
       }
-    case actionType.GET_TOPIC_CONFIG__SUCCESS:
+    case ActionType.GET_TOPIC_CONFIG__SUCCESS:
       return {
         ...state,
         byName: {

src/redux/reducers/topics/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { RootState, TopicName, FetchStatus, TopicsState } from 'lib/interfaces';
+import { RootState, TopicName, FetchStatus, TopicsState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const topicsState = ({ topics }: RootState): TopicsState => topics;
@@ -37,11 +37,10 @@ export const getTopicList = createSelector(
   getAllNames,
   getTopicMap,
   (isFetched, allNames, byName) => {
-    if (isFetched) {
-      return allNames.map((name) => byName[name])
+    if (!isFetched) {
+      return [];
     }
-
-    return [];
+    return allNames.map((name) => byName[name])
   },
 );
 

src/redux/reducers/topics/thunks.ts

@@ -1,54 +0,0 @@
-import {
-  getTopics,
-  getTopicDetails,
-  getTopicConfig,
-  postTopic,
-} from 'lib/api';
-import {
-  fetchTopicListAction,
-  fetchTopicDetailsAction,
-  fetchTopicConfigAction,
-  createTopicAction,
-} from './actions';
-import { PromiseThunk, ClusterId, TopicName, TopicFormData } from 'lib/interfaces';
-
-export const fetchTopicList = (clusterId: ClusterId): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchTopicListAction.request());
-  try {
-    const topics = await getTopics(clusterId);
-    dispatch(fetchTopicListAction.success(topics));
-  } catch (e) {
-    dispatch(fetchTopicListAction.failure());
-  }
-}
-
-export const fetchTopicDetails = (clusterId: ClusterId, topicName: TopicName): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchTopicDetailsAction.request());
-  try {
-    const topicDetails = await getTopicDetails(clusterId, topicName);
-    dispatch(fetchTopicDetailsAction.success({ topicName, details: topicDetails }));
-  } catch (e) {
-    dispatch(fetchTopicDetailsAction.failure());
-  }
-}
-
-export const fetchTopicConfig = (clusterId: ClusterId, topicName: TopicName): PromiseThunk<void> => async (dispatch) => {
-  dispatch(fetchTopicConfigAction.request());
-  try {
-    const config = await getTopicConfig(clusterId, topicName);
-    dispatch(fetchTopicConfigAction.success({ topicName, config }));
-  } catch (e) {
-    dispatch(fetchTopicConfigAction.failure());
-  }
-}
-
-export const createTopic = (clusterId: ClusterId, form: TopicFormData): PromiseThunk<void> => async (dispatch) => {
-  dispatch(createTopicAction.request());
-
-  try {
-    await postTopic(clusterId, form);
-    dispatch(createTopicAction.success());
-  } catch (e) {
-    dispatch(createTopicAction.failure());
-  }
-}