@ant-design/icons#LoadingOutlined JavaScript Examples

FileView = props => {
    const [hovered, setHovered] = useState(false)
    const { attachment } = props
    const style={ 
        ...styles.fileView,  
        ...{ 
            color: hovered ? '#1890ff' : '#434343',
            border: hovered ? '1px solid #1890ff' : '1px solid #434343',
        } 
    }

    if (!attachment) {
        return (
            <div style={styles.loadingContainer}>
                <LoadingOutlined  style={{ color: 'white', padding: '4px', fontSize: '24px' }} />
            </div>
        )
    }

    return (
        <div 
            style={style} 
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            onClick={() => window.open(attachment.file)}
        >
            <FileOutlined />{' '}{ getFileName(attachment.file) }
        </div>
    )
}

CourseSearch = ({ loading, setLoading }) => {
  const { isDesktop } = useResponsive()
  const { deleteQueryString, getQueryString, setQueryString } = useQueryString()
  const showFilter = useSelector(selectIsDropdownActive)

  const [search, setSearch] = useState(getQueryString('q'))

  const handleSearch = (event) => {
    setLoading(true)
    setSearch(event.target.value)

    setQueryString('q', event.target.value)
    deleteQueryString('p')
  }

  return (
    <>
      <SearchContainer>
        <CourseFinderFilterDropdown
          showFilter={showFilter && isDesktop}
          setLoading={setLoading}
        />
        {showFilter && isDesktop && <Overlay />}

        <StyledInput
          size="large"
          placeholder="Course code, name or description"
          allowClear
          maxLength={100}
          onChange={handleSearch}
          value={search}
          prefix={<StyledIcon Icon={loading ? LoadingOutlined : Search} />}
        />
      </SearchContainer>

      <CourseFinderFilterFloatButton />
    </>
  )
}

render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
    );
  }

storiesOf('antd/steps', module).add('icon', () => 
  <Steps>
    <Step status="finish" title="Login" icon={<UserOutlined />} />
    <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
    <Step status="process" title="Pay" icon={<LoadingOutlined />} />
    <Step status="wait" title="Done" icon={<SmileOutlined />} />
  </Steps>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can use your own custom icons by setting the property <code>icon</code> for <code>Steps.Step</code>.</p></>) } });

storiesOf('antd/Icon', module).add('basic', () => 
  <div className="icons-list">
    <HomeOutlined />
    <SettingFilled />
    <SmileOutlined />
    <SyncOutlined spin />
    <SmileOutlined rotate={180} />
    <LoadingOutlined />
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Import icons from <code>@ant-design/icons</code>, component name of icons with different theme is the icon name suffixed by the theme name. Specify the <code>spin</code> property to show spinning animation.</p></>) } });

Thumbnail = props => {
    const [hovered, setHovered] = useState(false)
    const { attachment } = props
    const style={ 
        ...styles.thumbnail, 
        ...{ border: hovered ? '1px solid #1890ff' : '1px solid #fff' } 
    }

    if (!attachment) {
        return (
            <div style={styles.loadingContainer}>
                <LoadingOutlined  style={{ color: 'white', padding: '4px', fontSize: '24px' }} />
            </div>
        )
    }

    return (
        <img 
            onClick={() => window.open(attachment.file)}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            src={attachment.file}
            alt={'thumb-nail'}
            style={style}
        />
    )
}

export default function Loading({ isLoading, children }) {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

  return (
    <Spin indicator={antIcon} spinning={isLoading}>
      {children}
    </Spin>
  );
}

export default function Loading({ isLoading, children }) {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

  return (
    <Spin indicator={antIcon} spinning={isLoading}>
      {children}
    </Spin>
  );
}

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Icons Usage</strong>
        </h5>
        <div className="mb-5">
          <HomeOutlined className="mr-3 mb-3 font-size-24" />
          <SettingFilled className="mr-3 mb-3 font-size-24" />
          <SmileOutlined className="mr-3 mb-3 font-size-24" />
          <SyncOutlined spin className="mr-3 mb-3 font-size-24" />
          <SmileOutlined rotate={180} className="mr-3 mb-3 font-size-24" />
          <LoadingOutlined className="mr-3 mb-3 font-size-24" />
        </div>
      </div>
    )
  }

export function LastMessageStatus({ status }) {
    if (status === 'sending') {
        return <LoadingOutlined />
    }

    if (status === 'sent') {
        return <Sent style={{ height: 14, width: 14 }} />
    }

    if (status === 'delivered') {
        return <Delivered style={{ height: 14, width: 14 }} />
    }

    if (status === 'seen') {
        return <Seen style={{ height: 14, width: 14 }} />
    }
}

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

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Steps current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>With Icons</strong>
        </h5>
        <div className="mb-5">
          <Steps>
            <Step status="finish" title="Login" icon={<UserOutlined />} />
            <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
            <Step status="process" title="Pay" icon={<LoadingOutlined />} />
            <Step status="wait" title="Done" icon={<SmileOutlined />} />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>Centered</strong>
        </h5>
        <div className="mb-5">
          <Steps progressDot current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
        <h5 className="mb-3">
          <strong>Vertical</strong>
        </h5>
        <div className="mb-5">
          <Steps direction="vertical" current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
      </div>
    )
  }

antIcon = <LoadingOutlined style={{ fontSize: 15 }} spin />

antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />

StyledLoadingOutlined = styled(LoadingOutlined)`
  font-size: 24px;
`

