semantic-ui-react#List JavaScript Examples

groupedSchemeValueList = (schemeValueList) => {
  const groupedIDs = _groupBy(schemeValueList, 'scheme');
  let rows = [];
  for (const [scheme, idsList] of Object.entries(groupedIDs)) {
    rows.push({
      name: scheme,
      value: (
        <List bulleted>
          {idsList.map((entry) => (
            <List.Item key={entry.value}>
              <List.Content>
                {entry.value} {entry.material && <>({entry.material})</>}
              </List.Content>
            </List.Item>
          ))}
        </List>
      ),
    });
  }
  return rows;
}

SuccessMessage = (props) => {
  const { user, patient } = props;
  return (
    <Grid.Row>
      <Message icon color="green">
        <Icon name="check circle" />
        <Message.Content>
          <Message.Header>Launch successful!</Message.Header>
          <List>
            <List.Item>Patient: {patient.id}</List.Item>
            <List.Item>User: {user}</List.Item>
          </List>
        </Message.Content>
      </Message>
      <Divider hidden />
    </Grid.Row>
  );
}

render() {
    const { loanDetails } = this.props;
    const { availableActions, pid } = loanDetails;
    const { document_pid, item_pid, patron_pid } = loanDetails.metadata;

    const loanActions = !_isEmpty(availableActions) && (
      <List>
        {this.renderAvailableActions(
          pid,
          patron_pid,
          document_pid,
          item_pid,
          availableActions
        )}
      </List>
    );
    const sendReminderButton = loanDetails.metadata.is_overdue && (
      <OverdueLoanSendNotificationModal loan={loanDetails} />
    );
    if (!_isEmpty(availableActions) || loanDetails.metadata.is_overdue) {
      return (
        <>
          {loanActions}
          {sendReminderButton}
        </>
      );
    } else {
      return (
        <InfoMessage
          fluid
          header="No actions available."
          content={"The loan can't be changed in its current state."}
        />
      );
    }
  }

export default function FollowingFollowerList({
  user: { _id, username, profilePicture }
}) {
  return (
    <List.Item>
      <List.Content floated="right">
        <FollowButton userId={_id}></FollowButton>
      </List.Content>
      <Image avatar src={`/images/profile-picture/100x100/${profilePicture}`} />
      <List.Content as={Link} to={"/" + username} style={{ color: "#3d3d3d" }}>
        {username}
      </List.Content>
    </List.Item>
  );
}

About = () => (
  <>
    <NavMenu />
    <List.Item>
      <List.Icon name="marker" />
      <List.Content>
        <List.Description>
          <span className="qAnswer">HI</span>
        </List.Description>
      </List.Content>
    </List.Item>
    <Footer />
  </>
)

function SearchSuggestions() {
  return (
    <>
      <h4>Try searching for...</h4>
      <List>
        {shuffle(sampleQueries)
          .slice(0, 3)
          .map((query, i) => (
            <List.Item key={i}>
              <Link to={'/search?query=' + encodeURIComponent(query)}>
                {query}
              </Link>
            </List.Item>
          ))}
      </List>
    </>
  );
}

Updates = ({ pageId, active, setActive }) => {
  const [dismiss, setDismiss] = useState(false);
  const KEY = 'DISMISS_UPDATE_2';
  const handleDismiss = () => {
    setDismiss(true);
    localStorage.setItem(KEY, true);
  };
  return (
    !dismiss &&
    localStorage.getItem(KEY) !== 'true' && (
      <Message info onDismiss={handleDismiss}>
        <Message.Header>New features:</Message.Header>
        <List bulleted>
          <List.Item>
            Data summary and cases detail by postcode/<strong>suburb</strong> on{' '}
            <Nav state='NSW' setActive={setActive} href='#location'></Nav> page{' '}
            <strong>location</strong> section.
          </List.Item>
          <List.Item>
            Death cases detail on <Nav state='AUS' setActive={setActive}></Nav>{' '}
            page <strong>death</strong> section.
          </List.Item>
        </List>
      </Message>
    )
  );
}

