semantic-ui-react#Label JavaScript Examples

function PostCard({
  post: { body, createdAt, id, username, likeCount, commentCount, likes }
}) {
  const { user } = useContext(AuthContext);

  return (
    <Card id="post-card-home" fluid>
      <Card.Content>
        <Image
          floated="right"
          size="mini"
          src="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        />
        <Card.Header id="user-post">{username}</Card.Header>
        <Card.Meta as={Link} to={`/posts/${id}`}>
          {moment(createdAt).fromNow(true)}
        </Card.Meta>
        <Card.Description>{body}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <LikeButton user={user} post={{ id, likes, likeCount }} />
        <MyPopup content="Comment">
          <Button labelPosition="right" as={Link} to={`/posts/${id}`}>
            <Button color="blue" basic>
              <Icon name="comments" />
            </Button>
            <Label basic color="blue" pointing="left">
              {commentCount}
            </Label>
          </Button>
        </MyPopup>
        {user && user.username === username && <DeleteButton postId={id} />}
      </Card.Content>
    </Card>
  );
}

renderStatus(status) {
    switch (status) {
      case 'DECLINED':
        return <Label color="grey">Declined</Label>;
      case 'PENDING':
        return <Label color="yellow">Pending</Label>;
      case 'ACCEPTED':
        return <Label color="green">Accepted</Label>;
      default:
        throw new Error(`Unknown status: ${status}`);
    }
  }

renderLabel(item) {
    return (
      <Popup
        key={item['id']}
        content={
          <>
            <Icon name={homeSVG} size="18px" />
            {item['id']}
          </>
        }
        trigger={<Label>{item['title']}</Label>}
      />
    );
  }

export default function Home() {
  const context = useContext(Context);
  const { user } = context;

  const greeting = user ? (
    <div>
      <Label size="massive" color="teal">
        Welcome, {user.email}
      </Label>
    </div>
  ) : (
    <div>
      <Label basic size="large" color="red" pointing prompt>
        You need to login to go shopping
      </Label>
    </div>
  );

  return (
    <Container textAlign="center">
      <Image
        src="http://www.perfiltic.com/img/logo.png"
        size="large"
        centered
      />
      <Header as="h1" color="teal">
        eCommerce Application
      </Header>
      <Header as="h3">
        A simple eCommerce Application made with Spring Boot and React for
        PerfilTIC.com
      </Header>
      {greeting}
    </Container>
  );
}

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

function LikeButton({ user, post: { id, likeCount, likes } }) {
  const [liked, setLiked] = useState(false);

  useEffect(() => {
    if (user && likes.find((like) => like.username === user.username)) {
      setLiked(true);
    } else setLiked(false);
  }, [user, likes]);

  const [likePost] = useMutation(LIKE_POST_MUTATION, {
    variables: { postId: id }
  });

  const likeButton = user ? (
    liked ? (
      <Button color="pink" >
        <Icon name="heart" />
      </Button>
    ) : (
      <Button color="pink" basic>
        <Icon name="heart" />
      </Button>
    )
  ) : (
    <Button as={Link} to="/login" color="pink" basic>
      <Icon name="heart" />
    </Button>
  );

  return (
    <Button as="div" labelPosition="right" onClick={likePost}>
      <MyPopup content={liked ? 'Unlike' : 'Like'}>{likeButton}</MyPopup>
      <Label basic color="pink" pointing="left">
        {likeCount}
      </Label>
    </Button>
  );
}

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

function BalanceAnnotation (props) {
  const { accountSelected } = props;
  const { api } = useSubstrate();
  const [accountBalance, setAccountBalance] = useState(0);

  // When account address changes, update subscriptions
  useEffect(() => {
    let unsubscribe;

    // If the user has selected an address, create a new subscription
    accountSelected &&
      api.query.balances.freeBalance(accountSelected, balance => {
        setAccountBalance(balance.toString());
      }).then(unsub => {
        unsubscribe = unsub;
      }).catch(console.error);

    return () => unsubscribe && unsubscribe();
  }, [accountSelected, api.query.balances]);

  return accountSelected
    ? <Label pointing='left'>
      <Icon
        name='money bill alternate'
        color={accountBalance > 0 ? 'green' : 'red'}
      />
      {accountBalance}
    </Label>
    : null;
}