render() {
        const { firstName,middleName,lastName,gender, loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        const onPreview = async file => {
            let src = file.url;
            if (!src) {
                src = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file.originFileObj);
                    reader.onload = () => resolve(reader.result);
                });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
        };

        return (
            <div>
                <Row justify="space-around" >
                    <Row justify="start" gutter={[16, 16]}>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <ImgCrop rotate>
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    multiple={false}
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    onPreview={onPreview}
                                    customRequest={this.customUpload}
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleUpload}
                                >
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>
                            </ImgCrop>

                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="firstName" value={firstName} placeholder="First Name" onChange={this.handleFirstName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="middleName" value={middleName} placeholder="Middle Name" onChange={this.handleMiddleName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Select id="gender"  style={{width:'100%'}} placeholder="Gender" value={gender} onChange={this.handleChangeGender}>
                                <Option value="Male">Male</Option>
                                <Option value="Female">Female</Option>
                                <Option value="Other">Other</Option>
                            </Select>
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="lastName" value={lastName} placeholder="Last Name" onChange={this.handleLastName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <DatePicker type="text" id="dob" ref="datePicker" style={{width:'100%'}} value={this.state.dateValue}  selected={this.state.dob}  placeholder="Date of Birth" onChange={this.handleChangeDate} />
                        </Col>
                    </Row>

                </Row>
                <br/>
                <Button type="primary" onClick={this.handleSubmit}>Add Item</Button>
            </div>
        )
    }

TimetableContainerCustom = () => {
  const { getQueryString } = useQueryString()
  const [courseTimetableList, setCourseTimetableList] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchTimetableData = async () => {
      try {
        setLoading(true)
        const params = { ids: encodeURIComponent(getQueryString('ids')) }
        const response = await API.timetable.list({ params })
        setCourseTimetableList(response.results)
      } catch (error) {
        toast({ status: 'error', content: error })
      } finally {
        setLoading(false)
      }
    }

    fetchTimetableData()
  }, [getQueryString])

  return (
    <>
      <PageHeading>
        <PageTitle>Timetable (Shared)</PageTitle>
      </PageHeading>

      {loading && <LoaderAnimation />}

      <Spin
        spinning={loading}
        indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
      >
        <TimetableLayout>
          {courseTimetableList.map((item) => (
            <TimetableCourseItem key={item.id} data={item} />
          ))}

          <CurrentTime mode="vertical" />
        </TimetableLayout>
      </Spin>

      <Aside />
    </>
  )
}

render(props) {
    console.log(this.props);
    console.log('props');
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    var {imageUrl} = this.state;
    if ('img' in this.props) {
      if (typeof this.props.img == 'string') {
        imageUrl = this.props.img;
      }
    }


    return (
      <Upload
        name="avatar"
        listType="picture-card"
        showUploadList={false}
        beforeUpload={this.props.beforeUpload}
        onChange={this.handleChange}
        fileList={this.state.fileList}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
    );
  }

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>,
      ]}
    />
  );
}

antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />

render() {
    return (
      <Layout>
        <Header className="header">
          <a className="header-a" href="https://github.com/zhxie/ikago">
            <img className="header-icon" src={logo} alt="icon" />
          </a>
          <p className="header-title">{this.state.name}</p>
          <p className="header-subtitle">{this.state.version}</p>
        </Header>
        <Content className="content">
          <Row gutter={16}>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  prefix={(() => {
                    if (this.state.active) {
                      return <CheckOutlined />;
                    } else if (this.state.inactive) {
                      return <WarningOutlined />;
                    } else {
                      return <LoadingOutlined />;
                    }
                  })()}
                  title="Status"
                  value={(() => {
                    if (this.state.active) {
                      return 'Active';
                    } else if (this.state.inactive) {
                      return 'Inactive';
                    } else {
                      return 'Connecting';
                    }
                  })()}
                  valueStyle={{
                    color: (() => {
                      if (!this.state.inactive) {
                        return '#000';
                      } else {
                        return '#cf1322';
                      }
                    })()
                  }}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  precision={2}
                  prefix={<ClockCircleOutlined />}
                  title="Operation Time"
                  value={this.convertTime(this.state.time)}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    showTotal: !this.state.showTotal
                  });
                }}
              >
                <Statistic
                  precision={1}
                  prefix={<ArrowUpOutlined />}
                  suffix={(() => {
                    if (this.state.showTotal) {
                      return this.mapSizeUnit(this.state.outboundSizeTotal);
                    } else {
                      return this.mapSizeUnit(this.state.outboundSize) + '/s';
                    }
                  })()}
                  title="Outbound"
                  value={(() => {
                    if (this.state.showTotal) {
                      return this.convertSize(this.state.outboundSizeTotal);
                    } else {
                      return this.convertSize(this.state.outboundSize);
                    }
                  })()}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    showTotal: !this.state.showTotal
                  });
                }}
              >
                <Statistic
                  precision={1}
                  prefix={<ArrowDownOutlined />}
                  suffix={(() => {
                    if (this.state.showTotal) {
                      return this.mapSizeUnit(this.state.inboundSizeTotal);
                    } else {
                      return this.mapSizeUnit(this.state.inboundSize) + '/s';
                    }
                  })()}
                  title="Inbound"
                  value={(() => {
                    if (this.state.showTotal) {
                      return this.convertSize(this.state.inboundSizeTotal);
                    } else {
                      return this.convertSize(this.state.inboundSize);
                    }
                  })()}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card className="content-card" hoverable>
                <Statistic
                  prefix={<HourglassOutlined />}
                  suffix={this.state.ping < 0 ? '' : 'ms'}
                  title="Delay"
                  value={(() => {
                    if (this.state.ping === -1) {
                      return 'N/A';
                    } else if (this.state.ping === -2) {
                      return 'Timeout';
                    } else {
                      return this.state.ping;
                    }
                  })()}
                  valueStyle={{
                    color: (() => {
                      if (this.state.ping === -2) {
                        return '#cf1322';
                      } else if (this.state.ping >= 100) {
                        return '#faad14';
                      } else {
                        return '#000';
                      }
                    })()
                  }}
                />
              </Card>
            </Col>
            <Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
              <Card
                hoverable
                onClick={() => {
                  this.setState({
                    configure: true
                  });
                }}
              >
                <Statistic prefix={<SettingOutlined />} title="Configure" value={this.convertPath(this.state.path)} />
              </Card>
              <ConfigurationForm
                visible={this.state.configure}
                onOk={(values) => {
                  localStorage.setItem('path', values.path);
                  localStorage.setItem('showTotal', values.showTotal ? 'true' : 'false');
                  this.setState({
                    configure: false,
                    path: values.path,
                    showTotal: values.showTotal,
                    active: this.state.path !== values.path ? false : this.state.active,
                    inactive: this.state.path !== values.path ? false : this.state.inactive
                  });
                }}
                onCancel={() => {
                  this.setState({
                    configure: false
                  });
                }}
                initialValues={{ path: this.state.path, showTotal: this.state.showTotal }}
              />
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="content-col-table" sm={24} md={24} lg={12}>
              <Table dataSource={this.mapNodes(this.state.local)} pagination={false} size="middle">
                <Column title="Source" key="source" align="left" render={this.showNode} />
                <Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
                <Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
              </Table>
            </Col>
            <Col className="content-col-table" sm={24} md={24} lg={12}>
              <Table dataSource={this.mapNodes(this.state.remote)} pagination={false} size="middle">
                <Column title="Destination" key="source" align="left" render={this.showNode} />
                <Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
                <Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
              </Table>
            </Col>
          </Row>
        </Content>
      </Layout>
    );
  }

