react-use#useLocation TypeScript Examples

The following examples show how to use react-use#useLocation. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: profile.tsx    From platyplus with MIT License 6 votes vote down vote up 
Page: PageFunction = ({ title }) => {
  const { value: profile } = useProfile()
  const editing = useQuery().has('edit')
  const tableinfo = useTableInfo('public.users')
  // TODO profile actions e.g. change/reset password
  const location = useLocation()
  const href = location.pathname
  if (!profile || !tableinfo) return null
  return (
    <HeaderTitleWrapper title={title} previous>
      <Animation.Fade in={!!profile}>
        {(props, ref) => (
          <div {...props}>
            <DocumentPanel
              title={<DisplayName profile={profile} />}
              toolbar={
                <DocumentToolbar
                  tableinfo={tableinfo}
                  role={METADATA_ROLE}
                  document={profile}
                  edit={editing}
                  href={href}
                />
              }
            >
              <DocumentComponentWrapper
                tableinfo={tableinfo}
                role={METADATA_ROLE}
                document={profile}
                edit={editing}
              />
            </DocumentPanel>
          </div>
        )}
      </Animation.Fade>
    </HeaderTitleWrapper>
  )
}
Example #2
Source File: index.tsx    From erda-ui with GNU Affero General Public License v3.0 5 votes vote down vote up 
App = ({ dynamicModules = [] }: { dynamicModules?: DynamicModule[] }) => {
  const route = routeInfoStore.useStore((s) => s.parsed);
  const location = useLocation();
  // register enterprise remotes
  const [scriptSource, setScriptSource] = React.useState<{ url?: string; remoteName?: string }>({});
  const [loadedSource, setLoadedSource] = React.useState<string[]>([]);
  const { ready, failed } = useDynamicScript(scriptSource);

  React.useEffect(() => {
    const currentModule = matchEnterpriseRoute(dynamicModules);
    if (currentModule && !loadedSource.includes(currentModule.name)) {
      setGlobal(GLOBAL_KEY.LOADING_MODULE, true);
      setScriptSource({
        url: `/static/${currentModule.name}/scripts/mf_${currentModule.name}.js`,
        remoteName: currentModule.name,
      });
    }
  }, [location.pathname]);

  React.useEffect(() => {
    if (failed) {
      emit('loadingModuleFailed');
      setGlobal(GLOBAL_KEY.LOADING_MODULE, false);
    }
  }, [failed]);

  React.useEffect(() => {
    if (ready && scriptSource.remoteName) {
      const initFn = initModuleFederationModule(`mf_${scriptSource.remoteName}`, './entry');
      initFn.then((fn) => {
        fn.default(registerModule);
        setLoadedSource([...loadedSource, scriptSource.remoteName!]);
        setGlobal(GLOBAL_KEY.LOADING_MODULE, false);
      });
    }
  }, [ready]);

  React.useEffect(() => {
    browserHistory.listen((loc) => {
      emit('@routeChange', routeInfoStore.reducers.$_updateRouteInfo(loc));
    });
  }, []);

  if (!route?.component) {
    return null;
  }

  return <Router history={browserHistory}>{renderRoutes([route])}</Router>;
}
Example #3
Source File: MassetSwitcher.tsx    From mStable-apps with GNU Lesser General Public License v3.0 5 votes vote down vote up 
MassetSwitcher: FC<{ className?: string }> = ({ className }) => {
  const dataState = useDataState()
  const history = useHistory()
  const [selected, setMassetName] = useSelectedMasset()

  const options = useMemo<Record<string, { icon: { symbol: string; hideNetwork: boolean } }>>(
    () =>
      Object.fromEntries([
        ...Object.values(dataState).map(massetState => [
          massetState.token.symbol,
          {
            icon: {
              symbol: massetState.token.symbol,
              hideNetwork: true,
            },
          },
        ]),
      ]),
    [dataState],
  )

  // Handle the masset changing directly from the URL
  const setSelectedMassetName = useSetSelectedMassetName()
  const massetName = useSelectedMassetName()
  const location = useLocation()
  useEffect(() => {
    const massetNameInUrl = location.hash?.match(/^#\/(musd|mbtc)\//)?.[1] as MassetName | undefined
    if (massetNameInUrl && massetNameInUrl !== massetName) {
      setSelectedMassetName(massetNameInUrl)
    }
  }, [location, massetName, setSelectedMassetName])

  return (
    <StyledDropdown
      className={className}
      onChange={(selectedAddress?: string): void => {
        if (!selectedAddress) return

        const slug = Object.keys(options)
          .find(address => address === selectedAddress)
          ?.toLowerCase() as MassetName

        setMassetName(slug as MassetName)

        const tab = window.location.hash.split('/')[2]
        history.push(`/${slug}/${tab}`)
      }}
      options={options}
      defaultOption={dataState[selected]?.token?.symbol}
    />
  )
}