render() {
    const { item } = this.props;
    const skillName = Skills.findDoc(item.skillID).name;
    return (
        <List.Item>
          <Item>
            <Item.Content>
              {skillName}
            </Item.Content>
          </Item>
        </List.Item>
    );
  }

function Footer() {
  return (
    <div className="footer">
      
        <Container textAlign="center" className="footer__container">
          <Divider inverted section />
          <Image
            centered
            size="mini"
            src="https://img.icons8.com/doodle/96/000000/user-male-circle.png"
            alt="userPic"
          />
          <List horizontal inverted divided link size="small">
            <List.Item as="a" href="https://github.com/Rajangrg">
              By Rajan Gurung
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template">
              Source Code
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template/blob/master/LICENSE">
              MIT License
            </List.Item>
          </List>
        </Container>
     
    </div>
  );
}

Messages = props => (
  <div>
    <List relaxed='very'>
      {props.messages.map(item =>
        <Message
          key={ item.id }
          text={ item.text }
          className = { getClassName(item) }
          image = { getImage(item) }
        />)
      }
    </List>
  </div>
)

Footer = () => (
  <Segment id="deniFooter" inverted vertical style={{ padding: "5em 0em" }}>
    <Container>
      <Grid divided inverted stackable>
        <Grid.Row>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="About" />
            <List link inverted>
              <List.Item as="a">Sitemap</List.Item>
              <List.Item as="a">Contact Us</List.Item>
              <List.Item as="a">Religious Ceremonies</List.Item>
              <List.Item as="a">Gazebo Plans</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="Services" />
            <List link inverted>
              <List.Item as="a">Banana Pre-Order</List.Item>
              <List.Item as="a">DNA FAQ</List.Item>
              <List.Item as="a">How To Access</List.Item>
              <List.Item as="a">Favorite X-Men</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={7}>
            <Header as="h4" inverted>
              Footer Header
            </Header>
            <p>
              Extra space for a call to action inside the footer that could help
              re-engage users.
            </p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Container>
  </Segment>
)

render() {
    const { urls } = this.props;
    if (_isEmpty(urls)) {
      return null;
    }
    return (
      <List bulleted>
        {urls.map((entry, idx) => (
          <List.Item key={idx}>
            <List.Content>
              <a
                href={
                  entry.login_required_url
                    ? entry.login_required_url
                    : entry.value
                }
              >
                {entry.description || entry.value}{' '}
                {entry.login_required && <Icon name="lock" />}
              </a>
            </List.Content>
          </List.Item>
        ))}
      </List>
    );
  }

ShortcutListing = (props) => {
  const hotkeys = config.settings?.slate?.hotkeys;
  return (
    <div>
      <header className="header">
        <h2>Editor shortcuts</h2>
      </header>

      <Segment secondary attached>
        <List>
          <List.Item>
            Type a slash (<em>/</em>) to change block type
          </List.Item>
          {Object.entries(hotkeys || {}).map(([shortcut, { format, type }]) => (
            <List.Item key={shortcut}>{`${shortcut}: ${format}`}</List.Item>
          ))}
        </List>
        <div>On Windows, the MOD key is Ctrl, on Mac OS X it's Cmd.</div>
      </Segment>
    </div>
  );
}

render() {
    const { item } = this.props;
    const toolName = Tools.findDoc(item.toolID).name;
    return (
        <List.Item>
          <Item>
            <Item.Content>
              {toolName}
            </Item.Content>
          </Item>
        </List.Item>
    );
  }

SeparatedList = ({
  items,
  itemProps,
  prefix,
  separator,
  suffix,
  className,
  listProps,
}) => {
  return _isEmpty(items) ? null : (
    <>
      {prefix}
      <List horizontal className={className} {...listProps}>
        {items.map((item, index) => (
          <List.Item key={item} {...itemProps}>
            {item}
            {index !== items.length - 1 && separator}
          </List.Item>
        ))}
      </List>
      {suffix}
    </>
  );
}