export default function Product(props) {
  const context = useContext(Context);
  const { user } = context;

  const pic = props.product.picture1
    ? props.product.picture1
    : "https://react.semantic-ui.com/images/avatar/large/matthew.png";

  const extra = user ? (
    <Card.Content extra>
      <Detail product={props.product} />
    </Card.Content>
  ) : null;

  return (
    <Card>
      <Image src={pic} wrapped ui={false} />
      <Label color="teal" size="large" attached="top left">
        Comida
      </Label>
      <Card.Content>
        <Card.Header>
          <Header floated="left">{props.product.name}</Header>
          <Header floated="right" color="teal">
            ${props.product.price}
          </Header>
        </Card.Header>
        <Card.Description>{props.product.description}</Card.Description>
      </Card.Content>
      {extra}
    </Card>
  );
}

render() {
    return (
      <GridContainer verticalAlign="middle" columns={1}>
        <Grid.Column>
          {this.renderMobileMessage()}
          <StyledSegment>
            <Label as="a" color="blue" size="massive" ribbon>
              {year}
            </Label>
            <TextContainer>
              <h1 className="welcome">Welcome to Ada's Team Elections!</h1>
              <h2 className="subheader">
                We appreciate you all coming out to participate!
              </h2>
              <h3 className="info">{covidAcknowledgment}</h3>
              <h3 className="info">{beforeYouBegin}</h3>
              <h3 className="info">{checkOutCandidates}</h3>
            </TextContainer>
            <Link to="/validate">
              <Button disabled={false} fluid color="blue" size="massive">
                Start
              </Button>
            </Link>
          </StyledSegment>
        </Grid.Column>
      </GridContainer>
    );
  }

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

    const labels = (
      <div className="bo-details-header-status-labels">
        <Label basic color="blue">
          {getDisplayVal('CIRCULATION.statuses', data.metadata.state)}
        </Label>
        {data.metadata.is_overdue && <Label color="red">Overdue</Label>}
        {data.metadata.item_pid && data.metadata.item_pid.type === 'illbid' && (
          <Label basic color="teal">
            ILL
          </Label>
        )}
      </div>
    );

    const recordInfo = (
      <>
        <label className="muted">Loan</label> {data.metadata.pid}{' '}
        <CopyButton text={data.metadata.pid} />
        <br />
        <label className="muted">Created on</label>{' '}
        {toShortDate(DateTime.fromISO(data.created))}
      </>
    );
    return (
      <DetailsHeader
        title={
          <>
            <Header.Subheader>
              <PatronIcon />
              {data.metadata.patron.name}
            </Header.Subheader>
            Loan #{data.metadata.pid} {labels}
          </>
        }
        subTitle={
          <>
            <DocumentDetailsLink pidValue={data.metadata.document_pid}>
              <LiteratureTitle
                title={data.metadata.document.title}
                edition={data.metadata.document.edition}
                publicationYear={data.metadata.document.publication_year}
              />
            </DocumentDetailsLink>
            by {data.metadata.document.authors}
          </>
        }
        icon={<LoanIcon />}
        recordInfo={recordInfo}
      />
    );
  }

DetailTable = ({ pageId }) => (
  <Segment>
    {// eslint-disable-next-line
    pageId === 'NT' ? (
      <a id='detail' className='target'></a>
    ) : (
      <a id='death' className='target'></a>
    )}
    <div className='title' style={{ marginBottom: '10px' }}>
      {pageId === 'AUS' ? (
        <>
          <Label as='a' color='red' ribbon>
            New
          </Label>
          <span className='ui small header'>
            Death cases details
            <Responsive as='span' {...Responsive.onlyMobile}>
              (best view on desktop)
            </Responsive>
            :
          </span>
        </>
      ) : (
        <h2 className='ui small header'>
          Confirmed cases details
          <Responsive as='span' {...Responsive.onlyMobile}>
            (best view on desktop)
          </Responsive>
          :
        </h2>
      )}
    </div>
    <Iframe
      className='airtable-embed'
      url={`https://airtable.com/embed/${STATE_KEY_MAP[pageId]}?backgroundColor=teal`}
      frameborder='0'
      onmousewheel=''
      width='100%'
      height='500'
    />
  </Segment>
)

