types#RootState TypeScript Examples

addWidgetsToEditBoard = createAsyncThunk<
  null,
  Widget[],
  { state: RootState }
>('editBoard/addWidgetsToEditBoard', (widgets, { getState, dispatch }) => {
  const { dashBoard } = editBoardStackState(
    getState() as unknown as {
      editBoard: HistoryEditBoard;
    },
  );
  const { layouts } = boardInfoState(
    getState() as { editBoard: EditBoardState },
  );
  const widgetInfoMap = createWidgetInfoMap(widgets);
  const updatedWidgets = updateWidgetsRect(widgets, dashBoard.config, layouts);
  // widgetInfoRecord
  dispatch(editWidgetInfoActions.addWidgetInfos(widgetInfoMap));
  // WidgetRecord
  dispatch(editBoardStackActions.addWidgets(updatedWidgets));
  return null;
})

makeState = (wallet: Partial<Wallet>) => {
  return {
    wallet: {
      wallets: { 0: { id: 0, ...wallet } },
      selectedWallet: 0,
      isOpen: true,
    },
  } as Partial<RootState>
}

addStoryPages = createAsyncThunk<
  null,
  { storyId: string; relIds: string[] },
  { state: RootState }
>(
  'storyBoard/addStoryPages',
  async ({ storyId, relIds }, { getState, dispatch }) => {
    const rootState = getState();
    const vizs = selectVizs(rootState);
    const pageMap = makeSelectStoryPagesById(rootState, storyId);
    const pageIndexArr = Object.values(pageMap).map(
      page => page.config.index || -1,
    );
    let maxIndex = pageIndexArr.length ? Math.max(...pageIndexArr) : -1;
    relIds.forEach(async relId => {
      maxIndex++;
      const viz = vizs.find(viz => viz.relId === relId);
      if (viz) {
        const { relType } = viz;
        let pageConfig = getInitStoryPageConfig(maxIndex);
        if (relType === 'DASHBOARD') {
          pageConfig.name = viz?.name;
          // TODO
          // pageConfig.thumbnail = viz?.thumbnail;
        }
        const newPage: StoryPageOfServer = {
          id: '',
          config: JSON.stringify(pageConfig),
          relId,
          relType: relType as StoryPageRelType,
          storyboardId: storyId,
        };
        dispatch(addStoryPage(newPage));
      }
    }, []);
    return null;
  },
)

export function configureAppStore(state?: Partial<RootState>) {
  const sagaMiddleware = createSagaMiddleware({
    onError: (error, info) => {
      store.dispatch(
        fatalErrorActions.setError({
          message: error.toString(),
          stack: error.stack,
          sagaStack: info.sagaStack,
        }),
      )
    },
  })

  // Create the store with saga middleware
  const middlewares = [sagaMiddleware]

  const store = configureStore({
    reducer: createReducer(),
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(middlewares),
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production',
    preloadedState: state,
  })

  sagaMiddleware.run(rootSagas)

  return store
}

getSchemaBySourceId = createAsyncThunk<any, string>(
  'source/getSchemaBySourceId',
  async (sourceId, { getState }) => {
    const sourceSchemas = selectSourceDatabaseSchemas(getState() as RootState, {
      id: sourceId,
    });
    if (sourceSchemas) {
      return;
    }
    const { data } = await request2<any>({
      url: `/sources/schemas/${sourceId}`,
      method: 'GET',
    });
    return {
      sourceId,
      data,
    };
  },
)

selectTheme = createSelector(
  [(state: RootState) => state.theme || initialState],
  theme => {
    if (theme.selected === 'system') {
      return isSystemDark ? themes.dark : themes.light;
    }
    return themes[theme.selected];
  },
)

selectTheme = createSelector(
  [(state: RootState) => state.theme || initialState],
  theme => {
    if (theme.selected === 'system') {
      return isSystemDark ? themes.dark : themes.light;
    }
    return themes[theme.selected];
  },
)

selectSlice = (state: RootState) => state.createWallet || initialState

