history#History TypeScript Examples

function historyMatchesLocation(history: History, path: string): boolean {
    let location = history.location.pathname;

    if ( location === path ) { return true; }

    if ( location[0] === '/' ) {
        location = history.location.pathname.substring(1); /* remove leading / */
    }

    const matched = path === location;

    return matched;
}

setFilterValue = (
  location: Location,
  filterName: string,
  filterValue: Accessor<string>,
  history: History,
  setPage?: (page: number) => void
): void => {
  const filters = FilterManager.getFilters(location.search)
  filters.push({ filterName, filterOperation: undefined, value: filterValue })
  FilterManager.resetPagination(setPage)
  FilterManager.setFilters(location, filters, history)
}

constructor(
    lnd: LndApi,
    loop: LoopApi,
    pool: PoolApi,
    lit: LitApi,
    storage: AppStorage,
    history: History,
    csv: CsvExporter,
    log: Logger,
  ) {
    makeAutoObservable(this, {}, { deep: false, autoBind: true });

    this.api = { lnd, loop, pool, lit };
    this.storage = storage;
    this.router = new RouterStore(history);
    this.csv = csv;
    this.log = log;
  }

WebApplicationNavigatorProvider: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const history = useHistory() as History;
  const navigator = useLocalObservable(
    () => new WebApplicationNavigator(history),
  );
  return (
    <WebApplicationNavigatorContext.Provider value={navigator}>
      {children}
    </WebApplicationNavigatorContext.Provider>
  );
}

constructor(history: History) {
    makeAutoObservable(this, { history: false }, { deep: false, autoBind: true });

    this.history = history;
    this.location = history.location;

    history.listen(({ location }) => {
      runInAction(() => {
        this.location = location;
      });
    });
  }

constructor(root: RootStore, history: History) {
        makeObservable(this, {
            location: computed,
            showLoading: action,
            goHome: action,
            navigateToInitialRoute: action,
            navigateOnConnectionStatus: action,
            openChat: action,
        })
        this.root = root
        this.history = history
    }

// render micro frontend function
(window as any).renderFoo = (containerId: string, history: History) => {
  ReactDOM.render(
    <React.StrictMode>
      <App history={history} />
    </React.StrictMode>,
    document.getElementById(containerId),
  );
};

getMobileDashboardNavigationLink = ({
  title,
  address,
  network,
  history,
  pathname,
  localizedTitle,
}: INavItemProps & { history: History }) => {
  const active = onActiveRoute(pathname, localizedTitle);
  const path = `/${network.name.toLowerCase()}/${title.toLowerCase()}?address=${address}`;
  const onClickFunction = () => {
    history.push(path);
    runAnalyticsForTab(title);
  };
  return (
    <MenuItem
      key={title}
      text={localizedTitle}
      onClick={onClickFunction}
      color={active ? COLORS.CHORUS : undefined}
      data-cy={`${title.toLowerCase()}-navigation-link`}
    />
  );
}

setStep = async (
  dispatch: ThunkDispatch<ReduxStateTour, undefined, AllTourActions>,
  history: History,
  location: Location,
  guideId: string,
  guide: TourDefinitionGuide,
  onGuideCompleted: TourData['onGuideCompleted'],
  stepId?: string,
  step?: TourDefinitionGuideStep,
) => {
  dispatch({
    type: 'tourSetStep', payload: {
      activeStep: undefined,
    }
  });
  if (!!stepId && !!step) {
    if (!!step.openPath && location.pathname !== step.openPath) {
      await new Promise(resolve => setTimeout(resolve, 250));
      history.push(step.openPath);
    }
    await new Promise(resolve => setTimeout(resolve, step.showDelay !== undefined ? step.showDelay : 250));
    dispatch({
      type: 'tourSetStep', payload: {
        activeStep: { guideId, stepId },
      }
    });
  } else {
    if (guide.onComplete?.openPath) {
      await new Promise(resolve => setTimeout(resolve, 250));
      history.push(guide.onComplete.openPath);
    }
    onGuideCompleted?.(guideId, guide);
  }
}

export default function configureStore(history: History, initialState?: AppState): Store {
  const middleware = [
    thunk,
    routerMiddleware(history)
  ];

  const rootReducer = combineReducers({
    ...reducers,
    router: connectRouter(history)
  });

  const enhancers: any[] = [];
  const windowIfDefined = typeof window === 'undefined' ? null : window as any;
  if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {
    enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__() as any);
  }

  return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
  );
}

constructor(history: History) {
        makeObservable(this, {
            os: observable,
            isWindows: computed,
            isMacOS: computed,
            isLinux: computed,
        })
        this.navigation = new NavigationStore(this, history)
        this.daemon = new DaemonStore(this)
        this.config = new ConfigStore(this)
        this.filters = new Filters(this)
        this.identity = new IdentityStore(this)
        this.onboarding = new OnboardingStore(this)
        this.proposals = new ProposalStore(this)
        this.connection = new ConnectionStore(this)
        this.payment = new PaymentStore(this)
        this.feedback = new FeedbackStore(this)
        this.referral = new ReferralStore(this)

        // Setup cross-store reactions after all injections.
        this.daemon.setupReactions()
        this.filters.setupReactions()
        this.identity.setupReactions()
        this.proposals.setupReactions()
        this.payment.setupReactions()
        this.connection.setupReactions()
        this.setupReactions()

        ipcRenderer.invoke(MainIpcListenChannels.GetOS).then((os) => {
            runInAction(() => {
                this.os = os
            })
        })
    }

