antd#Popconfirm JavaScript Examples

App = () => {
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);

  const showPopconfirm = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  return (
    <>
      <Popconfirm
        title="Title"
        visible={visible}
        onConfirm={handleOk}
        okButtonProps={{ loading: confirmLoading }}
        onCancel={handleCancel}
      >
        <Button type="primary" onClick={showPopconfirm}>
          Open Popconfirm with async logic
        </Button>
      </Popconfirm>
    </>
  );
}

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Popconfirm
            title="Are you sure delete this task?"
            onConfirm={confirm}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type="primary">Confirm Deletion</Button>
          </Popconfirm>
        </div>
      </div>
    )
  }

PinnedDeadline = ({title, description, onUnpin}) => (
    <Container>
        <Title level={3} strong>{title}</Title>
        <Title level={5} type="secondary">{description}</Title>
        <Unpin>
            <Popconfirm
                title="Are you sure？"
                okText="Yes"
                placement="left"
                cancelText="No"
                onConfirm={() => onUnpin()}>
                <PushpinTwoTone height={32} width={32}/>
            </Popconfirm>
        </Unpin>
    </Container>
)

Delete = ({ record }) => {
  const [, dispatchTodos] = useContext(TodoContext);

  return (
    <Popconfirm
      title="Are you sure you want to delete?"
      onConfirm={() => {
        dispatchTodos({
          type: 'DELETE_TODO',
          payload: record.key,
        });
      }}
    >
      <Button type="primary" danger>
        Delete
      </Button>
    </Popconfirm>
  );
}

function SpaceDemo() {
  return (
    <Space>
      Space
      <Button type="primary">Button</Button>
      <Upload>
        <Button>
          <UploadOutlined /> Click to Upload
        </Button>
      </Upload>
      <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
        <Button>Confirm</Button>
      </Popconfirm>
    </Space>
  );
}

render() {
    const that = this;
    const { show, appConfigList = [] } = this.props;
    const appInfo = appConfigList[0] || {};
    const { configs = [] } = appInfo;
    const {} = this.state;
    const cols = [
      {
        key: 'file_name',
        dataIndex: 'file_name',
        title: '文件名',
      },
      {
        key: 'env',
        dataIndex: 'env',
        title: '环境',
      },
      {
        key: 'zone_code',
        dataIndex: 'zone_code',
        title: '机房',
      },
      {
        key: 'op',
        dataIndex: 'op',
        title: '操作',
        render(t, r) {
          return (
            <div>
              <Popconfirm
                title="确定删除吗？"
                onConfirm={() => {
                  that.handleFileDel(r);
                }}
              >
                <Tag color={'red'}>删除</Tag>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    return (
      <Modal
        title="文件列表"
        visible={show}
        maskClosable
        onCancel={this.props.cancel}
        footer={null}
        destroyOnClose
      >
        <Table dataSource={configs} columns={cols} />
      </Modal>
    );
  }

render() {
        const columns = [
            {
                title: "序号",
                key: "id",
                width: 80,
                align: "center",
                render: (txt, row, index) => index + 1
            },
            {
                title: "商品名",
                dataIndex: "name",
                key: "name",
                align: "center",
            },
            {
                title: "价格",
                key: "price",
                dataIndex: "price",
                align: "center",
            },
            {
                title: "操作",
                key: "operate",
                align: "center",
                render: (txt, row, index) =>{
                    return(
                        <div>
                            <Button type="primary" size="small">修改</Button>
                            <Popconfirm
                            title="确定删除此项?"
                            onCancel={()=>console.log("用户取消删除!")}
                            onConfirm={()=>{
                                console.log("用户确认删除!");
                                //调用删除api
                            }}>
                            <Button style={{margin: "0 1rem"}} type="danger" size="small">删除</Button>
                            </Popconfirm>
                        </div>
                    );
                }
            }
        ];
        const data =[
            {
                id: 1,
                name:"苹果",
                price: 1.5,
            },
            {
                id:2,
                name:"香蕉",
                price: 2.2,
            },
            {
                id:3,
                name:"西瓜",
                price: 5,
            }
        ]
        return (
            <Card title="商品列表" extra={<Button type="primary" size="small" onClick={()=>this.props.history.push("/admin/products/edit")}>新增</Button>}>
                <Table rowKey="id" columns={columns} dataSource={data} bordered/>
            </Card>
        )
    }

function Header({ addNewPath, hasSelected, handleSearch }) {
  const history = useHistory();

  const handleAddNew = () => {
    history.push('/' + addNewPath);
  };

  return (
    <>
      <Row>
        <Col>
          <Search
            placeholder="Search"
            onSearch={handleSearch}
            allowClear
            style={{ float: 'left', width: 350 }}
          />
        </Col>
        <Col flex="auto">
          <Button
            icon={<PlusOutlined />}
            type="primary"
            style={{ float: 'right' }}
            onClick={handleAddNew}
          >
            Add New
          </Button>

          <Button
            icon={<DeleteOutlined />}
            disabled={!hasSelected}
            style={{ float: 'right', marginRight: 12 }}
          >
            <Popconfirm
              title="Sure to delete?"
              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
              onConfirm={() => {}}
            >
              Delete
            </Popconfirm>
          </Button>
        </Col>
      </Row>
      <Divider />
    </>
  );
}

render() {
    const { version } = this.props.settings;
    // const versionConf = version instanceof Array ? version : [];
    // console.log(">> version", version)

    return (
      <SettingBlock title={'应用版本相关设置'}>
        <Table
          size={'small'}
          pagination={false}
          columns={[
            ...VersionConfigColumns,
            {
              title: '操作',
              render: (_, record, index) => {
                return (
                  <>
                    <Popconfirm title={'确定删除吗?'} onConfirm={() => this.onDelete(index)}>
                      <Button shape={'circle'}>
                        <DeleteFilled />
                      </Button>
                    </Popconfirm>
                    <Button
                      shape={'circle'}
                      onClick={() => this.onEdit(index)}
                      style={{ marginLeft: '10px' }}
                    >
                      <EditFilled />
                    </Button>
                  </>
                );
              },
            },
          ]}
          dataSource={version}
          footer={() => (
            <div style={{ textAlign: 'center' }}>
              <Button onClick={this.onAddConfig}>
                <FileAddFilled />
                新增
              </Button>
            </div>
          )}
        />

        <ModalAddVersion
          visible={this.state.modalAddVersion}
          onCancel={() => this.setState({ modalAddVersion: false })}
          onSubmit={this.onAddVersion}
        />

        <ModalEditVersion
          visible={this.state.modalEditVersion}
          onCancel={() => this.setState({ modalEditVersion: false })}
          onSubmit={this.onUpdateVersion}
          fields={this.state.currentEditFields}
        />
      </SettingBlock>
    );
  }

function useActionMenu({ selectedRow, updateEntityPath }) {
  const history = useHistory();

  const handleMenuClick = action => {
    if (action.key === 'edit') {
      const updatePath = '/' + updateEntityPath + '/' + selectedRow.id;
      history.push(updatePath);
    }
  };

  const handleSingleDelete = () => {
    console.log('handleSingleDelete, selected:', selectedRow);
  };

  const actionMenu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="edit">
        <EditOutlined />
        Update
      </Menu.Item>
      <Menu.Item key="delete">
        <Popconfirm
          title="Sure to delete?"
          placement="left"
          icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
          onConfirm={handleSingleDelete}
        >
          <DeleteOutlined type="delete" />
          Delete
        </Popconfirm>
      </Menu.Item>
    </Menu>
  );

  const actionColumnView = (
    <span>
      <Dropdown overlay={actionMenu} trigger={['click']}>
        <a className="ant-dropdown-link" href="#">
          Actions <DownOutlined />
        </a>
      </Dropdown>
    </span>
  );

  return [actionColumnView];
}

export default function File({
  loading,
  list,
  handleRemove,
}) {
  const { isAdmin, user } = useContext(Context);
  const columns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Date',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: createdAt => new Date(createdAt).toLocaleString(),
    },
    {
      title: '',
      key: 'op',
      width: 220,
      fixed: 'right',
      render: (text, record) => (
        <div>
          <Popover
            content={(
              <img
                alt="loading"
                style={{ width: 150, height: 150 }}
                src={cdnQrcode(record.key, 'file', isAdmin)}
              />
            )}>
            <Button style={{ marginLeft: 10 }}>
              <QrcodeOutlined />
            </Button>
          </Popover>
          {user && (
            <Popconfirm
              title="Are you sure to delete this ?"
              onConfirm={() => handleRemove(record.objectId)}
            >
              <Button style={{ marginLeft: 10 }} type="danger">
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          )}
          <CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
            onCopy={() => message.success('Copied successfully')}>
            <Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
          </CopyToClipboard>
        </div>
      ),
    },
  ], [handleRemove]);

  return (
    <Table
      loading={loading}
      dataSource={list}
      columns={columns}
      pagination={false}
    />
  );
}

