jobiqo-cl/lib/src/components/04-organisms/03-job/01-detail/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var MapMarker = require('../../../../icons/MapMarker.js');
var Office = require('../../../../icons/Office.js');
var Tags = require('../../../../icons/Tags.js');
var useIntersectionObserver = require('../../../../hooks/useIntersectionObserver.js');
var styles = require('./styles.js');

/**
 * @file index.test.tsx
 *
 * @fileoverview The JobDetail component.
 */
/**
 * The job detail presents information about a job when
 * the user clicks on a job in the search to visit it.
 */
const JobDetail = ({ picture, title, company, location, occupation, children, edit, actions, titleElement = 'h1', fullContainer = false }) => {
    const root = React.useRef(); // We need a ref to our "root" or our parent,
    const target = React.useRef(); // We need a ref to our "target" or our child-to-watch,
    // Let's use a bit of state.
    const [isInfoVisible, setInfoVisible] = React.useState(false);
    // Here's our hook! Let's give it some configuration...
    useIntersectionObserver.useIntersectionObserver({
        root,
        target,
        threshold: 0,
        // What do we do when it intersects?
        // The signature of this callback is (collectionOfIntersections, observerElement).
        onIntersect: ([{ isIntersecting }]) => setInfoVisible(isIntersecting)
    });
    const TitleElement = titleElement;
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(styles.JobDetailWrapper, { fullContainer: fullContainer, "data-testid": "job-detail-wrapper" },
            React__default.createElement(styles.DetailInfo, { ref: target, "data-testid": "job-detail-info" },
                picture && (React__default.createElement(styles.PictureWrapper, null,
                    React__default.createElement(styles.JobLogo, { src: picture.url, alt: picture.title, title: picture.title }))),
                React__default.createElement("div", null,
                    React__default.createElement(styles.CardTitleWrapper, null,
                        React__default.createElement(TitleElement, null,
                            React__default.createElement(styles.CardTitle, null, title))),
                    React__default.createElement(styles.JobInfo, null,
                        company && (React__default.createElement(styles.JobInfoItem, null,
                            React__default.createElement(styles.JobIcon, null,
                                React__default.createElement(Office.OfficeIcon, { color: "secondary", title: "company" })),
                            company)),
                        location && (React__default.createElement(styles.JobInfoItem, null,
                            React__default.createElement(styles.JobIcon, null,
                                React__default.createElement(MapMarker.MapMarkerIcon, { color: "secondary", title: "location" })),
                            location))),
                    occupation && (React__default.createElement(styles.CardOcccupations, null,
                        React__default.createElement(styles.JobIcon, null,
                            React__default.createElement(Tags.TagsIcon, { color: "secondary", title: "location" })),
                        ' ',
                        occupation))),
                edit && React__default.createElement(styles.EditWrapp, null, edit),
                actions && React__default.createElement(styles.JobActions, null, actions)),
            !isInfoVisible && (React__default.createElement(styles.ShrinkedHeader, null,
                picture && (React__default.createElement("div", null,
                    React__default.createElement(styles.JobLogo, { src: picture.url, alt: picture.title, title: picture.title }))),
                React__default.createElement("div", null,
                    React__default.createElement(styles.ShrinkedCardTitle, null, title),
                    React__default.createElement(styles.ShrinkedCardCompanyName, null,
                        React__default.createElement(styles.JobIcon, null,
                            React__default.createElement(Office.OfficeIcon, { color: "secondary", title: "company" })),
                        company)),
                React__default.createElement(styles.FlexSpace, null),
                React__default.createElement(styles.ShrinkedHeaderActions, null, actions))),
            children && (React__default.createElement(styles.DetailDescription, { "data-testid": "job-detail-description" }, children)))));
};

exports.JobDetail = JobDetail;