createRootReducer = (history: History) =>
  combineReducers({
    router: connectRouter(history),
    account,
    application,
    auction,
    logs,
    pastAuctions,
    onDisplayAuction,
  })

// eslint-disable-next-line import/no-cycle
// import counterReducer from './features/counter/counterSlice';

export default function createRootReducer(history: History) {
  return combineReducers({
    router: connectRouter(history),
    // counter: counterReducer,
  });
}

export function getCommands(
  data: TData,
  history: History,
  currentAppId: string | undefined
): Command[] {
  const appCommands = data.apps.flatMap((app) => {
    const isCurrentApp = currentAppId === app.id;
    const appCommands = getAppCommands(app, history, isCurrentApp);
    const entityCommands = app.entities.flatMap((entity) =>
      getEntityCommands(entity, app, history, isCurrentApp)
    );
    return [...appCommands, ...entityCommands];
  });
  const staticCommands = getStaticCommands(history);
  return [...staticCommands, ...appCommands];
}

route: IRoute = {
    path: "/offline",
    isShowing: (history: History) => util.historyMatchesLocation(history, route.path),
    component: (props: any) => <Controller {...props} />,
    navigate: (history: History, props?: RouteComponentProps<{}>) => { 
        if ( route.isShowing(history) ) { return; }  
        history.push(route.path)
    }
}

export function getEntityCommands(
  entity: EntityDescriptor,
  app: AppDescriptor,
  history: History,
  isCurrentApp: boolean
): Command[] {
  return [
    new NavigationCommand(
      history,
      entity.displayName,
      `/${app.id}/entities/${entity.id}`,
      TYPE_ENTITY,
      isCurrentApp,
      true,
      app.name,
      app.color
    ),
  ];
}

route: IRoute = {
    path: "/dashboard",
    isShowing: (history: History) => util.historyMatchesLocation(history, route.path),
    component: (props: any) => <Controller {...props} />,
    navigate: (history: History, props?: RouteComponentProps<{}>) => { 
        if ( route.isShowing(history) ) { return; }  
        history.push(route.path) 
    }
}

useHistory = (): History => {
  const history = useContext(HistoryContext);
  if (history === undefined) {
    throw new Error(
      "No history found in the context. Please make sure you have placed RoconRoot above."
    );
  }
  return history.history;
}

export default function createRootReducer(history: History) {
  return combineReducers({
    router: connectRouter(history),
    layout: layoutReducer,
    document: documentReducer,
    note: notesReducer,
  });
}

constructor(
    protected portDetector: PortDetector,
    @inject(SharedAppOptions) protected sharedAppOptions: ISharedAppOptions,
    @inject(RouterOptions) protected options: IRouterOptions
  ) {
    super({
      ...options,
      autoCreateHistory: !(
        (sharedAppOptions.type === 'SharedWorker' ||
          sharedAppOptions.type === 'ServiceWorker') &&
        sharedAppOptions.port === 'server'
      ),
    });

    this.portDetector.onServer((transport) => {
      return transport!.listen(
        syncRouterName,
        async () => this.router?.location
      );
    });
    this.portDetector.onClient((transport) => {
      transport!.emit(syncRouterName).then((location) => {
        if (!location) return;
        const action = this.onLocationChanged(location, 'REPLACE');
        this[storeKey]?.dispatch(action!);
      });
    });

    if (
      sharedAppOptions.type === 'SharedWorker' ||
      sharedAppOptions.type === 'ServiceWorker'
    ) {
      this.portDetector.onServer((transport) => {
        const history: History = {
          push: async (path: string, state?: Record<string, any>) => {
            this._router = await transport.emit(routerChangeName, {
              method: 'push',
              args: [path, state],
            });
          },
          replace: async (path: string, state?: Record<string, any>) => {
            this._router = await transport.emit(routerChangeName, {
              method: 'replace',
              args: [path, state],
            });
          },
          go: async (n: number) => {
            this._router = await transport.emit(routerChangeName, {
              method: 'go',
              args: [n],
            });
          },
          goBack: async () => {
            this._router = await transport.emit(routerChangeName, {
              method: 'goBack',
              args: [],
            });
          },
          goForward: async () => {
            this._router = await transport.emit(routerChangeName, {
              method: 'goForward',
              args: [],
            });
          },
        } as any;
        this.history = history;
      });
      this.portDetector.onClient((transport) => {
        return transport.listen(routerChangeName, ({ method, args = [] }) => {
          const fn: Function = this.history[method];
          fn(...args);
          return this.router;
        });
      });
    }
  }

renderInHistory = (history: History, element: ReactElement) => {
  return render(<RoconRoot history={history}>{element}</RoconRoot>);
}

/** the history object */
  history: History;

cache = new WeakMap<History, Navigate>()

history: History

createMockHistory = (): History => {
  return ({
    push: jest.fn(),
  } as unknown) as History;
}

createRootStore = (history: History): RootStore => {
    rootStore = new RootStore(history)
    StoreContext = React.createContext(rootStore)
    return rootStore
}

redirectToCluster = (history: History, id: string) => {
  history.push(`${routeBasePath}/clusters/${id}`);
}

connectToHistory(history: History) {
		this.unlistenFromHistory = history.listen((loc) => {
			this.track(loc)
		})

		return history
	}

constructor(historyApiClient: History) {
    this.historyAPI = historyApiClient;
  }