export default function NFTViewer({
  customContract,
  account,
  gasPrice,
  signer,
  provider,
  name,
  price,
  blockExplorer,
}) {
  const contracts = useContractLoader(provider);
  let contract;
  if (!name) {
    name = DEFAULT_CONTRACT_NAME;
  }
  if (!customContract) {
    contract = contracts ? contracts[name] : "";
  } else {
    contract = customContract;
  }

  const address = contract ? contract.address : "";

  const [selectedToken, setSelectedToken] = useState(null);
  const [nftData, setNFTData] = useState(null);
  const [loading, setLoading] = useState(selectedToken && !nftData);
  const [errorMessage, setErrorMessage] = useState(null);

  let tokenView = "";
  if (nftData) {
    tokenView = NFTCard({ contract, provider, tokenId: selectedToken, nftData });
  }

  let errorView = "";
  if (errorMessage) {
    errorView = <div>
      <span style={{color: "red"}}>{errorMessage}</span>
    </div>;
  }

  const tokenIdChanged = newTokenId => {
    if (!newTokenId) {
      return;
    }
    setSelectedToken(newTokenId);
    setLoading(true);
    getNFT({ contract, provider, tokenId: newTokenId }).then(nft => {
      setNFTData(nft);
      setLoading(false);
      setErrorMessage("");
    }).catch(e => {
      console.log('error getting token: ', e);
      setLoading(false);
      setErrorMessage(e.message);
      setNFTData(null);
    })
  }

  return (
    <div style={{ margin: "auto", width: "70vw" }}>
      <Card
        title={
          <div>
            View an NFT
            <div style={{ float: "right" }}>
              <Account
                address={address}
                localProvider={provider}
                injectedProvider={provider}
                mainnetProvider={provider}
                price={price}
                blockExplorer={blockExplorer}
              />
              {account}
            </div>
          </div>
        }
        size="large"
        style={{ marginTop: 25, width: "100%" }}
        loading={false}
      >
        <Space>
          Token ID:
          <InputNumber value={selectedToken} onChange={tokenIdChanged}/>
        </Space>
        {loading && <LoadingOutlined/>}
        {tokenView}
        {errorView}
      </Card>
    </div>
  );
}

