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
2x
2x
2x
2x
2x
2x
2x
2x
2x
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
3x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
import React from 'react';
import styles from './weather.module.css';
import Img from 'next/image';
import News from '@/components/News';
import useWeather from '@/hooks/useWeather';
import RenderManager from '@/components/RenderManager';
import { GrFormClose } from 'react-icons/gr';
import { clx } from '@/helpers';
import { useIntl } from 'react-intl';
 
const Container = ({ children, open }: { children: React.ReactNode; open?: boolean }) => {
    return (
        <div className={clx(styles.container, open ? styles.open : styles.close)} data-testid="weather">
            <div className={styles.cities}>{children}</div>
        </div>
    );
};
 
/**
 *
 * @description -  Show the weather of array of cities and the last news of each city
 * @param {string[]} cities - Cities to get weather
 * @param {boolean} open - Open or close the component
 * @param {Function} handleClose - Function to close the component
 * @returns {JSX.Element} - News component
 */
const Weather = ({ cities, open, handleClose }: { cities: string[]; open?: boolean; handleClose?: () => void }) => {
    const { data, error } = useWeather(cities);
    const { formatMessage: f } = useIntl();
 
    return (
        <Container open={open}>
            {handleClose && <GrFormClose className={styles.iconClose} onClick={handleClose} />}
            <RenderManager
                error={error}
                loading={!data}
                errorTitle={f({ id: 'weather.error' })}
                loadingTitle={f({ id: 'weather.loading' })}
            >
                <>
                    {data &&
                        data?.map((city: any, index: any) => (
                            <div className={styles.city} key={`${city?.city}+${index}`}>
                                <div className={styles.weather}>
                                    <div className={styles.cityName}>{city?.city?.replace(/\+/g, ' ')}</div>
                                    <div className={styles.cityGrade}>{`${city?.grades} ºC | ºF`}</div>
                                    {city?.imageUrl && (
                                        <Img src={city?.imageUrl} width={70} height={70} alt={city?.name} />
                                    )}
                                    <div className={styles.info}>
                                        <div className={styles.cityPrecipitation}>
                                            {f({ id: 'weather.precipitation' }, { precipitation: city?.precipitation })}
                                        </div>
                                        <div className={styles.cityHumidity}>
                                            {f({ id: 'weather.humidity' }, { humidity: city?.humidity })}
                                        </div>
                                        <div className={styles.cityWindSpeed}>
                                            {f({ id: 'weather.windSpeed' }, { windSpeed: city?.windSpeed })}
                                        </div>
                                    </div>
                                </div>
                                {city?.city && <News city={city.city} />}
                            </div>
                        ))}
                </>
            </RenderManager>
        </Container>
    );
};
 
export default Weather;