react-router#RouteComponentProps TypeScript Examples

class DemoOnboardingLogin extends Component<Props & RouteComponentProps & WithStyles<typeof styles, true>, State> {
  state: State = {};
  render() {
    const token = new URL(windowIso.location.href).searchParams.get(SSO_TOKEN_PARAM_NAME);
    if (token) {
      // Clear token from URL for safety
      this.props.history.replace(this.props.location.pathname);
    }

    if (!this.state.fakeLoggedIn) {
      return (<ErrorPage msg={(
        <div className={this.props.classes.loginContainer}>
          This is a demo login page for {this.props.type === 'sso' ? 'Single Sign-On' : 'OAuth'}
          <Button
            className={this.props.classes.loginButton}
            size='small'
            onClick={() => {
              this.setState({ fakeLoggedIn: true });

              // Broadcast to onboarding demo that login was successfully faked
              const oauthFlow = new OAuthFlow({ accountType: 'user', redirectPath: '/oauth-demo' });
              oauthFlow.broadcastSuccess();

              // Close window
              !windowIso.isSsr && windowIso.self.close();
            }}
          >LOGIN</Button>
        </div>
      )} variant='info' />);
    } else {
      return (<ErrorPage msg='Successfully logged in' variant='success' />);
    }
  }
}

Characters: VFC<RouteComponentProps> = ({ match }) => (
  <>
    <header>
      <h1>『SLAM DUNK』登場人物</h1>
    </header>
    <Switch>
      <Route exact path={`${match.path}`}>
        <AllCharacters />
      </Route>
      <Route path={`${match.path}/:schoolCode`}>
        <SchoolCharacters />
      </Route>
      <Redirect to="/" />
    </Switch>
    <Divider hidden />
    <HomeButton />
  </>
)

function createRouteNode(route: IRouteConfigItem, basePath = "", key ?: string, ctx ?: IEpiserverContext) : React.ReactElement<RouteProps> {
    
    let createdRoute : string = basePath ? (basePath.substr(-1) === "/" ? basePath.substr(0, -1) : basePath) : "";
    createdRoute = createdRoute + "/" + (route.path ? (route.path.substr(0,1) === "/" ? route.path.substr(1) : route.path) : "")

    if (ctx?.isDebugActive()) console.log('Generating Route Virtual DOM Node', createdRoute, route, key);

    const newRouteProps : RouteProps = {
        children: route.children,
        exact: route.exact,
        location: route.location,
        path: createdRoute,
        sensitive: route.sensitive,
        strict: route.strict,
        render: route.render ? (props: RouteComponentProps) => { return route.render ? route.render({ ...props, routes: route.routes, path: route.path }) : <div/> } : undefined,
        component: route.component ? (props: RouteComponentProps) => { const RouteComponent = route.component || 'div'; return <RouteComponent { ...props } routes={ route.routes } path={ route.path } />} : undefined
    }
    return <Route { ...newRouteProps } key={ key } />
}

Navbar = ({ history }: RouteComponentProps) => {
  return (
    <NavbarWrapper>
      <PageContent>
        <Row>
          <NavbarLogo tabIndex={0} onClick={() => history.push(HOME_ROUTE)}>
            {Configuration[METADATA]['title']}
          </NavbarLogo>
          <NavbarLinks>
            <Link
              href="https://github.com/castorini/covidex"
              target="_blank"
              rel="noopener noreferrer"
            >
              <GithubLogo src={GithubImg} alt="Github logo" />
            </Link>
          </NavbarLinks>
        </Row>
      </PageContent>
    </NavbarWrapper>
  );
}