widgetClickJumpAction =
  (obj: {
    renderMode: VizRenderMode;
    widget: Widget;
    params: ChartMouseEventParams;
    history: any;
  }) =>
  (dispatch, getState) => {
    const { renderMode, widget, params, history } = obj;
    const state = getState() as RootState;
    const orgId = state?.main?.orgId || '';
    const folderIds = state.viz?.vizs?.map(v => v.relId) || [];
    const jumpConfig = widget.config?.jumpConfig;
    const targetType = jumpConfig?.targetType || jumpTypes[0].value;

    const URL = jumpConfig?.URL || '';
    const queryName = jumpConfig?.queryName || '';
    const targetId = jumpConfig?.target?.relId;
    const jumpFieldName: string = jumpConfig?.field?.jumpFieldName || '';
    // table chart
    if (
      params.componentType === 'table' &&
      jumpFieldName !== params.seriesName
    ) {
      return;
    }
    const rowDataValue = getValueByRowData(params.data, jumpFieldName);
    console.warn(' jumpValue:', rowDataValue);
    console.warn('rowData', params.data?.rowData);
    console.warn(`rowData[${jumpFieldName}]:${rowDataValue} `);
    if (targetType === 'URL') {
      // jump url
      let jumpUrl;
      if (URL.indexOf('?') > -1) {
        jumpUrl = `${URL}&${queryName}=${rowDataValue}`;
      } else {
        jumpUrl = `${URL}?${queryName}=${rowDataValue}`;
      }
      window.location.href = jumpUrl;
      return;
    }
    // jump in datart
    if (jumpConfig?.targetType === 'INTERNAL') {
      if (!folderIds.includes(jumpConfig.target.relId)) {
        dispatch(
          showJumpErrorAction(renderMode, widget.dashboardId, widget.id),
        );
        return;
      }
      if (typeof jumpConfig?.filter === 'object') {
        const searchParamsStr = urlSearchTransfer.toUrlString({
          [jumpConfig?.filter?.filterId]: rowDataValue,
        });
        history.push(
          `/organizations/${orgId}/vizs/${targetId}?${searchParamsStr}`,
        );
      }
    }
  }

selectSlice = (state: RootState) => state.openWallet || initialState

describe('GithubRepoForm selectors', () => {
  let state: RootState = {};

  beforeEach(() => {
    state = {};
  });

  it('should select the initial state', () => {
    expect(selectors.selectUsername(state)).toEqual(initialState.username);
  });

  it('should select username', () => {
    const username = 'test';
    state = {
      githubRepoForm: { ...initialState, username: username },
    };
    expect(selectors.selectUsername(state)).toEqual(username);
  });

  it('should select username', () => {
    const repo = { name: 'test' } as Repo;
    state = {
      githubRepoForm: { ...initialState, repositories: [repo] },
    };
    expect(selectors.selectRepos(state)).toEqual([repo]);
  });

  it('should select error', () => {
    const error = RepoErrorType.USER_NOT_FOUND;
    state = {
      githubRepoForm: { ...initialState, error: error },
    };
    expect(selectors.selectError(state)).toEqual(error);
  });

  it('should select loading', () => {
    const loading = true;
    state = {
      githubRepoForm: { ...initialState, loading: loading },
    };
    expect(selectors.selectLoading(state)).toEqual(loading);
  });
});

workbenchSelector = (state: RootState) => state.workbench || initState