Information = () => {
  return (
    <React.Fragment>
      <p>
        This project was built to reduce the ramp-up time for getting new projects off the ground.
        It is fairly opinionated in that it comes out of the box with...
      </p>
      <List as="ul" bulleted>
        <List.Item as="li">
          <a href="https://reactjs.org/">React</a>
        </List.Item>
        <List.Item as="li">
          <a href="https://redux.js.org/">Redux</a>
        </List.Item>
        <List.Item as="li">
          <a href="https://redux-saga.js.org/">Redux-Saga</a>
        </List.Item>
        <List.Item as="li">
          <a href="https://semantic-ui.com/">Semantic-UI</a>
        </List.Item>
      </List>
      <p>This project was inspired by...</p>
      <List bulleted>
        <List.Item>
          <a href="https://redux-saga.js.org/">react-boilerplate</a>
        </List.Item>
        <List.Item>
          <a href="https://redux-saga.js.org/">react-redux-saga-boilerplate</a>
        </List.Item>
        <List.Item>
          <a href="https://github.com/facebook/create-react-app">create-react-app</a>
        </List.Item>
      </List>
    </React.Fragment>
  );
}

render() {
    const { children, lines, ...otherProps } = this.props;
    const { expanded } = this.state;
    const elements = children.length;
    const hasMore = elements > lines;
    const linesShown = expanded ? elements : hasMore ? lines : elements;
    return (
      <List {...otherProps}>
        {children.slice(0, linesShown)}
        {hasMore && <List.Item>{hasMore && this.renderButton()}</List.Item>}
      </List>
    );
  }

