refactor(overmind-devtools-client): handle nested charts on chart property

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Chart/index.tsx

@@ -100,56 +100,55 @@ const ChartComponent: FunctionComponent<Props> = ({
                   className={styles.wrapper}
                   style={{ margin: 0, width: '100%' }}
                 >
-                  {Object.keys(nestedChart.states[key].on).map((onKey) => {
-                    let target
-                    if (nestedChart.states[key].on[onKey]) {
-                      target =
-                        // @ts-ignore
-                        nestedChart.states[key].on[onKey].target ||
-                        nestedChart.states[key].on[onKey]
-                    }
-                    return (
-                      <div key={onKey} className={styles.stateItem}>
-                        <div
-                          onClick={
-                            chart.actions[onKey]
-                              ? () =>
-                                  actions.selectQueryAction(
-                                    chart.path.concat(onKey).join('.')
-                                  )
-                              : null
-                          }
-                          className={css(
-                            styles.stateNameCell,
-                            styles.onName,
-                            chart.actions[onKey] && styles.activeAction,
-                            chart.path.concat(onKey).join('.') ===
-                              state.currentApp.selectedActionQuery &&
-                              styles.selectedAction
-                          )}
-                        >
-                          <span className={textStyles.normal}>{onKey}</span>
-                        </div>
-                        <div className={styles.stateLineCell}>
-                          {target ? (
-                            <div className={styles.transitionLine} />
-                          ) : null}
+                  {Object.keys(nestedChart.states[key].on || {}).map(
+                    (onKey) => {
+                      let target
+                      if (nestedChart.states[key].on[onKey]) {
+                        target =
+                          // @ts-ignore
+                          nestedChart.states[key].on[onKey].target ||
+                          nestedChart.states[key].on[onKey]
+                      }
+                      return (
+                        <div key={onKey} className={styles.stateItem}>
+                          <div
+                            onClick={
+                              chart.actions[onKey]
+                                ? () =>
+                                    actions.selectQueryAction(
+                                      chart.path.concat(onKey).join('.')
+                                    )
+                                : null
+                            }
+                            className={css(
+                              styles.stateNameCell,
+                              styles.onName,
+                              chart.actions[onKey] && styles.activeAction,
+                              chart.path.concat(onKey).join('.') ===
+                                state.currentApp.selectedActionQuery &&
+                                styles.selectedAction
+                            )}
+                          >
+                            <span className={textStyles.normal}>{onKey}</span>
+                          </div>
+                          <div className={styles.stateLineCell}>
+                            {target ? (
+                              <div className={styles.transitionLine} />
+                            ) : null}
+                          </div>
+                          <div className={styles.transitionCell}>{target}</div>
+                          <div className={styles.nestedRoomCell} />
                         </div>
-                        <div className={styles.transitionCell}>{target}</div>
-                        <div className={styles.nestedRoomCell} />
-                      </div>
-                    )
-                  })}
-                  {nestedChart.states[key].initial ? (
+                      )
+                    }
+                  )}
+                  {nestedChart.states[key].chart ? (
                     <div className={styles.stateItem}>
                       <div className={styles.nestedChart}>
                         <ChartComponent
                           chart={chart}
                           statePath={statePath.concat(key)}
-                          nestedChart={{
-                            initial: nestedChart.states[key].initial,
-                            states: nestedChart.states[key].states,
-                          }}
+                          nestedChart={nestedChart.states[key].chart}
                         />
                       </div>
                     </div>

packages/node_modules/overmind-devtools-client/src/overmind/types.ts

@@ -391,10 +391,11 @@ export type GroupedComponents = {
 export type NestedChart = {
   initial: string
   states: {
-    [key: string]: Partial<NestedChart> & {
+    [key: string]: {
       entry?: string
       exit?: string
-      on: {
+      chart?: NestedChart
+      on?: {
         [key: string]:
           | string
           | {