describe('Wallet Sagas', () => {
  const validMnemonic =
    'abuse gown claw final toddler wedding sister parade useful typical spatial skate decrease bulk student manual cloth shove fat car little swamp tag ginger'
  const validPrivateKeyHex =
    '5f48e5a6fb243f5abc13aac7c56449afbc93be90ae38f10a0465bc82db954f17e75624c8d2cd9f062ce0331373a3be50ef0eccc5d257b4e2dea83a05506c7132'
  const addressHex = 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk'
  // const addressMnemonic = 'oasis1qq5t7f2gecsjsdxmp5zxtwgck6pzpjmkvc657z6l'

  const providers: (EffectProviders | StaticProvider)[] = [[matchers.call.fn(getBalance), {}]]

  describe('Root Saga', () => {
    it('Should fork once open', () => {
      return expectSaga(rootWalletSaga)
        .withState({})
        .provide(providers)
        .dispatch(walletActions.openWalletFromMnemonic(validMnemonic))
        .fork(walletSaga)
        .silentRun(50)
    })

    it('Should open from mnemonic', () => {
      return expectSaga(rootWalletSaga)
        .provide(providers)
        .withState({})
        .dispatch(walletActions.openWalletFromMnemonic(validMnemonic))
        .fork(walletSaga)
        .put.actionType(walletActions.walletOpened.type)
        .put.actionType(walletActions.selectWallet.type)
        .silentRun(200)
    })

    it('Should open from private key', () => {
      return expectSaga(rootWalletSaga)
        .provide(providers)
        .withState({})
        .dispatch(walletActions.openWalletFromPrivateKey(validPrivateKeyHex))
        .fork(walletSaga)
        .put.actionType(walletActions.selectWallet.type)
        .silentRun(50)
    })

    it('Should open from ledger', () => {
      return expectSaga(rootWalletSaga)
        .provide(providers)
        .withState({})
        .dispatch(
          walletActions.openWalletsFromLedger([
            {
              address: addressHex,
              balance: { available: '0', debonding: '0', escrow: '0', total: '0' },
              path: [44, 474, 0, 0, 0],
              publicKey: '00',
              selected: true,
            },
          ]),
        )
        .fork(walletSaga)
        .put.actionType(walletActions.selectWallet.type)
        .silentRun(50)
    })

    it('Should close the wallet and wait for another open attempt', () => {
      return expectSaga(rootWalletSaga)
        .provide(providers)
        .withState({})
        .dispatch(walletActions.openWalletFromPrivateKey(validPrivateKeyHex))
        .fork(walletSaga)
        .put.actionType(walletActions.selectWallet.type)
        .dispatch(walletActions.closeWallet())
        .put(walletActions.walletClosed())
        .take(walletActions.openWalletFromMnemonic)
        .silentRun(50)
    })
  })

  it('Should redirect user when selecting a wallet', () => {
    return expectSaga(selectWallet, { type: '', payload: 1 })
      .provide([...providers, [select(selectActiveWallet), { address: addressHex } as Partial<Wallet>]])
      .put({ type: walletActions.walletSelected.type, payload: 1 })
      .run()
    // See `useRouteRedirects` tests for redirect after selectedWallet.
  })

  it('Should allow opening multiple wallets', () => {
    return expectSaga(rootWalletSaga)
      .provide(providers)
      .withState({})
      .dispatch(walletActions.openWalletFromPrivateKey(validPrivateKeyHex))
      .put.actionType(walletActions.walletOpened.type)
      .put.actionType(walletActions.walletSelected.type)
      .dispatch(walletActions.openWalletFromMnemonic(validMnemonic))
      .put.actionType(walletActions.walletOpened.type)
      .put.actionType(walletActions.walletSelected.type)
      .silentRun(50)
  })

  it('Should refresh balances on matching transaction', () => {
    return expectSaga(rootWalletSaga)
      .provide(providers)
      .withState({
        account: { address: 'sender' },
        wallet: {
          selectedWallet: 0,
          wallets: [{ address: 'sender', publicKey: '00' } as Partial<Wallet>],
        } as Partial<WalletState>,
      } as Partial<RootState>)
      .dispatch(transactionActions.transactionSent({ amount: 1, type: 'transfer', to: 'receiver' }))
      .call.fn(getBalance)
      .put.actionType(walletActions.updateBalance.type)
      .silentRun(50)
  })
})