render() {
    const { docReq } = this.props;
    const documentLink = (
      <Link to={BackOfficeRoutes.documentDetailsFor(docReq.document_pid)}>
        <LiteratureTitle
          title={docReq.document.title}
          edition={docReq.document.edition}
          publicationYear={docReq.document.publication_year}
        />
      </Link>
    );

    const provider = docReq.physical_item_provider;
    let providerLink;
    const { physicalItemProviders } = invenioConfig.DOCUMENT_REQUESTS;
    if (provider.pid_type === physicalItemProviders.acq.pid_type) {
      providerLink = (
        <>
          <AcquisitionOrderIcon /> Acquisition order:{' '}
          <Link to={AcquisitionRoutes.orderDetailsFor(provider.pid)}>
            {provider.pid}
          </Link>
        </>
      );
    } else if (provider.pid_type === physicalItemProviders.ill.pid_type) {
      providerLink = (
        <>
          <ILLBorrowingRequestIcon /> Interlibrary loan:{' '}
          <Link to={ILLRoutes.borrowingRequestDetailsFor(provider.pid)}>
            {provider.pid}
          </Link>
        </>
      );
    }

    return (
      <Segment>
        <Grid columns={2} textAlign="center" verticalAlign="middle">
          <Grid.Column width={10}>
            <Segment padded>
              <Label attached="top">Selected document</Label>
              <div>{documentLink}</div>
            </Segment>
            <Segment padded>
              <Label attached="top">Selected provider</Label>
              <div>{providerLink}</div>
            </Segment>
          </Grid.Column>
          <Grid.Column width={6}>
            <Button
              size="large"
              color="green"
              icon="check"
              labelPosition="left"
              onClick={this.handleAcceptRequest}
              content="Accept request"
            />
          </Grid.Column>
        </Grid>
      </Segment>
    );
  }

Location = ({
  pageId,
  location,
  totalTestedReport,
  suburbMapping
}) => {
  return (
    <Segment>
      {
        // eslint-disable-next-line
        <a id='location' className='target'></a>
      }
      <Label as='a' color='red' ribbon>
        New
      </Label>
      <Header as='span'>Data by location: </Header>
      {totalTestedReport && (
        <TestsAndCasesByLocation
          id={pageId}
          totalTestedReport={totalTestedReport}
          suburbMapping={suburbMapping}
        />
      )}
      {location && (
        <LocationTable
          id={pageId}
          location={location}
          suburbMapping={suburbMapping}
        />
      )}
      {pageId === 'NSW' && (
        <small>
          Data source: always up to date from{' '}
          <a href='https://data.nsw.gov.au/data/dataset/covid-19-cases-by-location'>
            NSW Health open data.
          </a>
        </small>
      )}
    </Segment>
  );
}

function ResultCard({
  fields: {
    id,
    title,
    timestamp,
    journal,
    doi,
    abstract,
    abstract_t5,
    body_text,
    authors,
    source,
    citations_count_total,
  },
  onSearchSimilar,
  isFieldSetAll,
}) {
  const content = formatText(abstract);
  const body = formatText(body_text);
  const plainTitle = title.replace(highlightRegex, '$1');
  return (
    <StyledCard>
      <Card.Header>
        <Link to={`/article/${id}`}>{plainTitle}</Link>
      </Card.Header>
      <Card.Meta>
        <JournalAndDate {...{ journal, timestamp }} />
        <DoiLink doi={doi} />
        <SourceAndCitations {...{ source, citations_count_total }} />
        <AuthorsList authors={authors} />
      </Card.Meta>
      {(content || onSearchSimilar) && (
        <Card.Content>
          {content && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the abstract of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Abstract</Label>}
              />
              {content}
            </div>
          )}
          {body && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the body of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Full Text</Label>}
              />
              {body}
            </div>
          )}
          {abstract_t5 && (
            <div>
              <Label horizontal>
                Machine Generated Summary
                <Explanation text="This is a short summary of the abstract, generated using a Natural Language Processing Model (T5)." />
              </Label>
              {formatText(abstract_t5)}
            </div>
          )}
          {onSearchSimilar && (
            <FunctionLink onClick={onSearchSimilar}>
              Search for similar articles
            </FunctionLink>
          )}
        </Card.Content>
      )}
    </StyledCard>
  );
}

