Replace switch statements that feed the webviews stores (#5194)

* swap setup webview feed store switch statement for enum

* swap plots webview feed store switch statement for enum

* swap experiments webview feed store switch statement for enum

* reduce duplication and refactor

* move reducers back into apps

webview/src/experiments/components/App.tsx

@@ -1,19 +1,19 @@
-import React, { useCallback } from 'react'
-import { useDispatch } from 'react-redux'
+import { TableData } from 'dvc/src/experiments/webview/contract'
 import {
   MessageToWebview,
   MessageToWebviewType
 } from 'dvc/src/webview/contract'
-import { TableData } from 'dvc/src/experiments/webview/contract'
+import React from 'react'
 import Experiments from './Experiments'
+import { dispatchActions } from '../../shared/dispatchActions'
+import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 import {
   update,
-  updateSelectedBranches,
   updateChanges,
   updateCliError,
   updateColumnOrder,
-  updateColumns,
   updateColumnWidths,
+  updateColumns,
   updateFilters,
   updateHasBranchesToSelect,
   updateHasCheckpoints,
@@ -22,92 +22,50 @@ import {
   updateHasRunningWorkspaceExperiment,
   updateIsShowingMoreCommits,
   updateRows,
+  updateSelectedBranches,
   updateSelectedForPlotsCount,
-  updateSorts,
-  updateShowOnlyChanged
+  updateShowOnlyChanged,
+  updateSorts
 } from '../state/tableDataSlice'
-import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
+import { ExperimentsDispatch } from '../store'
 
-export const App: React.FC<Record<string, unknown>> = () => {
-  const dispatch = useDispatch()
+const actionToDispatch = {
+  changes: updateChanges,
+  cliError: updateCliError,
+  columnOrder: updateColumnOrder,
+  columnWidths: updateColumnWidths,
+  columns: updateColumns,
+  filters: updateFilters,
+  hasBranchesToSelect: updateHasBranchesToSelect,
+  hasCheckpoints: updateHasCheckpoints,
+  hasConfig: updateHasConfig,
+  hasMoreCommits: updateHasMoreCommits,
+  hasRunningWorkspaceExperiment: updateHasRunningWorkspaceExperiment,
+  isShowingMoreCommits: updateIsShowingMoreCommits,
+  rows: updateRows,
+  selectedBranches: updateSelectedBranches,
+  selectedForPlotsCount: updateSelectedForPlotsCount,
+  showOnlyChanged: updateShowOnlyChanged,
+  sorts: updateSorts
+}
+
+export type ExperimentsActions = typeof actionToDispatch
+
+const feedStore = (
+  data: MessageToWebview<TableData>,
+  dispatch: ExperimentsDispatch
+) => {
+  if (data?.type !== MessageToWebviewType.SET_DATA) {
+    return
+  }
+  const stateUpdate = data?.data
+  dispatch(update(!!stateUpdate))
 
-  useVsCodeMessaging(
-    useCallback(
-      ({ data }: { data: MessageToWebview<TableData> }) => {
-        if (data.type === MessageToWebviewType.SET_DATA) {
-          dispatch(update(!!data.data))
-          for (const key of Object.keys(data.data)) {
-            switch (key) {
-              case 'changes':
-                dispatch(updateChanges(data.data.changes))
-                continue
-              case 'cliError':
-                dispatch(updateCliError(data.data.cliError))
-                continue
-              case 'columnOrder':
-                dispatch(updateColumnOrder(data.data.columnOrder))
-                continue
-              case 'columns':
-                dispatch(updateColumns(data.data.columns))
-                continue
-              case 'columnsWidths':
-                dispatch(updateColumnWidths(data.data.columnWidths))
-                continue
-              case 'filters':
-                dispatch(updateFilters(data.data.filters))
-                continue
-              case 'hasBranchesToSelect':
-                dispatch(
-                  updateHasBranchesToSelect(data.data.hasBranchesToSelect)
-                )
-                continue
-              case 'hasCheckpoints':
-                dispatch(updateHasCheckpoints(data.data.hasCheckpoints))
-                continue
-              case 'hasConfig':
-                dispatch(updateHasConfig(data.data.hasConfig))
-                continue
-              case 'hasMoreCommits':
-                dispatch(updateHasMoreCommits(data.data.hasMoreCommits))
-                continue
-              case 'hasRunningWorkspaceExperiment':
-                dispatch(
-                  updateHasRunningWorkspaceExperiment(
-                    data.data.hasRunningWorkspaceExperiment
-                  )
-                )
-                continue
-              case 'isShowingMoreCommits':
-                dispatch(
-                  updateIsShowingMoreCommits(data.data.isShowingMoreCommits)
-                )
-                continue
-              case 'rows':
-                dispatch(updateRows(data.data.rows))
-                continue
-              case 'selectedBranches':
-                dispatch(updateSelectedBranches(data.data.selectedBranches))
-                continue
-              case 'selectedForPlotsCount':
-                dispatch(
-                  updateSelectedForPlotsCount(data.data.selectedForPlotsCount)
-                )
-                continue
-              case 'showOnlyChanged':
-                dispatch(updateShowOnlyChanged(data.data.showOnlyChanged))
-                continue
-              case 'sorts':
-                dispatch(updateSorts(data.data.sorts))
-                continue
-              default:
-                continue
-            }
-          }
-        }
-      },
-      [dispatch]
-    )
-  )
+  dispatchActions(actionToDispatch, stateUpdate, dispatch)
+}
+
+export const App: React.FC<Record<string, unknown>> = () => {
+  useVsCodeMessaging(feedStore)
 
   return <Experiments />
 }

webview/src/plots/components/App.tsx

@@ -1,25 +1,21 @@
-import React, { useCallback } from 'react'
-import { useDispatch } from 'react-redux'
 import {
-  CustomPlotsData,
-  PlotsComparisonData,
   PlotsData,
   PlotsDataKeys,
   PlotsSection,
-  SectionCollapsed,
-  TemplatePlotsData
+  SectionCollapsed
 } from 'dvc/src/plots/webview/contract'
 import { MessageToWebview } from 'dvc/src/webview/contract'
+import React from 'react'
 import { Plots } from './Plots'
+import {
+  setCollapsed as setComparisonTableCollapsed,
+  update as updateComparisonTable,
+  updateShouldShowTooManyPlotsMessage as updateShouldShowTooManyImagesMessage
+} from './comparisonTable/comparisonTableSlice'
 import {
   setCollapsed as setCustomPlotsCollapsed,
   update as updateCustomPlots
 } from './customPlots/customPlotsSlice'
-import {
-  setCollapsed as setComparisonTableCollapsed,
-  updateShouldShowTooManyPlotsMessage as updateShouldShowTooManyImagesMessage,
-  update as updateComparisonTable
-} from './comparisonTable/comparisonTableSlice'
 import {
   setCollapsed as setTemplatePlotsCollapsed,
   updateShouldShowTooManyPlotsMessage as updateShouldShowTooManyTemplatesMessage,
@@ -35,6 +31,7 @@ import {
 } from './webviewSlice'
 import { PlotsDispatch } from '../store'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
+import { dispatchActions } from '../../shared/dispatchActions'
 
 const dispatchCollapsedSections = (
   sections: SectionCollapsed,
@@ -49,73 +46,45 @@ const dispatchCollapsedSections = (
   }
 }
 
+const actionToDispatch = {
+  [PlotsDataKeys.CLI_ERROR]: updateCliError,
+  [PlotsDataKeys.CUSTOM]: updateCustomPlots,
+  [PlotsDataKeys.COMPARISON]: updateComparisonTable,
+  [PlotsDataKeys.TEMPLATE]: updateTemplatePlots,
+  [PlotsDataKeys.HAS_PLOTS]: updateHasPlots,
+  [PlotsDataKeys.HAS_UNSELECTED_PLOTS]: updateHasUnselectedPlots,
+  [PlotsDataKeys.PLOT_ERRORS]: updatePlotErrors,
+  [PlotsDataKeys.SELECTED_REVISIONS]: updateSelectedRevisions,
+  [PlotsDataKeys.SHOW_TOO_MANY_TEMPLATE_PLOTS]:
+    updateShouldShowTooManyTemplatesMessage,
+  [PlotsDataKeys.SHOW_TOO_MANY_COMPARISON_IMAGES]:
+    updateShouldShowTooManyImagesMessage
+} as const
+
+export type PlotsActions = typeof actionToDispatch
+
 export const feedStore = (
   data: MessageToWebview<PlotsData>,
   dispatch: PlotsDispatch
 ) => {
-  if (data.data) {
-    dispatch(initialize())
-    const keys = Object.keys(data.data) as PlotsDataKeys[]
-    for (const key of keys) {
-      switch (key) {
-        case PlotsDataKeys.CLI_ERROR:
-          dispatch(updateCliError(data.data[key]))
-          continue
-        case PlotsDataKeys.CUSTOM:
-          dispatch(updateCustomPlots(data.data[key] as CustomPlotsData))
-          continue
-        case PlotsDataKeys.COMPARISON:
-          dispatch(updateComparisonTable(data.data[key] as PlotsComparisonData))
-          continue
-        case PlotsDataKeys.TEMPLATE:
-          dispatch(updateTemplatePlots(data.data[key] as TemplatePlotsData))
-          continue
-        case PlotsDataKeys.SECTION_COLLAPSED:
-          dispatchCollapsedSections(
-            data.data[key] as SectionCollapsed,
-            dispatch
-          )
-          continue
-        case PlotsDataKeys.HAS_PLOTS:
-          dispatch(updateHasPlots(!!data.data[key]))
-          continue
-        case PlotsDataKeys.HAS_UNSELECTED_PLOTS:
-          dispatch(updateHasUnselectedPlots(!!data.data[key]))
-          continue
-        case PlotsDataKeys.PLOT_ERRORS:
-          dispatch(updatePlotErrors(data.data[key]))
-          continue
-        case PlotsDataKeys.SELECTED_REVISIONS:
-          dispatch(updateSelectedRevisions(data.data[key]))
-          continue
-        case PlotsDataKeys.SHOW_TOO_MANY_TEMPLATE_PLOTS:
-          dispatch(
-            updateShouldShowTooManyTemplatesMessage(data.data[key] as boolean)
-          )
-          continue
-        case PlotsDataKeys.SHOW_TOO_MANY_COMPARISON_IMAGES:
-          dispatch(
-            updateShouldShowTooManyImagesMessage(data.data[key] as boolean)
-          )
-          continue
-        default:
-          continue
-      }
-    }
+  const stateUpdate = data?.data
+  if (!stateUpdate) {
+    return
+  }
+  dispatch(initialize())
+
+  const keys = Object.keys(stateUpdate) as PlotsDataKeys[]
+  if (keys.includes(PlotsDataKeys.SECTION_COLLAPSED)) {
+    dispatchCollapsedSections(
+      stateUpdate[PlotsDataKeys.SECTION_COLLAPSED] as SectionCollapsed,
+      dispatch
+    )
   }
+  dispatchActions(actionToDispatch, stateUpdate, dispatch)
 }
 
 export const App = () => {
-  const dispatch = useDispatch()
-
-  useVsCodeMessaging(
-    useCallback(
-      ({ data }: { data: MessageToWebview<PlotsData> }) => {
-        feedStore(data, dispatch)
-      },
-      [dispatch]
-    )
-  )
+  useVsCodeMessaging(feedStore)
 
   return <Plots />
 }