Resource = memo(() => {
  const t = useI18NPrefix('view.resource');
  const dispatch = useDispatch();
  const { editorCompletionItemProviderRef } = useContext(EditorContext);
  const isDatabaseSchemaLoading = useSelector(selectDatabaseSchemaLoading);
  const sourceId = useSelector<RootState>(state =>
    selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
  ) as string;
  const databaseSchemas = useSelector(state =>
    selectSourceDatabaseSchemas(state, { id: sourceId }),
  );

  const { height, ref: treeWrapperRef } = useResizeObserver({
    refreshMode: 'debounce',
    refreshRate: 200,
  });

  const buildTableNode = useCallback((database: DatabaseSchema) => {
    const children =
      database?.tables?.map(table => {
        return buildTableColumnNode([database.dbName], table);
      }) || [];

    return buildAntdTreeNodeModel([], database.dbName, children, false);
  }, []);

  const buildTableColumnNode = (ancestors: string[] = [], table) => {
    const children =
      table?.columns?.map(column => {
        return buildAntdTreeNodeModel(
          ancestors.concat(table.tableName),
          column?.name,
          [],
          true,
        );
      }) || [];
    return buildAntdTreeNodeModel(ancestors, table.tableName, children, false);
  };

  const databaseTreeModel = useMemo(() => {
    return (databaseSchemas || []).map(buildTableNode);
  }, [buildTableNode, databaseSchemas]);

  const { filteredData, onExpand, debouncedSearch, expandedRowKeys } =
    useSearchAndExpand(
      databaseTreeModel,
      (keywords, data) => (data.title as string).includes(keywords),
      DEFAULT_DEBOUNCE_WAIT,
      true,
    );

  useEffect(() => {
    if (databaseTreeModel && editorCompletionItemProviderRef) {
      editorCompletionItemProviderRef.current?.dispose();
      dispatch(
        getEditorProvideCompletionItems({
          sourceId,
          resolve: getItem => {
            editorCompletionItemProviderRef.current =
              monaco.languages.registerCompletionItemProvider('sql', {
                provideCompletionItems: getItem,
              });
          },
        }),
      );
    }
  }, [dispatch, sourceId, databaseTreeModel, editorCompletionItemProviderRef]);

  const renderIcon = useCallback(({ value }) => {
    if (Array.isArray(value)) {
      switch (value.length) {
        case 1:
          return <DatabaseOutlined />;
        case 2:
          return <TableOutlined />;
      }
    } else {
      switch (value.type as DataViewFieldType) {
        case DataViewFieldType.STRING:
          return <FieldStringOutlined />;
        case DataViewFieldType.NUMERIC:
          return <FieldNumberOutlined />;
        case DataViewFieldType.DATE:
          return <CalendarOutlined />;
      }
    }
  }, []);

  return (
    <Container title="reference">
      <Searchbar>
        <Col span={24}>
          <Input
            prefix={<SearchOutlined className="icon" />}
            placeholder={t('search')}
            className="input"
            bordered={false}
            onChange={debouncedSearch}
          />
        </Col>
      </Searchbar>
      <TreeWrapper ref={treeWrapperRef}>
        <Tree
          className="medium"
          treeData={filteredData}
          loading={isDatabaseSchemaLoading}
          icon={renderIcon}
          selectable={false}
          defaultExpandedKeys={expandedRowKeys}
          height={height}
          onExpand={onExpand}
        />
      </TreeWrapper>
    </Container>
  );
})