VolunteersPage: React.FC<RouteComponentProps> = ({ match }) => {
  let { data, loading, error } = useFindVolunteersQuery()
  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  let content;
  if (data?.findVolunteers?.items.length !== 0) {
    content = <VolunteersList volunteers={data?.findVolunteers.items as any} />
  } else {
    content = <Empty message={<p>No data!</p>} />;
  }

  return (
    <IonPage>
      <Header title="Volunteer List" match={match} />

      <IonContent className="ion-padding" >
        {content}
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createVolunteer">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );

}

// Redirect now (supports cross domain)
export function redirectIso(url: string, history: RouteComponentProps['history'], httpCode: number = 302) {
  if (windowIso.isSsr) {
    windowIso.staticRouterContext.statusCode = httpCode;
    windowIso.staticRouterContext.url = url;
  } else {
    history.push(url);
  }
}

Home = ({ history }: RouteComponentProps) => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.title}>
          <p>
            <Itwin className={styles.logo} />
            {"iTwinViewer Sample App"}
          </p>
        </div>
        <img className={styles.img} src={modelImg} alt={"modelImage"} />
        <div className={styles.signIn}>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/usermanager")}
            buttonType={ButtonType.Primary}
          >
            {"Use Native OIDC Client"}
          </Button>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/authclient")}
            buttonType={ButtonType.Blue}
          >
            {"Use iModel.js Auth Client"}
          </Button>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/blankconnection")}
            buttonType={ButtonType.Hollow}
          >
            {"Blank Connection"}
          </Button>
        </div>
      </div>
    </div>
  );
}

ScrollToTop: FC<RouteComponentProps> = ({ location }) => {
  const prevLocation = usePrevious(location)

  if (!location || !prevLocation) {
    return null
  }

  if (location.pathname !== prevLocation.pathname) {
    window.scrollTo(0, 0)
  }

  return null
}

