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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
4x
4x
4x
4x
4x
4x
 
 
 
 
 
 
 
 
 
 
4x
6x
6x
6x
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
6x
5x
5x
5x
 
 
 
6x
5x
5x
 
 
6x
5x
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7x
 
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 { data, error } = useNews(city);
    const { formatMessage: f } = useIntl();
    const items = data?.news?.filter((item) => item.title && item.link) ?? [];
 
    /**
     * SDD-L09-T12. Two defects in the old version of this effect.
     *
     * The handlers were assigned to refs *inside* the effect, which runs after the first paint — so
     * on the first render both `onMouseEnter` and `onMouseLeave` were `null` and a pointer entering
     * the panel in that window did nothing.
     *
     * Worse, `mouseleave` created a fresh interval and reassigned the local `interval` binding.
     * Browsers dispatch `mouseleave` more than once in ordinary use — leaving through a child
     * element, leaving while the window loses focus — and each extra one **orphaned** the previous
     * interval: still running, still scrolling the panel, with no reference left to clear it. The
     * cleanup could only ever clear the last one.
     *
     * The id lives in a ref now, so start and stop always refer to the same timer, and starting
     * twice is idempotent.
     */
    const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
 
    const stopScrolling = React.useCallback(() => {
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
        }
    }, []);
 
    const startScrolling = React.useCallback(() => {
        Iif (intervalRef.current) return;
        intervalRef.current = setInverval(ref);
    }, []);
 
    React.useEffect(() => {
        startScrolling();
        return stopScrolling;
    }, [startScrolling, stopScrolling]);
 
    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={stopScrolling}
                onMouseLeave={startScrolling}
            >
                {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;