render() {
    const {
      form,
      listAndsearchAndarticles: { list },
      loading,
    } = this.props;
    const { getFieldDecorator } = form;
    const owners = [
      {
        id: 'wzj',
        name: '我自己',
      },
      {
        id: 'wjh',
        name: '吴家豪',
      },
      {
        id: 'zxx',
        name: '周星星',
      },
      {
        id: 'zly',
        name: '赵丽颖',
      },
      {
        id: 'ym',
        name: '姚明',
      },
    ];

    const IconText = ({ type, text }) => {
      switch (type) {
        case 'star-o':
          return (
            <span>
              <StarOutlined
                style={{
                  marginRight: 8,
                }}
              />
              {text}
            </span>
          );

        case 'like-o':
          return (
            <span>
              <LikeOutlined
                style={{
                  marginRight: 8,
                }}
              />
              {text}
            </span>
          );

        case 'message':
          return (
            <span>
              <MessageOutlined
                style={{
                  marginRight: 8,
                }}
              />
              {text}
            </span>
          );

        default:
          return null;
      }
    };

    const formItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
        md: {
          span: 12,
        },
      },
    };
    const loadMore = list.length > 0 && (
      <div
        style={{
          textAlign: 'center',
          marginTop: 16,
        }}
      >
        <Button
          onClick={this.fetchMore}
          style={{
            paddingLeft: 48,
            paddingRight: 48,
          }}
        >
          {loading ? (
            <span>
              <LoadingOutlined /> 加载中...
            </span>
          ) : (
            '加载更多'
          )}
        </Button>
      </div>
    );
    return (
      <>
        <Card bordered={false}>
          <Form layout="inline">
            <StandardFormRow
              title="所属类目"
              block
              style={{
                paddingBottom: 11,
              }}
            >
              <FormItem>
                {getFieldDecorator('category')(
                  <TagSelect expandable>
                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
                  </TagSelect>,
                )}
              </FormItem>
            </StandardFormRow>
            <StandardFormRow title="owner" grid>
              {getFieldDecorator('owner', {
                initialValue: ['wjh', 'zxx'],
              })(
                <Select
                  mode="multiple"
                  style={{
                    maxWidth: 286,
                    width: '100%',
                  }}
                  placeholder="选择 owner"
                >
                  {owners.map(owner => (
                    <Option key={owner.id} value={owner.id}>
                      {owner.name}
                    </Option>
                  ))}
                </Select>,
              )}
              <a className={styles.selfTrigger} onClick={this.setOwner}>
                只看自己的
              </a>
            </StandardFormRow>
            <StandardFormRow title="其它选项" grid last>
              <Row gutter={16}>
                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                  <FormItem {...formItemLayout} label="活跃用户">
                    {getFieldDecorator(
                      'user',
                      {},
                    )(
                      <Select
                        placeholder="不限"
                        style={{
                          maxWidth: 200,
                          width: '100%',
                        }}
                      >
                        <Option value="lisa">李三</Option>
                      </Select>,
                    )}
                  </FormItem>
                </Col>
                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                  <FormItem {...formItemLayout} label="好评度">
                    {getFieldDecorator(
                      'rate',
                      {},
                    )(
                      <Select
                        placeholder="不限"
                        style={{
                          maxWidth: 200,
                          width: '100%',
                        }}
                      >
                        <Option value="good">优秀</Option>
                      </Select>,
                    )}
                  </FormItem>
                </Col>
              </Row>
            </StandardFormRow>
          </Form>
        </Card>
        <Card
          style={{
            marginTop: 24,
          }}
          bordered={false}
          bodyStyle={{
            padding: '8px 32px 32px 32px',
          }}
        >
          <List
            size="large"
            loading={list.length === 0 ? loading : false}
            rowKey="id"
            itemLayout="vertical"
            loadMore={loadMore}
            dataSource={list}
            renderItem={item => (
              <List.Item
                key={item.id}
                actions={[
                  <IconText key="star" type="star-o" text={item.star} />,
                  <IconText key="like" type="like-o" text={item.like} />,
                  <IconText key="message" type="message" text={item.message} />,
                ]}
                extra={<div className={styles.listItemExtra} />}
              >
                <List.Item.Meta
                  title={
                    <a className={styles.listItemMetaTitle} href={item.href}>
                      {item.title}
                    </a>
                  }
                  description={
                    <span>
                      <Tag>Ant Design</Tag>
                      <Tag>设计语言</Tag>
                      <Tag>蚂蚁金服</Tag>
                    </span>
                  }
                />
                <ArticleListContent data={item} />
              </List.Item>
            )}
          />
        </Card>
      </>
    );
  }

ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
  const firebase = useFirebase();
  const firestore = useFirestore();
  const dispatch = useDispatch();

  const uploading = useSelector(
    ({
      tutorials: {
        images: { uploading },
      },
    }) => uploading
  );

  const uploading_error = useSelector(
    ({
      tutorials: {
        images: { uploading_error },
      },
    }) => uploading_error
  );

  const deleting = useSelector(
    ({
      tutorials: {
        images: { deleting },
      },
    }) => deleting
  );

  const deleting_error = useSelector(
    ({
      tutorials: {
        images: { deleting_error },
      },
    }) => deleting_error
  );

  useEffect(() => {
    if (uploading === false && uploading_error === false) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message="Image Uploaded successfully...."
      />;
    } else if (uploading === false && uploading_error) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message={uploading_error}
      />;
    }
  }, [uploading, uploading_error]);

  useEffect(() => {
    if (deleting === false && deleting_error === false) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message="Deleted Succefully...."
      />;
    } else if (deleting === false && deleting_error) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message={deleting_error}
      />;
    }
  }, [deleting, deleting_error]);

  useEffect(() => {
    clearTutorialImagesReducer()(dispatch);
    return () => {
      clearTutorialImagesReducer()(dispatch);
    };
  }, [dispatch]);

  const props = {
    name: "file",
    multiple: true,
    beforeUpload(file, files) {
      uploadTutorialImages(owner, tutorial_id, files)(
        firebase,
        firestore,
        dispatch
      );
      return false;
    },
  };

  const deleteFile = (name, url) =>
    remoteTutorialImages(
      owner,
      tutorial_id,
      name,
      url
    )(firebase, firestore, dispatch);

  return (
    <Drawer
      title="Images"
      anchor="right"
      closable={true}
      onClose={onClose}
      open={visible}
      getContainer={true}
      style={{ position: "absolute" }}
      width="400px"
      className="image-drawer"
      destroyOnClose={true}
      maskClosable={false}
    >
      <div className="col-pad-24" data-testId="tutorialImgUpload">
        <Grid>
          <input
            id="file-upload"
            fullWidth
            accept="image/*"
            type="file"
            {...props}
          />
          {uploading ? (
            <>
              <LoadingOutlined /> Please wait...
              <p className="ant-upload-hint mt-8">Uploading image(s)...</p>
            </>
          ) : (
            <>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">
                Click or drag images to here to upload
              </p>
            </>
          )}
        </Grid>
        {imageURLs &&
          imageURLs.length > 0 &&
          imageURLs.map((image, i) => (
            <Grid className="mb-24" key={i}>
              <Grid xs={24} md={8}>
                <img src={image.url} alt="" />
              </Grid>
              <Grid xs={24} md={16} className="pl-8" style={{}}>
                <h4 className="pb-8">{image.name}</h4>

                <CopyToClipboard
                  text={`![alt=image; scale=1.0](${image.url})`}
                  onCopy={() => (
                    <Snackbar
                      anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "left",
                      }}
                      open={true}
                      autoHideDuration={6000}
                      message="Copied...."
                    />
                  )}
                >
                  <Button type="primary">Copy URL</Button>
                </CopyToClipboard>

                <Button
                  loading={deleting}
                  onClick={() => deleteFile(image.name, image.url)}
                  type="ghost"
                  danger
                >
                  Delete
                </Button>
              </Grid>
            </Grid>
          ))}
      </div>
    </Drawer>
  );
}

