history#createBrowserHistory TypeScript Examples

history = createBrowserHistory({
  getUserConfirmation(message, callback) {
    if (ConfirmBeforeLeavePage.confirmBeforeLeave) {
      ConfirmBeforeLeavePage.confirmBeforeLeave(message, callback);
    } else {
      callback(window.confirm(message));
    }
  },
})

/** @internal */
export function createHistory(): PluginHistory {
  const browserHistory = createBrowserHistory({
    basename: getBasePath().replace(/\/$/, ""),
  });
  Object.assign(browserHistory, historyExtended(browserHistory));
  history = browserHistory as PluginHistory;
  return history;
}

createStore = (grpcClient?: GrpcClient, appStorage?: AppStorage) => {
  const grpc = grpcClient || new GrpcClient();
  // Resolve api requests with sample data when running client in develop mode.
  grpc.useSampleData = USE_SAMPLE_DATA;

  const storage = appStorage || new AppStorage();
  const lndApi = new LndApi(grpc);
  const loopApi = new LoopApi(grpc);
  const poolApi = new PoolApi(grpc);
  const litApi = new LitApi(grpc);
  const csv = new CsvExporter();
  const history = createBrowserHistory();

  const store = new Store(
    lndApi,
    loopApi,
    poolApi,
    litApi,
    storage,
    history,
    csv,
    actionLog,
  );

  // initialize the store immediately to fetch API data, except when running unit tests
  if (!IS_TEST) store.init();

  // in dev env, make the store accessible via the browser DevTools console
  if (IS_DEV) (global as any).store = store;

  return store;
}

constructor(
        @Value('malagu.react.history') protected readonly historyOptions: any
    ) {
        const historyCreatorMap: { [key: string]: any } = {
            hash: createHashHistory,
            browser: createBrowserHistory,
            memory: createMemoryHistory
        };
        if (this.historyOptions) {
            const { type, ...options } = historyOptions;
            const create = historyCreatorMap[type] || createHashHistory;
            this.history = create(options);
        } else {
            this.history = createHashHistory();
        }

    }

public render(): void {

    const browserHistory = createBrowserHistory({ basename: '' });
    var reactPlugin = new ReactPlugin();
    var appInsights = new ApplicationInsights({
        config: {
            // instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
            instrumentationKey: '6c0f2fd6-76a0-4671-9fad-e3c75ee02901',
            extensions: [reactPlugin],
            extensionConfig: {
              [reactPlugin.identifier]: { history: browserHistory }
            }
        }
    });
    appInsights.loadAppInsights();


    const element: React.ReactElement<ISpfxPnpLoggingProps> = React.createElement(
      SpfxPnpLogging,
      {
        description: this.properties.description,
        context:this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

ai = new ApplicationInsights({
    config: {
        instrumentationKey: '6c0f2fd6-76a0-4671-9fad-e3c75ee02901',
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: createBrowserHistory }
        }
    }
})

TEST__getTestApplicationStore = <
  T extends LegendApplicationConfig,
>(
  config: T,
  pluginManager: LegendApplicationPluginManager,
): ApplicationStore<T> =>
  new ApplicationStore(
    config,
    new WebApplicationNavigator(createBrowserHistory()),
    pluginManager,
  )

it('should edit the flow', async () => {
  const history: any = createBrowserHistory();
  history.push({ pathname: `/flow/1/edit` });

  const editFlow = (match: any) => (
    <MockedProvider mocks={mocks} addTypename={false}>
      <Router history={history}>
        <Flow match={match} />
      </Router>
    </MockedProvider>
  );
  const { container, getByTestId } = render(editFlow({ params: { id: 1 } }));
  await waitFor(() => {});
});

BasicLayout: React.FC<{ route: IRouteConfig }> = ({ route }) => {
  const history = createBrowserHistory();

  if (!localStorage.getItem('vite-react-ts-antd-token')) {
    history.push('/user/login');
  }

  return (
    <Layout>
      <MyMenu />
      <Layout>
        <MyHeader />
        <Content style={{ height: 'calc(100vh - 60px)' }}>
          {renderRoutes(route.routes)}
        </Content>
      </Layout>
    </Layout>
  );
}

Authority: React.FC = ({ children }) => {
  const history = createBrowserHistory();
  // const user = useStore((state) => state.user);
  // console.log('Authority', user);

  if (!localStorage.getItem('vite-react-ts-antd-token')) {
    history.push('/user/login');
  }
  // if (!user?.token) {
  //   history.push('/user/login');
  // }

  return <>{children}</>;
}

Header: React.FC = () => {
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const sysRoutes = FilterRoutes(routes);
  const history = createBrowserHistory();

  // 路由监听
  useEffect(() => {
    const pathname = history.location.pathname;
    const match = matchRoutes(sysRoutes, pathname);

    if (match?.length) {
      setOpenKeys(match.map((n) => n.route.path));
      setSelectedKeys([match[0].route.path]);
    }
  }, [history.location.pathname]);

  return (
    <Sider>
      <div className={cls.menu_logo}>
        <Typography.Title className={cls.logo_title} level={5}>
          Logo
        </Typography.Title>
      </div>
      <Menu theme="dark" mode="inline" openKeys={openKeys} selectedKeys={selectedKeys}>
        {sysRoutes.map((item) => (
          <Menu.Item key={item.path}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  );
}

RoconRoot: React.FC<RoconRootProps> = memo((props) => {
  const history = useMemo(
    () => props.history || createBrowserHistory(),
    [props.history]
  );

  const historyContextValue = useMemo(() => {
    return {
      history,
    };
  }, [history]);

  const [location, setLocation] = useState<Location>(history.location);

  useEffect(() => {
    // this `setLocation` handles the case where location is changed after above `history.location` is calculated
    setLocation(history.location);
    return history.listen((state) => {
      setLocation(state.location);
    });
  }, [history]);

  return (
    <HistoryContext.Provider value={historyContextValue}>
      <LocationContext.Provider value={location}>
        {props.children}
      </LocationContext.Provider>
    </HistoryContext.Provider>
  );
})

it('should create copy of flow', async () => {
  const history: any = createBrowserHistory();
  history.push({ pathname: `/flow/1/edit`, state: 'copy' });

  const copyFlow = (match: any) => (
    <MockedProvider mocks={mocks} addTypename={false}>
      <Router history={history}>
        <Flow match={match} />
      </Router>
    </MockedProvider>
  );

  const { container, getByTestId } = render(copyFlow({ params: { id: 1 } }));
  await waitFor(() => {
    expect(container.querySelector('input[name="name"]')?.value).toBe('Copy of Help');
  });

  fireEvent.change(container.querySelector('input[name="keywords"]'), {
    target: { value: 'help, activity' },
  });
  const button = getByTestId('submitActionButton');
  fireEvent.click(button);
  await waitFor(() => {
    // error if a keyword with same flow already exists
    // expect(getByTestId('dialogTitle')).toBeInTheDocument();
    // expect(screen.getByTestId('dialogTitle')).toThrow(
    //   'The keyword `help` was already used in the `Help Workflow` Flow.'
    // );
  });
});

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory({})

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory({
    /* pass a configuration object here if needed */
})

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()

history = createBrowserHistory()