@material-ui/core#NoSsr TypeScript Examples

render() {
    return (
      <NoSsr>
        <ReactLiquid
          template={this.props.template}
          data={{
            config: this.props.config,
            page: this.props.page,
            loggedInUser: this.props.loggedInUser,
            core: this.props.state,
          }}
          render={(renderedTemplate) => {
            return (<DangerouslySetInnerHtmlWithScriptExecution html={renderedTemplate?.__html} />);
          }}
        />
      </NoSsr>
    );
  }

render() {
    var doc: string | undefined;
    switch (this.props.type) {
      case 'terms':
        doc = this.props.legal?.terms;
        break;
      case 'privacy':
        doc = this.props.legal?.privacy;
        break;
    }
    return (
      <div className={this.props.classes.page}>
        <Loader status={this.props.legalStatus}>
          <NoSsr>
            <MarkdownElement text={doc} />
          </NoSsr>
        </Loader>
      </div>
    );
  }

render() {
    const Router = (windowIso.isSsr ? StaticRouter : BrowserRouter) as React.ElementType;

    // Redirect www to homepage
    if (windowIso.location.hostname.startsWith('www.')) {
      return (<RedirectIso to={windowIso.location.origin.replace(`www.`, '')} />);
    }

    const isSelfHost = detectEnv() === Environment.PRODUCTION_SELF_HOST;
    const isParentDomain = windowIso.location.hostname === windowIso.parentDomain
      || (!isProd() && windowIso.location.hostname === 'localhost');

    const showSite = isParentDomain && !isSelfHost;
    const showProject = !showSite;
    const showDashboard = isParentDomain || isSelfHost;

    if (showSite || showDashboard) {
      trackingImplicitConsent();
    }

    return (
      <ErrorBoundary showDialog>
        <React.StrictMode>
          <I18nextProvider i18n={this.props.i18n}>
            <StylesProvider injectFirst>
              <MuiThemeProvider theme={this.theme}>
                <MuiSnackbarProvider notistackRef={notistackRef}>
                  <CssBaseline />
                  <ServerErrorNotifier />
                  <CaptchaChallenger />
                  <RemoveSsrCss />
                  <CrowdInInlineEditing />
                  <div style={{
                    minHeight: windowIso.isSsr ? undefined : this.theme.vh(100),
                    display: 'flex',
                    flexDirection: 'column',
                    background: this.theme.palette.background.default,
                  }}>
                    <Router
                      {...(windowIso.isSsr ? {
                        location: this.props.ssrLocation,
                        context: this.props.ssrStaticRouterContext,
                      } : {})}
                    >
                      <ScrollAnchor scrollOnNavigate />
                      <Route path='/' render={routeProps => {
                        trackingBlock(() => {
                          ReactGA.set({ page: routeProps.location.pathname + routeProps.location.search });
                          ReactGA.pageview(routeProps.location.pathname + routeProps.location.search);
                        });
                        return null;
                      }} />
                      <Route render={routeProps => routeProps.location.pathname.startsWith('/embed-status') ? null : (
                        <EnvironmentNotifier key='env-notifier' />
                      )} />
                      <Switch>
                        {[
                          (
                            <Route key='api-docs' path='/api' render={props => (
                              <NoSsr>
                                <ApiDocs />
                              </NoSsr>
                            )} />
                          ),
                          ...(!isProd() ? [(
                            <Route key='mock-oauth-provider-bathtub' path='/bathtub/authorize' render={props => (
                              <Provider store={ServerAdmin.get().getStore()}>
                                <BathtubOauthProvider />
                              </Provider>
                            )} />
                          )] : []),
                          ...(showDashboard ? [(
                            <Route key='dashboard' path="/dashboard/:path?/:subPath*" render={props => (
                              <Provider store={ServerAdmin.get().getStore()}>
                                <SentryIdentifyAccount />
                                <SetMaxAge val={0 /* If you want to cache, don't cache if auth is present in URL */} />
                                <NoSsr>
                                  <Dashboard {...props} />
                                </NoSsr>
                                <IntercomWrapperMain suppressBind />
                                <HotjarWrapperMain />
                              </Provider>
                            )} />
                          ), (
                            <Route key='invoice' path="/invoice/:invoiceId" render={props => (
                              <Provider store={ServerAdmin.get().getStore()}>
                                <SentryIdentifyAccount />
                                <SetMaxAge val={0} />
                                <Invoice invoiceId={props.match.params['invoiceId']} />
                              </Provider>
                            )} />
                          ), (
                            <Route key='enter' exact path='/:type(login|signup|invitation|coupon)/:id([a-z0-9]*)?' render={props => (
                              <Provider store={ServerAdmin.get().getStore()}>
                                <SetMaxAge val={0} />
                                <SetTitle title={props.match.params['type'] === 'login'
                                  ? 'Login'
                                  : (props.match.params['type'] === 'signup'
                                    ? 'Sign up'
                                    : (props.match.params['type'] === 'invitation'
                                      ? 'Invitation'
                                      : 'Coupon'))} />
                                <AccountEnterPage
                                  type={props.match.params['type']}
                                  invitationId={props.match.params['type'] === 'invitation' ? props.match.params['id'] : undefined}
                                  couponId={props.match.params['type'] === 'coupon' ? props.match.params['id'] : undefined}
                                />
                              </Provider>
                            )} />
                          )] : []),
                          ...(showProject ? [(
                            <Route key='embed-status' path="/embed-status/post/:postId" render={props => (
                              <>
                                <SetMaxAge val={24 * 60 * 60} />
                                <PostStatus
                                  {...props}
                                  postId={props.match.params['postId'] || ''}
                                />
                              </>
                            )} />
                          ), (
                            <Route key='app' path='/' render={props => (
                              <>
                                <SetMaxAge val={60} />
                                <App slug={windowIso.location.hostname} {...props} />
                              </>
                            )} />
                          )] : []),
                          ...(showSite ? [(
                            <Route key='site' path='/' render={props => (
                              <Provider store={ServerAdmin.get().getStore()}>
                                <SentryIdentifyAccount />
                                <SetMaxAge val={24 * 60 * 60} />
                                <Site {...props} />
                                <IntercomWrapperMain />
                                <HotjarWrapperMain />
                              </Provider>
                            )} />
                          )] : []),
                        ]}
                      </Switch>
                    </Router>
                  </div>
                </MuiSnackbarProvider>
              </MuiThemeProvider>
            </StylesProvider>
          </I18nextProvider>
        </React.StrictMode>
      </ErrorBoundary>
    );
  }