export default function Minter({
  customContract,
  account,
  gasPrice,
  signer,
  provider,
  name,
  price,
  blockExplorer,
}) {
  const contracts = useContractLoader(signer);
  let contract;
  if (!name) {
    name = DEFAULT_CONTRACT_NAME;
  }
  if (!customContract) {
    contract = contracts ? contracts[name] : "";
  } else {
    contract = customContract;
  }

  const address = contract ? contract.address : "";

  const [file, setFile] = useState(null);
  const [previewURL, setPreviewURL] = useState(null);
  const [nftName, setName] = useState("");
  const [description, setDescription] = useState("");
  const [minting, setMinting] = useState(false);
  const [status, setStatus] = useState("");
  const [tokenId, setTokenId] = useState(null);

  const beforeUpload = (file, fileList) => {
    console.log(file, fileList);
    setFile(file);
    setPreviewURL(URL.createObjectURL(file));
    return false;
  }

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>
        Choose image
      </div>
    </div>
  );

  const uploadView = (
    <div>
      Drop an image file or click below to select.
      <Upload
        name="avatar"
        accept=".jpeg,.jpg,.png,.gif"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
      >
        {uploadButton}
      </Upload>
    </div>
  );

  const preview = previewURL ? <img src={previewURL} style={{maxWidth: "800px"}}/> : <div/>

  const nameField = (
    <Input placeholder="Enter a name for your NFT" onChange={e => {
      setName(e.target.value);
    }}/>
  );

  const descriptionField = (
    <Input.TextArea placeholder="Enter a description" onChange={e => {
      setDescription(e.target.value);
    }}/>
  );

  const mintEnabled = file != null && !!nftName;

  const startMinting = () => {
    console.log(`minting nft with name ${nftName}`);
    setMinting(true);
    signer.getAddress().then(ownerAddress => {
      mintNFT({ 
        contract, 
        provider, 
        ownerAddress, 
        gasPrice, 
        setStatus,
        name: nftName, 
        image: file, 
        description 
      }).then(newTokenId => {
        setMinting(false);
        console.log('minting complete');
        setTokenId(newTokenId);
      })
    });
  }
  
  const mintButton = (
    <Button type="primary" disabled={!mintEnabled} onClick={startMinting}>
      {minting ? <LoadingOutlined/> : "Mint!"}
    </Button>
  )
  
  const minterForm = (
    <div style={{ margin: "auto", width: "70vw" }}>
      <Card
        title={
          <div>
            {name}
            <div style={{ float: "right" }}>
              <Account
                address={address}
                localProvider={provider}
                injectedProvider={provider}
                mainnetProvider={provider}
                price={price}
                blockExplorer={blockExplorer}
              />
              {account}
            </div>
          </div>
        }
        size="large"
        style={{ marginTop: 25, width: "100%" }}
        loading={false}
      >
        { file == null && uploadView }
        {preview}
        {nameField}
        {descriptionField}
        {mintButton}
        {status}
      </Card>
    </div>
  );


  return minterForm;
}