render() {
    const teamID = this.props.team._id;
    const teamChallenges = _.map(TeamChallenges.find({ teamID }).fetch(),
    (tc) => Challenges.findDoc(tc.challengeID).title);
    const teamSkills = _.map(TeamSkills.find({ teamID }).fetch(), (ts) => Skills.findDoc(ts.skillID).name);
    const teamTools = _.map(TeamTools.find({ teamID }).fetch(), (tt) => Tools.findDoc(tt.toolID).name);
    return (
        <Item style={{ padding: '0rem 2rem 0rem 2rem' }}>
          <Item.Content>
            <Item.Header>
              <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                <Icon name='users' size='tiny' />
                {this.props.team.name}
              </Header>
            </Item.Header>
            <Item.Meta>
              <Grid columns='equal'>
                <Grid.Column>
                  GitHub: {this.props.team.gitHubRepo}<br />
                  DevPost: {this.props.team.devPostPage}
                  <Image src={this.props.team.image} rounded size='large' />
                </Grid.Column>
                <Grid.Column>
                  <Header>Challenges</Header>
                  <List>
                    {teamChallenges.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Skills</Header>
                  <List>
                    {teamSkills.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Tools</Header>
                  <List>
                    {teamTools.map((skill) => <List.Item key={skill}>{skill}</List.Item>)}
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Header>Members</Header>
                  {this.props.teamParticipants.map((participant) => <p key={participant}>
                    {participant.firstName} {participant.lastName}</p>)}
                </Grid.Column>
              </Grid>
            </Item.Meta>
          </Item.Content>
        </Item>
    );
  }

EmbargoAccess = ({access, accessCommunity, metadataOnly}) => {

  const recordPublic = access.record === 'public';
  const filesPublic = access.files === 'public';
  const communityPublic = accessCommunity === 'public';

  const filesRestricted = !metadataOnly && !filesPublic;

  const embargoActive = access.embargo?.active || false;
  const embargoUntil = access.embargo?.until;
  const embargoReason = access.embargo?.reason;
  const embargoWasLifted = !embargoActive && !_isEmpty(embargoUntil);
  const embargoEnabled = communityPublic && (!recordPublic || filesRestricted);

  const fmtDate = embargoUntil ?
    DateTime.fromISO(embargoUntil).toLocaleString(DateTime.DATE_FULL) : '???';

  return (
    <List>
      <List.Item
        disabled={!embargoEnabled}
        data-testid="option-list-embargo"
      >
        <List.Icon>
          <EmbargoCheckboxField
            fieldPath="access.embargo.active"
            checked={embargoActive}
            disabled={!embargoEnabled}
          />
        </List.Icon>
        <List.Content>
          <List.Header>
            <label
              htmlFor='access.embargo.active'
            >
              {i18next.t('Apply an embargo')} <Icon name="clock outline" />
            </label>
          </List.Header>
          <List.Description>
            <Trans>
              Record or files protection must be <b>restricted</b> to apply an
              embargo.
            </Trans>
          </List.Description>
          {embargoActive && (
            <>
              <Divider hidden />
              <EmbargoDateField fieldPath="access.embargo.until" required />
              <TextAreaField
                label={i18next.t('Embargo reason')}
                fieldPath={'access.embargo.reason'}
                placeholder={i18next.t(
                  'Optionally, describe the reason for the embargo.'
                )}
                optimized="true"
              />
            </>
          )}
          {embargoWasLifted && (
            <>
              <Divider hidden />
              <p>
                {i18next.t(`Embargo was lifted on {{fmtDate}}.`, {
                  fmtDate: fmtDate,
                })}
              </p>
              {embargoReason && (
                <p>
                  <b>{i18next.t('Reason')}</b>:{' '}
                  {embargoReason}.
                </p>
              )}
            </>
          )}
        </List.Content>
      </List.Item>
    </List>
  );
}

LikePost = ({
  dispatch,
  post: { postId, likes, authorId },
  postLikes,
  postLikeList
}) => {
  const handlePostLike = () => {
    dispatch(postActions.likePost(postId, authorId, postLikes));
  };

  const getPostLikes = () => {
    dispatch(postActions.getPostLikes(postId));
  };

  const handleClose = () => {
    dispatch({ type: "CLEAR_POST_LIKES" });
  };

  const list = postLikeList.length
    ? postLikeList.map(({ author }) => (
        <FollowingFollowerList
          key={author._id}
          user={author}
        ></FollowingFollowerList>
      ))
    : null;

  return (
    <Fragment>
      {postLikes.some(e => e === postId) ? (
        <Icon
          onClick={handlePostLike}
          style={{ color: "#ed4956", cursor: "pointer" }}
          name="heart"
          className="heart-icon"
        />
      ) : (
        <Icon
          onClick={handlePostLike}
          style={{ cursor: "pointer" }}
          name="heart outline"
          className="heart-icon"
        />
      )}

      <Modal
        trigger={
          <span style={{ cursor: "pointer" }} onClick={getPostLikes}>
            {likes}
          </span>
        }
        onClose={handleClose}
      >
        <Modal.Header>Likes</Modal.Header>
        <Modal.Content scrolling>
          <Modal.Description>
            <List verticalAlign="middle" size="huge">
              {list}
            </List>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    </Fragment>
  );
}

render() {
    const {
      label,
      labelIcon,
      fieldPath,
      uiFieldPath,
      form: { values, errors },
      move: formikArrayMove,
      push: formikArrayPush,
      remove: formikArrayRemove,
      replace: formikArrayReplace,
      required,
    } = this.props;

    const uiRights = getIn(values, uiFieldPath, []);

    return (
      <DndProvider backend={HTML5Backend}>
        <Form.Field required={required}>
          <FieldLabel
            htmlFor={fieldPath}
            icon={labelIcon}
            label={label}
          />
          <List>
            {getIn(values, fieldPath, []).map((value, index) => {
              const license = new VisibleLicense(uiRights, value, index);
              return (
                <LicenseFieldItem
                  key={license.key}
                  license={license}
                  moveLicense={formikArrayMove}
                  replaceLicense={formikArrayReplace}
                  removeLicense={formikArrayRemove}
                  searchConfig={this.props.searchConfig}
                  serializeLicenses={this.props.serializeLicenses}
                />
              );
            })}
            <LicenseModal
              searchConfig={this.props.searchConfig}
              trigger={
                <Button type="button" key="standard" icon labelPosition="left">
                  <Icon name="add" />
                  {i18next.t('Add standard')}
                </Button>
              }
              onLicenseChange={(selectedLicense) => {
                formikArrayPush(selectedLicense);
              }}
              mode="standard"
              action="add"
              serializeLicenses={this.props.serializeLicenses}
            />
            <LicenseModal
              searchConfig={this.props.searchConfig}
              trigger={
                <Button type="button" key="custom" icon labelPosition="left">
                  <Icon name="add" />
                  {i18next.t('Add custom')}
                </Button>
              }
              onLicenseChange={(selectedLicense) => {
                formikArrayPush(selectedLicense);
              }}
              mode="custom"
              action="add"
            />
          </List>
        </Form.Field>
      </DndProvider>
    );
  }

Item = styled(List.Item)`
  width: 100%;
`

LikeCommentReply = ({
  dispatch,
  comment: { commentId, likes, commentAt, authorId },
  post: { postId },
  commentReplyLikes,
  commentLikeList
}) => {
  const handleCommentLike = () => {
    dispatch(
      commentActions.likeCommentReply({
        commentId,
        commentAt,
        authorId,
        postId,
        commentReplyLikes
      })
    );
  };

  const getCommentLikes = () => {
    dispatch(commentActions.getCommentReplyLikes(commentId));
  };

  const handleClose = () => {
    dispatch({ type: "CLEAR_COMMENT_REPLY_LIKES" });
  };

  const list = commentLikeList.length
    ? commentLikeList.map(({ author }) => (
        <FollowingFollowerList
          key={author._id}
          user={author}
        ></FollowingFollowerList>
      ))
    : null;

  return (
    <Fragment>
      <Modal
        trigger={
          <span
            style={{ cursor: "pointer", marginRight: "3px" }}
            onClick={getCommentLikes}
          >
            {likes}
          </span>
        }
        onClose={handleClose}
      >
        <Modal.Header>Likes</Modal.Header>
        <Modal.Content scrolling>
          <Modal.Description>
            <List verticalAlign="middle" size="huge">
              {list}
            </List>
          </Modal.Description>
        </Modal.Content>
      </Modal>
      <Comment.Action onClick={handleCommentLike}>
        {commentReplyLikes.some(e => e === commentId) ? (
          <Icon style={{ color: "#ed4956" }} name="heart" />
        ) : (
          <Icon name="heart" />
        )}
        Like
      </Comment.Action>
    </Fragment>
  );
}

render() {
    const { circulation } = this.props;
    if (circulation.available_items_for_loan_count > 0) {
      return (
        <Overridable id="LoanAvailability.AvailableNow">
          <List.Item>
            <Popup
              content="Calculated based on current library stock"
              trigger={<List.Icon name="info circle" />}
            />
            <List.Content
              className={
                circulation.available_items_for_loan_count > 0
                  ? 'text-success'
                  : 'text-danger'
              }
            >
              Available for loan <span className="success">now</span>
            </List.Content>
          </List.Item>
        </Overridable>
      );
    } else if (circulation.next_available_date) {
      return (
        <Overridable id="LoanAvailability.AvailableFrom">
          <List.Item>
            <List.Icon name="info circle" />
            <List.Content>
              Available for loan from{' '}
              <b>
                {DateTime.fromISO(
                  circulation.next_available_date
                ).toLocaleString({
                  locale: 'en-GB',
                  month: 'long',
                  day: 'numeric',
                })}
              </b>
            </List.Content>
          </List.Item>
        </Overridable>
      );
    } else {
      return (
        <Overridable id="LoanAvailability.NotAvailable">
          <List.Item>
            <List.Icon name="info" />
            <List.Content>
              There are no physical copies for this literature currently
              available at the library. If you would like to loan it, please
              place a request. The library staff will evaluate it.
            </List.Content>
          </List.Item>
        </Overridable>
      );
    }
  }

ViewTeam = ({ isCompliant, participants, teamChallenges, team, teamMembers }) => {
  const allParticipants = participants;
  const captain = allParticipants.filter(p => team.owner === p._id)[0];
  const challenge = teamChallenges[0];

  function changeBackground(e) {
    e.currentTarget.style.backgroundColor = '#fafafa';
    e.currentTarget.style.cursor = 'pointer';
  }

  function onLeave(e) {
    e.currentTarget.style.backgroundColor = 'transparent';
  }

  // console.log(team, captain, teamChallenges);
  return (
      <Item onMouseEnter={changeBackground} onMouseLeave={onLeave}
            style={{ padding: '1.0rem 1.5rem 1.0rem 1.5rem' }}>
        <Modal closeIcon trigger={
          <Item.Content>
            <Item.Header>
              {team.name} {isCompliant ? <Icon className="green check"/> : <Icon name="exclamation circle"
                                                                                 color="red"/> }
            </Item.Header>
            <Item.Description>
              <strong>Captain:</strong> {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}   `
                : '   '},
              <strong>Challenge:</strong> {challenge.title}
            </Item.Description>
          </Item.Content>
            }>
          <Grid padded>
            <Grid.Row>
              <Grid.Column width={4}>
                <Header>{team.name}</Header>
                <List>
                  {teamChallenges.map((c) => <List.Item key={c._id}>{c.title}</List.Item>)}
                </List>
                <Header as="h4">Captain</Header>
                {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}` : ''}
              </Grid.Column>
              <Grid.Column width={5}>
                <Header>Members</Header>
                <List bulleted>
                  {teamMembers.map((t) => <List.Item key={t}>{t}</List.Item>)}
                </List>
              </Grid.Column>
              <Grid.Column width={5}>
                {isCompliant ? <Header>Team is Compliant</Header> : <Header>
                  <mark>Team is not Compliant</mark>
                </Header>}
                <Header>Devpost Page</Header>
                {team.devPostPage}
                <Header>Github Repo</Header>
                {team.gitHubRepo}
              </Grid.Column>
              <Grid.Column width={2}>
                {/* eslint-disable-next-line max-len */}
                <Button><Link to={`/admin-edit-team/${team._id}`}
                              style={{ color: 'rgba(0, 0, 0, 0.6)' }}>Edit</Link></Button>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Modal>
      </Item>
  );
}

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

    return (
      <div className="container">
        <Card.Group>
          {results.map((question, i) => {
            if (!question.answers) {
              return null;
            }

            return (
              <Card fluid className="qCard" key={i} id={`q_${question.id}`}>
                <CardLeftPanel title={question.title} questionNumber={i} />

                <List>
                  {question.answers.map((answer, index) => {
                    return (
                      <AnswerItem
                        answer={answer}
                        key={index}
                        question={question}
                        handleReportAnswer={this.handleReportAnswer}
                        handleClickLike={this.props.handleClickLike}
                        handleAnswerLike={this.props.handleAnswerLike}
                      />
                    );
                  })}
                </List>
                <div className="qPanelBottom">
                  <div className="buttonGroupCustom">
                    <LikeButton
                      onClick={this.props.handleClickLike(question.id, i)}
                      likes={question.like || 0}
                    />
                    {/*                     <ShareButton question={question}/> */}
                  </div>
                </div>
              </Card>
            );
          })}
        </Card.Group>
        <Modal open={this.state.open} onClose={this.close}>
          <Modal.Header>
            Are you sure you want to report this answer?
          </Modal.Header>
          <Modal.Content>
            <p>{this.state.reportAnswer && this.state.reportAnswer.title}</p>
          </Modal.Content>
          <Modal.Actions>
            <Button onClick={this.close} negative>
              No
            </Button>
            <Button
              positive
              onClick={this.handleSubmitReportIssue}
              labelPosition="right"
              icon="checkmark"
              content="Yes"
            />
          </Modal.Actions>
        </Modal>
      </div>
    );
  }

function Meta({ journal, timestamp, source, license, doi }) {
  const format = journal ? ' (YYYY-MM-DD)' : 'YYYY-MM-DD';
  const date = timestamp ? (
    <Moment format={format} unix utc>
      {timestamp * 1000}
    </Moment>
  ) : null;

  return (
    <List>
      {doi && (
        <List.Item>
          <List.Header>Doi</List.Header>
          <Link to={doi}>{doi.replace('https://doi.org/', '')}</Link>
        </List.Item>
      )}
      {journal ? (
        <List.Item>
          <List.Header>Journal</List.Header>
          {journal} {date}
        </List.Item>
      ) : (
        <List.Item>
          <List.Header>Date</List.Header>
          {date}
        </List.Item>
      )}
      {source && (
        <List.Item>
          <List.Header>Source</List.Header>
          {source}
        </List.Item>
      )}
      {license && (
        <List.Item>
          <List.Header>License</List.Header>
          {license}
        </List.Item>
      )}
    </List>
  );
}

// Render the form. Use Uniforms: https://github.com/vazco/uniforms
  render() {
    const formSchema = new SimpleSchema2Bridge(schema);
    const memberNamesAndGitHub = _.map(this.props.members, (p) => {
      const fullName = Participants.getFullName(p._id);
      const gitHub = p.gitHub;
      return `${fullName}, (${gitHub})`;
    });
    return (
        <Grid container centered>
          <Grid.Column>
            <div style={{
              backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
              borderRadius: '2rem',
            }}>
              <Header as="h2" textAlign="center">Edit Team</Header>
            </div>
            <AutoForm schema={formSchema} onSubmit={data => this.submit(data)} model={this.props.team}
                      style={{
                        paddingBottom: '4rem',
                      }}>
              <Segment style={{
                borderRadius: '1rem',
                backgroundColor: '#E5F0FE',
              }} className={'teamCreate'}>
                <Grid container centered>
                  <Grid.Column style={{ paddingLeft: '3rem', paddingRight: '3rem' }}>
                    <TextField name='name' disabled />
                    <LongTextField name='description' required/>
                    <Header as="h4">Team Members:</Header>
                    <List>
                      {memberNamesAndGitHub.map((n) => <List.Item key={n}>{n}</List.Item>)}
                    </List>
                    <TextField name='gitHubRepo' required/>
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '2rem 0rem',
                               }}/>
                </div>
                <ErrorsField/>
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }

DisclaimerModal = () => (
  <Modal closeIcon
    trigger={
      // eslint-disable-next-line
      <a href='#' onClick={e => e.preventDefault()}>
        Disclaimer
      </a>
    }
  >
    <Modal.Header>Disclaimer</Modal.Header>
    <Modal.Content>
      <Modal.Description>
      <List bulleted>
          <List.Item>
            The views and options expressed in this blog are those of the
            authors and do not necessarily reflect the official policy or
            position of any other agency, organization, employer or company
          </List.Item>
          <List.Item>
            Authors are not responsible for any errors or omissions, or for the
            results obtained from the use of this information. All information
            in this site is provided "as is", with no guarantee of completeness,
            accuracy, timeliness or of the results obtained from the use of this
            information
          </List.Item>
          <List.Item>
            We do not make any warranties about the completeness, reliability
            and accuracy of these information. None of the authors,
            contributors, adminstrators or anyone else connected with this
            website, in anyway whatsoever, can be responsible for your use of
            the information contained in or linked from these web pages. Any
            action you take upon the information on this website is strictly at
            your own risk. and we will not be liable for any losses and damages
            in connection with the use of our website.
          </List.Item>
        </List>
      </Modal.Description>
    </Modal.Content>
  </Modal>
)