ProductsPage: React.FC<RouteComponentProps> = ({ match }) => {
  let { data, loading, error } = useFindProductsQuery();

  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  const products = data?.findProducts?.items || [];
  const content = <ProductList products={products as any} />
  
  return (
    <IonPage>
      <Header title="List of Products" match={match} />
      <IonContent className="ion-padding" >
        {content}
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createProduct">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );

}

private _routeProps: RouteComponentProps;

class UserContributions extends React.Component<Props & WithTranslation<'app'> & RouteComponentProps & WithStyles<typeof styles, true>> {
  render() {
    const postsPanel: Client.PagePanelWithHideIfEmpty = {
      search: {
        filterAuthorId: this.props.userId,
        sortBy: Client.IdeaSearchSortByEnum.New,
        limit: 2,
      },
      display: {
        titleTruncateLines: 1,
        descriptionTruncateLines: 2,
        responseTruncateLines: 0,
      },
      title: this.props.t('posts'),
      hideIfEmpty: true,
    };
    const commentSearch: Client.CommentSearch = {
      filterAuthorId: this.props.userId,
      limit: 2,
    };
    return (
      <>
        <BoardPanel
          className={this.props.sectionClassName}
          server={this.props.server}
          panel={postsPanel}
        />
        <PanelComment
          className={this.props.sectionClassName}
          key={getSearchKey(commentSearch)}
          title={this.props.t('comments')}
          server={this.props.server}
          search={commentSearch}
          direction={Direction.Horizontal}
          hideAuthor
          hideIfEmpty
        />
      </>
    );
  }
}

public constructor(props: RouteComponentProps & WithTranslation) {
        super(props);
        const name = localStorage.getItem("userName");
        this.state = {
            roomId: "",
            name: name ? name : "",
        };
    }

// used to transform routerContext into a hook
// TODO : find alternate solution as this uses an internal variable
export default function useRouter() {
  return useContext<RouteComponentProps<{ [key: string]: string }>>(
    __RouterContext
  );
}

class NotificationList extends Component<Props & ConnectProps & WithTranslation<'app'> & WithStyles<typeof styles, true> & RouteComponentProps> {

  constructor(props) {
    super(props);

    props.callOnMount?.();
  }

  render() {
    if (!this.props.userId) {
      return (<ErrorMsg msg='You need to log in to see your notifications' variant='info' />);
    }
    const hasNotifications = this.props.notifications && this.props.notifications.length > 0;
    return (
      <div className={this.props.className}>
        <div className={this.props.classes.table}>
          <Table size='medium'>
            <TableBody>
              {!hasNotifications ? (
                <Typography
                  className={this.props.classes.noNotificationsLabel}
                  variant='overline'
                >{this.props.t('no-notifications')}</Typography>
              ) : this.props.notifications!.map(notification => (
                <TableRow
                  key={notification.notificationId}
                  hover
                >
                  <Link
                    to={this.getNotificationTo(notification)}
                    onClick={() => this.clearNotification(notification)}
                  >
                    <TableCell key='date'><Typography><TimeAgo date={notification.created} /></Typography></TableCell>
                    <TableCell key='description'><Typography>{notification.description}</Typography></TableCell>
                  </Link>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
        {hasNotifications && (
          <Button fullWidth className={this.props.classes.button} onClick={() => this.clearAll()}>
            {this.props.t('clear-all')}
          </Button>
        )}
        {this.props.getNextNotifications && (
          <Button fullWidth className={this.props.classes.button} onClick={() => this.props.getNextNotifications && this.props.getNextNotifications()}>
            {this.props.t('show-more')}
          </Button>
        )}
      </div>
    );
  }

  getNotificationTo(notification: Client.Notification): string {
    if (notification.relatedIdeaId) {
      if (notification.relatedCommentId) {
        return `/post/${notification.relatedIdeaId}/comment/${notification.relatedCommentId}`;
      } else {
        return `/post/${notification.relatedIdeaId}`;
      }
    } else {
      return `/account`;
    }
  }

  clearNotification(notification: Client.Notification) {
    this.props.server.dispatch().then(d => d.notificationClear({
      projectId: this.props.server.getProjectId(),
      notificationId: notification.notificationId,
    }));
  }

  clearAll() {
    this.props.server.dispatch().then(d => d.notificationClearAll({
      projectId: this.props.server.getProjectId(),
    }));
  }
}

constructor(routeProps: RouteComponentProps) {
    this._routeProps = routeProps;
    this._paramMap = new URLSearchParams(routeProps.location.search);
  }

export default function MigrateV1Exchange({
  history,
  match: {
    params: { address }
  }
}: RouteComponentProps<{ address: string }>) {
  const validatedAddress = isAddress(address)
  const { chainId, account } = useActiveWeb3React()

  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined)
  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]

  const token = useToken(tokenAddress)

  const liquidityToken: Token | undefined = useMemo(
    () =>
      validatedAddress && chainId && token
        ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
        : undefined,
    [chainId, validatedAddress, token]
  )
  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)

  // redirect for invalid url params
  if (!validatedAddress || tokenAddress === AddressZero) {
    console.error('Invalid address in path', address)
    return <Redirect to="/migrate/v1" />
  }

  return (
    <BodyWrapper style={{ padding: 24 }}>
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v1" />
          <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
          <div>
            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />
          </div>
        </AutoRow>

        {!account ? (
          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
        ) : validatedAddress && chainId && token?.equals(WETH[chainId]) ? (
          <>
            <TYPE.body my={9} style={{ fontWeight: 400 }}>
              Because Uniswap V2 uses WETH under the hood, your Uniswap V1 WETH/ETH liquidity cannot be migrated. You
              may want to remove your liquidity instead.
            </TYPE.body>

            <ButtonConfirmed
              onClick={() => {
                history.push(`/remove/v1/${validatedAddress}`)
              }}
            >
              Remove
            </ButtonConfirmed>
          </>
        ) : userLiquidityBalance && token ? (
          <V1PairMigration liquidityTokenAmount={userLiquidityBalance} token={token} />
        ) : (
          <EmptyState message="Loading..." />
        )}
      </AutoColumn>
    </BodyWrapper>
  )
}

Home = ({ history }: RouteComponentProps) => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.title}>
          <p>
            <Itwin className={styles.logo} />
            {"iTwinViewer Sample App"}
          </p>
        </div>
        <img className={styles.img} src={modelImg} alt={"modelImage"} />
        <div className={styles.signIn}>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/viewer")}
            styleType={"high-visibility"}
            size={"large"}
          >
            {"Remote Connection"}
          </Button>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/blankconnection")}
            styleType={"cta"}
            size={"large"}
          >
            {"Blank Connection"}
          </Button>
          <Button
            className={styles.homeButton}
            onClick={() => history.push("/imodelbank")}
            styleType={"default"}
            size={"large"}
          >
            {"iModel Bank"}
          </Button>
        </div>
      </div>
    </div>
  );
}