render() {
    const { currentRoom, content, userId, profilePicture } = this.props;

    const loadedMessages = currentRoom.messages - content.messages.length;
    const messages = content.messages.map(message => (
      <MessengerMessages
        key={message._id || message.uuid}
        currentRoom={currentRoom}
        message={message}
        userId={userId}
        profilePicture={profilePicture}
      ></MessengerMessages>
    ));

    return (
      <div className="content">
        {content.initialMessagesFetchig ? (
          <Dimmer active>
            <Loader />
          </Dimmer>
        ) : null}
        <div className="contact-profile">
          <img
            src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
            alt=""
          />
          <p>{currentRoom.user.firstName + " " + currentRoom.user.lastName}</p>
          <div className="social-media">
            <Popup
              content="Scroll to bottom."
              trigger={
                <i
                  onClick={this.handleScrollToBottom}
                  className="fa fa-arrow-down"
                  aria-hidden="true"
                ></i>
              }
            />

            <CallingModal></CallingModal>
            <Label basic color="red" pointing="left">
              This isn't working.
            </Label>
          </div>
        </div>
        <div
          className="messages"
          id="ContainerElementID"
          ref={this.messagesContainer}
        >
          {loadedMessages ? (
            <Button
              fluid
              disabled={content.messageFetching}
              loading={content.messageFetching}
              onClick={this.fetchMessages}
            >
              Load {currentRoom.messages - content.messages.length} more
            </Button>
          ) : null}

          <ul>
            {messages}
            {content.isTyping ? (
              <li className="sent" key={currentRoom.user._id}>
                <img
                  src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
                  alt=""
                />
                <p>typing...</p>
              </li>
            ) : null}
          </ul>
        </div>
        <MessengerInput></MessengerInput>
      </div>
    );
  }

render() {
    const { brwReq } = this.props;
    const loanPid = _get(brwReq, 'patron_loan.pid');
    const loanStartDate = _get(brwReq, 'patron_loan.loan.start_date');
    const loanEndDate = _get(brwReq, 'patron_loan.loan.end_date');
    const loanStatus = _get(brwReq, 'patron_loan.loan.state');

    const leftTable = [
      {
        name: 'Loan',
        value: this.renderLoanLink(loanPid),
      },
      {
        name: 'Status',
        value: loanStatus ? (
          <Label basic color="blue" size="tiny">
            {getDisplayVal('CIRCULATION.statuses', loanStatus)}
          </Label>
        ) : (
          '-'
        ),
      },
    ];
    const rightTable = [
      {
        name: 'Start date',
        value: loanStartDate ? loanStartDate : '-',
      },
      {
        name: 'End date',
        value: loanEndDate ? loanEndDate : '-',
      },
    ];
    return (
      <>
        <Grid columns={2}>
          <Grid.Row>
            <Grid.Column>
              <MetadataTable labelWidth={8} rows={leftTable} />
            </Grid.Column>
            <Grid.Column>
              <MetadataTable labelWidth={8} rows={rightTable} />
            </Grid.Column>
          </Grid.Row>
        </Grid>
        <CreateLoan {...this.props} />

        {!_isEmpty(brwReq.patron_loan) && (
          <BorrowingRequestLoanExtension
            patron={brwReq.patron}
            patronLoan={brwReq.patron_loan}
            brwReqPid={brwReq.pid}
          />
        )}
      </>
    );
  }

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

