import { useEffect, useState, useCallback } from 'react';
import dayjs from '../../node_modules/dayjs/';
import relativeTime from '../../node_modules/dayjs/plugin/relativeTime';
dayjs.extend(relativeTime)

const Bar = (prop) => {
    const [bounce, setBounce] = useState([]),
        fillBounce = useCallback(async () => {
            try {
                const response = await fetch('/api/outbox'),
                    result = await response.json()
                if (result && result.length > 0) {
                    setBounce(result)
                }
            } catch (e) {
                console.error(e)
            }
        })
    useEffect(() => {
        fillBounce()
    }, [])
    return (
        <h4>
            <p className="bounce">{bounce && bounce.length > 0 ? bounce.map(b => <a onClick={() => prop.setSearch(b.content.replace(/.*#/g, '').replace(/\<\/a\>\<\/p\>/, ''))}>{b.content.replace(/<[^>]*>/g, '').replace(new RegExp(new URL(window.location.href).host), '')} - {dayjs().to(b.published)}</a>).reduce((prev, curr) => [prev, ' | ', curr]) : []}</p>
        </h4>
    )
}

export default Bar;