Untitled

// 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, setIsLoggedIn] = useState(sessionStorage.getItem('isLoggedIn'));
  const [search, setSearch] = useState("");
  const [weather, setWeather] = useState({});

  useEffect(() => {
    // Create a unique channel for communication
    const logoutChannel = new BroadcastChannel('logoutChannel');

    // Listen for logout signal from other windows
    logoutChannel.onmessage = (event) => {
      if (event.data === 'logout') {
        // Perform logout logic
        handleLogout();
      }
    };

    // Cleanup the channel when component unmounts
    return () => {
      logoutChannel.close();
    };
  }, []);

  const handleLogout = () => {
    // Signal logout to other windows
    const logoutChannel = new BroadcastChannel('logoutChannel');
    logoutChannel.postMessage('logout');

    // Logout logic for the current window
    navi('/');
    sessionStorage.removeItem('isLoggedIn');
    setIsLoggedIn(false);
    sessionStorage.removeItem('uploadedImages');
  };

  const toggleHamburger = () => {
    setHamburgerOpen(!isHamburgerOpen);
  };

  const clearStorage = () => {
    sessionStorage.removeItem('uploadedImages');
  };

  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={clearStorage}>
              Clear Storage
            </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">
        <br />
        <br />
        {/* Weather Search Box - Input + Button */}
        <div>
          <h1>Weather App</h1>
          <br />
          <input
            type="text"
            placeholder="Enter city/town..."
            onChange={(e) => setSearch(e.target.value)}
          />
          <br />
          <br />
          <button onClick={searchPressed}>Search</button>

          <br />

          {/* 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>
          ) : (
            ""
          )}
        </div>
      </body>
    </>
  );
};

export default Dashboard;
Editor is loading...