react-icons/ri#RiDropFill TypeScript Examples

function Landing() {
  const dadosInicias: WeatherData = {
    coord: {
      lon: 0,
      lat: 0
    },
    weather: [{
      main: 'initial',
      description: '-',
      icon: ''
    }],
    main: {
      temp: 0,
      feels_like: 0,
      temp_min: 0,
      temp_max: 0,
      pressure: 0,
      humidity: 0
    },
    wind: {
      speed: 0
    },
    clouds: {
      all: 0
    },
    dt: 0,
    sys: {
      country: '-'
    },
    timezone: 0,
    name: '-'
  }

  const [city, setCity] = useState<string>()
  const [data, setData] = useState<WeatherData>(dadosInicias)
  const [results, setResults] = useState<SearchData>()
  const [valid, setValid] = useState(true)

  const {location, setLocation} = useContext(LocationContext);
  
  useEffect(() => {
    if(!location) {
      getLocation();
    } else {
      handleCityByCordinates(location.lat, location.lng);
    }
  }, []);

  function getLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(position => {
        const { latitude, longitude } = position.coords;
        setLocation({
          lat: latitude,
          lng: longitude
        });

        handleCityByCordinates(latitude, longitude);
      });
    } else {
      alert('Browser does not support geolocation')
    }
  }

  //clear, clouds, thunderstorm, rain, drizzle, snow

  let LandingImg = inicialFigure

  switch (data?.weather[0].main) {
    case 'Clear':
      LandingImg = sunFigure;
      break

    case 'Clouds':
      LandingImg = sunFigure;
      break

    case 'Haze':
      LandingImg = cloudyFigure;
      break

    case 'Thunderstorm':
      LandingImg = thunderFigure;
      break
      
    case 'Rain':
      LandingImg = rainFigure;
      break

    case 'Drizzle':
      LandingImg = rainFigure;
      break

    case 'Snow':
      LandingImg = snowFigure;
      break

    default:
      LandingImg = inicialFigure
      break
  }

  const icons = require.context( '../assets/images/icons', true, /\.(png|jpe?g|svg)$/);
  const paths = icons.keys ()
  const images = paths.map( path => icons ( path ) )

  let icon = initialIcon

  switch (data?.weather[0].icon) {
    case '01d':
      icon = images[0].default
      break

    case '01n':
      icon = images[1].default
      break

    case '02d':
      icon = images[2].default
      break

    case '02n':
      icon = images[3].default
      break

    case '03d' || '03n' || '04d' || '04n':
      icon = images[4].default
      break

    case '09d':
      icon = images[5].default
      break

    case '09n':
      icon = images[6].default
      break

    case '10d' || '10n':
      icon = images[7].default
      break

    case '11d':
      icon = images[8].default
      break
    
    case '11n':
      icon = images[9].default
      break

    case '13d':
      icon = images[10].default
      break

    case '13n':
      icon = images[11].default
      break

    case '50d':
      icon = images[12].default
      break

    case '50n':
      icon = images[13].default
      break
  }

  let background = dayBg

  switch (data?.weather[0].icon.slice(2)) {
    case 'n':
      background = nightBg
  }

  async function handleCity(e: FormEvent) {
    e.preventDefault();
    
    await api.get(`?q=${city}&appid=e81965343df414cbfb25d98c8741fe2a&lang=pt_br&units=metric`).then(response => {
      setData(response.data)
    }).catch(() => {setValid(false)})
    
    if (data.name !== '-') {
      setValid(true)
    }    
  }

  async function handleCityByCordinates (lat: number, lon: number) {
    await api.get(`?lat=${lat}&lon=${lon}&appid=e81965343df414cbfb25d98c8741fe2a&lang=pt_br&units=metric`).then(response => {
      setValid(true)
      setData(response.data)
    })
  }

  async function handleChangeValue(value: string) {
    try {
      setCity(value)
      const query = `?q=${value.trim()}&type=like&sort=population&cnt=30&appid=439d4b804bc8187953eb36d2a8c26a02&_=1604490628153`;

      await search.get(query).then(response => {
        setResults(response.data)
      });
      setValid(true);
    } catch(err) {
      setValid(false);
      console.error(err);
    }
  }

  function capitalizeString(string: string) {
    return string[0].toUpperCase() + string.slice(1)
  }

  return (
    <div id="main" >
      <div className="background">
        <img src={background} alt="Wallpaper" className="img-background"/>
      </div>
      <div className="main-grid">
      <div className="app-name">
        <img src={climateLogo} alt="Climate"/>
      </div>
      <div className="content">
        <div className="principal">
          <div className="header">
            <form onSubmit={handleCity}>
              <div className="extras">
                <div className="get-location" onClick={getLocation}>
                  <span className="get-location-button">
                    Minha localização
                  </span>
                </div>
                {!valid && (
                  <span className="snackbar">Cidade inválida</span>
                )}
              </div>
              
              <div className="input-wrapper">
                <DebounceInput
                  placeholder="Digite uma cidade"
                  type="text"
                  name="city"
                  value={city}
                  onChange={event => {handleChangeValue(event.target.value)}}
                  className="cityInput"
                  autoComplete="off"
                  debounceTimeout={300}
                />

                <div className="search-results">
                  {results && results.list.map(result => {
                    const country = result.sys.country
                    const flag = `https://raw.githubusercontent.com/hjnilsson/country-flags/master/png100px/${country.toLowerCase()}.png`;

                    return (
                      <div key={result.coord.lat} className="result-item" onClick={() => handleCityByCordinates(result.coord.lat, result.coord.lon)}>
                        <img className="result-flag" src={flag} alt="bandeira"/>
                        <p><span className="result-city">{result.name}</span>, {country}</p>
                      </div>
                    )
                  })}

                </div>

                <button type="submit" className="searchButton">
                  <RiSearchLine />
                </button>
              </div>
            </form>

            
          </div>
          <div className="result">
            <img
              src={icon}
              alt="Clima"
              className="weather-icon"
            />
            <h1 className="temperature">
              {data?.main.temp.toFixed(0)}<span>ºC</span>
            </h1>

            <span className="description">{capitalizeString(String(data?.weather[0].description))}</span>

            <span className="local">
              {`${data?.name}, ${data?.sys.country}`}&nbsp;&nbsp;
              {data?.sys.country !== '-' && <img src={`https://raw.githubusercontent.com/hjnilsson/country-flags/master/png100px/${data?.sys.country.toLowerCase()}.png`} alt="country"/>}
            </span>
          </div>

          <div className="other-results">
            <div className="other">
              Sensação térmica: <br/>
              <span>{data?.main.feels_like.toFixed(1)} ºC</span>
            </div>
            <div className="other">
              Temp. Mínima: <br/>
              <span>{data?.main.temp_min.toFixed(1)} ºC</span>
            </div>
            <div className="other">
              Temp. Máxima: <br/>
              <span>{data?.main.temp_max.toFixed(1)} ºC</span>
            </div>
          </div>
        </div>

        <div className="secondary">
          <div className="secondary-results">
            <div className="other-secondary-results">
              <div className="icon-secondary-results humidity">
                <RiDropFill />
              </div>
              <p>Umidade: <br/>
              {data?.main.humidity}%</p>
            </div>
            
            <div className="other-secondary-results">
              <div className="icon-secondary-results">
                <WiStrongWind />
              </div>
              <p>Vento: <br/>
              {data?.wind.speed.toFixed(1)} m/s</p>
            </div>

            <div className="other-secondary-results">
              <div className="icon-secondary-results">
                <WiCloudy />
              </div>
              <p>Nuvens: <br/>
              {data?.clouds.all}%</p>
            </div>

          </div>
          <div className="landing-figure">
            <img src={LandingImg} alt="Landing"/>
          </div>
          {data?.name !== '-' && (
            <div className="go-maps">
              <a
                href={`https://www.google.com/maps/@${data?.coord.lat},${data?.coord.lon},12z`}
                target="_blank"
                rel="noopener noreferrer"
              >
                Abrir no Google Maps
              </a>
            </div>)
          }
        </div>
      </div> {/*content*/}
      <div className="credits">
        by&nbsp;
        <a href="https://github.com/joaovictornsv" target="_blank" rel="noopener noreferrer">
          <strong>João Victor</strong>
        </a>
      </div>
      </div>
     
    </div> // main
  )
}