antd#Result JavaScript Examples

storiesOf('antd/result', module).add('403', () => 
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={<Button type="primary">Back Home</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>you are not authorized to access this page.</p></>) } });

NotFound = () => {
  useEffect(() => {
    history.replace('/notfound');
  }, []);
  return (
    <>
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Button href="/" type="primary">
            Back Home
          </Button>
        }
      />
    </>
  );
}

function App() {
  const { isOnline: isNetwork } = useNetwork();

  if (!isNetwork)
    return (
      <>
        <Result
          status="404"
          title="No Internet Connection"
          subTitle="Check your Internet Connection or your network."
          extra={
            <Button href="/" type="primary">
              Try Again
            </Button>
          }
        />
      </>
    );
  else {
    return (
      <RouterHistory history={history}>
        <Provider store={store}>
          <Router />
        </Provider>
      </RouterHistory>
    );
  }
}

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

Error = memo(function Error() {
  return (
    <div className='Error404'>
      <Result
        status="404"
        title="404"
        subTitle="sorry，没有找到相关的页面。"
        extra={<Button type="primary">
          <Link to='/home'>返回主页</Link>
        </Button>}
      />
    </div>
  )
})

render() {
        const { Content } = Layout;
        return (
            <Content
                style={{
                    margin: "6px",
                    padding: 24,
                    background: "#fff",
                    height: '80vh'
                }}
            >
            <Result title="Connection Error" status="error" extra={<span>Kindly check your internet connection and reload.</span>} />
            </Content>
        );
    }

export default function ErrorScreen() {
  ReactGA.event({
    category: 'Error',
    action: 'Error screen displayed',
  });

  return (
    <div>
      <Result
        status="500"
        title="Error 500"
        subTitle="Sorry, something went wrong."
        extra={
          <Button className="rounded" type="primary">
            <Link to={'/'}>Back Home</Link>
          </Button>
        }
      />
    </div>
  );
}

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>
    }
  />
)

NotFound = () => {
  useEffect(() => {
    history.replace("/notfound");
  }, []);
  return (
    <>
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Button href="/" type="primary">
            Back Home
          </Button>
        }
      />
    </>
  );
}

storiesOf('antd/result', module).add('404', () => 
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={<Button type="primary">Back Home</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The page you visited does not exist.</p></>) } });

render() {
        return (
            <Result
                status="404"
                title="404"
                subTitle="不存在此界面, 点击按钮, 返回到首页"
                extra={<Button type="primary">
                    <Link to={"/"}>返回首页</Link>
                </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>
    }
  />
)

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>
    }
  />
)

CreateCarburetor = ({ pending, setPending }) => {
  const { activeWallet } = useSelector((state) => state.settings);
  const { t } = useTranslation();

  if (pending) {
    return (
      <Result
        icon={<LoadingOutlined />}
        style={{ paddingBottom: 24 }}
        title={t("modals.redeem-both.create_title", "We are waiting for the transaction to become stable")}
        extra={<Button type="primary" danger onClick={() => setPending(false)}>{t("modals.common.cancel", "Cancel")}</Button>}
      />
    )
  }

  return (
    <Result
      title={t("modals.redeem-both.create_title_action", "Create an intermediary agent")}
      icon={<InteractionOutlined />}
      extra={<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
        <QRButton
          href={generateLink(1e4, { create: 1 }, activeWallet, config.CARBURETOR_FACTORY, "base", true)}
          type="primary"
          size="large"
          onClick={() => setPending(true)}
        >
          {t("modals.redeem-both.create_btn", "Create intermediary agent")}
        </QRButton>
        <div style={{ fontSize: 10, textAlign: "center", marginTop: 10 }}>{t("modals.redeem-both.info", "The address from which the request will be sent will be the owner of intermediary agent.")}</div>
      </div>}
    />
  )
}

export function EmptyChannel() {
    const { t } = useTranslation()

    return (
        <div
            style={{
                height: 'calc(100vh - 2px)',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <Result
                icon={<Logo />}
                title={t('src.screens.dashboard.components.YM')}
                subTitle={t('src.screens.dashboard.components.SPPAMTAFOG')}
                extra={[
                    <Button type="primary" key="console">
                        {t('src.screens.dashboard.components.SM')}
                    </Button>,
                ]}
            />
        </div>
    )
}

renderNothingToLabel(store) {
    return (
      <Block
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          paddingBottom: "30vh",
        }}
      >
        <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
        <Block name="sub__result">You have completed all tasks in the queue!</Block>
        {store.canGoPrevTask && (
          <Button onClick={() => store.prevTask()} look="outlined" style={{ margin: "16px 0" }}>
            Go to Previous Task
          </Button>
        )}
      </Block>
    );
  }

