Merge pull request #340 from gky360/fix/ts-status-actions-reducers

Use typescript for status actions and statusReducer

Author: ofk

frontend/src/actions/status.js

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { CHART_DOWNLOAD_STATUS } from '../constants';
+import { ProjectId, ResultId } from '../store/types';
+
+export const RESULT_SELECT_UPDATE = 'RESULT_SELECT_UPDATE';
+export const updateResultSelect = (
+  projectId: ProjectId,
+  resultId: ResultId,
+  selected: boolean
+) => ({
+  type: RESULT_SELECT_UPDATE as typeof RESULT_SELECT_UPDATE,
+  projectId,
+  resultId,
+  selected,
+});
+export type ResultSelectAction = ReturnType<typeof updateResultSelect>;
+
+export const RESULT_CHECK_UPDATE = 'RESULT_CHECK_UPDATE';
+export const updateResultCheck = (projectId: ProjectId, resultId: ResultId, checked: boolean) => ({
+  type: RESULT_CHECK_UPDATE as typeof RESULT_CHECK_UPDATE,
+  projectId,
+  resultId,
+  checked,
+});
+export type ResultCheckAction = ReturnType<typeof updateResultCheck>;
+
+export const RESULT_CHECK_BULK_UPDATE = 'RESULT_CHECK_BULK_UPDATE';
+export const updateResultCheckBulk = (
+  projectId: ProjectId,
+  results: { id: ResultId; checked: boolean }[]
+) => ({
+  type: RESULT_CHECK_BULK_UPDATE as typeof RESULT_CHECK_BULK_UPDATE,
+  projectId,
+  results,
+});
+export type ResultCheckBulkAction = ReturnType<typeof updateResultCheckBulk>;
+
+export type ResultStatusAction = ResultSelectAction | ResultCheckAction | ResultCheckBulkAction;
+
+export const RESULT_FILTER_UPDATE = 'RESULT_FILTER_UPDATE';
+export const updateResultFilter = (
+  projectId: ProjectId,
+  filterKey: string,
+  filterText: string
+) => ({
+  type: RESULT_FILTER_UPDATE as typeof RESULT_FILTER_UPDATE,
+  projectId,
+  filterKey,
+  filterText,
+});
+export type ResultFilterAction = ReturnType<typeof updateResultFilter>;
+
+export const CHART_DOWNLOAD_STATUS_UPDATE = 'CHART_DOWNLOAD_STATUS_UPDATE';
+export const updateChartDownloadStatus = (
+  projectId: ProjectId,
+  chartDownloadStatus: CHART_DOWNLOAD_STATUS
+) => ({
+  type: CHART_DOWNLOAD_STATUS_UPDATE as typeof CHART_DOWNLOAD_STATUS_UPDATE,
+  projectId,
+  chartDownloadStatus,
+});
+export type ChartDownloadStatusAction = ReturnType<typeof updateChartDownloadStatus>;

frontend/src/actions/status.ts

@@ -37,7 +37,7 @@ const ExperimentsTable = (props) => {
     onCommandSubmit,
     onTableExpandedUpdate,
     onTableColumnsVisibilityUpdate,
-    onCheckOfResultStatusListUpdate,
+    onResultCheckBulkUpdate,
   } = props;
   const { argKeys, logKeys } = stats;
   const { resultsConfig, tableState } = projectConfig;
@@ -75,7 +75,7 @@ const ExperimentsTable = (props) => {
           project={project}
           targetResults={resultList}
           resultsStatus={resultsStatus}
-          onChange={onCheckOfResultStatusListUpdate}
+          onChange={onResultCheckBulkUpdate}
         />
       ),
       Cell: (p) => {
@@ -88,7 +88,7 @@ const ExperimentsTable = (props) => {
             project={project}
             targetResults={[original]}
             resultsStatus={resultsStatus}
-            onChange={onCheckOfResultStatusListUpdate}
+            onChange={onResultCheckBulkUpdate}
           />
         );
       },
@@ -105,7 +105,7 @@ const ExperimentsTable = (props) => {
             project={project}
             targetResults={groupedResults}
             resultsStatus={resultsStatus}
-            onChange={onCheckOfResultStatusListUpdate}
+            onChange={onResultCheckBulkUpdate}
           />
         );
       },
