Untitled

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import imageCompression from 'browser-image-compression';
import Button from '@mui/material/Button';
import './Dashboard.css';

const Dashboard = () => {
  const navi = useNavigate();
  const [isLoggedIn, setLoggedIn] = useState(() => sessionStorage.getItem('isLoggedIn') === 'true');

  const handleImageChange = async (e) => {
    const files = e.target.files;
    const newImages = Array.from(files);

    try {
      // Retrieve existing images from session storage
      const existingImagesString = sessionStorage.getItem('uploadedImages');
      const existingImages = existingImagesString ? JSON.parse(existingImagesString) : [];

      const compressedImages = await Promise.all(
        newImages.map(async (image) => {
          if (image.size > 2 * 1024 * 1024) {
            // Compress image if size exceeds 2 MB
            const compressedImage = await imageCompression(image, {
              maxSizeMB: 2,
              useWebWorker: true,
            });

            // Convert compressed image to base64 string
            return new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.readAsDataURL(compressedImage);
              reader.onloadend = () => {
                resolve(reader.result);
              };
              reader.onerror = reject;
            });
          } else {
            // Convert image to base64 string directly
            return new Promise((resolve) => {
              const reader = new FileReader();
              reader.readAsDataURL(image);
              reader.onloadend = () => {
                resolve(reader.result);
              };
            });
          }
        })
      );

      // Merge old and new images
      const allImages = [...existingImages, ...compressedImages];

      // Store all images in session storage
      sessionStorage.setItem('uploadedImages', JSON.stringify(allImages));

      // Reload the window (if needed)
      window.location.reload();
    } catch (err) {
      console.log(err);
      // Handle error, maybe show a notification to the user
    }
  };

  const handleLogout = () => {
    navi('/');
    sessionStorage.removeItem('isLoggedIn');
  };

  useEffect(() => {
    if (!isLoggedIn) {
      navi('/');
    }
  }, [isLoggedIn, navi]);

  return (
    <>
      <header className="dashboard-header">
        <div className="dashboard-hamburger" onClick={() => /* Handle hamburger menu click */}>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <nav>
          <div className="dashboard-nav-left">
            <Button variant="contained" onClick={() => navi('/Dashboard')}>
              Dashboard
            </Button>
            <br />
            <br />
            <input type="file" onChange={handleImageChange} multiple className="dashboard-upload-input" />
            <br />
            <br />
            <Button variant="contained" onClick={() => navi('/FetchImage')}>
              Images
            </Button>
            <br />
          </div>
          <div className="dashboard-nav-right">
            <p className="dashboard-welcome-message">Welcome !!!!! {sessionStorage.getItem('name')}</p>
            <br />
            <Button variant="contained" onClick={handleLogout}>
              Logout
            </Button>
          </div>
        </nav>
      </header>

      <body className="dashbody">
        <h1 className="app-name">Weather APP</h1>
        <Button variant="contained" onClick={() => navi('/Weatherdata')}>
          Weather Search
        </Button>
      </body>
    </>
  );
};

export default Dashboard;
Editor is loading...