prepareLeftData(data) {
    return [
      {
        name: 'State',
        value: (
          <Label basic color="blue" size="tiny">
            {getDisplayVal('CIRCULATION.statuses', data.metadata.state)}
          </Label>
        ),
      },
      {
        name: 'Document',
        icon: <DocumentIcon />,
        value: (
          <Link
            to={BackOfficeRoutes.documentDetailsFor(data.metadata.document_pid)}
          >
            <LiteratureTitle
              title={data.metadata.document.title}
              edition={data.metadata.document.edition}
              publicationYear={data.metadata.document.publication_year}
            />
          </Link>
        ),
      },
      {
        name: 'Physical copy',
        icon: <ItemIcon />,
        value: data.metadata.item_pid ? (
          <LoanLinkToItem itemPid={data.metadata.item_pid}>
            {data.metadata.item_pid && data.metadata.item_pid.type === 'illbid'
              ? 'ILL'
              : data.metadata.item.barcode}
          </LoanLinkToItem>
        ) : (
          '-'
        ),
      },
      {
        name: 'Patron',
        icon: <PatronIcon />,
        value: (
          <PatronDetailsLink patronPid={data.metadata.patron_pid}>
            {data.metadata.patron.name}
          </PatronDetailsLink>
        ),
      },
      {
        name: 'Pickup location',
        value: this.getPickupLocation(data.metadata),
      },
      {
        name: 'Delivery',
        value: this.getDelivery(data.metadata.delivery),
      },
    ];
  }

FileUploaderToolbar = ({
  config,
  filesList,
  filesSize,
  filesEnabled,
  quota,
  decimalSizeDisplay,
}) => {
  const { setFieldValue } = useFormikContext();

  const handleOnChangeMetadataOnly = () => {
    setFieldValue('files.enabled', !filesEnabled)
    setFieldValue('access.files', 'public')
  }

  return (
    <>
      <Grid.Column verticalAlign="middle" floated="left" mobile={16} tablet={6} computer={6}>
        {config.canHaveMetadataOnlyRecords && (
          <List horizontal>
            <List.Item>
              <Checkbox
                label={i18next.t('Metadata-only record')}
                onChange={handleOnChangeMetadataOnly}
                disabled={filesList.length > 0}
                checked={!filesEnabled}
              />
            </List.Item>
            <List.Item>
              <Popup
                trigger={<Icon name="question circle outline" className="neutral" />}
                content={i18next.t('Disable files for this record')}
                position="top center"
              />
            </List.Item>
          </List>
        )}
      </Grid.Column>
      {filesEnabled && (
        <Grid.Column mobile={16} tablet={10} computer={10} className="storage-col">
          <Header size="tiny" className="mr-10">{i18next.t('Storage available')}</Header>
          <List horizontal floated="right">
            <List.Item>
              <Label
                {...(filesList.length === quota.maxFiles
                  ? { color: 'blue' }
                  : {})}
              >
                {i18next.t(`{{length}} out of {{maxfiles}} files`, {
                  length: filesList.length,
                  maxfiles: quota.maxFiles,
                })}
              </Label>
            </List.Item>
            <List.Item>
              <Label
                {...(humanReadableBytes(filesSize, decimalSizeDisplay) ===
                humanReadableBytes(quota.maxStorage, decimalSizeDisplay)
                  ? { color: 'blue' }
                  : {})}
              >
                {humanReadableBytes(filesSize, decimalSizeDisplay)}{' '}
                {i18next.t('out of')}{' '}
                {humanReadableBytes(quota.maxStorage, decimalSizeDisplay)}
              </Label>
            </List.Item>
          </List>
        </Grid.Column>
      )}
    </>
  );
}

