scraper-react/src/components/ScrappeDetails/ScrappeDetails.js

import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import ScrappeStatus from '../../components/ScrapeRequest/ScrappeStatus'
const ScrappeDetails = ({ details }) => {
    const { t } = useTranslation();
    return (
        (details) ?
            <div className='container'>
                <div className="row mb-2">
                    <div className="col-sm-10">
                        <h2 className="m-0"> Scrappe <a href={details.sourceUrl} className='text-sm'> {details.sourceUrl} </a></h2>
                        <br />
                        <div className="row m-0">
                            <div className="com-md-4">
                                {
                                    (details.location) ?
                                        <h3>{details.location}</h3>
                                        : ''}
                                {
                                    (details.estimate) ?
                                        <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(details.estimate)).toLocaleString()}</span>
                                        : ''}
                            </div>
                            <div className="col-md-4">
                                {
                                    (details.filters && details.filters.length > 0) ?
                                        <div className="filters-cont">
                                            <h3>Filters</h3>
                                            {details.filters.filter((i) => i.value != null).map((filter, i) => <span className="badge bg-primary m-1" key={i}>{filter.name}: {filter.value}</span>)}
                                        </div>
                                        : ''}
                            </div>
                            <div className="col-md-1">
                                {details.status ? <ScrappeStatus status={details.status} /> : ''}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            : ''


    );

}

ScrappeDetails.propTypes = {
    details: PropTypes.object
};

export default ScrappeDetails;