export function AdrBrowserLayout({
  projectName,
  adrs,
  adrsReloading = false,
  currentAdr,
  children,
  routing = false,
  l4bVersion
}: AdrBrowserLayoutProps) {
  const classes = useStyles();
  const router = useRouter();

  const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);

  const handleMobileDrawerToggle = () => {
    setMobileDrawerOpen(!mobileDrawerOpen);
  };

  React.useEffect(() => {
    const closeMobileDrawer = () => setMobileDrawerOpen(false);
    router?.events.on("routeChangeStart", closeMobileDrawer);
    return () => {
      router?.events.off("routeChangeStart", closeMobileDrawer);
    };
  }, [router]);

  const [searchOpen, setSearchOpenState] = React.useState(false);
  const [searchReallyOpen, setSearchReallyOpenState] = React.useState(false);

  const drawer = (
    <div className={classes.drawerContainer}>
      <Toolbar className={classes.drawerToolbar}>
        <div />
        <Link href="/" passHref>
          <IconButton
            size="small"
            color="inherit"
            aria-label="go to homepage"
            title={`Architecture knowledge base of ${projectName}`}
          >
            <img
              src={`${router?.basePath}/l4b-static/Log4brains-logo.png`}
              alt="Log4brains logo"
              width={40}
              height={40}
            />
          </IconButton>
        </Link>
        <IconButton
          size="small"
          color="inherit"
          aria-label="close drawer"
          title="Close"
          onClick={handleMobileDrawerToggle}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </Toolbar>

      <div className={classes.adlTitleAndSpinner}>
        <Typography variant="subtitle2" className={classes.adlTitle}>
          Decision log
        </Typography>

        <Fade in={adrsReloading}>
          <CircularProgress size={13} />
        </Fade>
      </div>

      <Grow in={adrs !== undefined} style={{ transformOrigin: "center left" }}>
        <AdrMenu
          adrs={adrs}
          currentAdrSlug={currentAdr?.slug}
          className={classes.adrMenu}
        />
      </Grow>

      {adrs === undefined && (
        <CircularProgress size={30} className={classes.adrMenuSpinner} />
      )}

      <List className={classes.bottomMenuList}>
        {/* <Divider />
      <ListItem button>
        <ListItemIcon>
          <ChevronRightIcon />
        </ListItemIcon>
        <ListItemText>
          <Badge badgeContent={0} color="primary">
            <Typography>Filters</Typography>
          </Badge>
        </ListItemText>
      </ListItem> */}
        {/* <Divider />
      <Link href="/decision-backlog" passHref>
        <ListItem button selected={backlog} component="a">
          <ListItemIcon>
            <PlaylistAddCheckIcon />
          </ListItemIcon>
          <ListItemText primary="Decision backlog" />
        </ListItem>
      </Link> */}
      </List>
    </div>
  );

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.appBar}>
        {routing && <RoutingProgress />}
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleMobileDrawerToggle}
            className={classes.appBarMenuButton}
          >
            <MenuIcon />
          </IconButton>
          <Link href="/">
            <div className={classes.appBarTitle}>
              <div>
                <img
                  src={`${router?.basePath}/l4b-static/Log4brains-logo-dark.png`}
                  alt="Log4brains logo"
                  width={50}
                  height={50}
                />
              </div>
              <div>
                <Link href="/" passHref>
                  <MuiLink
                    variant="h6"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    {projectName}
                  </MuiLink>
                </Link>
                <Link href="/" passHref>
                  <MuiLink
                    variant="body2"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    Architecture knowledge base
                  </MuiLink>
                </Link>
              </div>
            </div>
          </Link>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol)}>
            <Backdrop open={searchOpen} className={classes.searchBackdrop} />
            <NoSsr>
              <ConnectedSearchBox
                onOpen={() => {
                  setSearchOpenState(true);
                  // Delayed real opening because otherwise the dropdown width is bugged
                  setTimeout(
                    () => setSearchReallyOpenState(true),
                    searchTransitionDuration + 100
                  );
                }}
                onClose={() => {
                  setSearchOpenState(false);
                  setSearchReallyOpenState(false);
                }}
                open={searchReallyOpen}
                className={clsx(classes.searchBox, {
                  [classes.searchBoxOpen]: searchOpen
                })}
              />
            </NoSsr>
          </div>
          <div className={classes.layoutRightCol} />
        </Toolbar>
      </AppBar>

      <nav
        className={classes.drawer}
        aria-label="architecture decision records list"
      >
        <Hidden smUp implementation="css">
          <Drawer
            variant="temporary"
            anchor="left"
            open={mobileDrawerOpen}
            onClose={handleMobileDrawerToggle}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            variant="permanent"
            open
            classes={{
              paper: classes.drawerPaper
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>

      <div className={classes.container}>
        <Toolbar />
        <main className={classes.content}>
          <AdrNavContext.Provider
            value={currentAdr && adrs ? buildAdrNav(currentAdr, adrs) : {}}
          >
            {children}
          </AdrNavContext.Provider>
        </main>
        <footer className={classes.footer}>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol, classes.footerContent)}>
            <Typography className={classes.footerText}>
              Powered by{" "}
              <MuiLink
                href="https://github.com/thomvaill/log4brains"
                className={classes.footerLink}
                target="_blank"
                rel="noopener"
              >
                Log4brains
              </MuiLink>{" "}
              <span style={{ fontSize: "0.8em" }}>
                {l4bVersion ? `(v${l4bVersion})` : null}
              </span>
            </Typography>
          </div>
          <div className={classes.layoutRightCol} />
        </footer>
      </div>
    </div>
  );
}