function EnrollmentStatus({ title, status, prev }) {
  const failure = {
    title: `Enrollment in to ${title} failed`,
    subtitle: 'Kindly try again',
  };
  const success = {
    title: `Successfully Enrolled to the ${title} track`,
    subtitle:
      'A mentor will be assigned to you, and he/she will contact you soon',
  };

  return (
    // <DisplayEnrollmentStatus status={}/>
    <Result
      status={status}
      title={status === 'success' ? success.title : failure.title}
      subTitle={status === 'success' ? success.subtitle : failure.subtitle}
      extra={[
        <Button type="primary" key="console">
          {status === 'success' ? (
            <Link to="/dashboard">Go to dashboard</Link>
          ) : (
            <span onClick={() => prev()}>Go back</span>
          )}
        </Button>,
      ]}
    />
  );
}

render() {

        return (
            <Spin spinning={this.state.loading} tip={this.state.tip}>
                <div>
                    {
                        this.state.closed ?
                            <Result
                                title="远程连接已关闭"
                            /> :
                            <div className="container" style={{
                                overflow: this.state.containerOverflow,
                                width: this.state.width,
                                height: this.state.height
                            }}>

                                <div id="display"/>
                            </div>
                    }


                </div>
            </Spin>
        );
    }

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>
    }
  />
)

renderSuccess() {
    return <Result status="success" title={getEnv(this.props.store).messages.DONE} />;
  }

Step3 = props => {
  const { data, dispatch } = props;

  if (!data) {
    return null;
  }

  const { payAccount, receiverAccount, receiverName, amount } = data;

  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'formAndstepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const information = (
    <div className={styles.information}>
      <Descriptions column={1}>
        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
        <Descriptions.Item label="转账金额">
          <Statistic value={amount} suffix="元" />
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
  const extra = (
    <>
      <Button type="primary" onClick={onFinish}>
        再转一笔
      </Button>
      <Button>查看账单</Button>
    </>
  );
  return (
    <Result
      status="success"
      title="操作成功"
      subTitle="预计两小时内到账"
      extra={extra}
      className={styles.result}
    >
      {information}
    </Result>
  );
}

CreateStep = ({ data, setCurrent, type }) => {
  const pendings = useSelector((state) => state.pendings.stablecoin);
  const { sendReq, addressIssued } = pendings;
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const link = generateLink(1.5e4, data, undefined, config.FACTORY_AAS[config.FACTORY_AAS.length + (type === 2 ? -1 : -4)]);

  useEffect(() => {
    dispatch(pendingIssue(data));
  }, [dispatch, data]);

  if (addressIssued) {
    // dispatch(changeActive(addressIssued));
    dispatch(resetIssueStablecoin());
  }

  if (sendReq) {
    return (
      <Result
        icon={<LoadingOutlined />}
        title={t("create.received.title", "Request received")}
        subTitle={t("create.received.subTitle", "Once the transaction is stable, you'll be redirected to the page of the new stablecoin")}
        extra={[
          <Button
            onClick={() => {
              setCurrent(0);
              dispatch(resetIssueStablecoin());
            }}
            type="danger"
            key="CreateStep-reset-req"
          >
            {t("create.received.close", "Close")}
          </Button>,
        ]}
      />
    );
  }

  return (
    <Result
      status="info"
      icon={<WalletOutlined />}
      title={t("create.sending_request.title", "Almost ready!")}
      subTitle={t("create.sending_request.subTitle", "Please click the «Create» button below, this will open your Obyte wallet and you'll send a transaction that will create the new stablecoin.")}
      extra={[
        <QRButton
          href={link}
          type="primary"
          key="CreateStep-create"
          onClick={() => {
            ReactGA.event({
              category: "Stablecoin",
              action: "Create stablecoin",
            });
          }}
        >
          {t("create.sending_request.create", "Create")}
        </QRButton>,
        <Button
          onClick={() => {
            setCurrent(0);
          }}
          type="danger"
          key="CreateStep-reset"
        >
          {t("create.sending_request.reset", "Reset")}
        </Button>,
      ]}
    />
  );
}

storiesOf('antd/result', module).add('customIcon', () => 
  <Result
    icon={<SmileOutlined />}
    title="Great, we have done all the operations!"
    extra={<Button type="primary">Next</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Custom icon.</p></>) } });

