antd#Result TypeScript Examples

AppErrorBoundary = function(props) {
  const intl = useIntl();

  return (
    <ErrorBoundary
      message={intl.formatMessage({ id: "common.unknownAppError" })}
      render={message => <Result status="warning" title={message} />}
    >
      {props.children}
    </ErrorBoundary>
  );
}

Wrap: React.FC = () => {
  const history = useHistory();
  return (
    <Layout>
      <div className="ui-h-100 flex just-center align-center">
        <Result
          icon={<SmileOutlined />}
          title="Hello Word！"
          extra={
            <React.Fragment>
              <Button type="primary" onClick={() => {}}>
                欢迎您！
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  history.push('/');
                }}
              >
                返回首页
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  history.push('/settings');
                }}
              >
                去设置
              </Button>
            </React.Fragment>
          }
        />
      </div>
    </Layout>
  );
}

DefaultFallbackComponent = ({ componentStack, error }: Error) => (
  <Result
    status="error"
    title={intl({ id: 'layout.global.error.title' })}
    subTitle={error!.toString()}
  >
    <Typography.Paragraph>
      {intl({ id: 'layout.global.error.stack' })}：<pre>{componentStack}</pre>
    </Typography.Paragraph>
  </Result>
)

/**
	 * render error page if error true
	 * @memberof Page
	 */
	// tslint:disable-next-line: variable-name
	static ErrorPage = ({ error }: IPageProps) =>
		error ? (
			<Result status={403} title='Oops...' subTitle='Sorry, we are having trouble showing the data!' />
		) : null;

ErrorPage = (props: any) => {
	let error = commonErrors.error404;

	if (_.has(props, 'error') && _.has(commonErrors, `error${_.get(props, 'error')}`)) {
		error = _.get(commonErrors, `error${_.get(props, 'error')}`);
	} else {
		error = props;
	}

	return <Result status={error.title} title={error.title} subTitle={error.description} icon={<WarningFilled />} />;
}

render(): ReactNode {
    if (this.state.hasError) {
      return (
        <Result
          status="500"
          title="We hit an unexpected error."
          subTitle="Sorry about that! A report has automatically been filed. Try refreshing the page."
        />
      );
    }

    return this.props.children;
  }

export default function Result404() {
  return (
    <Result
      status="500"
      title="500"
      subTitle="Sorry, something went wrong."
      extra={
        <Link to="/">
          <Button type="primary">Home</Button>
        </Link>
      }
    />
  );
}

export default function Result404() {
  return (
    <Result
      status="404"
      title="404"
      subTitle="Sorry, the page you visited does not exist."
      extra={
        <Link to="/">
          <Button type="primary">Home</Button>
        </Link>
      }
    />
  );
}

NotFound: React.FC = () => {
  const history = useHistory();
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
      <Result
        title='404'
        subTitle='你访问的页面不存在!'
        extra={
          <Button type='primary' onClick={() => history.replace('/')}>
            回到首页
          </Button>
        }
      />
    </div>
  );
}

OpenedPanelTip: React.FC<OpenedPanelTipProps> = React.memo(
  (props) => {
    return (
      <Result
        className="w-full"
        title={t('当前面板已在独立窗口打开')}
        extra={
          <Button onClick={props.onClosePanelWindow}>
            {t('关闭独立窗口')}
          </Button>
        }
      />
    );
  }
)

PageError = memo(function PageError() {
  const navigate = useNavigate();
  const backs = () => {
    navigate('/');
  };
  return (
    <Result
      status="404"
      title="404"
      subTitle="sorry,页面没有找到，请点击下面返回按钮，再试一次"
      extra={
        <Button type="primary" onClick={backs}>
          返回主页
        </Button>
      }
    />
  );
})

ServiceUnavailable = () => {
  return (
    <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
      <Result
        status="warning"
        title="Network Error"
        subTitle="Maybe the backend is down or you are offline!"
        extra={
          <Link to="/">
            <Button type="primary">Retry</Button>
          </Link>
        }
      />
    </Row>
  );
}

NotFound = () => {
  return (
    <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Link to="/">
            <Button type="primary">Back Home</Button>
          </Link>
        }
      />
    </Row>
  );
}

NoFoundPage: React.FC<{}> = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => history.push('/')}>
        Back Home
      </Button>
    }
  />
)

noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

NoFoundPage: React.FC<{}> = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => router.push('/')}>
        Back Home
      </Button>
    }
  />
)

noMatch = (
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

Authorized: React.FunctionComponent<AuthorizedProps> = ({
  children,
  authority,
  noMatch = (
    <Result
      status="403"
      title="403"
      subTitle="Sorry, you are not authorized to access this page."
    />
  ),
}) => {
  const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
  const dom = check(authority, childrenRender, noMatch);
  return <>{dom}</>;
}

NoFoundPage: React.FC = () => (
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => history.push('/')}>
        Back Home
      </Button>
    }
  />
)

noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

Authorized: React.FunctionComponent<AuthorizedProps> = ({
  children,
  authority,
  noMatch = (
    <Result
      status="403"
      title="403"
      subTitle="Sorry, you are not authorized to access this page."
    />
  ),
}) => {
  const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
  const dom = check(authority, childrenRender, noMatch);
  return <>{dom}</>;
}