describe('Staking Sagas', () => {
  const getAllValidators = jest.fn()
  const getDelegations = jest.fn()
  const nic = {
    stakingAccount: jest.fn(),
    stakingDebondingDelegationInfosFor: jest.fn(),
    stakingDelegationInfosFor: jest.fn(),
    schedulerGetValidators: jest.fn(),
  }

  const providers: (EffectProviders | StaticProvider)[] = [
    [matchers.call.fn(getExplorerAPIs), { getAllValidators, getDelegations }],
    [matchers.call.fn(getOasisNic), nic],
    [matchers.call.fn(now), new Date('2022').getTime()],
  ]
  const validAddress = 'oasis1qqty93azxp4qeft3krvv23ljyj57g3tzk56tqhqe'

  afterEach(() => {
    jest.resetAllMocks()
  })

  describe('Fetch Account', () => {
    it('Should load the delegations and validators', () => {
      getAllValidators.mockResolvedValue([
        { address: 'oasis1qqzz2le7nua2hvrkjrc9kc6n08ycs9a80chejmr7', escrow: 1000 },
        { address: 'dummy', escrow: 2000 },
      ] as Validator[])

      getDelegations.mockResolvedValue({
        delegations: fixtureDelegation,
        debonding: fixtureDebondingDelegation,
      })

      return (
        expectSaga(fetchAccount, stakingActions.fetchAccount(validAddress))
          .withState({})
          .provide(providers)
          .put.actionType(stakingActions.updateValidators.type)
          //@TODO check that we're loading everything in state
          .run()
      )
    })
  })

  describe('Validator details', () => {
    it('Should load the details regarding the selected validator', () => {
      nic.stakingAccount.mockResolvedValue({})

      return expectSaga(stakingSaga)
        .withState({})
        .provide(providers)
        .dispatch(stakingActions.validatorSelected('oasis1qqzz2le7nua2hvrkjrc9kc6n08ycs9a80chejmr7'))
        .put.actionType(stakingActions.updateValidatorDetails.type)
        .silentRun()
    })

    it('Should keep and augment relevant bounds', async () => {
      nic.stakingAccount.mockResolvedValue({
        escrow: {
          commission_schedule: {
            bounds: [
              {
                rate_min: qty(1000),
                rate_max: qty(2000),
                start: 500,
              },
              {
                rate_min: qty(1000),
                rate_max: qty(2000),
                start: 200,
              },
              {
                rate_min: qty(1000),
                rate_max: qty(2000),
                start: 0,
              },
            ],
          },
        },
      })

      const result = await expectSaga(stakingSaga)
        .withState(initialState)
        .withReducer(stakingReducer)
        .provide([...providers, [select(selectEpoch), 300]])
        .dispatch(stakingActions.validatorSelected('oasis1qqzz2le7nua2hvrkjrc9kc6n08ycs9a80chejmr7'))
        .put.actionType(stakingActions.updateValidatorDetails.type)
        .silentRun()

      const finalState: StakingState = result.storeState
      const bounds = finalState.selectedValidatorDetails!.scheduledCommissionBounds

      // The "older" 0-200 bounds should have been filtered out
      expect(bounds).toHaveLength(2)
      expect(bounds).toEqual([
        { epochEnd: 499, epochStart: 200, lower: 0.01, upper: 0.02 },
        { epochEnd: undefined, epochStart: 500, lower: 0.01, upper: 0.02 },
      ])
    })
  })

  describe('Fetch validators fallbacks', () => {
    it('should load validators when switching network', () => {
      getAllValidators.mockResolvedValue([{ address: 'fromApi' }] as Validator[])
      return expectSaga(refreshValidators)
        .withState({
          network: { selectedNetwork: 'testnet' },
          staking: { validators: { network: 'mainnet', list: [{ address: 'existing' }] } },
        } as RootState)
        .provide(providers)
        .put(
          stakingActions.updateValidators({
            timestamp: new Date('2022').getTime(),
            network: 'testnet',
            list: [{ address: 'fromApi' }] as Validator[],
          }),
        )
        .run()
    })

    it('should use fallback on mainnet', () => {
      getAllValidators.mockRejectedValue('apiFailed')
      const getMainnetDumpValidatorsMock = {
        dump_timestamp: 1647996761337,
        dump_timestamp_iso: '2022-03-23T00:52:41.337Z',
        list: [
          {
            rank: 1,
            address: 'oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe',
            name: 'stakefish',
            nodeAddress: 'oasis1qrg52ccz4ts6cct2qu4retxn7kkdlusjh5pe74ar',
            status: 'active',
            _expectedStatus: 'active' as const,
          },
          {
            rank: 2,
            address: 'oasis1qqekv2ymgzmd8j2s2u7g0hhc7e77e654kvwqtjwm',
            name: 'BinanceStaking',
            nodeAddress: 'oasis1qqp0h2h92eev7nsxgqctvuegt8ge3vyg0qyluc4k',
            status: 'active',
            _expectedStatus: 'inactive' as const,
          },
        ],
      }
      nic.schedulerGetValidators.mockResolvedValue([
        {
          // oasis1qrg52ccz4ts6cct2qu4retxn7kkdlusjh5pe74ar
          id: oasis.misc.fromHex('91e7768ae47cd1641d6f883b97e3ea6d0286240bc3e3e2953c5c2e0dce6753a3'),
          voting_power: 1,
        },
      ] as oasis.types.SchedulerValidator[])
      jest
        .spyOn(console, 'error')
        .mockImplementationOnce(message => expect(message).toBe('get validators list failed'))

      return expectSaga(refreshValidators)
        .withState({
          network: { selectedNetwork: 'mainnet' },
        } as RootState)
        .provide([...providers, [matchers.call.fn(getMainnetDumpValidators), getMainnetDumpValidatorsMock]])
        .put(
          stakingActions.updateValidatorsError({
            error: 'apiFailed',
            validators: {
              timestamp: getMainnetDumpValidatorsMock.dump_timestamp,
              network: 'mainnet',
              list: getMainnetDumpValidatorsMock.list.map((v, ix) => ({
                ...v,
                status: v._expectedStatus,
              })),
            },
          }),
        )
        .run()
    })
  })
})