PipelineRedirectToDataProcessing = ({ experimentId, pipelineStatus }) => {
  const path = '/experiments/[experimentId]/data-processing';

  const texts = {
    error: {
      status: 'error',
      title: 'We\'ve had an issue while working on your project.',
      subTitle: 'Please go to Data Processing and try again.',
      image: '/undraw_Abstract_re_l9xy.svg',
      alt: 'A woman confusedly staring at an abstract drawing.',
    },
    running: {
      status: 'info',
      title: 'We\'re working on your project...',
      subTitle: 'You can check the progress we\'ve made in Data Processing.',
      image: '/undraw_Dev_focus_re_6iwt.svg',
      alt: 'A woman working in front of a computer.',
    },
    toBeRun: {
      status: 'info',
      title: 'Let\'s process your data first.',
      subTitle: 'You need to process your data before it can be explored. To begin, go to Data Processing.',
      image: '/undraw_To_the_stars_qhyy.svg',
      alt: 'A rocket ship ready for take-off.',
    },
    runningStep: {
      status: 'info',
      title: 'Your data is getting ready.',
      subTitle: 'We\'re preparing the data for this step, please wait. This will take a few minutes.',
      image: '/undraw_tasks_re_v2v4.svg',
      alt: 'A woman in a wheelchair looking at a list of partially completed items.',
    },
  };

  const {
    status, title, subTitle, image, alt,
  } = texts[pipelineStatus];

  return (
    <Result
      status={status}
      title={title}
      subTitle={subTitle}
      icon={(
        <img
          width={250}
          height={250}
          alt={alt}
          src={image}
          style={{
            display: 'block', marginLeft: 'auto', marginRight: 'auto', width: '50%',
          }}
        />
      )}
      extra={pipelineStatus !== 'runningStep' && (
        <Link as={path.replace('[experimentId]', experimentId)} href={path} passHref>
          <Button type='primary' key='console'>
            Go to Data Processing
          </Button>
        </Link>
      )}
    />
  );
}

renderNoAccess() {
    return <Result status="warning" title={getEnv(this.props.store).messages.NO_ACCESS} />;
  }

UnauthorizedPage = ({ title, subTitle, hint }) => (
  <Result
    title={<Title level={2}>{title}</Title>}
    icon={(
      <img
        alt='People looking into bushes to find something (illustration).'
        src='/undraw_cancel_u1it.svg'
        width={250}
        height={250}
        style={{
          display: 'block', marginLeft: 'auto', marginRight: 'auto', width: '50%',
        }}
      />
    )}
    subTitle={(
      <>
        <Title
          level={5}
          style={{ fontWeight: 'normal' }}
        >
          {subTitle}
          {hint && (
            <>
              <br />
              <span>{hint}</span>
            </>
          )}
        </Title>
      </>
    )}
    extra={(
      <>
        <Button type='primary' onClick={() => Auth.federatedSignIn()}>
          Log in
        </Button>
        <FeedbackButton />
      </>
    )}
  />
)

renderLoader() {
    return <Result icon={<Spin size="large" />} />;
  }

render() {
		return (
			<Layout className="pageWithGradientBg">
				<Result
					icon={(
						<img
							src="./appicon_256.png"
							width={128}
							height={128}
							alt="App Icon"
							className="screenshot-tarcker-icon"
						/>
					)}
					title={(
						<Title level={3}>
							Screenshot Tracker
							<Tag style={{ marginLeft: 10 }}>v1.0</Tag>
						</Title>
					)}
					subTitle={(
						<div style={{ marginTop: 30 }}>
							<h3>Let&apos;s get started with a new run.</h3>
							A &ldquo;run&rdquo; is a session of screenshots taken from a list of
							web page urls you provide.
							<br />
							You can create multiple runs and repeat them as many times as you want.
						</div>
					)}
					extra={(
						<Link to="/new">
							<Button
								type="primary"
								size="large"
								icon="caret-right"
							>
								New Run
							</Button>
						</Link>
					)}
				/>
				<div className="support-bar">
					Feel free to send any questions or your feedback with
					{' '}
					{/* eslint-disable-next-line */}
					<a className="ext" href="https://github.com/nomadinteractive/screenshot-tracker/issues/new">
						opening an issue
					</a>
					{' '}
					in
					{' '}
					{/* eslint-disable-next-line */}
					<a className="ext" href="https://github.com/nomadinteractive/screenshot-tracker/issues">
						Github Issues Page
					</a>
				</div>
			</Layout>
		)
	}

StyledResult = styled(Result)`
  
`