render() {
    const { disabled, seriesDetails, relationType, relations } = this.props;
    const { isLoading, note } = this.state;
    const fetchOptionsQuery =
      seriesDetails.metadata.mode_of_issuance === 'SERIAL'
        ? seriesApi.serials
        : seriesApi.multipartMonographs;
    return (
      <RelationModal
        disabled={disabled}
        triggerButtonContent="Add relation"
        modalHeader="Create new relation"
        isLoading={isLoading}
        relationType={relationType}
        referrerRecord={seriesDetails}
        extraRelationField={{
          field: {
            note: note,
          },
          options: {
            isValid: !_isEmpty(note),
          },
        }}
      >
        <Modal.Content>
          <Container textAlign="left">
            Select a series to create a new relation.
            <Form>
              <Form.Group>
                <Container className="spaced">
                  <RelationSelector
                    existingRelations={relations.other}
                    mode="single"
                    optionsQuery={fetchOptionsQuery}
                    resultRenderer={this.selectResultRender}
                    referrerRecordPid={seriesDetails.metadata.pid}
                  />
                </Container>
              </Form.Group>
              Note describing the relation
              <br /> <br />
              <Form.Field required inline key="note">
                <label>Note</label>
                <Input
                  name="note"
                  onChange={(e, { value }) => this.setState({ note: value })}
                />
              </Form.Field>
            </Form>
          </Container>
          <Container textAlign="center">
            <Divider horizontal> Summary </Divider>
            <RelationSummary
              currentReferrer={seriesDetails}
              renderSelections={() => <SingleSelection />}
              relationDescription={
                <>
                  <Icon name="arrows alternate horizontal" />
                  <br />
                  is (a) <Label color="blue">{note || '...'} </Label> of
                </>
              }
            />
          </Container>
        </Modal.Content>
      </RelationModal>
    );
  }

CommunityListItem = ({ result }) => {
  const { setLocalCommunity, getChosenCommunity } =
    useContext(CommunityContext);

  const { metadata, ui } = result;
  const linkToCommunityPage = result.links.self_html;
  const linkToLogo = result.links.logo;
  const itemSelected = getChosenCommunity()?.id === result.id;
  const type_l10n = ui.type?.title_l10n;
  const isRestricted = result.access.visibility === 'restricted';

  return (
    <Item key={result.id} className={itemSelected ? 'selected' : ''}>
      <Image
        size="tiny"
        className="community-logo"
        src={linkToLogo}
        fallbackSrc="/static/images/square-placeholder.png"
        as={Item.Image}
      />

      <Item.Content>
        <Item.Header>
          {metadata.title}
          {
            isRestricted && 
            <Label size='tiny' color={'red'} className='rel-ml-1'>
              <Icon name='ban'/>
              {_capitalize(result.access.visibility)}
            </Label>
          }
          <Button
            as="a"
            href={linkToCommunityPage}
            target="_blank"
            rel="noreferrer"
            size="small"
            className="transparent pt-0 ml-15 mb-5"
            content={i18next.t('View community')}
            icon="external alternate"
            title={i18next.t('Opens in new tab')}
          />
        </Item.Header>
        <Item.Description as="p" className="rel-pr-1">
          {_truncate(metadata.description, { length: 150 })}
        </Item.Description>
        {type_l10n && <Item.Extra>{type_l10n}</Item.Extra>}
      </Item.Content>
      <Item.Extra className="flex width auto mt-0">
        <div className="align-self-center">
          <Button
            content={itemSelected ? i18next.t('Selected') : i18next.t('Select')}
            size="small"
            positive={itemSelected}
            onClick={() => setLocalCommunity(result)}
            aria-label={i18next.t('Select ') + metadata.title}
          />
        </div>
      </Item.Extra>
    </Item>
  );
}