TimetableContainer = () => {
  const dispatch = useDispatch()
  const semesterList = useSelector(selectSemesters)
  const courseAPILoading = useSelector(selectCourseAPILoading)

  const [courseTimetableList, setCourseTimetableList] = useState([])
  const [loading, setLoading] = useState(courseAPILoading)
  const [semIdx, setSemIdx] = useState(null)

  useEffect(() => {
    if (semesterList.length) setSemIdx(semesterList.length - 1)
  }, [semesterList])

  useEffect(() => {
    const fetchUserTimetable = async (_semester) => {
      try {
        setLoading(true)
        const response = await API.profile.timetable.read(_semester)
        setCourseTimetableList(response)
      } catch (error) {
        toast({ status: 'error', content: error })
      } finally {
        setLoading(false)
      }
    }

    if (semIdx !== null) fetchUserTimetable(semesterList[semIdx])
    else setLoading(true)
  }, [semesterList, semIdx])

  const handleClickPrev = () =>
    semIdx - 1 in semesterList && setSemIdx(semIdx - 1)
  const handleClickNext = () =>
    semIdx + 1 in semesterList && setSemIdx(semIdx + 1)

  const removeFromTimetable = (id) => async () => {
    try {
      setLoading(true)
      await API.profile.timetable.remove({ id })

      setCourseTimetableList(
        courseTimetableList.filter((item) => item.id !== id)
      )
      dispatch(updateTimetable(id))
    } catch (error) {
      toast({ status: 'error', content: error })
    } finally {
      setLoading(false)
    }
  }

  const getSlotClashes = () => {
    const courseAndSlotList = []
    courseTimetableList.forEach(({ course, lectureSlots }) => {
      lectureSlots.forEach((lecSlot) => {
        courseAndSlotList.push({
          course,
          slotName: lecSlot,
        })
      })
    })
    const courseTimetableSlots = courseAndSlotList
      .map(({ course, slotName }) => ({
        course,
        slotName,
        grid: slots[slotName],
      }))
      .sort(
        (a, b) =>
          a.grid.col * 1000 +
          a.grid.row.start -
          (b.grid.col * 1000 + b.grid.row.start)
      )
    const clashes = []
    for (let i = 1; i < courseTimetableSlots.length; i += 1) {
      const prev = courseTimetableSlots[i - 1]
      const next = courseTimetableSlots[i]
      if (
        prev.grid.col === next.grid.col &&
        prev.grid.row.end > next.grid.row.start
      )
        clashes.push({
          first: courseTimetableSlots[i - 1],
          second: courseTimetableSlots[i],
        })
    }
    return clashes
  }

  const slotClashWarnings = (clashes) => {
    const warnings = []
    clashes.forEach((clash) => {
      const { first } = clash
      const { second } = clash
      warnings.push(`${first.course} (Slot ${first.slotName})
      is clashing with ${second.course} (Slot ${second.slotName})`)
    })
    return warnings
  }

  const warnings = slotClashWarnings(getSlotClashes())

  return (
    <>
      <PageHeading>
        <PageTitle>Timetable</PageTitle>
      </PageHeading>

      {semesterList[semIdx] && (
        <TimetableSemesterHeader>
          <TimetableDownloadLink coursesInTimetable={courseTimetableList} />

          <TimetableSemesterTitle>
            <ButtonIcon
              icon={<ChevronLeft size="20" />}
              onClick={handleClickPrev}
              disabled={loading || !(semIdx - 1 in semesterList)}
              hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
            />
            {semesterList[semIdx].season}&nbsp;
            {displayYear(semesterList[semIdx])}
            <ButtonIcon
              icon={<ChevronRight size="20" />}
              disabled={loading || !(semIdx + 1 in semesterList)}
              onClick={handleClickNext}
              hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
            />
          </TimetableSemesterTitle>

          <TimetableShareButton coursesInTimetable={courseTimetableList} />
        </TimetableSemesterHeader>
      )}

      {loading && <LoaderAnimation />}

      <Spin
        spinning={loading}
        indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
      >
        <TimetableLayout>
          {courseTimetableList.map((item) => (
            <TimetableCourseItem key={item.id} data={item} />
          ))}

          <CurrentTime mode="vertical" />
        </TimetableLayout>
      </Spin>

      <Aside title="My courses" loading={loading}>
        <ClashAlerts>
          {!loading &&
            warnings.map((warning) => (
              <Alert
                message="Warning"
                description={warning}
                type="warning"
                showIcon
                closable
              />
            ))}
        </ClashAlerts>

        <AsideList>
          {!loading &&
            courseTimetableList.map(({ id, course }) => (
              <TimetableAsideItem
                key={id}
                code={course}
                handleRemove={removeFromTimetable(id)}
                loading={loading}
              />
            ))}
        </AsideList>
      </Aside>
    </>
  )
}

render() {
        const { firstName, middleName, lastName, gender, loading,avatarUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        const onPreview = async file => {
            let src = file.url;
            if (!src) {
                src = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file.originFileObj);
                    reader.onload = () => resolve(reader.result);
                });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
        };
        let columns = [
            {
                title: 'Avatar',
                dataIndex: 'avatarUrl',
                key: 'avatarUrl',
                render: (text, record) => (
                    <Avatar size={64} src={record.avatarUrl}></Avatar>
                ),
            },
            {
                title: 'Full Name',
                dataIndex: 'fullName',
                key: 'fullName'
            },
            {
                title: 'First Name',
                dataIndex: 'firstName',
                key: 'firstName'
            },
            {
                title: 'Middle Name',
                dataIndex: 'middleName',
                key: 'middleName'
            },
            {
                title: 'Last Name',
                dataIndex: 'lastName',
                key: 'lastName'
            },
            {
                title: 'Gender',
                dataIndex: 'gender',
                key: 'gender'
            },
            {
                title: 'Age',
                dataIndex: 'age',
                key: 'age'
            },
            {
                title: 'Birthday',
                dataIndex: 'dob',
                key: 'dob'
            },
            {
                title: 'Action',
                key: 'action',
                render: (item) => (
                    <Space size="middle">
                        <Button onClick={() => {this.handleDelete(item.id)}}>Delete</Button>
                        <Button type="primary" onClick={() => {this.showModal(item)}}>
                            Edit
                        </Button>
                    </Space>
                ),
            },
        ]
        return (
            <div >
                <Table dataSource={this.props.items} columns={columns} pagination={{ position: ["bottomCenter"],pageSize: 5 }} scroll={{ x: 500 }} />
                <Modal
                    title="Edit Info"
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            Return
                        </Button>,
                        <Button key="submit" type="primary" onClick={this.handleOk}>
                            Save
                        </Button>,
                    ]}
                >
                    <Space size={10}>
                        <Space size={10} direction="vertical">
                            <ImgCrop rotate>
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    multiple={false}
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    onPreview={onPreview}
                                    customRequest={this.customUpload}
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleUpload}
                                >
                                    {avatarUrl ? <img src={avatarUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>
                            </ImgCrop>
                        </Space>
                        <Space size={10} direction="vertical">
                            <Input type="text" id="firstName" value={firstName} placeholder="First Name" onChange={this.handleFirstName} />
                            <Input type="text" id="middleName" value={middleName} placeholder="Middle Name" onChange={this.handleMiddleName} />
                            <Select id="gender"  style={{width:'100%'}} placeholder="Gender" value={gender} onChange={this.handleChangeGender}>
                                <Option value="Male">Male</Option>
                                <Option value="Female">Female</Option>
                                <Option value="Other">Other</Option>
                            </Select>
                        </Space>

                        <Space size={10} direction="vertical">
                            <Input type="text" id="lastName" value={lastName} placeholder="Last Name" onChange={this.handleLastName} />
                            <DatePicker type="text" id="dob" ref="datePicker" style={{width:'100%'}} value={this.state.dateValue}  selected={this.state.dob}  placeholder="Date of Birth" onChange={this.handleChangeDate} />
                        </Space>
                    </Space>
                </Modal>
                <br/>
                <AddressBookForm />
            </div>
        )

    }