CancelAllPopconfirm = styled(Popconfirm)`
  && {
    font-size: 0.85rem;
  }
`

render() {
        return (
            <div>
                <Form initialValues={{ ...this.initValues }} ref="form">
                    <Row gutter={8}>
                        <Col span={14}>
                            <Form.Item
                                name="redisKey"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                                style={{ marginBottom: "1px" }}
                            >
                                <Search
                                    prefix="key :"
                                    enterButton={
                                        <Button
                                            icon={<EditOutlined />}
                                        ></Button>
                                    }
                                    size="middle"
                                    onSearch={this.renameKey.bind(this)}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={5}>
                            <Form.Item
                                name="ttl"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                                style={{ marginBottom: "1px" }}
                            >
                                <Search
                                    prefix="ttl :"
                                    enterButton={
                                        <Button
                                            icon={<EditOutlined />}
                                        ></Button>
                                    }
                                    size="middle"
                                    onSearch={this.updateTtl.bind(this)}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={5}>
                            <Space>
                                <Form.Item style={{ marginBottom: "1px" }}>
                                    <Popconfirm
                                        title={intl.get(
                                            "HostKey.header.key.delete.notice"
                                        )}
                                        onConfirm={() => {
                                            this.deleteKey();
                                        }}
                                    >
                                        <Button
                                            icon={<DeleteOutlined />}
                                        ></Button>
                                    </Popconfirm>
                                </Form.Item>
                                <Form.Item style={{ marginBottom: "1px" }}>
                                    <Button
                                        icon={<ReloadOutlined />}
                                        onClick={this.refreshAll.bind(this)}
                                    ></Button>
                                </Form.Item>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }

render() {
    const {SysDepartmentModel: {tree}, form, submitting} = this.props;
    const {getFieldDecorator} = form;
    const columns = [
      {title: '部门名称', dataIndex: 'name'},
      {title: '排序 ', dataIndex: 'sort'},
      {
        title: '部门状态', dataIndex: 'state',
        render: (text, record) => this.renderStateTag(record.state),
      },
      {title: '备注', dataIndex: 'remark'},
      {title: '创建时间', dataIndex: 'createTime'},
      {
        title: '操作', dataIndex: 'action',
        render: (text, record) => (<Button.Group size="small">
          <Button type="link" size="small" onClick={() => this.handlerGetById(record.id)}>修改</Button>
          <Popconfirm
            title={`你确定要删除部门 ${record.name} 吗?`}
            onConfirm={() => this.handlerDeleteById(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button type='link' size="small">删除</Button>
          </Popconfirm>
        </Button.Group>)
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card>
          <Form layout="inline" onSubmit={this.onSubmit}>
            <Row gutter={24}>
              <Col span={6}>
                <Form.Item label="部门名">
                  {getFieldDecorator('Departmentname', {})(
                    <Input placeholder="请输入部门名"/>,
                  )}
                </Form.Item>
              </Col>

              <Col span={12}>
                <div style={{float: 'right'}}>
                  <Button type="primary" htmlType="submit" loading={submitting}>
                    查询
                  </Button>
                  <Button loading={submitting} style={{marginLeft: 8}} onClick={() => {
                    this.props.form.resetFields();
                    this.fetchSysDepartmentList();
                  }}>
                    重置
                  </Button>
                </div>
              </Col>

            </Row>
          </Form>
          <Button type="primary" className={style.tool}
                  onClick={() => this.handlerVisibleAddModal()}>添加</Button>
          <Table
            className={style.table}
            columns={columns}
            rowKey={record => record.id}
            loading={submitting}
            dataSource={tree}
            pagination={false}
          />

          <SysDepartmentAdd
            visible={this.state.visibleAddModal}
            handlerVisibleAddModal={this.handlerVisibleAddModal}
          />

          <SysDepartmentUpdate
            visible={this.state.visibleUpdateModal}
            handlerVisibleAddModal={this.handlerVisibleUpdateModal}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

render(){
        const {getFieldDecorator} = this.props.form;
        return(
            <div style={{textAlign: 'center'}}>
                <Form colon={false}>
                    <Form.Item label="Number of Members for On-campus visit">
                        {getFieldDecorator("members_oncampus", {
                            initialValue: this.props.members_oncampus
                        })(
                            <InputNumber
                                min={1}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Number of Days for On-campus visit">
                        {getFieldDecorator("days_oncampus", {
                            initialValue: this.props.days_oncampus
                        })(
                            <InputNumber
                                min={1}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Other Requirements">
                        {getFieldDecorator("other_requirement", {
                            initialValue: this.props.other_requirement
                        })(
                            <Input.TextArea
                                rows={3}
                                placeholder="Other Specific requirements during on-campus visit"
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={this.handleBack} style={{margin: 5}}>
                            Back
                        </Button>
                        <Popconfirm
                            placement="bottom"
                            onConfirm={this.handleSubmit}
                            title="Do you want to Submit?"
                            >
                            <Button type='primary' style={{margin: 5}}>
                                Submit
                            </Button>
                        </Popconfirm>
                    </Form.Item>
                </Form>
            </div>
        )
    }

render() {
		return (
			<>
				<PageHeader
					title="Settings"
				/>
				<Content style={{ padding: '16px 24px' }}>
					<Row gutter={[16, 14]}>
						<Col span={12}>
							<Statistic title="Hashes" value={this.state._hashes.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Algorithms" value={Object.keys(this.state._algorithms).length} />
						</Col>
						<Col span={12}>
							<Statistic title="Dictionaries" value={this.state._dictionaries.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Rules" value={this.state._rules.length} />
						</Col>
						<Col span={12}>
							<Statistic title="Masks" value={this.state._masks.length} />
						</Col>
						<Col span={24}>
							<Button
								icon={<SyncOutlined />}
								type="primary"
								onClick={this.onClickRescan}
								loading={this.state.isLoadingRescan}
							>
								Rescan
							</Button>
						</Col>
					</Row>
					<Row style={{ marginTop: "2rem" }} gutter={[16, 14]}>
						<Col span={24}>
							<Statistic
								title="Task counter"
								value={this.state.taskCounter}
							/>
							<Space>
							<Button
								style={{ marginTop: 16 }}
								type="default"
								onClick={this.onClickRefreshTaskCounter}
								loading={this.state.isLoadingRefreshTaskCounter}
							>
								Refresh
							</Button>
							<Popconfirm
								placement="topRight"
								title="Are you sure you want to reset the task counter?"
								onConfirm={this.onClickResetTaskCounter}
								okText="Yes"
								cancelText="No"
							>
								<Button
									style={{ marginTop: 16 }}
									type="danger"
									loading={this.state.isLoadingResetTaskCounter}
								>
									Reset counter
								</Button>
							</Popconfirm>
							</Space>
						</Col>
					</Row>
				</Content>
			</>
		)
	}

render() {
    const { env, currentKey } = this.state;

    const envSettingItems = env.map((item, index) => {
      return (
        <Row
          key={index}
          className={'menu-item ' + (index === currentKey ? 'menu-item-checked' : '')}
          onClick={() => this.handleClick(index, item)}
          onMouseEnter={() => this.enterItem(index)}
        >
          <span className="env-icon-style">
            <span className="env-name" style={{ color: item.name === '新环境' && '#2395f1' }}>
              {item.name}
            </span>
            <Popconfirm
              title="您确认删除此环境变量?"
              onConfirm={e => {
                e.stopPropagation();
                this.showConfirm(index, 'env');
              }}
              okText="确定"
              cancelText="取消"
            >
              <Icon
                type="delete"
                className="interface-delete-icon"
                style={{
                  display: this.state.delIcon == index && env.length - 1 !== 0 ? 'block' : 'none'
                }}
              />
            </Popconfirm>
          </span>
        </Row>
      );
    });

    return (
      <div className="m-env-panel">
        <Layout className="project-env">
          <Sider width={195} style={{ background: '#fff' }}>
            <div style={{ height: '100%', borderRight: 0 }}>
              <Row className="first-menu-item menu-item">
                <div className="env-icon-style">
                  <h3>
                    环境列表&nbsp;<Tooltip placement="top" title="在这里添加项目的环境配置">
                      <Icon type="question-circle-o" />
                    </Tooltip>
                  </h3>
                  <Tooltip title="添加环境变量">
                    <Icon type="plus" onClick={() => this.addParams('env')} />
                  </Tooltip>
                </div>
              </Row>
              <EasyDragSort data={() => env} onChange={this.handleDragMove('env')}>
                {envSettingItems}
              </EasyDragSort>
            </div>
          </Sider>
          <Layout className="env-content">
            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
              <ProjectEnvContent
                projectMsg={this.state.currentEnvMsg}
                onSubmit={e => this.onSubmit(e, currentKey)}
                handleEnvInput={e => this.handleInputChange(e, currentKey)}
              />
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }

storiesOf('antd/popconfirm', module).add('icon', () => 
  <Popconfirm title="Are you sure？" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
    <a href="#">Delete</a>
  </Popconfirm>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set <code>icon</code> props to customize the icon.</p></>) } });

render() {
    const { dataSource } = this.state;
    const columns = [
      { title: '编号', align: 'center', dataIndex: 'id' },
      {
        title: '组名',
        align: 'center',
        dataIndex: 'name',
        ...this.getColumnSearchProps('name'),
        filterDropdownVisible: this.state.filterItem.name,
      },
      {
        title: '成员',
        align: 'center',
        dataIndex: 'user',
        ...this.getColumnSearchProps('user'),
        filterDropdownVisible: this.state.filterItem.user,
      },
      {
        title: '操作',
        align: 'center',
        key: 'action',
        render: (text, record, index) => (
          <span>
            <a onClick={() => this.handleEdit(text, record)}>编辑</a>
            <Popconfirm
              title="确定要删除吗?"
              onConfirm={() => this.handleDelete(record)}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">删除</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
    return (
      <div>
        <div id="top-section">
          <Button type="primary" onClick={this.handleAdd}>添加</Button>
        </div>
        <CreateEditGroup onRef={c => this.onRef(c)} onSubmit={this.rulesUpdate} />
        <Table dataSource={dataSource} columns={columns} rowKey="id" />
      </div>
    )
  }

CancelAllPopconfirm = styled(Popconfirm)`
  && {
    font-size: 0.85rem;
  }
`

ButtonIconContainer = ({
  children,

  // ? popover props
  popover = false,
  popoverIcon = defaultPopoverIcon,
  popoverTitle = 'Are you sure?',
  onConfirm = null,
  onCancel = () => {},

  // ? button props
  shape = 'circle',
  size = 'large',
  tooltip = null,
  onClick,
  ...props
}) => {
  const [popoverVisible, setPopoverVisible] = useState(false)

  const handleVisibleChange = (visible) => {
    if (!visible) {
      setPopoverVisible(false)
      return
    }

    if (popover) setPopoverVisible(true)
    else if (onConfirm) onConfirm()
    else onClick()
  }

  return (
    <Popconfirm
      title={popoverTitle}
      icon={popoverIcon}
      visible={popoverVisible}
      onVisibleChange={handleVisibleChange}
      onConfirm={onConfirm || onClick}
      onCancel={onCancel}
      okText="Yes"
    >
      <Tooltip title={tooltip}>
        <StyledButton shape={shape} type="text" size={size} {...props}>
          {children}
        </StyledButton>
      </Tooltip>
    </Popconfirm>
  )
}

DeadlineList = ({pinned, data, onPin, onUnpin, onDelete}) => {
    const formatDate = date => `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
    const formatDescription = item => `${formatDate(new Date(item.start))} ~ ${formatDate(new Date(item.end))}`;

    return (
        <Container>
            {pinned ? <Fragment>
                <PinnedDeadline
                    title={pinned.name}
                    description={formatDescription(pinned)}
                    onUnpin={onUnpin}
                />
                <Divider />
            </Fragment> : null}
            <StyledList
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item, index) => (
                    <List.Item
                        actions={[
                            <Popconfirm
                                title="Are you sure？"
                                okText="Yes"
                                placement="left"
                                cancelText="No"
                                onConfirm={() => onPin(index)}>
                                <PushpinFilled />
                            </Popconfirm>,
                            <Popconfirm
                                title="Are you sure？"
                                okText="Yes"
                                placement="left"
                                cancelText="No"
                                onConfirm={() => onDelete(item.id, index)}>
                                <Button
                                    type="primary"
                                    danger
                                    shape="circle"
                                    icon={
                                        <DeleteOutlined />
                                    }/>
                            </Popconfirm>]}>
                        <List.Item.Meta
                            title={item.name}
                            description={formatDescription(item)}
                        />
                    </List.Item>
                )}
            />
        </Container>
    );
}

function TrackEnroll({
  visible,
  getTracksAction,
  loading,
  error,
  userEnrollTrackAction,
  errResponse,
  data,
  onCancel,
}) {
  const [current, setCurrent] = useState(0);
  const [trackId, setTrackId] = useState(null);
  const [mentorId, setMentorId] = useState(null);

  const [trackTitle, setTrackTitle] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  // eslint-disable-next-line
  const [trackPerPage, setTrackperPage] = useState(3);

  const indexOfLastTrack = currentPage * trackPerPage;
  const indexOfFirstTrack = indexOfLastTrack - trackPerPage;
  const { items } = data;

  const paginate = pageNumber => setCurrentPage(pageNumber);
  const currentTracks = items
    ? items.slice(indexOfFirstTrack, indexOfLastTrack)
    : null;

  const getTrackName = id => {
    const track = items.filter(data => data.id === id);
    setTrackTitle(track[0].title);
  };
  function next() {
    const newCurrent = current + 1;
    setCurrent(newCurrent);
  }

  function prev() {
    const newCurrent = current - 1;
    setCurrent(newCurrent);
  }

  const handleSetTrackId = e => {
    setTrackId(e.target.value);
  };

  const handleSetMentorId = e => {
    setMentorId(e.target.value);
  };

  const handleEnrollTrack = async (trackId, mentorId) => {
    try {
      await userEnrollTrackAction(trackId, mentorId);
      await getTrackName(trackId);
    } catch (error) {}
    next();
  };

  useEffect(() => {
    getTracksAction();
  }, [getTracksAction]);

  return (
    <TrackEnrollStyled>
      <Modal
        visible={visible}
        onCancel={onCancel}
        className="custom-ant-modal"
        footer={null}
        closable={false}
      >
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>

        {current === 0 && items ? (
          <React.Fragment>
            <Radio.Group onChange={handleSetTrackId} defaultValue={null}>
              <div className="tracks-card">
                {currentTracks ? (
                  currentTracks.map((item, idx) => (
                    <TrackCard
                      next={next}
                      data={item}
                      key={idx}
                      logo={tempCourseLogo}
                    />
                  ))
                ) : (
                  <CustomLoader />
                )}
              </div>
            </Radio.Group>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Pagination
                // postPerPage={postPerPage}
                total={items.length}
                defaultCurrent={currentPage}
                // paginate={paginate}
                onChange={paginate}
                pageSize={trackPerPage}
                showSizeChanger={false}
              />
            </div>
          </React.Fragment>
        ) : null}
        {current === 1 ? <TracksEnrollStages id={trackId} /> : null}
        {current === 2 ? (
          <React.Fragment>
            <SelectMentorStep
              trackId={trackId}
              handleSetMentorId={handleSetMentorId}
            />
          </React.Fragment>
        ) : null}

        {current === 3 ? (
          <EnrollmentStatus
            status={error ? 'error' : 'success'}
            title={trackTitle}
            prev={prev}
          />
        ) : null}

        <div className="steps-action">
          {current === 0 && (
            <Button type="primary" disabled={!trackId} onClick={() => next()}>
              Next
            </Button>
          )}

          {current === 1 && (
            <React.Fragment>
              <Button type="default" onClick={() => prev()}>
                Back
              </Button>

              <Popconfirm
                title="Are you sure？"
                onConfirm={() => next()}
                icon={<QuestionCircleOutlined style={{ color: 'green' }} />}
              >
                <Button type="primary" className="ml-2">
                  Next
                </Button>
              </Popconfirm>
            </React.Fragment>
          )}

          {current === 2 && (
            <React.Fragment>
              <Button type="default" onClick={() => prev()}>
                Back
              </Button>

              <Popconfirm
                title="Are you sure？"
                onConfirm={() => handleEnrollTrack(trackId, mentorId)}
                icon={<QuestionCircleOutlined style={{ color: 'green' }} />}
                disabled={!mentorId}
              >
                <Button type="primary" disabled={!mentorId} className="ml-2">
                  Enroll
                </Button>
              </Popconfirm>
            </React.Fragment>
          )}
          {current === 3 && (
            <Button type="primary" onClick={() => onCancel()}>
              Done
            </Button>
          )}
        </div>
      </Modal>
    </TrackEnrollStyled>
  );
}

ListNote = () => {
  const { notes, getNotes, deleteNote } = useContext(GlobalContext);

  useEffect(() => {
    getNotes();
    // eslint-disable-next-line
  }, []);

  const columns = [
    {
      title: "Title",
      dataIndex: "title",
      key: "name",
      width: "90%",
    },
    {
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <EditNote notes={record} />
          <Popconfirm
            title="Are you sure you want to delete?"
            onConfirm={() => deleteNote(record._id)}
          >
            <Button size="xs" style={{ float: "right" }}>
              <DeleteTwoTone twoToneColor="#FF0000" />
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Table
        dataSource={notes}
        columns={columns}
        showHeader={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: ["10", "20", "30"],
        }}
      />
    </div>
  );
}

storiesOf('antd/popconfirm', module).add('locale', () => 
  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
    <a href="#">Delete</a>
  </Popconfirm>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set <code>okText</code> and <code>cancelText</code> props to customize the button's labels.</p></>) } });

Nurturing = (props) => {
  const { t } = useTranslation();
  const history = useHistory();
  document.title = TITLE;
  useDidRecover(() => {
    document.title = TITLE;
  });
  const [needSelect, setNeedSelect] = useState(false);
  const [isPlayerVisible, setIsPlayerVisible] = useState(false);

  const [isSupportVisible, setIsSupportVisible] = useState(false);
  const [supportIndex, setSupportIndex] = useState(1);

  // const [isRaceVisible, setIsRaceVisible] = useState(false);

  const selected = dbL.get("selected").value();
  const [supports, setSupports] = useState(selected.supports);
  const [player, setPlayer] = useState(selected.player);
  const [raceFilterCondition, setRaceFilterCondition] = useState(
    selected.raceFilterCondition || {
      distanceType: [],
      grade: [],
      ground: [],
    }
  );
  const [filterRace, setFilterRace] = useState(selected.filterRace || {});
  const [decks, setDecks] = useState(dbL.get("myDecks").value());
  const db = useDB();
  if (!db) return null;
  const races = db.get("races").value();
  const showPlayer = () => {
    setIsPlayerVisible(true);
  };
  const closePlayer = () => {
    setIsPlayerVisible(false);
  };
  const handleSelectPlayer = (data) => {
    setIsPlayerVisible(false);
    setPlayer(data);

    // save
    selected.player = data;
    dbL.get("selected").assign(selected).write();
    closePlayer();
  };

  const showSupport = (index) => {
    setNeedSelect(true);
    setIsSupportVisible(true);
    setSupportIndex(index);
  };
  const showSupport2 = (index) => {
    setNeedSelect(false);
    setIsSupportVisible(true);
    setSupportIndex(index);
  };

  const closeSupport = () => {
    setIsSupportVisible(false);
  };
  const handleSelectSupport = (data) => {
    let newData = {};
    newData[supportIndex] = data;
    setSupports(Object.assign({}, supports, newData));
    setIsSupportVisible(false);

    // save
    selected.supports[supportIndex] = data;
    dbL.get("selected").assign(selected).write();
    closeSupport();
  };
  const handleSelectSupportShow = (data) => {
    history.push(`/support-detail/${data.id}`);
    closeSupport();
  };
  // 卡组相关操作
  const saveDeck = (deck) => {
    let tmpDeck = {
      imgUrls: [],
      supportsId: [],
    };
    if (player.id) {
      tmpDeck.playerId = player.id;
      tmpDeck.imgUrls.push(player.imgUrl);
    }
    [0, 1, 2, 3, 4, 5].forEach((index) => {
      if (supports[index] && supports[index].id) {
        tmpDeck.imgUrls.push(supports[index].imgUrl);
        tmpDeck.supportsId.push(supports[index].id);
      } else {
        tmpDeck.supportsId.push(null);
      }
    });
    if (deck) {
      //update
      dbL.get("myDecks").find({ id: deck.id }).assign(tmpDeck).write();
    } else {
      //
      tmpDeck.id = shortid.generate();
      dbL.get("myDecks").push(tmpDeck).write();
    }
    setDecks([...dbL.get("myDecks").value()]);
  };
  const loadDeck = (deck) => {
    selected.supports = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {} };
    selected.player = {};
    if (deck.playerId) {
      selected.player = db.get("players").find({ id: deck.playerId }).value();
    }
    setPlayer(selected.player);
    deck.supportsId.forEach((id, index) => {
      if (id) {
        selected.supports[index] = db.get("supports").find({ id: id }).value();
      }
    });
    setSupports({ ...selected.supports });
    db.get("selected").assign(selected).write();
  };
  const deleteDeck = (deck) => {
    dbL.get("myDecks").remove({ id: deck.id }).write();
    setDecks([...dbL.get("myDecks").value()]);
  };
  // race checkbox发生变化
  const onChangeRace = (filterCondition) => {
    setRaceFilterCondition(filterCondition);
    //根据条件过滤
    let tmpRaceList = Object.values(filterCondition).some((f) => f.length > 0)
      ? Object.entries(filterCondition)
          .filter(([key, filters]) => filters.length > 0)
          .reduce(
            (result, [key, filters]) => result.filter((race) => filters.includes(race[key])),
            races
          )
      : [];
    //过滤后整理成 dataNum:[raceId]
    let tmpFilterRace = {};
    for (let race of tmpRaceList) {
      if (tmpFilterRace[race.dateNum]) {
        tmpFilterRace[race.dateNum].push(race.id);
      } else {
        tmpFilterRace[race.dateNum] = [race.id];
      }
    }
    //更新state
    setFilterRace(tmpFilterRace);
    selected.raceFilterCondition = filterCondition;
    selected.filterRace = tmpFilterRace;
    dbL
      .get("selected")
      .assign({ ...selected })
      .write();
  };

  const toSupportDetail = (id) => {
    props.history.push(`/support-detail/${id}`);
  };
  const toPlayerDetail = (id) => {
    props.history.push(`/player-detail/${id}/1`);
  };
  const toBuffList = (id) => {
    props.history.push(`/buff`);
  };

  return (
    <>
      <div style={{ display: "flex", justifyContent: "center" }}>
        {player.imgUrl && (
          <img
            src={CDN_SERVER + player.imgUrl}
            alt={player.imgUrl}
            width="128"
            onClick={() => toPlayerDetail(player.id)}
          />
        )}
        <div className="flex-auto flex flex-wrap items-center">
          <Button size="sm" buttonType="outline" onClick={showPlayer}>
            {t("选择马娘")}
          </Button>
          <Button size="sm" buttonType="outline" onClick={showSupport2}>
            {t("支援卡查询")}
          </Button>
          <Button size="sm" buttonType="outline" onClick={toBuffList}>
            {t("BUFF")}
          </Button>
          <Popover
            trigger="click"
            content={
              <RaceCheckbox onChange={onChangeRace} raceFilterCondition={raceFilterCondition} />
            }
          >
            <Button>{t("比赛")}</Button>
          </Popover>
          <Popover
            trigger="click"
            width={"80%"}
            content={
              <>
                <Button size="sm" buttonType="outline" onClick={() => saveDeck()}>
                  {t("保存为新卡组")}
                </Button>
                {decks.map((deck) => (
                  <Row key={deck.id}>
                    {deck.imgUrls.map((imgUrl) => (
                      <Col span={3} key={imgUrl}>
                        <img src={CDN_SERVER + imgUrl} alt={imgUrl} width={"100"} />
                      </Col>
                    ))}
                    <Col span={3}>
                      <Button
                        size="sm"
                        buttonType="outline"
                        type="primary"
                        onClick={() => loadDeck(deck)}
                      >
                        {t("读取卡组")}
                      </Button>
                      <Popconfirm title="确认覆盖？" onConfirm={() => saveDeck(deck)}>
                        <Button size="sm" buttonType="outline" danger type="dashed">
                          {t("覆盖卡组")}
                        </Button>
                      </Popconfirm>
                      <Popconfirm title="确认删除？" onConfirm={() => deleteDeck(deck)}>
                        <Button size="sm" buttonType="outline" danger type="dashed">
                          {t("删除卡组")}
                        </Button>
                      </Popconfirm>
                    </Col>
                  </Row>
                ))}
              </>
            }
          >
            <Button>{t("我的卡组")}</Button>
          </Popover>
        </div>
      </div>

      <Row justify="space-around">
        {[0, 1, 2, 3, 4, 5].map((index) => (
          <Col span={7} key={index} style={{}}>
            <Button
              size="sm"
              buttonType="outline"
              icon={<EditOutlined />}
              onClick={() => showSupport(index)}
            >
              {t("选择支援卡")}
            </Button>
            {supports[index] && supports[index].id && (
              <img
                src={CDN_SERVER + supports[index].imgUrl}
                alt={supports[index].name}
                width={"100%"}
                onClick={() => toSupportDetail(supports[index].id)}
              />
            )}
          </Col>
        ))}
      </Row>

      <Divider>比赛</Divider>
      <div style={{ overflow: "auto", paddingTop: "10px", width: "100%", height: "400px" }}>
        <RaceTimeline raceList={player.raceList} filterRace={filterRace} />
      </div>

      <Modal
        visible={isPlayerVisible}
        onOk={closePlayer}
        onCancel={closePlayer}
        footer={null}
        width={"100%"}
        bodyStyle={{ maxHeight: "80vh", overflow: "auto" }}
      >
        <PlayerList sortFlag={true} onClick={handleSelectPlayer} />
      </Modal>
      <Modal
        visible={isSupportVisible}
        onOk={closeSupport}
        onCancel={closeSupport}
        footer={null}
        width={"100%"}
        bodyStyle={{ height: "80vh", overflow: "auto" }}
      >
        <SupportListWithFilter
          formName="nurSupMo"
          onClick={needSelect ? handleSelectSupport : handleSelectSupportShow}
          sortFlag={true}
        />
      </Modal>
    </>
  );
}

function HeaderAction({ intl }) {
  const { messagesData, user } = useSelector(stateSelector);
  const dispatch = useDispatch();
  const isMobile = useMediaQuery({ maxWidth: 479 });

  const onLogout = () => dispatch(logoutAction());
  const onGetMessages = () => dispatch(getMessagesAction());
  const onGetNotifications = () => dispatch(getNotificationsAction());
  const onToggleConfirmModal = () => dispatch(toggleConfirmModalAction());

  return (
    <StyledHeaderAction>
      <StyledHeaderWrapper>
        <Dropdown
          trigger={['click']}
          overlay={<Messages />}
          placement="bottomCenter"
          arrow={!isMobile}
          getPopupContainer={(trigger) => trigger.parentNode}
        >
          <StyledHeaderActionItem
            type="link"
            onClick={!messagesData?.data?.length && onGetMessages}
          >
            <Badge count={user?.userConfig?.messageCount}>
              {user?.userConfig?.messageCount ? (
                <StyledMessageFilled />
              ) : (
                <StyledMessageOutlined />
              )}
            </Badge>
            <StyledHeaderActionItemName>
              <FormattedMessage {...messages.messages} />
            </StyledHeaderActionItemName>
          </StyledHeaderActionItem>
        </Dropdown>

        <Dropdown
          trigger={['click']}
          overlay={<Notifications />}
          placement="bottomCenter"
          arrow={!isMobile}
          getPopupContainer={(trigger) => trigger.parentNode}
        >
          <StyledHeaderActionItem
            type="link"
            onClick={user?.userConfig?.notificationCount && onGetNotifications}
          >
            <Badge count={user?.userConfig?.notificationCount}>
              {user?.userConfig?.notificationCount ? (
                <StyledBellFilled />
              ) : (
                <StyledBellOutlined />
              )}
            </Badge>
            <StyledHeaderActionItemName>
              <FormattedMessage {...messages.notifications} />
            </StyledHeaderActionItemName>
          </StyledHeaderActionItem>
        </Dropdown>

        {isMobile ? (
          <>
            <StyledHeaderActionItem type="link" onClick={onToggleConfirmModal}>
              <StyledPoweroffOutlined />
              <StyledHeaderActionItemName>
                <FormattedMessage {...messages.logout} />
              </StyledHeaderActionItemName>
            </StyledHeaderActionItem>

            <Modal />
          </>
        ) : (
          <Popconfirm
            placement="bottomRight"
            title={intl.formatMessage(messages.popConfirmTitle)}
            onConfirm={onLogout}
            okText={intl.formatMessage(messages.popConfirmOk)}
            cancelText={intl.formatMessage(messages.popConfirmCancel)}
          >
            <StyledHeaderActionItem type="link">
              <StyledPoweroffOutlined />
              <StyledHeaderActionItemName>
                <FormattedMessage {...messages.logout} />
              </StyledHeaderActionItemName>
            </StyledHeaderActionItem>
          </Popconfirm>
        )}
      </StyledHeaderWrapper>
    </StyledHeaderAction>
  );
}

render(){
        const {getFieldDecorator} = this.props.form;
        return(
            <div style={{textAlign: 'center'}}>
                <Form onSubmit={this.handleSubmit} colon={false}>
                <Form.Item label="Select programmes eligible for this job">
                        {getFieldDecorator("eligible_programmes", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please select Eligible Programmes for this Job"
                                }
                            ],
                            initialValue: this.props.eligible_programmes
                        })(
                            <Checkbox.Group>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="btech">BTech.</Checkbox>
                                </Col>
                            </Row>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="mtech">MTech.</Checkbox>
                                </Col>
                            </Row>
                            </Checkbox.Group>
                        )}
                    </Form.Item>
                    <Form.Item label="Select Branches eligible for this job">
                        {getFieldDecorator("eligible_branches", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please select Eligible Branches for this Job"
                                }
                            ],
                            initialValue: this.props.eligible_branches
                        })(
                            <Checkbox.Group>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="cse">Computer Science And Engineering</Checkbox>
                                </Col>
                            </Row>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="ee">Electrical Engineering</Checkbox>
                                </Col>
                            </Row>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="me">Mechanical Engineering</Checkbox>
                                </Col>
                            </Row>
                            <Row type='flex' justify='start' style={{margin: 5}}>
                                <Col>
                                    <Checkbox value="mc">Mathematics And Computing</Checkbox>
                                </Col>
                            </Row>
                            </Checkbox.Group>
                        )}
                    </Form.Item>
                    <Form.Item label="Are candidates who graduated already by June 2020 from IIT Goa also eligible to apply?">
                        {getFieldDecorator("graduate_candidates", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.graduate_candidates
                        })(
                        <Select>
                            <Option value="yes">Yes</Option>
                            <Option value="no">No</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Additional Criteria (if any)">
                        {getFieldDecorator("additional_criteria", {
                            initialValue: this.props.additional_criteria
                        })(
                            <Input.TextArea
                                rows={4}
                                placeholder="Any Additional Eligibilty Criteria"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Special Needs (like medical, visa, etc)">
                        {getFieldDecorator("special_needs", {
                            initialValue: this.props.special_needs
                        })(
                            <Input.TextArea
                                rows={4}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Pre Placement Talk">
                        {getFieldDecorator("ppt", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.ppt
                        })(
                        <Select>
                            <Option value="on_campus">On Campus</Option>
                            <Option value="video_conference">Video Conference</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Resume Shortlisting">
                        {getFieldDecorator("resume_shortlisting", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.resume_shortlisting
                        })(
                        <Select>
                            <Option value="yes">Yes</Option>
                            <Option value="no">No</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Written Test">
                        {getFieldDecorator("written_test", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.written_test
                        })(
                        <Select>
                            <Option value="on_campus">On campus</Option>
                            <Option value="online">Online</Option>
                            <Option value="no_written_test">No Written Test</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Group Discussion">
                        {getFieldDecorator("group_discussion", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.group_discussion
                        })(
                        <Select>
                            <Option value="yes">Yes</Option>
                            <Option value="no">No</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Personal Interview">
                        {getFieldDecorator("personal_interview", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please specify"
                                }
                            ],
                            initialValue: this.props.personal_interview
                        })(
                        <Select>
                            <Option value="yes">Yes</Option>
                            <Option value="no">No</Option>
                        </Select>,
                        )}
                    </Form.Item>
                    <Form.Item label="Expected Number of Rounds">
                        {getFieldDecorator("number_of_rounds", {
                            initialValue: this.props.number_of_rounds
                        })(
                            <InputNumber
                                min={1}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Technical Subjects in Written Test/Interview">
                        {getFieldDecorator("subjects", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please Specify"
                                }
                            ],
                            initialValue: this.props.subjects
                        })(
                            <Input.TextArea
                                rows={4}
                                placeholder=""
                            />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={this.handleBack} style={{margin: 5}}>
                            Back
                        </Button>
                        <Popconfirm
                            placement="bottom"
                            onConfirm={this.handleSubmit}
                            title="Do you want to Submit?"
                            >
                            <Button type='primary' style={{margin: 5}}>
                                Submit
                            </Button>
                        </Popconfirm>
                    </Form.Item>
                </Form>
            </div>
        )
    }

LaunchAnalysisButton = () => {
  const dispatch = useDispatch();
  const { navigateTo } = useAppRouter();

  const experiments = useSelector((state) => state.experiments);
  const samples = useSelector((state) => state.samples);
  const backendStatus = useSelector((state) => state.backendStatus);

  const { activeExperimentId } = experiments.meta;
  const activeExperiment = experiments[activeExperimentId];

  const [gem2sRerunStatus, setGem2sRerunStatus] = useState(
    { rerun: true, paramsHash: null, reasons: [] },
  );

  const launchAnalysis = () => {
    if (gem2sRerunStatus.rerun) {
      dispatch(runGem2s(activeExperimentId, gem2sRerunStatus.paramsHash));
    }
    navigateTo(modules.DATA_PROCESSING, { experimentId: activeExperimentId });
  };

  useEffect(() => {
    // The value of backend status is null for new experiments that have never run
    const gem2sBackendStatus = backendStatus[activeExperimentId]?.status?.gem2s;

    if (
      !gem2sBackendStatus
      || !experiments[activeExperimentId]?.sampleIds?.length > 0
    ) return;

    const gem2sStatus = calculateGem2sRerunStatus(
      gem2sBackendStatus, activeExperiment, samples,
    );
    setGem2sRerunStatus(gem2sStatus);
  }, [backendStatus, activeExperimentId, samples, activeExperiment]);

  const canLaunchAnalysis = useCallback(() => {
    if (activeExperiment.sampleIds.length === 0) return false;

    // Check that samples is loaded
    const testSampleUuid = activeExperiment.sampleIds[0];
    if (samples[testSampleUuid] === undefined) return false;

    const metadataKeysAvailable = activeExperiment.metadataKeys.length;

    const allSampleFilesUploaded = (sample) => {
      // Check if all files for a given tech has been uploaded
      const { fileNames } = sample;
      if (
        !fileUploadSpecifications[sample.type].requiredFiles.every(
          (file) => fileNames.includes(file),
        )
      ) { return false; }

      let allUploaded = true;

      // eslint-disable-next-line no-restricted-syntax
      for (const fileName of fileNames) {
        const checkedFile = sample.files[fileName];
        allUploaded = allUploaded
          && checkedFile.valid
          && checkedFile.upload.status === UploadStatus.UPLOADED;

        if (!allUploaded) break;
      }

      return allUploaded;
    };

    const allSampleMetadataInserted = (sample) => {
      if (!metadataKeysAvailable) return true;
      if (Object.keys(sample.metadata).length !== metadataKeysAvailable) return false;
      return Object.values(sample.metadata)
        .every((value) => value.length > 0);
    };

    const canLaunch = activeExperiment.sampleIds.every((sampleUuid) => {
      if (!samples[sampleUuid]) return false;

      const checkedSample = samples[sampleUuid];
      return allSampleFilesUploaded(checkedSample)
        && allSampleMetadataInserted(checkedSample);
    });
    return canLaunch;
  }, [samples, activeExperiment?.sampleIds, activeExperiment?.metadataKeys]);

  const renderLaunchButton = () => {
    const buttonText = !gem2sRerunStatus.rerun ? 'Go to Data Processing' : 'Process project';

    if (!backendStatus[activeExperimentId] || backendStatus[activeExperimentId]?.loading) {
      return <LaunchButtonTemplate text='Loading project...' disabled loading />;
    }

    if (!canLaunchAnalysis()) {
      return (
        <Tooltip
          title='Ensure that all samples are uploaded successfully and all relevant metadata is inserted.'
        >
          {/* disabled button inside tooltip causes tooltip to not function */}
          {/* https://github.com/react-component/tooltip/issues/18#issuecomment-140078802 */}
          <span>
            <LaunchButtonTemplate text={buttonText} disabled />
          </span>
        </Tooltip>
      );
    }

    if (gem2sRerunStatus.rerun) {
      return (
        <Popconfirm
          title={`This project has to be processed because ${gem2sRerunStatus.reasons.join(' and ')}. \
        This will take several minutes.\
        Do you want to continue?`}
          onConfirm={() => launchAnalysis()}
          okText='Yes'
          okButtonProps={{ 'data-test-id': integrationTestConstants.ids.CONFIRM_PROCESS_PROJECT }}
          cancelText='No'
          placement='bottom'
          overlayStyle={{ maxWidth: '250px' }}
        >
          <LaunchButtonTemplate text={buttonText} />
        </Popconfirm>
      );
    }

    return <LaunchButtonTemplate text={buttonText} onClick={() => launchAnalysis()} />;
  };

  return renderLaunchButton();
}