RoutedComponent : FunctionComponent<RouteComponentProps> = (props: RouteComponentProps) =>
{
    const epi = useEpiserver();
    const repo = useIContentRepository();
    const ssr = useServerSideRendering();
    const path = props.location.pathname;
    const [iContent, setIContent] = useState<IContent | null>(ssr.getIContentByPath(path));
    const debug = epi.isDebugActive();
    const lang = epi.Language;

    // Handle path changes
    useEffect(() => {
        let isCancelled = false;
        repo.getByRoute(path).then(c => {
            if (isCancelled) return;
            epi.setRoutedContent(c || undefined);
            setIContent(c);
        });
        return () => { isCancelled = true; epi.setRoutedContent(); };
    }, [ path, repo, epi ]);

    // Handle content changes
    useEffect(() => {
        let isCancelled = false;
        if (!iContent) return () => { isCancelled = true; };
        const linkId = ContentLinkService.createLanguageId(iContent, lang, true);

        const afterPatch : (link: Readonly<ContentReference>, oldValue: Readonly<IContent>, newValue: IContent) => void = (link, oldValue, newValue) => {
            const itemApiId = ContentLinkService.createLanguageId(link, lang, true);
            if (debug) console.debug('RoutedComponent.onContentPatched => Checking content ids (link, received)', linkId, itemApiId);
            if (linkId === itemApiId && !isCancelled) {
                if (debug) console.debug('RoutedComponent.onContentPatched => Updating iContent', itemApiId, newValue);
                setIContent(newValue);
            }
        }
        const afterUpdate : (item : IContent | null) => void = (item: IContent | null) => {
            if (!item) return;
            const itemApiId = ContentLinkService.createLanguageId(item, lang, true);
            if (debug) console.debug('RoutedComponent.onContentPatched => Checking content ids (link, received)', linkId, itemApiId);
            if (linkId === itemApiId) {
                if (debug) console.debug('RoutedComponent.onContentUpdated => Updating iContent', itemApiId, item);
                setIContent(item);
            }
        }
        repo.addListener("afterPatch", afterPatch );
        repo.addListener("afterUpdate", afterUpdate);

        return () => {
            isCancelled = true;
            repo.removeListener("afterPatch", afterPatch);
            repo.removeListener("afterUpdate", afterUpdate);
        }
    }, [ repo, debug, lang, iContent]);

    if (iContent === null) return <Spinner />
    return <IContentRenderer data={ iContent } path={ props.location.pathname } />
}

export default function MigrateV1Exchange({
  history,
  match: {
    params: { address },
  },
}: RouteComponentProps<{ address: string }>) {
  const validatedAddress = isAddress(address)
  const { chainId, account } = useActiveWeb3React()

  const exchangeContract = useV1ExchangeContract(validatedAddress || undefined)
  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]

  const token = useToken(tokenAddress)

  const liquidityToken: Token | undefined = useMemo(
    () =>
      validatedAddress && chainId && token
        ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
        : undefined,
    [chainId, validatedAddress, token]
  )
  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)

  // redirect for invalid url params
  if (!validatedAddress || tokenAddress === AddressZero) {
    console.error('Invalid address in path', address)
    return <Redirect to="/migrate/v1" />
  }

  return (
    <BodyWrapper>
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v1" />
          <MediumHeader>Migrate V1 Liquidity</MediumHeader>
          <div>
            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />
          </div>
        </AutoRow>

        {!account ? (
          <LargeHeader>You must connect an account.</LargeHeader>
        ) : validatedAddress && chainId && token?.equals(WETH[chainId]) ? (
          <>
            <Body my={9} style={{ fontWeight: 400 }}>
              Because Uniswap V2 uses WETH under the hood, your Uniswap V1 WETH/ETH liquidity cannot be migrated. You
              may want to remove your liquidity instead.
            </Body>

            <Button
              onClick={() => {
                history.push(`/remove/v1/${validatedAddress}`)
              }}
            >
              Remove
            </Button>
          </>
        ) : userLiquidityBalance && token ? (
          <V1PairMigration liquidityTokenAmount={userLiquidityBalance} token={token} />
        ) : (
          <EmptyState message="Loading..." />
        )}
      </AutoColumn>
    </BodyWrapper>
  )
}