getChartWidgetDataAsync = createAsyncThunk<
  null,
  {
    boardId: string;
    widgetId: string;
    renderMode: VizRenderMode | undefined;
    option?: getDataOption;
  },
  { state: RootState }
>(
  'board/getChartWidgetDataAsync',
  async ({ boardId, widgetId, renderMode, option }, { getState, dispatch }) => {
    dispatch(boardActions.renderedWidgets({ boardId, widgetIds: [widgetId] }));
    const boardState = getState() as { board: BoardState };

    const widgetMapMap = boardState.board.widgetRecord;
    const widgetInfo =
      boardState.board?.widgetInfoRecord?.[boardId]?.[widgetId];
    const widgetMap = widgetMapMap[boardId];
    const curWidget = widgetMap[widgetId];

    if (!curWidget) return null;
    const viewMap = boardState.board.viewMap;
    const dataChartMap = boardState.board.dataChartMap;
    const boardLinkFilters =
      boardState.board.boardInfoRecord?.[boardId]?.linkFilter;
    const drillOption = boardDrillManager.getWidgetDrill({
      bid: curWidget.dashboardId,
      wid: widgetId,
    });
    let requestParams = getChartWidgetRequestParams({
      widgetId,
      widgetMap,
      viewMap,
      option,
      widgetInfo,
      dataChartMap,
      boardLinkFilters,
      drillOption,
    });
    if (!requestParams) {
      return null;
    }
    let widgetData;
    try {
      if (renderMode === 'read') {
        const { data } = await request2<WidgetData>({
          method: 'POST',
          url: `data-provider/execute`,
          data: requestParams,
        });
        widgetData = { ...data, id: widgetId };
      } else {
        const executeTokenMap = (getState() as RootState)?.share
          ?.executeTokenMap;

        const dataChart = dataChartMap[curWidget.datachartId];
        const viewId = viewMap[dataChart.viewId].id;
        const executeToken = executeTokenMap?.[viewId];
        const { data } = await request2<WidgetData>({
          method: 'POST',
          url: `shares/execute`,
          params: {
            executeToken: executeToken?.authorizedToken,
          },
          data: requestParams,
        });
        widgetData = { ...data, id: widgetId };
      }
      dispatch(
        boardActions.setWidgetData(
          filterSqlOperatorName(requestParams, widgetData) as WidgetData,
        ),
      );
      dispatch(
        boardActions.changePageInfo({
          boardId,
          widgetId,
          pageInfo: widgetData.pageInfo,
        }),
      );
      dispatch(
        boardActions.setWidgetErrInfo({
          boardId,
          widgetId,
          errInfo: undefined,
          errorType: 'request',
        }),
      );
    } catch (error) {
      dispatch(
        boardActions.setWidgetErrInfo({
          boardId,
          widgetId,
          errInfo: getErrorMessage(error),
          errorType: 'request',
        }),
      );

      dispatch(
        boardActions.setWidgetData({
          id: widgetId,
          columns: [],
          rows: [],
        } as WidgetData),
      );
    }
    dispatch(
      boardActions.addFetchedItem({
        boardId,
        widgetId,
      }),
    );
    return null;
  },
)