refactor.js

import React from 'react';
import Spinner from './Spinner';

const Card = ({ loadingData, showData, weather, forecast }) => {
  const today = new Date();
  const day = today.getDate();
  const month = today.getMonth() + 1;
  const year = today.getFullYear();
  const date = `${day}  /  ${month}  /  ${year} `;

  let url = '';
  let iconUrl = '';

  let iconUrl24Hours = '';
  let iconUrl48Hours = '';
  let iconUrl72Hours = '';

  let forecastDate24Hours = '';
  let forecastDate48Hours = '';
  let forecastDate72Hours = '';

  if (loadingData) {
    return <Spinner />;
  }

  transformData(forecast){
    const arr = [6,14,22];
    return arr.map((index)=>{
      const obj = {};
      obj.icon = url + forecast.list[index].weather[0].icon + '.png';
      obj.date = `${forecast.list[index].dt_txt.substring(8, 10)}
      /
      ${forecast.list[index].dt_txt.substring(5, 7)}
      /
      ${forecast.list[index].dt_txt.substring(0, 4)}`;

      return obj;
    })
  }

  newArr = transformData();

  if (showData) {
    url = 'http://openweathermap.org/img/w/';
    iconUrl = url + weather.weather[0].icon + '.png';

    iconUrl24Hours = url + forecast.list[6].weather[0].icon + '.png';
    iconUrl48Hours = url + forecast.list[14].weather[0].icon + '.png';
    iconUrl72Hours = url + forecast.list[22].weather[0].icon + '.png';

    forecastDate24Hours = `${forecast.list[6].dt_txt.substring(8, 10)}
     /
     ${forecast.list[6].dt_txt.substring(5, 7)}
     /
     ${forecast.list[6].dt_txt.substring(0, 4)}`;

    forecastDate48Hours = `${forecast.list[14].dt_txt.substring(8, 10)}
     /
     ${forecast.list[14].dt_txt.substring(5, 7)}
     /
     ${forecast.list[14].dt_txt.substring(0, 4)}`;

    forecastDate72Hours = `${forecast.list[22].dt_txt.substring(8, 10)}
    /
    ${forecast.list[22].dt_txt.substring(5, 7)}
    /
    ${forecast.list[22].dt_txt.substring(0, 4)}`;
  }

  return (
    <div className='mt-5'>
      {showData ? (
        <div className='container'>
          <main className='card mb-3 mx-auto  text-light'>
            <div className='row g-0'>
              <div className='col-md-4'>
                <p className='card-title '>{weather.name}</p>
                <p className='card-date'>{date}</p>
                <p className='card-temp '>
                  {(weather.main.temp - 273.15).toFixed(1)}ºC
                </p>
                <p className='card-desc'>
                  <img src={iconUrl} alt='' />
                  {weather.weather[0].description}
                </p>
              </div>
              <div className='col-md-8'>
                <div className='card-body text-start mt-2'>
                  <p className='card-text'>
                    High: {(weather.main.temp_max - 273.15).toFixed(1)}ºC
                  </p>
                  <p className='card-text'>
                    Low: {(weather.main.temp_min - 273.15).toFixed(1)}ºC
                  </p>

                  <p className='card-text'>
                    Humidity: {weather.main.humidity}%
                  </p>
                </div>
                <hr />

                <div className='row mt-4'>
                  

                    {[6,14,22].map(()=>{
                      return (
                        <div className='col'>
                          <p>{forecastDate24Hours}</p>
                          <img src={iconUrl24Hours} alt='' />
                          <p>{forecast.list[arr[0]].weather[0].description}</p>
                          <p>{(forecast.list[6].main.temp - 273.15).toFixed(1)}ºC</p>
                        </div>
                      )

                    })}
                    <p>{forecastDate24Hours}</p>
                    <img src={iconUrl24Hours} alt='' />
                    <p>{forecast.list[arr[0]].weather[0].description}</p>
                    <p>{(forecast.list[6].main.temp - 273.15).toFixed(1)}ºC</p>
                  </div>
                  <div className='col'>
                    <p>{forecastDate48Hours}</p>
                    <img src={iconUrl48Hours} alt='' />
                    <p>{forecast.list[arr[1]].weather[0].description}</p>
                    <p>{(forecast.list[14].main.temp - 273.15).toFixed(1)}ºC</p>
                  </div>
                  <div className='col'>
                    <p>{forecastDate72Hours}</p>
                    <img src={iconUrl72Hours} alt='' />
                    <p>{forecast.list[arr[2]].weather[0].description}</p>
                    <p>{(forecast.list[22].main.temp - 273.15).toFixed(1)}ºC</p>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      ) : (
        <p className='text-light enter-city-messagge'>
          Please enter a city to search.
        </p>
      )}
    </div>
  );
};

export default Card;

import React, { useState } from 'react';
import Form from './Form';
import Card from './Card';

const WeatherPanel = () => {
const apiKey = 'd8f3254c8acb5ed0dd761401c734945e';
let urlWeather = https://api.openweathermap.org/data/2.5/weather?&appid=${apiKey};
let cityUrl = '&q=';

let urlForecast = https://api.openweathermap.org/data/2.5/forecast?&appid=${apiKey};

const [weather, setWeather] = useState([]);
const [forecast, setForecast] = useState([]);
const [loading, setLoading] = useState(false);
const [show, setShow] = useState(false);
const [, setLocation] = useState('');

const getLocation = async (loc) => {
setLoading(true);
setLocation(loc);

urlWeather = urlWeather + cityUrl + loc;
pepito(urlWeather)
pepito(urlForecast)
async function pepito(url) {
  try {
    const response = await fetch(url)
    if (!response.ok) throw new Error('Status: ' + 404);
    const weatherData = await response.json();
    setWeather(weatherData);

  } catch(error) {
    console.log(error)
    setShow(false);
    setShowError(true)
  } finally {
    setLoading(false);
  }
}

urlForecast = urlForecast + cityUrl + loc;
await fetch(urlForecast)
  .then((response) => {
    if (!response.ok) throw new Error('Status: ' + 404);
    return response.json();
  })
  .then((forecastData) => {
    setForecast(forecastData);

    setLoading(false);
    setShow(true);
  })
  .catch(() => {
    setLoading(false);
    setShow(false);
  });

};

return (
<>

</>
);
};

export default WeatherPanel;