render() {
    return (
      <Layout className="pageTransition" style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>

        <Modal
          title="Hint"
          visible={this.state.hintModal}
          onCancel={() => { this.setState({ hintModal: false }) }}
          footer={null}
        >
          <p>{this.state.hintContent}</p>
        </Modal>


        <Modal
          title={null}
          visible={this.state.challengeModal}
          footer={null}
          bodyStyle={{ textAlign: "center" }}
          onCancel={() => { this.setState({ challengeModal: false }); this.props.history.push("/Challenges/" + this.props.category); }}
        >
          <Tabs defaultActiveKey="challenge">
            <TabPane
              tab={<span><ProfileOutlined /> Challenge</span>}
              key="challenge"
            >

              {this.state.challengeWriteup !== "" && this.state.challengeWriteup !== "CompleteFirst" && (
                <Tooltip title="View writeups for this challenge">
                  <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
                </Tooltip>
              )}
              {this.state.challengeWriteup === "" && (
                <Tooltip title="Writeups are not available for this challenge">
                  <Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
                </Tooltip>
              )}
              {this.state.challengeWriteup === "CompleteFirst" && (
                <Tooltip title="Writeups are available for this challenge but you must complete the challenge first to view it.">
                  <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch", color: "#13a8a8" }} icon={<SolutionOutlined />} />
                </Tooltip>
              )}
              <Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
                <Ellipsis color="#177ddc" size={120} ></Ellipsis>
              </div>}>

                <div style={{ display: "flex", justifyContent: "center" }}>
                  <h1 style={{ fontSize: "150%", maxWidth: "35ch", whiteSpace: "initial" }}>{this.state.viewingChallengeDetails.name}
                    <Tooltip title="Copy challenge link to clipboard.">
                      <LinkOutlined style={{ color: "#1890ff", marginLeft: "0.5ch" }} onClick={
                        async () => {
                          await navigator.clipboard.writeText(window.location.href);
                          message.success("Challenge link copied to clipboard.")
                        }} /></Tooltip>
                  </h1>
                </div>
                <div>
                  {this.state.challengeTags}
                </div>
                <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.viewingChallengeDetails.points}</h2>

                <div className="challengeModal">
                  <MarkdownRender >{this.state.viewingChallengeDetails.description}</MarkdownRender>
                </div>



                <div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
                  {this.state.challengeHints}
                </div>
              </Suspense>


              <div style={{ display: "flex" }}>
                <SubmitFlagForm submitFlag={this.submitFlag.bind(this)} currentChallengeStatus={this.state.currentChallengeStatus} currentChallengeSolved={this.state.currentChallengeSolved}></SubmitFlagForm>
              </div>
              <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "-1vh" }}>
                <p>Challenge Author: <em>{this.state.viewingChallengeDetails.author}</em></p>
                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.viewingChallengeDetails.max_attempts}</p>
              </div>
            </TabPane>
            <TabPane
              tab={<span><UnlockOutlined /> Solves ({this.state.viewingChallengeDetails.solves.length}) </span>}
              key="solves"
            >
              <List
                itemLayout="horizontal"
                dataSource={this.state.viewingChallengeDetails.solves}
                locale={{
                  emptyText: (
                    <div>
                      <SmileOutlined style={{ fontSize: "500%" }} />
                      <br />
                      <br />
                      <p style={{ fontSize: "150%" }}>No solves yet. Maybe you can be the first!</p>
                    </div>
                  )
                }}
                renderItem={item => {
                  return (
                    <List.Item key={item}>
                      <List.Item.Meta
                        avatar={<Avatar src={"/static/profile/" + item + ".webp"} />}
                        title={<Link to={"/Profile/" + item}><a style={{ fontSize: "110%", fontWeight: 700 }} onClick={() => { this.setState({ challengeModal: false }) }}>{item}</a></Link>}
                      />
                    </List.Item>
                  )
                }
                } />
            </TabPane>
          </Tabs>


        </Modal>
        <Divider style={{ marginTop: "0px" }}>Select Tags</Divider>

        <span className="tag-holder" >
          {Object.keys(this.state.tag).map((tag) => {
            return (
              <CheckableTag className="tag-select-style" key={tag} checked={this.state.selectedTags.indexOf(tag) !== -1}
                onChange={(checked) => {

                  let selectedTags = this.state.selectedTags
                  if (!checked) selectedTags.splice(selectedTags.indexOf(tag), 1)
                  else selectedTags.push(tag)

                  if (selectedTags.length === 0) this.sortCats(this.state.sortType, true)

                  this.setState({ selectedTags: selectedTags })
                }}>{tag} <span style={{ color: "#d89614" }}>({this.state.tag[tag].length})</span></CheckableTag>
            )
          })}
        </span>

        <Divider />
        {this.state.tag && this.state.selectedTags.length > 0 ? (
          <ChallengesTagSortList tag={this.state.tag} selectedTags={this.state.selectedTags} permissions={this.props.permissions} loadChallengeDetails={this.loadChallengeDetails.bind(this)} loadingChallenge={this.state.loadingChallenge} currentChallenge={this.state.currentChallenge} />
        ) : (
          <List
            grid={{
              xs: 1,
              sm: 2,
              md: 2,
              lg: 3,
              xl: 4,
              xxl: 5,
              gutter: 20
            }}
            dataSource={this.state.challenges}
            locale={{
              emptyText: (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                  <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                  <h1 style={{ fontSize: "200%" }}>No challenges have been released yet</h1>
                </div>
              )
            }}
            renderItem={item => {
              if (item.solves.length === 0) item.firstBlood = "No First Blood Yet!"
              else {
                if (this.props.disableNonCatFB) {
                  item.firstBlood = "No First blood Yet"
                  for (let i = 0; i < item.solves.length; i++) {
                    if (this.props.userCategories[item.solves[i]] !== "none") {
                      item.firstBlood = item.solves[i]
                      break
                    }
                  }
                }
                else item.firstBlood = item.solves[0]
              }

              if (item.requires && !item.requiresSolved && this.props.permissions < 2) {

                return (
                  <List.Item key={item._id}>
                    <Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
                      <div id={item._id}>
                        <Card
                          type="inner"
                          bordered={true}
                          className="card-design"
                        >

                          <Meta
                            description={
                              <div className="card-design-body" >
                                <LockOutlined className="disabled-style" />
                                <h1 className="card-design-name" >{item.name}</h1>
                                <h1 className="card-design-points">{item.points}</h1>
                                <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                                {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                  <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                    <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                  </div>
                                )}
                                {item.visibility === false && (
                                  <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                                )}
                              </div>


                            }
                          />
                        </Card> {/*Pass entire datasource as prop*/}
                      </div>
                    </Tooltip>
                  </List.Item>
                )

              }
              else if (!item.solved) {
                return (
                  <List.Item key={item._id}>
                    <div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved, item.firstBlood) }}>
                      <Card
                        hoverable
                        type="inner"
                        bordered={true}
                        className="card-design hover"
                      >
                        <Meta
                          description={
                            <div className="card-design-body">
                              <h1 className="card-design-name">{item.name}</h1>
                              <h1 className="card-design-points">{item.points}</h1>
                              <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                              {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                  <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                </div>
                              )}
                              {item.visibility === false && (
                                <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                              )}
                            </div>


                          }
                        />
                      </Card> {/*Pass entire datasource as prop*/}
                    </div>
                  </List.Item>
                )
              }
              else {
                return (
                  <List.Item key={item._id}>
                    <div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved) }}>
                      <Card
                        hoverable
                        type="inner"
                        bordered={true}
                        className="card-design solved hover"
                      >
                        <Meta
                          description={
                            <div className="card-design-body">
                              <CheckOutlined className="correct-style" />
                              <h1 className="card-design-name">{item.name}</h1>
                              <h1 className="card-design-points">{item.points}</h1>
                              <h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
                              {this.state.loadingChallenge && this.state.currentChallenge === item._id && (
                                <div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
                                  <LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
                                </div>
                              )}
                              {item.visibility === false && (
                                <h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
                              )}
                            </div>


                          }
                        />
                      </Card> {/*Pass entire datasource as prop*/}
                    </div>
                  </List.Item>
                )
              }
            }
            }
          />)}
      </Layout>

    );
  }