@@ -328,7 +328,7 @@ ExperimentsTable.propTypes = {
   onCommandSubmit: PropTypes.func.isRequired,
   onTableExpandedUpdate: PropTypes.func.isRequired,
   onTableColumnsVisibilityUpdate: PropTypes.func.isRequired,
-  onCheckOfResultStatusListUpdate: PropTypes.func.isRequired,
+  onResultCheckBulkUpdate: PropTypes.func.isRequired,
 };
 
 ExperimentsTable.defaultProps = {

frontend/src/components/ExperimentsTable.jsx

@@ -11,7 +11,7 @@ const SelectedResultTools = (props) => {
     resultsStatus,
     resultTypeId,
     onResultsPatch,
-    onCheckOfResultStatusListUpdate,
+    onResultCheckBulkUpdate,
     onTableExpandedUpdate,
   } = props;
 
@@ -40,7 +40,7 @@ const SelectedResultTools = (props) => {
     const requestBody = targetResultKeys.map((id) => ({ id, isUnregistered }));
     onResultsPatch(project.id, requestBody);
     const resultStatusList = targetResultKeys.map((id) => ({ id, checked: false }));
-    onCheckOfResultStatusListUpdate(project.id, resultStatusList);
+    onResultCheckBulkUpdate(project.id, resultStatusList);
   };
 
   return (
@@ -66,7 +66,7 @@ SelectedResultTools.propTypes = {
   resultsStatus: uiPropTypes.resultsStatus,
   resultTypeId: PropTypes.string.isRequired,
   onResultsPatch: PropTypes.func.isRequired,
-  onCheckOfResultStatusListUpdate: PropTypes.func.isRequired,
+  onResultCheckBulkUpdate: PropTypes.func.isRequired,
   onTableExpandedUpdate: PropTypes.func.isRequired,
 };
 

frontend/src/components/SelectedResultTools.jsx

@@ -119,11 +119,11 @@ export const defaultProjectConfig = {
   resultType: fetchResultTypes[0].id,
 };
 
-export const CHART_DOWNLOAD_STATUS = {
-  NONE: 'NONE',
-  REQUESTED: 'REQUESTED',
-  CONVERTING: 'CONVERTING',
-};
+export enum CHART_DOWNLOAD_STATUS {
+  NONE = 'NONE',
+  REQUESTED = 'REQUESTED',
+  CONVERTING = 'CONVERTING',
+}
 
 export const defaultProjectStatus = {
   chartDownloadStatus: CHART_DOWNLOAD_STATUS.NONE,

frontend/src/constants/index.ts

@@ -27,7 +27,7 @@ import {
   updateTableColumnsVisibility,
   updateChartDownloadStatus,
   updateTargetResultType,
-  updateCheckOfResultStatusList,
+  updateResultCheckBulk,
 } from '../actions';
 import NavigationBar from './NavigationBar';
 import BreadcrumbLink from '../components/BreadcrumbLink';
@@ -157,7 +157,7 @@ class PlotContainer extends React.Component {
                   resultsStatus={projectStatus.resultsStatus}
                   onResultsPatch={this.props.patchResults}
                   onTableExpandedUpdate={this.props.updateTableExpanded}
-                  onCheckOfResultStatusListUpdate={this.props.updateCheckOfResultStatusList}
+                  onResultCheckBulkUpdate={this.props.updateResultCheckBulk}
                 />
                 <ResultTypeSelector
                   projectId={projectId}
@@ -180,7 +180,7 @@ class PlotContainer extends React.Component {
                 onCommandSubmit={this.props.createCommand}
                 onTableExpandedUpdate={this.props.updateTableExpanded}
                 onTableColumnsVisibilityUpdate={this.handleExperimentsTableColumnsVisibilityUpdate}
-                onCheckOfResultStatusListUpdate={this.props.updateCheckOfResultStatusList}
+                onResultCheckBulkUpdate={this.props.updateResultCheckBulk}
               />
               <ExperimentsTableConfigurator
                 project={project}
@@ -226,7 +226,7 @@ PlotContainer.propTypes = {
   updateTableColumnsVisibility: PropTypes.func.isRequired,
   updateChartDownloadStatus: PropTypes.func.isRequired,
   updateTargetResultType: PropTypes.func.isRequired,
-  updateCheckOfResultStatusList: PropTypes.func.isRequired,
+  updateResultCheckBulk: PropTypes.func.isRequired,
 };
 
 const getTargetTextForFilter = (project, result, filterKey) => {
@@ -305,6 +305,6 @@ export default connect(
     updateTableColumnsVisibility,
     updateChartDownloadStatus,
     updateTargetResultType,
-    updateCheckOfResultStatusList,
+    updateResultCheckBulk,
   }
 )(PlotContainer);