semantic-ui-react#Item JavaScript Examples

render() {
    const { results } = this.props;
    return (
      <Item.Group divided className="bo-document-search">
        {results.map((hit) => {
          return this.renderListEntry(hit);
        })}
      </Item.Group>
    );
  }

function SubTotal() {
    const[{basket},] = useStateValue();
  return (
    <div>
      <Item>
        <Item.Content>
          <Segment raised>
            <Label color="orange" ribbon>
              Total Price
            </Label>
            <span className="subtotal__price">${getBasketTotal(basket)}</span>
          </Segment>
        </Item.Content>
      </Item>
    </div>
  );
}

render() {
        if (this.props.loading) {
            return <Loader/>;
        }
        return (
            <Segment>
                <Item>
                    {this.props.submitted ? (
                        <Item.Content>
                            <Item.Header as='h3'>{`The rule ID is: ${this.props.results.rule_id}`}</Item.Header>
                            <Item.Header as='h3'>{`The booking priority is: ${this.props.results.priority}`}</Item.Header>
                            <Item.Header as='h3'>{`Contrast: ${this.props.results.contrast}`}</Item.Header>
                            <Item.Header as='h3'>{`P5: ${this.props.results.p5_flag}`}</Item.Header>
                            {this.props.results.specialty_exams &&
                            <Item.Header as='h3'>{`Specialty exams needed: ${this.props.results.specialty_exams.join(', ').trim()}`}</Item.Header>}
                        </Item.Content>
                    ) : (
                        <Item.Header as='h3'>MRI booking results will be displayed here.</Item.Header>
                    )}
                </Item>
            </Segment>
        )
    }

ItemView = (props) => {
  return (
    <Item.Group divided>
      {props.items.map((item) => (
        <Item key={item._id}>
          <Item.Content>
            <Item.Header>
              <Link href={item.url} passHref>
                <a>{item.title}</a>
              </Link>
            </Item.Header>

            <Item.Description>{dnaParser(item.summary)}</Item.Description>
            <Item.Extra>
              {item.tags.map((tag) => (
                <Label key={tag}>{tag}</Label>
              ))}
            </Item.Extra>
          </Item.Content>
        </Item>
      ))}
    </Item.Group>
  );
}

render() {
    const { isLoading, children, ...restParams } = this.props;
    return isLoading ? (
      <Item>
        <Item.Content>
          <Item.Description>
            <ILSParagraphPlaceholder
              isLoading={isLoading}
              linesNumber={4}
              {...restParams}
            />
          </Item.Description>
        </Item.Content>
      </Item>
    ) : (
      children
    );
  }