render() {
    const { item } = this.props;

    if (!item._value) return null;

    let val = item._value || "";
    const newLineReplacement = "<br/>";
    const settings = this.props.store.settings;
    const isText = item.type === 'text';

    if (isText) {
      const cnLine = cn("richtext", { elem: "line" });

      val = htmlEscape(val)
        .split(/\n|\r/g)
        .map(s => `<span class="${cnLine}">${s}</span>`)
        .join(newLineReplacement);
    }

    if (item.inline) {
      const eventHandlers = {
        onClickCapture: this._onRegionClick,
        onMouseUp: this._onMouseUp,
        onMouseOverCapture: this._onRegionMouseOver,
      };

      return (
        <Block
          name="richtext"
          tag={ObjectTag}
          item={item}
        >
          <Elem
            key="root"
            name="container"
            ref={el => {
              item.visibleNodeRef.current = el;
              el && this.markObjectAsLoaded();
            }}
            data-linenumbers={isText && settings.showLineNumbers ? "enabled" : "disabled"}
            className="htx-richtext"
            dangerouslySetInnerHTML={{ __html: val }}
            {...eventHandlers}
          />
          <Elem
            key="orig"
            name="orig-container"
            ref={item.originalContentRef}
            className="htx-richtext-orig"
            dangerouslySetInnerHTML={{ __html: val }}
          />
          <Elem
            key="work"
            name="work-container"
            ref={item.workingNodeRef}
            className="htx-richtext-work"
          />
        </Block>
      );
    } else {
      return (
        <Block
          name="richtext"
          tag={ObjectTag}
          item={item}
        >
          <Elem name="loading" ref={this.loadingRef}>
            <LoadingOutlined />
          </Elem>

          <Elem
            key="root"
            name="iframe"
            tag="iframe"
            referrerPolicy="no-referrer"
            sandbox="allow-same-origin allow-scripts"
            ref={el => {
              item.setReady(false);
              item.visibleNodeRef.current = el;
            }}
            className="htx-richtext"
            srcDoc={val}
            onLoad={this.onIFrameLoad}
          />
          <Elem
            key="orig"
            name="orig-iframe"
            tag="iframe"
            referrerPolicy="no-referrer"
            sandbox="allow-same-origin allow-scripts"
            ref={item.originalContentRef}
            className="htx-richtext-orig"
            srcDoc={val}
          />
          <Elem
            key="work"
            name="work-iframe"
            tag="iframe"
            referrerPolicy="no-referrer"
            sandbox="allow-same-origin allow-scripts"
            ref={item.workingNodeRef}
            className="htx-richtext-work"
          />
        </Block>
      );
    }
  }