InfoPage = ({ title, message }: InfoPageProps): JSX.Element => {
  return (
    <div style={{
      height: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}
    >
      <Result
        title={title}
        subTitle={message}
      />
    </div>
  )
}

AppErrorBoundary = function(props) {
  const intl = useIntl();

  return (
    <ErrorBoundary
      message={intl.formatMessage({ id: "common.unknownAppError" })}
      render={message => <Result status="warning" title={message} />}
    >
      {props.children}
    </ErrorBoundary>
  );
}

NotFoundPage = () => (
  <>
    <Result
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      status={'404' as any}
      title="404"
      subTitle="Sorry, the page you visited does not exist."
      extra={
        <Link to="/">
          <Button type="primary">
            <HomeOutlined />
            Back Home
          </Button>
        </Link>
      }
    />
  </>
)

export function BrickResult(props: BrickResultProps): React.ReactElement {
  const {
    illustrationsConfig: { name, category, imageStyle },
  } = props;
  const icon = props.icon ? <LegacyIcon type={props.icon} /> : "";
  const emptyResultStatus = Object.values(EmptyResultStatus);
  const theme = useCurrentTheme();
  const image = React.useMemo(() => {
    return getIllustration({ name, category, theme });
  }, [name, category, theme]);

  return emptyResultStatus.includes(props.status as EmptyResultStatus) ? (
    <Result
      title={props.title}
      subTitle={props.subTitle}
      icon={<EmptyResult status={props.status as EmptyResultStatus} />}
    >
      <slot id="content" name="content"></slot>
    </Result>
  ) : props.status === "illustrations" ? (
    <Result
      title={props.title}
      subTitle={props.subTitle}
      status={props.status as ResultStatusType}
      icon={<img src={image} style={imageStyle} />}
    >
      <slot id="content" name="content"></slot>
    </Result>
  ) : (
    <Result
      title={props.title}
      subTitle={props.subTitle}
      status={props.status as ResultStatusType}
      {...(icon ? { icon } : {})}
    >
      <slot id="content" name="content"></slot>
    </Result>
  );
}

export default function Settings() {
  return (
    <AppLayout
      title={<PageTitle title="User Account Settings" />}
      selectedKey="settings"
    >
      <Result
        status="404"
        title="Work in progress"
        subTitle="Sorry, Page is not completed."
        extra={<Link href="/">Back Home</Link>}
      />
    </AppLayout>
  )
}

async function bootstrap(): Promise<void> {
  try {
    if (window.MOCK_DATE) {
      // For rare scenarios only, so load it on demand.
      const { set } = await import(
        /* webpackChunkName: "mockdate" */
        "mockdate"
      );
      set(window.MOCK_DATE);
    }

    await runtime.bootstrap(mountPoints);
    bootstrapStatus = "ok";
  } catch (e) {
    bootstrapStatus = "failed";
    // eslint-disable-next-line no-console
    console.error(e);

    // `.bootstrap-error` makes loading-bar invisible.
    document.body.classList.add("bootstrap-error", "bars-hidden");

    ReactDOM.render(
      <Result
        status="error"
        title={i18n.t(`${NS_BRICK_CONTAINER}:${K.BOOTSTRAP_ERROR}`)}
        subTitle={httpErrorToString(e)}
      />,
      mountPoints.main
    );
  }

  startPreview();
}

export default function ProgramDetails() {
  const router = useRouter()
  const { id } = router.query
  let workspaceId
  let programId
  if (id) [workspaceId, programId] = id as string[]
  const programQuery = useQuery(
    ['program', programId],
    () =>
      axios.get(`/workspaces/${workspaceId}/programs/${programId}`),
    { retry: 0, enabled: Boolean(workspaceId && programId) },
  )
  const [isAddProjectVisible, setIsAddProjectVisible] =
    useState(false)
  const hideAddProjectBtn = () => setIsAddProjectVisible(false)
  const program = programQuery?.data?.data?.program
  const ProgramTitle = (
    <PageHeading
      title={program?.name}
      description={program?.description}
      renderEdit={() => program && <EditProgram program={program} />}
    />
  )
  return (
    <AppLayout
      title={ProgramTitle}
      selectedKey={`program_${program?.programId}`}
    >
      {programQuery.isLoading ? (
        <Skeleton />
      ) : (
        <ProgramDetailsLayout>
          {programQuery.isError ? (
            <Result
              status="500"
              title="Program can not be found"
              subTitle="Sorry, something went wrong."
              extra={<BackToHome />}
            />
          ) : (
            <MainContent direction="vertical" size={16}>
              <Button
                onClick={() => setIsAddProjectVisible(true)}
                icon={<PlusOutlined />}
              >
                Add Project
              </Button>
              <OTTable
                program={program}
                isAddProjectVisible={isAddProjectVisible}
                hideAddProjectBtn={hideAddProjectBtn}
              />
            </MainContent>
          )}
        </ProgramDetailsLayout>
      )}
    </AppLayout>
  )
}

export default function NoCourses(): ReactElement {
  useHomePageRedirect();

  const { data } = useSWR("/api/v1/courses/self_enroll_courses", async () =>
    API.course.selfEnrollCourses()
  );

  const LogoutButton = styled(Button)`
    background-color: #3684c6;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    width: 200px;
    margin: 0 auto;
    display: block;
  `;

  return (
    <div>
      <Result
        status="info"
        title="None of your courses are using the Khoury Office Hours App."
        subTitle="If you expected your course to be here, try logging in again. If it still does not appear, please reach out to your course coordinator or professor."
      />
      {data?.courses.length > 0 ? (
        <div style={{ textAlign: "center" }}>
          One of our data sources for student-enrollment is currently
          experiencing an outage. If you think you belong to a class, please
          click on your corresponding class below.
          <div>
            {data?.courses.map((course, i) => {
              return (
                <Button
                  key={i}
                  onClick={async () => {
                    await API.course.createSelfEnrollOverride(course.id);
                    Router.push("/login");
                  }}
                >
                  {course.name}
                </Button>
              );
            })}
          </div>
        </div>
      ) : null}
      <LogoutButton data-cy="logout-button" href="/api/v1/logout">
        Logout
      </LogoutButton>
    </div>
  );
}