export function StayItem(props) {
  const { __id, name, startTime: _startTime, endTime: _endTime } = props.dat;
  const startTime = parseInt(_startTime.match(/\/Date\((\d+)\)\//)[1]);
  const endTime = parseInt(_endTime.match(/\/Date\((\d+)\)\//)[1]);

  const { isPublic, isLoading, onClick } = props;
  const strPublic = isPublic ? 'public' : 'private';

  return (
    <Item>
      <Item.Content verticalAlign="middle">
        <Item.Header as={Link} to={`/detail/${__id}`}>
          <Icon name="map marker alternate" />
          {name}
        </Item.Header>
        <Item.Meta>#{__id}</Item.Meta>
        <Item.Extra>
          <div>
            {new Date(startTime).toLocaleTimeString()} -{' '}
            {new Date(endTime).toLocaleTimeString()}
          </div>
          <Checkbox
            toggle
            disabled={isLoading}
            readOnly
            onClick={onClick}
            label={strPublic}
            checked={isPublic}
          />
        </Item.Extra>
      </Item.Content>
    </Item>
  );
}

render() {
    const { lines } = this.props;
    if (lines.length === 0) {
      return (
        <Message data-test="no-results">There are no order lines.</Message>
      );
    }

    return (
      <Item.Group divided className="bo-order-lines" id="order-lines">
        {lines.map((line, index) => (
          <OrderLine key={line.document_pid} index={index} line={line} />
        ))}
      </Item.Group>
    );
  }

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

export function MoveItem(props) {
  const { __id, startTime: _startTime, endTime: _endTime } = props.dat;
  const startTime = parseInt(_startTime.match(/\/Date\((\d+)\)\//)[1]);
  const endTime = parseInt(_endTime.match(/\/Date\((\d+)\)\//)[1]);

  const { isPublic, isLoading, onClick } = props;
  const strPublic = isPublic ? 'public' : 'private';

  return (
    <Item>
      <Item.Content verticalAlign="middle">
        <Item.Header as={Link} to={`/detail/${__id}`}>
          <Icon name="road" />
          MOVE
        </Item.Header>
        <Item.Meta>#{__id}</Item.Meta>
        <Item.Extra>
          <div>
            {new Date(startTime).toLocaleTimeString()} -{' '}
            {new Date(endTime).toLocaleTimeString()}
          </div>
          <Checkbox
            toggle
            disabled={isLoading}
            readOnly
            onClick={onClick}
            label={strPublic}
            checked={isPublic}
          />
        </Item.Extra>
      </Item.Content>
    </Item>
  );
}

ProviderListInfo = ({ providerMetadata }) => (
  <List verticalAlign="middle" className="document-circulation">
    <List.Item>
      <List.Content>
        email <strong>{providerMetadata.email}</strong>
      </List.Content>
    </List.Item>
    <List.Item>
      <List.Content>
        phone <strong>{providerMetadata.phone}</strong>
      </List.Content>
    </List.Item>
  </List>
)

export function LocationPage() {
  const locationsLoadable = useRecoilValueLoadable(locationResults);

  const setQuery = useSetRecoilState(locationQuery);
  const { year, month, day } = useParams();

  useEffect(() => {
    // every time mounted, this make new object
    setQuery({
      year: Number(year),
      month: Number(month),
      day: Number(day),
    });
  }, [year, month, day]);

  return (
    <>
      <LocationFilter year={year} month={month} day={day} />
      {locationsLoadable.state === 'loading' ? (
        <h1>Loading...</h1>
      ) : (
        <Suspense fallback={<h1>loading</h1>}>
          <Item.Group>
            {locationsLoadable.contents.map(item => (
              <LocationItem item={item} key={`location_item_${item.__id}`} />
            ))}
          </Item.Group>
        </Suspense>
      )}
    </>
  );
}

render() {
    // console.log(this.props);
    return (
        <Item
              style={{ padding: '0rem 2rem 2rem 2rem' }}>
            <Item.Content>
              <Item.Header>
                <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                  {this.props.name}
                </Header>
              </Item.Header>
              <Item.Meta>
                {this.props.type}
              </Item.Meta>
              <Item.Description>
                {this.props.description}
              </Item.Description>
              <Item.Extra>Suggested By: {this.props.username} </Item.Extra>
              <Button negative onClick={() => this.removeItem()}>Delete</Button>
              <Button positive onClick={() => this.addSuggestion(this.props.type,
                  this.props.name, this.props.description, this.props.suggestionObj._id)}>Add Suggestion</Button>
            </Item.Content>
        </Item>
    );
  }

ProviderOrderSearch = ({ providerMetadata }) => {
  const renderListItem = (api, route, text) => {
    const query = api.query().withProviderPid(providerMetadata.pid).qs();
    const path = route(query);
    return (
      <List.Item>
        <List.Content>
          <Link to={path}>
            <Icon name="search" />
            See {text}
          </Link>
        </List.Content>
      </List.Item>
    );
  };

  return (
    <List>
      {renderListItem(
        borrowingRequestApi,
        ILLRoutes.borrowingRequestListWithQuery,
        'borrowing requests'
      )}
      {renderListItem(
        orderApi,
        AcquisitionRoutes.ordersListWithQuery,
        'purchase orders'
      )}
    </List>
  );
}

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 CheckoutProduct({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();
  const removeFromBasket = () => {
    dispatch({
      type:'REMOVE_FROM_BASKET',
      id
    })
  };

  return (
    <div>
      <Item className="checkoutProduct__item">
        <Item.Image
          size="tiny"
          src={imageUrl}
          className="checkoutProduct__image"
        />
        <Item.Content>
          <Item.Header className="checkoutProduct__title">{title}</Item.Header>
          <Item.Meta>
            {" "}
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Item.Meta>
          <Item.Description>
            <span className="checkoutProduct__price">${price}</span>
          </Item.Description>
          <Item.Extra>
            <Button
              color='red'
              className="checkoutProduct__button"
              onClick={removeFromBasket} 
            >
              REMOVE
            </Button>
          </Item.Extra>
        </Item.Content>
        <Divider inverted section />
      </Item>
    </div>
  );
}

LicenseResults = withState(
  ({ currentResultsState: results, serializeLicenses }) => {
    const serializeLicenseResult = serializeLicenses
      ? serializeLicenses
      : (result) => ({
          title: result.title_l10n,
          description: result.description_l10n,
          id: result.id,
        });
    return (
      <FastField name="selectedLicense">
        {({ form: { values, setFieldValue } }) => (
          <Item.Group>
            {results.data.hits.map((result) => {
              const title = result['title_l10n'];
              const description = result['description_l10n'];
              return (
                <Item
                  key={title}
                  onClick={() =>
                    setFieldValue(
                      'selectedLicense',
                      serializeLicenseResult(result)
                    )
                  }
                  className="license-item mb-15"
                >
                  <Radio
                    checked={_get(values, 'selectedLicense.title') === title}
                    onChange={() =>
                      setFieldValue(
                        'selectedLicense',
                        serializeLicenseResult(result)
                      )
                    }
                    {...(!description && { className: 'mt-0' })}
                  />
                  <Item.Content className="license-item-content">
                    <Header size="small" className="mt-0">
                      {title}
                    </Header>
                    {
                      description && 
                      <Item.Description className="license-item-description">
                        {description}
                      </Item.Description>
                    }
                  </Item.Content>
                </Item>
              );
            })}
          </Item.Group>
        )}
      </FastField>
    );
  }
)

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

AwardResults = withState(
  ({
    currentResultsState: results,
    deserializeAward,
    deserializeFunder,
    computeFundingContents,
  }) => {
    return (
      <FastField name="selectedFunding">
        {({ form: { values, setFieldValue } }) => {
          return (
            <Item.Group>
              {results.data.hits.map((award) => {
                let funder = award?.funder;
                const deserializedAward = deserializeAward(award);
                const deserializedFunder = deserializeFunder(funder);
                const funding = {
                  award: deserializedAward,
                  funder: deserializedFunder,
                };
                let {
                  headerContent,
                  descriptionContent,
                  awardOrFunder,
                } = computeFundingContents(funding);

                return (
                  <Item
                    key={deserializedAward.id}
                    onClick={() => setFieldValue('selectedFunding', funding)}
                    className="license-item"
                  >
                    <Radio
                      checked={
                        _get(values, 'selectedFunding.award.id') ===
                        funding.award.id
                      }
                      onChange={() => setFieldValue('selectedFunding', funding)}
                    />
                    <Item.Content className="license-item-content">
                      <Header size="small">
                        {headerContent}
                        {awardOrFunder === 'award'
                          ? award.number && (
                              <Label basic size="mini">
                                {award.number}
                              </Label>
                            )
                          : ''}
                        {awardOrFunder === 'award'
                          ? award.url && (
                              <a
                                href={`${award.url}`}
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                <Icon
                                  link
                                  name="external alternate"
                                  className="spaced-left"
                                />
                              </a>
                            )
                          : ''}
                      </Header>
                      <Item.Description className="license-item-description">
                        {descriptionContent}
                      </Item.Description>
                    </Item.Content>
                  </Item>
                );
              })}
            </Item.Group>
          );
        }}
      </FastField>
    );
  }
)

render() {
    return (
      <Item>
        {this.renderImage()}
        <Item.Content>
          <Item.Meta>{this.metadata.series_type || 'SERIES'}</Item.Meta>
          <Item.Header
            as={Link}
            to={FrontSiteRoutes.seriesDetailsFor(this.metadata.pid)}
          >
            <LiteratureTitle title={this.metadata.title} />
          </Item.Header>
          <Item.Meta>
            <SeriesAuthors authors={this.metadata.authors} prefix="by " />
          </Item.Meta>
          <Item.Description>
            <Truncate lines={2}>{this.metadata.abstract}</Truncate>
          </Item.Description>
          <Item.Meta>
            <Grid>
              <Grid.Column width={4}>
                <List>
                  {this.metadata.edition && (
                    <List.Item>
                      <List.Content>
                        <span>Edition: </span>
                        {this.metadata.edition}
                      </List.Content>
                    </List.Item>
                  )}
                  {this.metadata.publisher && (
                    <List.Item>
                      <List.Content>
                        <span>Publisher: </span>
                        {this.metadata.publisher}
                      </List.Content>
                    </List.Item>
                  )}
                  <List.Item>
                    <List.Content>
                      <span>Languages: </span>
                      <SeriesLanguages languages={this.metadata.languages} />
                    </List.Content>
                  </List.Item>
                </List>
              </Grid.Column>
            </Grid>
          </Item.Meta>
          <Item.Extra>
            <LiteratureTags tags={this.metadata.tags} />
          </Item.Extra>
        </Item.Content>
      </Item>
    );
  }

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

render() {
    const { record: document } = this.props;
    return (
      <Item>
        <div className="item-image-wrapper">
          <LiteratureCover
            asItem
            isRestricted={_get(document, 'metadata.restricted', false)}
            linkTo={BackOfficeRoutes.documentDetailsFor(document.metadata.pid)}
            size="tiny"
            url={_get(document, 'metadata.cover_metadata.urls.medium')}
          />
          <Header disabled as="h6" className="document-type tiny ellipsis">
            {document.metadata.document_type}
          </Header>
        </div>
        <Item.Content>
          <Item.Header
            as={Link}
            to={BackOfficeRoutes.documentDetailsFor(document.metadata.pid)}
            data-test={`navigate-${document.metadata.pid}`}
          >
            <LiteratureTitle
              title={document.metadata.title}
              truncateWidth="500px"
            />
          </Item.Header>
          <Grid columns={3}>
            <Grid.Column computer={6} largeScreen={5}>
              <Item.Meta className="document-authors">
                <DocumentAuthors
                  authors={document.metadata.authors}
                  hasOtherAuthors={document.metadata.other_authors}
                  prefix="by "
                  limit={invenioConfig.LITERATURE.authors.maxDisplay}
                />
              </Item.Meta>
              <DocumentLanguages
                languages={document.metadata.languages}
                prefix={<label>languages </label>}
              />
              <Item.Description>
                {document.metadata.edition && (
                  <LiteratureEdition
                    edition={document.metadata.edition}
                    withLabel
                  />
                )}
              </Item.Description>
              <Item.Description>
                <label>Publication year</label>{' '}
                {document.metadata.publication_year}
              </Item.Description>
              <Item.Description>
                {document.metadata.imprint?.publisher && (
                  <>
                    <label> Publisher </label>
                    {document.metadata.imprint.publisher}
                  </>
                )}
              </Item.Description>
            </Grid.Column>
            <Grid.Column computer={3} largeScreen={4}>
              {this.renderMiddleColumn(document)}
            </Grid.Column>
            <Grid.Column computer={3} largeScreen={4}>
              {this.renderRightColumn(document)}
            </Grid.Column>
          </Grid>
          <Item.Extra>
            <LiteratureTags tags={document.metadata.tags} />
          </Item.Extra>
        </Item.Content>
        <div className="pid-field discrete">#{document.metadata.pid}</div>
      </Item>
    );
  }

PostItemView = (props) => {
  return (
    <>
      <Item.Group divided>
        {props.items.map((item) => (
          <Item key={item._id}>
            <Item.Content>
              <Item.Header>
                <Link href={"/dashboard/post/" + item._id}>
                  <a>{item.title}</a>
                </Link>
              </Item.Header>

              <Item.Description>{item.summary}</Item.Description>
              <Item.Extra>
                {item.tags.map((tag) => (
                  <Label key={tag}>{tag}</Label>
                ))}
                <span>
                  Last edited: <TimeAgo date={item.updatedAt} />
                </span>
                <Dropdown text="Action">
                  <Dropdown.Menu>
                    {props.onRecover && (
                      <Dropdown.Item
                        text="Recover"
                        onClick={() => props.onRecover(item._id)}
                      />
                    )}
                    {!props.onRecover && (
                      <Link href={"/dashboard/post/" + item._id}>
                        <Dropdown.Item>Edit</Dropdown.Item>
                      </Link>
                    )}
                    <Dropdown.Item
                      text={props.onRecover ? "Permanently Delete" : "Delete"}
                      onClick={() => props.onRemove(item._id)}
                    />
                  </Dropdown.Menu>
                </Dropdown>
              </Item.Extra>
            </Item.Content>
          </Item>
        ))}
      </Item.Group>
    </>
  );
}

CandidatePage = () => {
  const showCandidates = REELECT ? reelectedCandidates : candidates;

  return (
    <Fragment>
      <CandidatesHeader>Candidates</CandidatesHeader>
      <Subheader>
        Please take a moment to read their speeches before voting.
      </Subheader>
      <Divider />
      <Item.Group divided stackable="true">
        {showCandidates ? (
          Object.keys(showCandidates)
            .sort()
            .map((currCandidate) =>
              candidates[currCandidate].name === "Abstain" ? null : (
                <Item key={currCandidate}>
                  <Item.Image
                    centered
                    size="medium"
                    src={showCandidates[currCandidate].photoSrc}
                  />
                  <Item.Content verticalAlign="top">
                    <CandidateName>
                      {candidates[currCandidate].name}
                    </CandidateName>
                    <CandidateSpeech>
                      {candidates[currCandidate].speech}
                    </CandidateSpeech>
                    <ul>
                      {candidates[currCandidate].preferences.map((preference) => (
                        <CandidatePreferences key={preference}>
                          {preference}
                        </CandidatePreferences>
                      ))}
                    </ul>
                  </Item.Content>
                  <Divider />
                </Item>
              )
            )
        ) : (
          <Subheader>Coming soon!</Subheader>
        )}
      </Item.Group>
    </Fragment>
  );
}

function Checkout() {
  const [{ basket }] = useStateValue();
  return (
    <div className="checkout">
      <Container>
        <Grid doubling stackable>
          <Grid.Row>
            <Grid.Column width={8}>
              <div>
                {basket?.length === 0 ? (
                  <div className="checkout__warningMessage">
                    <Message warning>
                      <Message.Header>
                        Your shopping basket is empty
                      </Message.Header>
                      <p>
                        You have no items in your basket. To buy one or more
                        items , please click "Add to basket" next to the item
                      </p>
                    </Message>
                  </div>
                ) : (
                  <div>
                    {basket?.length >= 2 ? (
                      <h2>Your shopping basket items </h2>
                    ) : (
                      <h2>Your shopping basket item </h2>
                    )}
                    <Card fluid className="checkout__card">
                      <Item.Group>
                        {basket?.map((item) => {
                          return (
                            <CheckoutProduct
                              key={item.id}
                              id={item.id}
                              title={item.title}
                              imageUrl={item.imageUrl}
                              price={item.price}
                              rating={item.rating}
                            ></CheckoutProduct>
                          );
                        })}
                      </Item.Group>
                    </Card>
                  </div>
                )}
              </div>
            </Grid.Column>
            {basket?.length > 0 && (
              <div className="checkout__right">
                <Grid.Column width={6}>
                  <Card>
                    <Item.Group divided>
                      <SubTotal></SubTotal>
                    </Item.Group>
                  </Card>
                </Grid.Column>
              </div>
            )}
          </Grid.Row>
        </Grid>
      </Container>
    </div>
  );
}

render() {
    const { record: documentRequest } = this.props;
    const patronPid = documentRequest.metadata.patron_pid;
    const patronName = documentRequest.metadata.patron.name;
    return (
      <Item>
        <Item.Content>
          <Item.Header
            as={Link}
            to={BackOfficeRoutes.documentRequestDetailsFor(
              documentRequest.metadata.pid
            )}
            data-test={`navigate-${documentRequest.metadata.pid}`}
          >
            <DocumentRequestIcon /> Literature request #
            {documentRequest.metadata.pid}
          </Item.Header>
          <Grid columns={3}>
            <Grid.Column computer={7} largeScreen={7}>
              <label>Patron</label>{' '}
              {patronPid > 0 ? (
                <Link to={BackOfficeRoutes.patronDetailsFor(patronPid)}>
                  {patronName}
                </Link>
              ) : (
                patronName
              )}{' '}
              requested:
              <Item.Meta className="document-authors">
                <Header className="list-entry-title" as="h5">
                  {documentRequest.metadata.title}
                </Header>
                by <label>{documentRequest.metadata.authors}</label>
              </Item.Meta>
              {documentRequest.metadata.issn && (
                <>
                  <label>ISSN</label> {documentRequest.metadata.issn}
                </>
              )}
              {documentRequest.metadata.isbn && (
                <>
                  <label>ISBN</label> {documentRequest.metadata.issn}
                </>
              )}
            </Grid.Column>
            <Grid.Column computer={5} largeScreen={5}>
              <List>
                <List.Item>
                  <List.Content>
                    <label>State</label> {documentRequest.metadata.state}
                  </List.Content>
                </List.Item>
                {documentRequest.metadata.decline_reason && (
                  <List.Item>
                    <List.Content>
                      <label>Decline reason </label>
                      {documentRequest.metadata.decline_reason}
                    </List.Content>
                  </List.Item>
                )}
                {documentRequest.metadata.document_pid && (
                  <List.Item>
                    <List.Content>
                      <label>Selected document</label>
                      <Link
                        to={BackOfficeRoutes.documentDetailsFor(
                          documentRequest.metadata.document_pid
                        )}
                      >
                        <LiteratureTitle
                          title={documentRequest.metadata.document.title}
                          edition={documentRequest.metadata.document.edition}
                          publicationYear={
                            documentRequest.metadata.document.publication_year
                          }
                        />
                      </Link>
                    </List.Content>
                  </List.Item>
                )}
              </List>
            </Grid.Column>
            <Grid.Column computer={4} largeScreen={4}>
              {documentRequest.metadata.publication_year && (
                <>
                  <label>published</label>{' '}
                  {documentRequest.metadata.publication_year}
                </>
              )}
              <br />
              {documentRequest.metadata.volume && (
                <>
                  <label>volume</label> {documentRequest.metadata.volume}
                </>
              )}
            </Grid.Column>
          </Grid>
        </Item.Content>
        <div className="pid-field">#{documentRequest.metadata.pid}</div>
      </Item>
    );
  }

/** Render the form. Use Uniforms: https://github.com/vazco/uniforms */
  render() {

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

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

    const teamID = Teams.findDoc({ name: this.props.teams.name })._id;
    const invitations = TeamInvitations.find({ teamID }).fetch();
    for (let i = 0; i < invitations.length; i++) {
      invitations[i] = invitations[i].participantID;
    }
    const invitedMembers = [];
    _.forEach(invitations, (id) => {
      invitedMembers.push(Participants.getFullName(id));
    });
    return (
        <Item onMouseEnter={changeBackground} onMouseLeave={onLeave}
              style={{ padding: '0rem 2rem 0rem 2rem' }}>
          <Modal closeIcon trigger={
            <Item.Content>
              <Item.Header>
                <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                  <Icon name='users' size='tiny'/>
                  {this.props.teams.name}
                </Header>
              </Item.Header>
              <Item.Meta>
                <Item.Meta>
                  <Grid doubling columns={5}>
                    <Grid.Column>
                      <Image src={this.props.teams.image} rounded size='small'/>
                      <Grid.Column floated={'left'} style={{ paddingBottom: '0.3rem' }}>
                        {this.props.challenges.slice(0, 3).map((challenge) => <p
                            style={{ color: 'rgb(89, 119, 199)' }}
                            key={challenge}>
                          {challenge}</p>)}
                      </Grid.Column>
                    </Grid.Column>
                    <Grid.Column>
                      <Header>Skills</Header>
                      {this.props.skills.slice(0, 3).map((skill) => <p key={skill}>
                        {skill}</p>)}
                    </Grid.Column>
                    <Grid.Column>
                      <Header>Tools</Header>
                      {this.props.tools.slice(0, 3).map((tool) => <p key={tool}>
                        {tool}</p>)}
                    </Grid.Column>
                    <Grid.Column>
                      <Header>Member(s) Invited:</Header>
                      {invitedMembers.slice(0, 3).map((members) => <p key={members}>
                        {members}</p>)}
                    </Grid.Column>
                  </Grid>
                </Item.Meta>
              </Item.Meta>
            </Item.Content>
          }>
            <Modal.Header>{this.props.teams.name}</Modal.Header>
            <Modal.Content image scrolling>
              <Image size='medium' src={this.props.teams.image} wrapped/>
              <Modal.Description>
                <Header>Description</Header>
                <p>
                  {this.props.teams.description}
                </p>
                <Header>Challenges</Header>
                {this.props.challenges.map((challenge) => <p key={challenge}>
                  {challenge}</p>)}
                <Header>Skills</Header>
                {this.props.skills.map((skill) => <p key={skill}>
                  {skill}</p>)}
                <Header>Tools</Header>
                {this.props.tools.map((tool) => <p key={tool}>
                  {tool}</p>)}
                <Header>Members</Header>
                {this.props.participants.map((participant) => <p key={participant}>
                  {participant.firstName} {participant.lastName}</p>)}
                <Header>Member(s) Invited:</Header>
                {invitedMembers.slice(0, 3).map((members) => <p key={members}>
                  {members}</p>)}
              </Modal.Description>
            </Modal.Content>
          </Modal>
        </Item>
    );
  }