RecipientsPage: React.FC<RouteComponentProps> = ({ match }) => {
  let { data, loading, error } = useFindRecipientsQuery();

  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  let content;
  if (data?.findRecipients?.items.length !== 0) {
    content = <RecipientList recipients={data?.findRecipients.items as any} />
  } else {
    content = <Empty message={<p>No data!</p>} />;
  }


  return (
    <IonPage>
      <Header title="List of Recipients" match={match} />

      <IonContent className="ion-padding" >
        {content}
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createRecipient">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );

}

export default function MigrateV1Exchange({
  history,
  match: {
    params: { address }
  }
}: RouteComponentProps<{ address: string }>) {
  const validatedAddress = isAddress(address)
  const { chainId, account } = useActiveWeb3React()

  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined)
  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]

  const token = useToken(tokenAddress)

  const liquidityToken: Token | undefined = useMemo(
    () =>
      validatedAddress && chainId && token
        ? new Token(chainId, validatedAddress, 18, `LUA-V1-${token.symbol}`, 'LuaSwap LP Token V1')
        : undefined,
    [chainId, validatedAddress, token]
  )
  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)

  // redirect for invalid url params
  if (!validatedAddress || tokenAddress === AddressZero) {
    console.error('Invalid address in path', address)
    return <Redirect to="/migrate/v1" />
  }

  return (
    <BodyWrapper style={{ padding: 24 }}>
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v1" />
          <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
          <div>
            <QuestionHelper text="Migrate your liquidity tokens from LuaSwap V1 to LuaSwap V2." />
          </div>
        </AutoRow>

        {!account ? (
          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
        ) : validatedAddress && chainId && token?.equals(WETH[chainId]) ? (
          <>
            <TYPE.body my={9} style={{ fontWeight: 400 }}>
              Because LuaSwap V2 uses WETH under the hood, your LuaSwap V1 WETH/ETH liquidity cannot be migrated. You
              may want to remove your liquidity instead.
            </TYPE.body>

            <ButtonConfirmed
              onClick={() => {
                history.push(`/remove/v1/${validatedAddress}`)
              }}
            >
              Remove
            </ButtonConfirmed>
          </>
        ) : userLiquidityBalance && token ? (
          <V1PairMigration liquidityTokenAmount={userLiquidityBalance} token={token} />
        ) : (
          <EmptyState message="Loading..." />
        )}
      </AutoColumn>
    </BodyWrapper>
  )
}

componentDidUpdate = (prevProps: RouteComponentProps<ProfileProps>) => {
    const { username } = this.props.match.params;
    const { username: prevUsername } = prevProps.match.params;

    if (username !== prevUsername) {
      this.getProfile();
    }
  };