render() {
    const { isLoading, error, seriesDetails, relations } = this.props;

    const languages = relations['language'] || [];
    const editions = relations['edition'] || [];
    const other = relations['other'] || [];
    const sequence = relations['sequence'] || [];

    const panes = [
      {
        menuItem: {
          key: 'languages',
          content: (
            <>
              Languages <Label>{languages.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationLanguages />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'editions',
          content: (
            <>
              Editions <Label>{editions.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationEdition recordDetails={seriesDetails} />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'sequences',
          content: (
            <>
              Sequences <Label>{sequence.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationSequence recordDetails={seriesDetails} />
          </Tab.Pane>
        ),
      },
      {
        menuItem: {
          key: 'Other',
          content: (
            <>
              Other <Label>{other.length}</Label>{' '}
            </>
          ),
        },
        render: () => (
          <Tab.Pane className="bo-relations-tab">
            <RelationOther />
          </Tab.Pane>
        ),
      },
    ];

    return (
      <Loader isLoading={isLoading}>
        <Error error={error}>
          <Tab id="series-siblings" panes={panes} />
        </Error>
      </Loader>
    );
  }

//List => Panel => ItemView

export default function PostList(props) {
  const headline = props.headline ? props.headline : "All Posts";

  return (
    <div>
      <Header as="h1" icon>
        <Header.Content>
          {headline}{" "}
          {props.tagData && (
            <span>
              {" "}
              In <i>{props.tagData.name}</i>
            </span>
          )}
        </Header.Content>
      </Header>
      {props.posts.length < 1 && <p>Not Records Found!</p>}
      <Item.Group divided>
        {props.posts &&
          props.posts.map((item) => {
            let author = "Admin";
            if (item.author) {
              author = item.author.firstName + " " + item.author.lastName;
            }
            return (
              <Item key={item._id}>
                <div className="image">
                  <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}>
                    <a>
                      <Image alt={item.title} src={item.image} />
                    </a>
                  </Link>
                </div>

                <Item.Content>
                  <Item.Header>
                    <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}>
                      <a>{item.title}</a>
                    </Link>
                  </Item.Header>
                  <Item.Meta>
                    <span className="cinema">
                      {author} | <TimeAgo date={item.createdAt} />
                    </span>
                  </Item.Meta>
                  <Item.Description>{item.summary}</Item.Description>
                  <Item.Extra>
                    {item.tags.map((tag) => (
                      <Link
                        passHref
                        key={tag}
                        href={`/blog/tags/[slug]`}
                        as={`/blog/tags/${tag}`}
                      >
                        <Label as="a">{tag}</Label>
                      </Link>
                    ))}
                  </Item.Extra>
                </Item.Content>
              </Item>
            );
          })}
      </Item.Group>
      {props.showLoadMore && !props.isLoading && (
        <Segment textAlign="center">
          <Button color="blue" onClick={props.loadMore}>
            Load More
          </Button>
        </Segment>
      )}
    </div>
  );
}

render() {
        return (
            <Modal
                as={Form}
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState({open: false})}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button
                        icon size='tiny'
                        labelPosition='left'
                    >
                        <Icon name='edit' />
                        Modify
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Modify an existing Synonym
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Word / Phrase'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        fluid
                        control={Input}
                        name='synonym'
                        label='Assigned Synonyms'
                        placeholder='Input your synonym here and press Enter to add it!'
                        value={this.state.synonym}
                        onChange={this.handleChange}
                        onKeyPress={e => {if (e.key === 'Enter') e.preventDefault();}}
                        onKeyUp={this.addSynonymTag}
                    />
                    <Container>
                        {this.state.synonyms.map((syn, index) =>
                            <Label as='a' color='blue'>
                                {syn}
                                <Icon name='delete' link onClick={() => {this.removeSynonymTag(index);}}/>
                            </Label>
                        )}
                    </Container>
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState({open: false})}
                    />
                    <Button
                        type='submit'
                        content="Modify Synonym"
                        color='blue'
                        disabled={!this.state.word || this.state.synonyms.length === 0}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

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

render () {
    const { name, keywords, enabled, stats } = this.props;
    return (
      <div>

        <Container textAlign='center'>
          <Button floated='left' circular icon='cog' onClick={this.onSettings} />
          <Button floated='right' circular icon='sign out' onClick={this.onLogout} />
          <Checkbox toggle disabled={!keywords} defaultChecked={Boolean(enabled)} onChange={this.onCheck} />
        </Container>

        <Segment textAlign='center'>

          {!name && !keywords &&
          <Placeholder fluid>
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
          </Placeholder>
          }

          {name &&
          <Header as='h4'>
            <Icon name='user' />{name}
          </Header>
          }

          {keywords && keywords.map((v, i) =>
            <Label color='red' tag>
              {v}
              {stats &&
                <Label.Detail>{stats[i]}</Label.Detail>
              }
            </Label>
          )}
        
        </Segment>

      </div>
    );
  }

render() {
    const { data } = this.props;
    const { metadata } = data;
    const url = FrontSiteRoutes.documentDetailsFor(metadata.pid);
    let authors = data.metadata.authors
      .slice(0, invenioConfig.LITERATURE.authors.maxDisplay)
      .map((elem) => elem['full_name'])
      .join('; ');
    if (data.metadata.other_authors) {
      authors = authors + ' et al.';
    }

    const volume = _get(metadata, 'relations.multipart_monograph[0].volume');
    const multipartTitle = _get(
      metadata,
      'relations.multipart_monograph[0].record_metadata.title'
    );

    return (
      <Overridable id="DocumentCard.layout" {...this.props}>
        <Card
          centered
          className="fs-book-card"
          as={Link}
          to={url}
          data-test={metadata.pid}
        >
          <Card.Meta className="discrete">{metadata.document_type}</Card.Meta>
          <Overridable id="DocumentCard.cover" {...this.props}>
            {this.renderImage()}
          </Overridable>
          <Card.Content>
            <Card.Header>
              <LiteratureTitle title={metadata.title} />
            </Card.Header>
            <Card.Meta>
              <div className="default-margin-bottom">
                <Truncate lines={1}>{authors}</Truncate>
              </div>
              <Overridable id="DocumentCard.AfterAuthors" metadata={metadata} />
              <div>
                {metadata.publication_year}
                {metadata.edition && <> - Edition {metadata.edition}</>}
                {volume && <> - Vol. {volume}</>}
                {multipartTitle && (
                  <>
                    {' '}
                    <br /> {multipartTitle}{' '}
                  </>
                )}

                {metadata.imprint?.publisher && (
                  <>
                    {' '}
                    <br /> {metadata.imprint.publisher}
                  </>
                )}
              </div>
            </Card.Meta>
          </Card.Content>
          <Card.Content extra>
            {_get(metadata, 'circulation.available_items_for_loan_count') >
              0 && (
              <Label basic color="green">
                On shelf
              </Label>
            )}
            {metadata.eitems.total > 0 && <Label>E-book</Label>}
            <Overridable id="DocumentCard.Extras" metadata={metadata} />
          </Card.Content>
        </Card>
      </Overridable>
    );
  }

render() {
        return (
            <Modal
                as={Form}
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState(initialState)}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button
                        floated='right'
                        icon
                        labelPosition='left'
                        primary
                        size='small'
                    >
                        <Icon name='add circle' /> Add Synonym
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a new Synonym Relation
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='word'
                        label='Word / Phrase'
                        value={this.state.word}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        // action={{
                        //     color: 'blue',
                        //     labelPosition: 'right',
                        //     icon: 'add',
                        //     content: 'Add',
                        //     onClick: () => this.addSynonymTag()
                        // }}
                        fluid
                        control={Input}
                        name='synonym'
                        label='Assigned Synonyms'
                        placeholder='Input your synonym here and press Enter to add it!'
                        value={this.state.synonym}
                        onChange={this.handleChange}
                        onKeyPress={e => {if (e.key === 'Enter') e.preventDefault();}}
                        onKeyUp={this.addSynonymTag}
                    />
                    <Container>
                        {this.state.synonyms.map((syn, index) =>
                            <Label as='a' color='blue'>
                                {syn}
                                <Icon name='delete' link onClick={() => {this.removeSynonymTag(index);}}/>
                            </Label>
                        )}
                    </Container>
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Synonym"
                        color='blue'
                        disabled={!this.state.word || this.state.synonym.length === 0}
                    />
                </Modal.Actions>
            </Modal>
        )
    }