Untitled
unknown
plain_text
a year ago
3.4 kB
6
Indexable
// Dashboard.jsx import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import Button from '@mui/material/Button'; import './Dashboard.css'; const api = { key: "95d7fb89913501eb128ba6c87da49a8e", base: "https://api.openweathermap.org/data/2.5/", }; const Dashboard = () => { const navi = useNavigate(); const [isHamburgerOpen, setHamburgerOpen] = useState(false); const [isLoggedIn] = useState(sessionStorage.getItem('isLoggedIn')); const [search, setSearch] = useState(""); const [weather, setWeather] = useState({}); const handleLogout = () => { navi('/'); sessionStorage.removeItem('isLoggedIn'); }; const toggleHamburger = () => { setHamburgerOpen(!isHamburgerOpen); }; useEffect(() => { if (!isLoggedIn) { navi('/'); } }, [isLoggedIn, navi]); const searchPressed = () => { fetch(`${api.base}weather?q=${search}&units=metric&APPID=${api.key}`) .then((res) => res.json()) .then((result) => { setWeather(result); }); }; return ( <> <header className="dashboard-header"> <div className="dashboard-hamburger" onClick={toggleHamburger}> <div></div> <div></div> <div></div> </div> <nav className={`dashboard-nav ${isHamburgerOpen ? 'open' : ''}`}> <div className="dashboard-nav-left"> <br /> <br /> <Button variant="contained" onClick={() => navi('/Dashboard')}> Dashboard </Button> <br /> <br /> <Button variant="contained" onClick={() => navi('/ImageUpload')}> ImageUpload </Button> <br /> <br /> <Button variant="contained" onClick={() => navi('/FetchImage')}> Images </Button> <br /> <br /> <Button variant="contained" onClick={() => navi('/Weatherdata')}> Weather Search </Button> <br /> <br /> <Button variant="contained" onClick={handleLogout}> Logout </Button> <br /> <br /> <br /> </div> <div className="dashboard-nav-right"> <p className="dashboard-welcome-message">Welcome !!!!! {sessionStorage.getItem('name')}</p> <br /> </div> </nav> </header> <body className="dashbody"> <h1>Weather App</h1> {/* Weather Search Box - Input + Button */} <div> <input type="text" placeholder="Enter city/town..." onChange={(e) => setSearch(e.target.value)} /> <br /> <br /> <button onClick={searchPressed}>Search</button> </div> {/* If weather is not undefined display results from API */} {typeof weather.main !== "undefined" ? ( <div> {/* Location */} <p>{weather.name}</p> {/* Temperature Celsius */} <p>{weather.main.temp}°C</p> {/* Condition (Sunny ) */} <p>({weather.weather[0].description})</p> </div> ) : ( "" )} </body> </> ); }; export default Dashboard;
Editor is loading...
Leave a Comment