ActionPage: React.FC<RouteComponentProps> = ({ match }) => {
  const { data, loading, error } = useFindVolunteerActionsQuery();

  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  let content;
  if (data?.findVolunteerActions?.items.length !== 0) {
    content = <ActionsList actions={data?.findVolunteerActions?.items} />
  } else {
    content = <Empty message={<p>No actions!</p>} />;
  }


  return (
    <IonPage>
      <Header title="OpenVolunteer Admin App" match={match} />

      <IonContent className="ion-padding" >
      <IonFab vertical="top" horizontal="end" slot="fixed">
          {/* TODO add handling */}
          <IonFabButton>
            <IonIcon icon={filter} />
          </IonFabButton>
        </IonFab> 
        {content}
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createAction">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );

}

export default function RemoveV1Exchange({
  match: {
    params: { address }
  }
}: RouteComponentProps<{ address: string }>) {
  const validatedAddress = isAddress(address)
  const { chainId, account } = useActiveWeb3React()

  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined, true)
  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]
  const token = useToken(tokenAddress)

  const liquidityToken: Token | undefined = useMemo(
    () =>
      validatedAddress && chainId && token
        ? new Token(chainId, validatedAddress, 18, `LUA-V1-${token.symbol}`, 'LuaSwap LP Token V1')
        : undefined,
    [chainId, validatedAddress, token]
  )
  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)

  // redirect for invalid url params
  if (!validatedAddress || tokenAddress === AddressZero) {
    console.error('Invalid address in path', address)
    return <Redirect to="/migrate/v1" />
  }

  return (
    <BodyWrapper style={{ padding: 24 }} id="remove-v1-exchange">
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v1" />
          <TYPE.mediumHeader>Remove V1 Liquidity</TYPE.mediumHeader>
          <div>
            <QuestionHelper text="Remove your LuaSwap V1 liquidity tokens." />
          </div>
        </AutoRow>

        {!account ? (
          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
        ) : userLiquidityBalance && token && exchangeContract ? (
          <V1PairRemoval
            exchangeContract={exchangeContract}
            liquidityTokenAmount={userLiquidityBalance}
            token={token}
          />
        ) : (
          <EmptyState message="Loading..." />
        )}
      </AutoColumn>
    </BodyWrapper>
  )
}

export default function MigrateV1Exchange({
  history,
  match: {
    params: { address }
  }
}: RouteComponentProps<{ address: string }>) {
  const validatedAddress = isAddress(address)
  const { chainId, account } = useActiveWeb3React()

  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined)
  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]

  const token = useToken(tokenAddress)

  const liquidityToken: Token | undefined = useMemo(
    () =>
      validatedAddress && chainId && token
        ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
        : undefined,
    [chainId, validatedAddress, token]
  )
  const userLiquidityBalance = useTokenBalance(account ?? undefined, liquidityToken)

  // redirect for invalid url params
  if (!validatedAddress || tokenAddress === AddressZero) {
    console.error('Invalid address in path', address)
    return <Redirect to="/migrate/v1" />
  }

  return (
    <BodyWrapper style={{ padding: 24 }}>
      <AutoColumn gap="16px">
        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
          <BackArrow to="/migrate/v1" />
          <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
          <div>
            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to SushiSwap LP Token." />
          </div>
        </AutoRow>

        {!account ? (
          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
        ) : validatedAddress && chainId && token?.equals(WETH[chainId]) ? (
          <>
            <TYPE.body my={9} style={{ fontWeight: 400 }}>
              Because SushiSwap LP Token uses WETH under the hood, your Uniswap V1 WETH/ETH liquidity cannot be migrated. You
              may want to remove your liquidity instead.
            </TYPE.body>

            <ButtonConfirmed
              onClick={() => {
                history.push(`/remove/v1/${validatedAddress}`)
              }}
            >
              Remove
            </ButtonConfirmed>
          </>
        ) : userLiquidityBalance && token ? (
          <V1PairMigration liquidityTokenAmount={userLiquidityBalance} token={token} />
        ) : (
          <EmptyState message="Loading..." />
        )}
      </AutoColumn>
    </BodyWrapper>
  )
}

