1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
4x
4x
4x
4x
4x
4x
 
 
 
 
 
 
 
 
 
 
4x
4x
4x
4x
4x
4x
4x
 
4x
4x
 
4x
 
 
 
4x
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
import React from 'react';
import styles from './news.module.css';
import useNews from '@/hooks/useNews';
import RenderManager from '@/components/RenderManager';
import { setInverval } from '@/helpers';
import { useIntl } from 'react-intl';
 
type WeatherProps = {
    city: string;
};
 
/**
 * @description - Show the latest news about the city
 * @param {city} string - City name
 * @returns {JSX.Element} - News component
 */
const News = ({ city }: WeatherProps) => {
    const ref = React.useRef<HTMLDivElement>(null);
    const handleMouseEnter = React.useRef<(() => void) | null>(null);
    const handleMouseLeave = React.useRef<(() => void) | null>(null);
    const { data, error } = useNews(city);
    const { formatMessage: f } = useIntl();
    const items = data?.news?.filter((item) => item.title && item.link) ?? [];
 
    React.useEffect(() => {
        let interval = setInverval(ref);
 
        handleMouseEnter.current = () => {
            clearInterval(interval);
        };
 
        handleMouseLeave.current = () => {
            interval = setInverval(ref);
        };
 
        return () => clearInterval(interval);
    }, []);
 
    return (
        <RenderManager
            error={error}
            loading={!data}
            errorTitle={f({ id: 'news.error' })}
            loadingTitle={f({ id: 'news.loading' })}
        >
            <div
                ref={ref}
                data-testid="news"
                className={styles.container}
                onMouseEnter={handleMouseEnter.current || undefined}
                onMouseLeave={handleMouseLeave.current || undefined}
            >
                {items.length === 0 && <p className={styles.empty}>{f({ id: 'news.empty' })}</p>}
                {items.map((news) => (
                    <a
                        href={news.link}
                        target="_blank"
                        rel="noreferrer"
                        key={news.link}
                        className={styles.link}
                        title={news.title}
                    >
                        <h3 className={styles.title}>{news.title}</h3>
                        <span className={styles.published}>{news.published}</span>
                        <p className={styles.description}>{news.description}</p>
                    </a>
                ))}
            </div>
        </RenderManager>
    );
};
 
export default News;