Get rid of redundant enums (#186)

* [CHORE] Get rid of redundant ActionType enum

* [CHORE] Get rid of redundant FetchStatus enum

* [CHORE] Get rid of redundant CustomParamButtonType enum

Author: workshur

kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesTable.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { TopicMessage } from 'generated-sources';
-import CustomParamButton, {
-  CustomParamButtonType,
-} from '../../shared/Form/CustomParams/CustomParamButton';
+import CustomParamButton from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
 import MessageItem from './MessageItem';
 
 interface MessagesTableProp {
@@ -44,7 +42,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
         <div className="column is-full">
           <CustomParamButton
             className="is-link is-pulled-right"
-            type={CustomParamButtonType.chevronRight}
+            type="fa-chevron-right"
             onClick={onNext}
             btnText="Next"
           />

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CustomParamButton, { CustomParamButtonType } from './CustomParamButton';
+import CustomParamButton from './CustomParamButton';
 
 interface Props {
   index: string;
@@ -11,7 +11,7 @@ const CustomParamAction: React.FC<Props> = ({ index, onRemove }) => (
     <label className="label">&nbsp;</label>
     <CustomParamButton
       className="is-danger"
-      type={CustomParamButtonType.minus}
+      type="fa-minus"
       onClick={() => onRemove(index)}
     />
   </>

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamButton.tsx

@@ -1,15 +1,9 @@
 import React from 'react';
 
-export enum CustomParamButtonType {
-  plus = 'fa-plus',
-  minus = 'fa-minus',
-  chevronRight = 'fa-chevron-right',
-}
-
 interface Props {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   className: string;
-  type: CustomParamButtonType;
+  type: 'fa-plus' | 'fa-minus' | 'fa-chevron-right';
   btnText?: string;
 }
 

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx

@@ -7,7 +7,7 @@ import {
   TopicConfigByName,
   TopicConfigParams,
 } from 'redux/interfaces';
-import CustomParamButton, { CustomParamButtonType } from './CustomParamButton';
+import CustomParamButton from './CustomParamButton';
 import CustomParamField from './CustomParamField';
 
 export const INDEX_PREFIX = 'customParams';
@@ -79,7 +79,7 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
         <div className="column">
           <CustomParamButton
             className="is-success"
-            type={CustomParamButtonType.plus}
+            type="fa-plus"
             onClick={onAdd}
             btnText="Add Custom Parameter"
           />

kafka-ui-react-app/src/redux/actionType.ts

@@ -1,5 +1,4 @@
 import { createAsyncAction } from 'typesafe-actions';
-import ActionType from 'redux/actionType';
 import { TopicName, ConsumerGroupID } from 'redux/interfaces';
 
 import {
@@ -17,81 +16,81 @@ import {
 } from 'generated-sources';
 
 export const fetchClusterStatsAction = createAsyncAction(
-  ActionType.GET_CLUSTER_STATS__REQUEST,
-  ActionType.GET_CLUSTER_STATS__SUCCESS,
-  ActionType.GET_CLUSTER_STATS__FAILURE
+  'GET_CLUSTER_STATUS__REQUEST',
+  'GET_CLUSTER_STATUS__SUCCESS',
+  'GET_CLUSTER_STATUS__FAILURE'
 )<undefined, ClusterStats, undefined>();
 
 export const fetchClusterMetricsAction = createAsyncAction(
-  ActionType.GET_CLUSTER_METRICS__REQUEST,
-  ActionType.GET_CLUSTER_METRICS__SUCCESS,
-  ActionType.GET_CLUSTER_METRICS__FAILURE
+  'GET_CLUSTER_METRICS__REQUEST',
+  'GET_CLUSTER_METRICS__SUCCESS',
+  'GET_CLUSTER_METRICS__FAILURE'
 )<undefined, ClusterMetrics, undefined>();
 
 export const fetchBrokersAction = createAsyncAction(
-  ActionType.GET_BROKERS__REQUEST,
-  ActionType.GET_BROKERS__SUCCESS,
-  ActionType.GET_BROKERS__FAILURE
+  'GET_BROKERS__REQUEST',
+  'GET_BROKERS__SUCCESS',
+  '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
+  'GET_BROKER_METRICS__REQUEST',
+  'GET_BROKER_METRICS__SUCCESS',
+  'GET_BROKER_METRICS__FAILURE'
 )<undefined, BrokerMetrics, undefined>();
 
 export const fetchClusterListAction = createAsyncAction(
-  ActionType.GET_CLUSTERS__REQUEST,
-  ActionType.GET_CLUSTERS__SUCCESS,
-  ActionType.GET_CLUSTERS__FAILURE
+  'GET_CLUSTERS__REQUEST',
+  'GET_CLUSTERS__SUCCESS',
+  'GET_CLUSTERS__FAILURE'
 )<undefined, Cluster[], undefined>();
 
 export const fetchTopicsListAction = createAsyncAction(
-  ActionType.GET_TOPICS__REQUEST,
-  ActionType.GET_TOPICS__SUCCESS,
-  ActionType.GET_TOPICS__FAILURE
+  'GET_TOPICS__REQUEST',
+  'GET_TOPICS__SUCCESS',
+  'GET_TOPICS__FAILURE'
 )<undefined, Topic[], undefined>();
 
 export const fetchTopicMessagesAction = createAsyncAction(
-  ActionType.GET_TOPIC_MESSAGES__REQUEST,
-  ActionType.GET_TOPIC_MESSAGES__SUCCESS,
-  ActionType.GET_TOPIC_MESSAGES__FAILURE
+  'GET_TOPIC_MESSAGES__REQUEST',
+  'GET_TOPIC_MESSAGES__SUCCESS',
+  'GET_TOPIC_MESSAGES__FAILURE'
 )<undefined, TopicMessage[], undefined>();
 
 export const fetchTopicDetailsAction = createAsyncAction(
-  ActionType.GET_TOPIC_DETAILS__REQUEST,
-  ActionType.GET_TOPIC_DETAILS__SUCCESS,
-  ActionType.GET_TOPIC_DETAILS__FAILURE
+  'GET_TOPIC_DETAILS__REQUEST',
+  'GET_TOPIC_DETAILS__SUCCESS',
+  'GET_TOPIC_DETAILS__FAILURE'
 )<undefined, { topicName: TopicName; details: TopicDetails }, undefined>();
 
 export const fetchTopicConfigAction = createAsyncAction(
-  ActionType.GET_TOPIC_CONFIG__REQUEST,
-  ActionType.GET_TOPIC_CONFIG__SUCCESS,
-  ActionType.GET_TOPIC_CONFIG__FAILURE
+  'GET_TOPIC_CONFIG__REQUEST',
+  'GET_TOPIC_CONFIG__SUCCESS',
+  'GET_TOPIC_CONFIG__FAILURE'
 )<undefined, { topicName: TopicName; config: TopicConfig[] }, undefined>();
 
 export const createTopicAction = createAsyncAction(
-  ActionType.POST_TOPIC__REQUEST,
-  ActionType.POST_TOPIC__SUCCESS,
-  ActionType.POST_TOPIC__FAILURE
+  'POST_TOPIC__REQUEST',
+  'POST_TOPIC__SUCCESS',
+  'POST_TOPIC__FAILURE'
 )<undefined, Topic, undefined>();
 
 export const updateTopicAction = createAsyncAction(
-  ActionType.PATCH_TOPIC__REQUEST,
-  ActionType.PATCH_TOPIC__SUCCESS,
-  ActionType.PATCH_TOPIC__FAILURE
+  'PATCH_TOPIC__REQUEST',
+  'PATCH_TOPIC__SUCCESS',
+  'PATCH_TOPIC__FAILURE'
 )<undefined, Topic, undefined>();
 
 export const fetchConsumerGroupsAction = createAsyncAction(
-  ActionType.GET_CONSUMER_GROUPS__REQUEST,
-  ActionType.GET_CONSUMER_GROUPS__SUCCESS,
-  ActionType.GET_CONSUMER_GROUPS__FAILURE
+  'GET_CONSUMER_GROUPS__REQUEST',
+  'GET_CONSUMER_GROUPS__SUCCESS',
+  'GET_CONSUMER_GROUPS__FAILURE'
 )<undefined, ConsumerGroup[], undefined>();
 
 export const fetchConsumerGroupDetailsAction = createAsyncAction(
-  ActionType.GET_CONSUMER_GROUP_DETAILS__REQUEST,
-  ActionType.GET_CONSUMER_GROUP_DETAILS__SUCCESS,
-  ActionType.GET_CONSUMER_GROUP_DETAILS__FAILURE
+  'GET_CONSUMER_GROUP_DETAILS__REQUEST',
+  'GET_CONSUMER_GROUP_DETAILS__SUCCESS',
+  'GET_CONSUMER_GROUP_DETAILS__FAILURE'
 )<
   undefined,
   { consumerGroupID: ConsumerGroupID; details: ConsumerGroupDetails },

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -16,13 +16,6 @@ export * from './broker';
 export * from './consumerGroup';
 export * from './loader';
 
-export enum FetchStatus {
-  notFetched = 'notFetched',
-  fetching = 'fetching',
-  fetched = 'fetched',
-  errorFetching = 'errorFetching',
-}
-
 export interface RootState {
   topics: TopicsState;
   clusters: ClusterState;

kafka-ui-react-app/src/redux/interfaces/index.ts

@@ -1,5 +1,3 @@
-import { FetchStatus } from 'redux/interfaces/index';
-
 export interface LoaderState {
-  [key: string]: FetchStatus;
+  [key: string]: 'notFetched' | 'fetching' | 'fetched' | 'errorFetching';
 }

kafka-ui-react-app/src/redux/interfaces/loader.ts

@@ -1,6 +1,5 @@
 import { Action, BrokersState, ZooKeeperStatus } from 'redux/interfaces';
 import { ClusterStats } from 'generated-sources';
-import ActionType from 'redux/actionType';
 
 export const initialState: BrokersState = {
   items: [],
@@ -36,14 +35,14 @@ const updateBrokerSegmentSize = (
 
 const reducer = (state = initialState, action: Action): BrokersState => {
   switch (action.type) {
-    case ActionType.GET_BROKERS__REQUEST:
+    case 'GET_BROKERS__REQUEST':
       return initialState;
-    case ActionType.GET_BROKERS__SUCCESS:
+    case 'GET_BROKERS__SUCCESS':
       return {
         ...state,
         items: action.payload,
       };
-    case ActionType.GET_CLUSTER_STATS__SUCCESS:
+    case 'GET_CLUSTER_STATUS__SUCCESS':
       return updateBrokerSegmentSize(state, action.payload);
     default:
       return state;

kafka-ui-react-app/src/redux/reducers/brokers/reducer.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { RootState, FetchStatus, BrokersState } from 'redux/interfaces';
+import { RootState, BrokersState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const brokersState = ({ brokers }: RootState): BrokersState => brokers;
@@ -8,7 +8,7 @@ const getBrokerListFetchingStatus = createFetchingSelector('GET_BROKERS');
 
 export const getIsBrokerListFetched = createSelector(
   getBrokerListFetchingStatus,
-  (status) => status === FetchStatus.fetched
+  (status) => status === 'fetched'
 );
 
 export const getBrokerCount = createSelector(