DistributionCentrePage: React.FC<RouteComponentProps> = ({ match }) => {
  const history = useHistory();
  let { data, loading, error } = useFindFlatDistributionCentresQuery();

  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  const distributionCentres = data?.findDistributionCentres?.items || [];

  let mapContent = <Empty />;
  const size = distributionCentres.length;

  if (size > 0) {
    const totalLatLong = {
      lat: 0, lng: 0
    };

    const distributionMarkers = distributionCentres
      .map((distributionCentre, index) => {
        const lat = distributionCentre?.lat!;
        const lng = distributionCentre?.long!;

        totalLatLong.lat += lat;
        totalLatLong.lng += lng;

        const title = `${distributionCentre?.address1} ${distributionCentre?.address2} ${distributionCentre?.city}`;

        return <Marker
          key={index}
          title={title}
          label={distributionCentre?.name!}
          onClick={() => history.push(`/manageDistributionCentre/${distributionCentre?._id}`)}
          position={{
            lat,
            lng
          }} />
      });

    mapContent = <Map
      zoom={12}
      center={{
        lat: totalLatLong.lat / size,
        lng: totalLatLong.lng / size
      }}>
      {distributionMarkers}
    </Map>
  }

  return (
    <IonPage>
      <Header title="Distribution Centers Map" match={match} />
      <IonContent className="ion-padding" >
        <IonCard>
          {mapContent}
        </IonCard>
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createDistributionCentre">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );
}

DocsImagesInner = observer((props: RouteComponentProps<{ clientId: string}>) => {
    const model = React.useMemo(() => new DocsImageInnerPage(props.match.params.clientId), [props.match.params.clientId]);

    const { inProgress, clientName, images } = model;

    return (
        <SimpleReactLightbox>
            <Page inProgress={inProgress} className="prompts-page interventions-page docs-images-inner-page">
                <Container>
                    <View className="heading-wrap">
                        <View onClick={onGoBack} className="arrow-link">
                            <Image className="arrow-icon" src={ProjectImages.backArrow} />
                        </View>
                        <View className="nav-wrap">
                            <Text className="title-h2 type5">Check-Ins</Text>
                            <Text className="breadcrumbs label-draganddrop">{`${clientName} / `}<Text className="last-breadcrumb">Docs</Text></Text>
                        </View>
                    </View>
                    <View className="content">
                        <View className="prompt-wrap interventions-wrap docs-images-wrap">
                            <SRLWrapper options={optionsLightbox}>
                                <View className="images-list">
                                    {images.map((item, index) => (
                                        !item.image.url ?
                                            <View className="placeholder"></View>
                                        :
                                            <Image
                                                key={item.image.url || index}
                                                src={item.image.url}
                                                alt={item.caption}
                                            />
                                    ))}
                                </View>
                            </SRLWrapper>
                        </View>
                    </View>
                </Container>
            </Page>
        </SimpleReactLightbox>
    );
})

ProfilePage: React.FC<RouteComponentProps> = ({ match }) => {
  let { keycloak, profile } = useContext(AuthContext);

  if (!keycloak || !profile) return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>Authentication not configured</IonCardTitle>
        <IonCardSubtitle>IDM service required</IonCardSubtitle>
      </IonCardHeader>
      <IonCardContent>
        Profile page cannot be displayed.
        Please enable Auth SDK by providing configuration pointing to your IDM service
      </IonCardContent>
    </IonCard>
  );

  return (
    <>
      <Header title="Profile" match={match} />
      <IonContent>
        <IonList>
          <IonCard>
            <IonItemGroup>
              <IonItemDivider color="light">
                <h2>Admin user information</h2>
              </IonItemDivider>
              <AutoForm
                placeholder
                model={{ ...profile }}
                schema={adminForm}
                showInlineError
              >
                <AutoFields />
                <ErrorsField />
              </AutoForm>
            </IonItemGroup>
          </IonCard>
        </IonList>
      </IonContent>
    </>
  );

}

export function ClientDetailsWithTabs(props: RouteComponentProps<{ clientId: string, tab: string }>) {
    const tabValue = Routes.ClientDetails.Tabs.fromKey(props.match.params.tab);
    const clientId = props.match.params.clientId;
    // console.log('ClientDetailsWithTabs', props.match.params.tab, props.match.params.clientId);
    return (
        <ClientDetails clientId={clientId} tab={tabValue} />
    );
}