Category: javascript

I was making some react components and make styles.js for each of the following. i am learning from a YT tutorial who is using material-ui version4. so i upgraded it to V5.

Code for the component (Form) =

import React from 'react'
import useStyles from './styles';


const Form = () =>{
    const classes = useStyles();

    return(
        <h1>
FORM
        </h1>
    );
}

export default Form;

code for the styles.js

import { makeStyles } from '@mui/styles';

export default makeStyles((theme) => ({
  root: {
    '& .MuiTextField-root': {
      margin:  theme.spacing(1),
    },
  },
  paper: {
    padding:  theme.spacing(2),
  },
  form: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  fileInput: {
    width: '97%',
    margin: '10px 0',
  },
  buttonSubmit: {
    marginBottom: 10,
  },
}));

The error i recieved
enter image description here

Is there any simple fix for this.

I have a quick and small question, im trying to replace a picture when hovering and existing picture, all examples i’ve seen are using links while im using pictures from a folder, local save picture if you’d like, so im asking this, if i have an image that i written like this:

<div><img className='ApplicationSquareImg' src={mapSquare} alt="" /></div>

How can i change an image (For example, the image will be called mapSqaureTwo) when hovering this image?

I’m using jpeg-js library to decode an image, apply my own greyscale filter, and encode it back. But unfortunately every vertical picture I process for some reason is rotated and saved horizontally (while horizontal images preserve its correct rotation and are totally ok). Here’s my code:

function greyscale(width, height, data, bytesPerPixel, imageName) {
    const bwPixelData = Buffer.alloc(data.length)

    for (let vrt = 0; vrt < height; vrt++) {
        for (let hrz = 0; hrz < width; hrz++) {
            const offset = (vrt * width + hrz) * bytesPerPixel
            
            const red = data[offset]
            const green = data[offset + 1]
            const blue = data[offset + 2]
            
            const bwPixel = Math.round((red + green + blue) / 3.0)
            
            bwPixelData[offset] = bwPixel
            bwPixelData[offset + 1] = bwPixel
            bwPixelData[offset + 2] = bwPixel
            
        }
    }

    const filteredImageName = encodeImage(bwPixelData, width, height, imageName)
    return filteredImageName

}
exports.decodeImage = function(name, path) {
    if (name.match(/.*.jpe?g/i)){
        const jpegData =  fs.readFileSync(path)
        return jpeg.decode(jpegData)
    } else {
        throw new Error('Unsupported Media Type')
    }
}


exports.encodeImage = function(data, width, height, imageName) {
    
    const filteredImageName = `outfile-${imageName}`
    
    const rawImageData = {
        data: data,
        width: width,
        height: height,
    }

    
    const jpegImageData = jpeg.encode(rawImageData, 50)

    try {
        fs.writeFileSync(`${outputPath}/${filteredImageName}`, jpegImageData.data);
        console.log('File written successfully');
    } catch (error) {
        console.error('Error writing file:', error);
    }

    return filteredImageName
} 

At first I thought that the problem might be hidden in the greyscale function and how I process pixels. So I tried to decode, encode, and save back an original, unfiltered, vertical photo, which had lead to the same result: unexpected rotation.

Have you ever faced a problem like this and does anyone know how to fix it? It’s also important to me to use a pure js implementation instead of libraries like Sharp

I have a DIV element which captures wheel events and then in custom handler I try to use scrollTo which is not working.

I have this code

<script lang="ts">
    let container: HTMLDivElement;

    function smoothScroll(e: WheelEvent & { currentTarget: HTMLDivElement }) {
        console.log(container.scrollHeight);
        container.scrollTo(0, 3500);
    }
</script>

<div
    class="overflow-scroll"
    on:wheel|preventDefault|nonpassive={smoothScroll}
    bind:this={container}
>

DIV has content in it and scrollHeigth shows 4100, so I try to make use of scrollTo(x,y) function and it does nothing.

Why am I unable to manually scroll?

I know the title doesn’t explain clearly the problem. I tried to explain more technical but I can’t define the problem. I made a calculator with js. The problem is that I perform an operation using the keyboard, it performs for first time then I clean the screen with the ‘C’ button then I perform an operation again but it doesn’t perform second time. It works when I use buttons on the screen each time.
html

 <div class="container">
        <div id="screen">
            <div id="math"></div>
            <div id="result"></div>
        </div>
        <div class="buttons">
            <button class="clear operator"  id="clear">C</button>
            <button class="del operator" id="del">
                <i class="fa-solid fa-delete-left"></i>
            </button>
            <button id="div" class="div operator">÷</button>
            <button id="multi" class="multi operator">x</button>
            <button class="seven digit">7</button>
            <button class="eight digit">8</button>
            <button class="nine digit">9</button>
            <button id="sub" class="min operator">-</button>
            <button class="four digit">4</button>
            <button class="five digit">5</button>
            <button class="six digit">6</button>
            <button id="add" class="add operator">+</button>
            <button class="one digit">1</button>
            <button class="two digit">2</button>
            <button class="three digit">3</button>
            <button id ="equal" class="equal operator">=</button>
            <button class="zero digit">0</button>
            <button id="dot" class="dot operator">.</button>
        </div>
    </div>

js

const buttons = document.querySelectorAll('button');
const buttonsL = buttons.length;
const operators = ['+', '-', 'x', '÷', '.'];
const result = document.querySelector('#result');
const math = document.querySelector('#math');
// listen all buttons
for (let i = 0; i <= buttonsL - 1; i += 1) {
  buttons[i].onclick = function cal(e) {
    const resultV = document.querySelector('#result').textContent;
    const buttonV = this.textContent;
    let mathV = document.querySelector('#math').textContent;
    const del = this.id;
    if (buttonV === 'C') {
      math.textContent = '';
      result.textContent = '';
      console.log(mathV);
    } else if (del === 'del') {
      if (resultV === '') {
        math.textContent = mathV.slice(0, resultV.length - 1);
      } else {
        result.textContent = '';
      }
    } else if (buttonV === '=') {
      mathV = mathV.replace(/x/g, '*').replace(/÷/, '/');
      result.textContent = '= ' + eval(mathV);
    } else if (operators.includes(buttonV)) {
      const lastCharMath = mathV[mathV.length - 1];
      if (resultV !== '') {
        math.textContent = result.textContent.slice(2) + buttonV;
        result.textContent = '';
      } else if (mathV !== '' && (operators.includes(lastCharMath) === false)) {
        math.textContent += buttonV;
      } else if (mathV === '' && buttonV === '-') {
        math.textContent += buttonV;
      } else if (lastCharMath === '.' && operators.includes(mathV)) {
        math.textContent += buttonV;
      }
    } else {
      const mathL = mathV.length;
      if (mathL < 19) {
        math.textContent += buttonV;
      } else {
        math.textContent += '';
      }
    }
    e.preventDefault();
  };
}

// listen to all keys
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('keydown', (event) => {
    const kValue = event.key.replace(/[/]/, '÷').replace(/[*]/, 'x');
    const resultV = document.querySelector('#result').textContent;
    const mathV = document.querySelector('#math').textContent.replace(/[÷]/g, '/').replace(/[x]/g, '*');
    const lastCharMath = math.textContent[math.textContent.length - 1];
    const isKey = () => /[0-9+-x÷.]/.test(kValue);
    const isDigit = () => /[0-9]/.test(kValue);
    const isOp = () => /[+-÷x.]/.test(kValue);
    console.log(kValue);
    if (isKey()) {
      if (math.textContent === '' && isOp() === true) {
        math.textContent += '';
      } else if (isOp()) {
        if (/[+-÷x.]/.test(lastCharMath)) {
          math.textContent += '';
        } else if (resultV !== '') {
          if (/./.test(resultV) && kValue === '.') {
            result.textContent += '';
          } else {
            math.textContent = result.textContent.slice(2) + kValue;
            result.textContent = '';
          }
        } else {
          math.textContent += kValue;
        }
      } else if (isDigit() && resultV !== '') {
        math.textContent = kValue;
        result.textContent = '';
      } else {
        math.textContent += kValue;
      }
    } else if (kValue === 'Backspace') {
      if (resultV !== '') {
        result.textContent = '';
      } else {
        math.textContent = mathV.slice(0, resultV.length - 1);
      }
    } else if (kValue === 'Enter') {
      if (/[+-/*.]/.test(mathV)) {
        result.textContent = '= ' + eval(mathV);
      } else {
        math.textContent += '';
      }
    }
  });
});

I am trying to get the pixels of an image when the user right clicks on it. This should work on any webpage. I created a right-click for my extension using chrome.contextMenus.create and listen for the event using chrome.contextMenus.onClicked.addListener

Everything works fine and the right click gives me the url of the image that was right-clicked.

I then use the following code at the content.js to get the pixels:

let clickedImage = new Image();
clickedImage.src = imageUrl;
clickedImage.onload = function () {
    let canvas = document.createElement('canvas');
    canvas.style.display = "none";
    var ctx = canvas.getContext('2d');
                    
    ctx.drawImage(clickedImage, 0, 0, 400, 400);
    let imageData = ctx.getImageData(0, 0, 400, 400);
}

As many pages use images from other domains, the above code gives the following error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

I would have guessed, the cross-origin would be fine given that image had already been used/loaded by the page. However, it does not seem to work that way.

I also tried to leverage the image element directly but received the same error.

var imageElement = document.querySelector("img[src='" + imageUrl + "']");

I do not want to pass the image URL to the server side and load it there as it would open my server to attacks where people could send huge image files. Is there a way to do this on the client side? Since the image is already loaded on the webpage, I assume there must be a way to get the pixels out of it but could find it myself; hence, this question.

I’d be grateful for any guidance you might have.

Thanks,

Doug

   const fontPath = path.join(process.cwd(), 'src/fonts/arial.ttf');
   const fontBytes = await fs.readFile(fontPath);
            
   pdfDoc.registerFontkit(fontkit);

    const customFont = await pdfDoc.embedFont(fontBytes);
    
    pdfPage.drawText("", options, {
        x: 40,
        y: 450,
        size: 12,
        font: customFont,
        color: rgb(0, 0.53, 0.71),
      });

I have tried to draw a text with custom font using pdf-lib. Nothing print in the pdf according to above code. So can use custom fonts with pdf library?

For example

let db;

// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these event handlers act on the database being opened.
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";
};

What I understand is that DBOpenRequest.onerror = xxx is setting an event listener to handle the event error.

But why we set the event handler after the event emitting statement (i.e. the open action const DBOpenRequest = window.indexedDB.open) is executed, not before?

Isn’t it possible that after the the event emitting statement is executed and before we set the error event handler, the event is already emitted, so that it is never captured by any event handler (since there is none at all)?

I have graph generated for showing HOS logs and is built using svg, line , rect etc. I have added some functionality in it when I mouse is hover on a log on svg the background highlights and when click on log on svg it shows log details. Now I added a range slider in it by using foreignobject in svg , the slider settled well and is confined within svg width and moving perfectly fine in it but because of that foreign object the hover and click events of mouse aren’t working on it, seems like there is layer on svg because of slider/ForeignObject which is blocking this thing.

I tried to put the slider on that svg by setting it’s position absolute but the position of slider get’s disturbed each time the svg is resized on different screen sizes.The whole code is in React js.

Here’s the code implemented

<svg width="100%" height="30vh" viewBox="-36 60 1525 10" xmlns="http://www.w3.org/2000/svg">
      <g fontFamily="roboto">{GettopLabel()}</g>
     
      <g id="bars">
        <rect key="react1" height="40px" width="94.39%" y="0" x="0" stroke="#C9CCCE" fill="#fff" />
        <rect key="react2" height="40px" width="94.39%" y="40" x="0" stroke="#C9CCCE" fill="#f0f0f5" />
        <rect key="react3" height="40px" width="94.39%" y="80" x="0" stroke="#C9CCCE" fill="#fff" />
        <rect key="react4" height="40px" width="94.39%" y="120" x="0" stroke="#C9CCCE" fill="#f0f0f5" />
      </g>
      <g>
        {Array(23)
          .fill('')
          .map(() => GetVerticalLine())}
      </g>
      <g>
        {Array(4)
          .fill('')
          .map((item, index) => {
            const lines = Array(24)
              .fill('')
              .map(() => {
                const smallLines = Array(11)
                  .fill('')
                  .map((smLn, smLnInd) => getSmallVerticalLine(smLnInd === 5, index + 1));

                getSmallVerticalLineSpace();

                return smallLines;
              });
            resetCounter();
            return lines;
          })}
      </g>
      <g>
        {graphLinesData &&
          graphLinesData?.map((data: any, index: number) => (
            <React.Fragment key={`id_${index + 1}`}>
              <rect
                className="highlight-rect"
                x={Math.min(data?.horizLn.x1, data?.horizLn.x2)}
                y={0}
                width={data?.horizLn.x2 - data?.horizLn.x1}
                height="160px"
                fill="transparent"
                onClick={() =>
                  setSelectedLog(records[index]!, records[index + 1] ? records[index + 1]?.eventTime! : '235959')
                }
                onMouseEnter={() => setHighlightedLog(records[index]!)}
                onMouseLeave={() => setHighlightedLog(null)}
              />
              <line
                x1={data?.horizLn.x1}
                x2={data?.horizLn.x2}
                y1={data?.horizLn.y1}
                y2={data?.horizLn.y2}
                stroke="#2B5F8C"
                fill="#2B5F8C"
                strokeWidth={5}
              // onMouseOver={() => console.log("mouseUIn", records[index])}
              // onMouseOut={() => console.log("mouseOut", data)}
              />
              <line
                x1={data?.vertLn?.x1}
                x2={data?.vertLn?.x2}
                y1={data?.vertLn?.y1}
                y2={data?.vertLn?.y2}
                stroke="#2B5F8C"
                fill="#2B5F8C"
                strokeWidth={2}
              />
            </React.Fragment>
          ))}
      </g>
      {violations &&
        convertedDate === violations[0]?.startedAt?.eventDate &&
        violations.length > 0 &&
        violations?.map((item: Violation, index: number) => {
          let endedAtEventDate: string;
          let endedAtEventTime: string;
          if (item.endedAt.eventDate) {
            endedAtEventDate = item.endedAt.eventDate;
          } else if (convertedDate === currentDate) {
            endedAtEventDate = currentDateInZone.format(DEFAULT_EVENT_MMDDYY);
          } else {
            endedAtEventDate = convertedDate;
          }
          if (item.endedAt.eventTime) {
            endedAtEventTime = item.endedAt.eventTime;
          } else if (convertedDate === currentDate) {
            endedAtEventTime = currentDateInZone.format('HHmmss');
          } else {
            endedAtEventTime = '235959';
          }

          if (item?.startedAt?.eventDate !== convertedDate) {
            return null;
          }

          const x1 = convertUnixToMinutes(item?.startedAt?.eventDate, item?.startedAt?.eventTime);
          const x2 = convertUnixToMinutes(endedAtEventDate, endedAtEventTime);
          const y1 = getLnStartingPoint('3') - slightlyBiggerLineHeight - horizontalLineBottomMarg;
          const y2 = getLnStartingPoint('3') - slightlyBiggerLineHeight - horizontalLineBottomMarg;
          return (
            <line
              key={`id_${index + 1}`}
              x1={x1}
              x2={x2}
              y1={y1}
              y2={y2}
              stroke="#f2163e"
              fill="#2B5F8C"
              strokeWidth={5}
            />
          );
        })}
     
   

      <foreignObject width="100%" height="220px" x={-38} y={-36}>
        <Slider
          range
          tooltip={{
            open: true,
          }}
          tipFormatter={value => `${moment().startOf('day').add({ seconds: value }).format(HOURS_MINUTES_SMALL_A)}`}
          className={visibleSelectorClass}
          min={0}
          max={86399}
          value={[timeFrom!, timeTo!]}
          onChange={onChangeSlider}
        />
      </foreignObject>
    </svg>

In the code below, even if {useCallback} is not used for the {countUp} and {countDown} functions, from the {React.memo} point of view in the {AppTwo} component receiving the two functions as props, even though the two functions are newly created, the old Since it is equal to the value of , isn’t it possible to prevent re-rendering? Why is it re-rendering?

function App(){

  const [count,setCount]=useState(0);

  function countUp(){
    setCount(count=>count+1);
  }
  function countDown(){
    setCount(count=>count-1);
  }

  return(
    <div>
      <p>count:{count}</p>
      <AppTwo countUp={countUp} countDown={countDown}/>
    </div>
  )  
}

const AppTwo=React.memo(

  ({countUp, countDown})=>{

  useEffect(()=>{
    console.log('re-rendering.')
  })

  return(
    <div>
      <button onClick={countUp}>count UP</button>
      <button onClick={countDown}>count DOWN</button>
    </div>
  )
})

https://stackblitz.com/edit/angular-select-option-matprefix-icons-issue-jbvrmi?file=app%2Fform-field-overview-example.ts

need to click two time on checkbox to get the data in textarea but i want to click once on the checkbox after that data should populate in textarea…i am using now static data but it will used for dynamic from api but for now it is creating problem for me

I have modal page that called using apex.navigation.redirect(url) function in the caller page. The modal page opened. Now in the modal page submittion using this code when a button clicked:

apex.page.submit({
    request: "CREATE",
    reloadOnSubmit: "A",
    validate: true,
});

The problem is this submission is or any calling ajax process in the modal page is not registered in Debug page. Generally any request from the modal page is not registered in Debug, even showing page itself is not registered. why? are there any option must be setted when call the modal page?

I expect all requests for the page called using apex.navigation.redirect(url) javascript function registered in the debug as the normal behavior when page called without using that function.

I have toneJS playing various audio on a website and I want to record it.
If I connect the stream to a MediaRecorder it stops going to the speakers. I’m looking for a way to duplicate a stream so it can keep playing and record in the background.

Any advice?

(I’m taking a look at doing it manually with an AudioWorklet but I was hoping this is already implemented somewhere and I just haven’t found it)

I tried audiocontext.createChannelSplitter but it’s not working for this. The channels it creates can’t be used as a stream as far as I can tell, its purpose is different.

I have a for component that looks like that:

import React from "react";

const Form = ({ state }) => {
  const [nameValue, setCurrentNameValue] = useState(state.message.name.value);

  const nameChange = (e) => {
    console.log(state.message.name.value);
    setNameValue(e.target.value);
    console.log(state.message.name.value);
  };

  useEffect(() => {
    setCurrentNameValue(state.message.name.value);
  }, [state.message.name.value]);

  return (
    <input
      type="text"
      name="name"
      placeholder={state.message.name.placeholder}
      value={nameValue}
      onChange={(e) => nameChange(e)}
    />
  );
};

And I want it to update state value, then get this value and rerender, but it doesn’t work.

I am deploying my frontend at vercel.
I am using ReactMapGL component here and put the environment variables on vercel properly. Still it is showing a white screen, but on local host it is working perfectly.

Not understanding what is the problem, during deployment also it is not giving any errors.

This is my index.js file, which run after i run command ‘npm start’.

import * as React from 'react';
import { useState, useEffect } from 'react';
import StarIcon from '@mui/icons-material/Star';
import ReactMapGL, { Marker, Popup } from 'react-map-gl';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import axios from 'axios';
import { format } from 'timeago.js';
import Login from './components/Login';
import Register from './components/Register';


function App() {
  // const myStorage = window.localStorage;
  const [pins, setPins] = useState([]);
  const [login, setLogin] = useState(false);
  const [register, setRegister] = useState(false);

  const [currUser, setCurrUser] = useState(null)
  const [currentPlaceId, setCurrentPlaceId] = useState(null);
  const [newPlace, setNewPlace] = useState(null);
  const [newPlaceName, setNewPlaceName] = useState("");
  const [newPlaceDesc, setNewPlaceDesc] = useState("");

  const [newRating, setNewRating] = useState(1);

  // console.log(pins);
  const [viewState, setViewState] = React.useState({
    longitude: 50,
    latitude: 37,
    zoom: 4,
    transitionDuration: 1000
  });

  const loginwindow = (e) => {
    e.preventDefault();
    setRegister(false);
    setLogin(true);
  }
  const logoutclick = (e) => {
    e.preventDefault();
    setCurrUser(null)
  }
  const registerwindow = (e) => {
    e.preventDefault();
    setLogin(false);
    setRegister(true);
  }
  const handleSubmit = async (e) => {
    e.preventDefault();
    const newPin = {
      username: currUser,
      desc: newPlaceDesc,
      title: newPlaceName,
      rating: newRating,
      long: newPlace.long,
      lat: newPlace.lat
    }
    setNewPlace(null)


    // setNewPlaceDesc(null);
    // setNewPlaceName(null);
    // setNewRating(null);
    try {
      const res = await axios.post('/pins', newPin);
      setPins([...pins, res.data])
    } catch (error) {
      console.log(error);
    }


  }
  const handleMarkerClick = (id, lat, long) => {
    setCurrentPlaceId(id);
  };
  const handleAddClick = (e) => {
    e.preventDefault();
    if (currUser == null) {
      setLogin(true)
    }
    else {
      setCurrentPlaceId(null);
      const lat = e.lngLat.lat;
      const long = e.lngLat.lng;

      setNewPlace(
        {
          lat,
          long
        }
      )
    }

  };
  // console.log(pins);
  useEffect(() => {

    const getPins = async () => {
      try {
        const res = await axios.get('/pins')
        setPins(res.data)
        // console.log(res.data);
      } catch (error) {
        console.log(error);
      }

    }
    getPins();
  }, [])

  // console.log(newPlace)
  return (

    <div>


      <ReactMapGL
        mapboxAccessToken={process.env.REACT_APP_MAPBOX}
        {...viewState}
        transitionDuration="1000"
        onMove={evt => setViewState(evt.viewState)}
        style={{ width: "100%", height: "100vh" }}
        mapStyle="mapbox://styles/safak/cknndpyfq268f17p53nmpwira"

        onDblClick={(handleAddClick)}
      >
        {
          pins.map(p => (
            <>
              <Marker longitude={p.long} latitude={p.lat} anchor="bottom" rotationAlignment="map" pitchAlignment="map">
                <LocationOnIcon
                  style={{ cursor: "pointer" }}
                  // (newUser ==={p.username} ?)
                  className={(currUser) === p.username ? ' text-red-500' : ' text-violet-700'}

                  // 
                  onClick={() => handleMarkerClick(p._id)}
                />

              </Marker>

              {

                p._id === currentPlaceId &&
                (
                  <Popup
                    key={p._id}
                    latitude={p.lat}
                    longitude={p.long}
                    closeButton={true}
                    closeOnClick={false}
                    onClose={() => setCurrentPlaceId(null)}
                    anchor="left"
                  >
                    <div className=' flex-col p-1 space-y-1 '>
                      <div className=' '>
                        <p className=' font-semibold text-red-500 border-b border-red-400'>Place</p>
                        <h4>{p.title}</h4>
                      </div>

                      <div>
                        <p className=' font-semibold  text-red-500 border-b border-red-400'>Review</p>
                        <p>{p.desc}</p>
                      </div>
                      <div className=' text-yellow-400'>
                        {Array(p.rating).fill(<StarIcon />)}

                      </div>
                      <div>
                        <p className=' font-semibold  text-red-500 border-b border-red-400'>Information</p>
                        <p>Created by <b>{p.username}</b></p>
                        <p> {format((p.createdAt))}</p>
                      </div>
                    </div>
                  </Popup>

                )


              }
              {
                newPlace &&
                <Popup
                  // key={p._id}
                  latitude={newPlace.lat}
                  longitude={newPlace.long}
                  closeButton={true}
                  closeOnClick={false}
                  onClose={() => setNewPlace(null)}
                  anchor="left"
                >

                  <form className=' flex-col p-1 space-y-1 ' onSubmit={handleSubmit}>
                    <div className=' '>
                      <p className=' font-semibold text-red-500 border-b border-red-400'>Place</p>
                      <input type='text' placeholder='Enter Place' className=' border-none  focus:outline-none ' onChange={(e) => (setNewPlaceName(e.target.value))} />
                    </div>
                    <div>
                      <p className=' font-semibold  text-red-500 border-b border-red-400'>Description</p>
                      <textarea placeholder='Enter Description ' className='  focus:outline-none ' onChange={(e) => (setNewPlaceDesc(e.target.value))}></textarea>

                    </div>
                    <div>
                      <p className=' font-semibold  text-red-500 border-b border-red-400'>Rating</p>
                      <input type="number" min={1} max={5} className=' focus:outline-none  w-full' onChange={(e) => (setNewRating(e.target.value))} />
                    </div>


                    <div className=''>
                      <button className=' w-full  text-white bg-red-400' type='submit'>
                        Add Pin
                      </button>
                    </div>



                  </form>

                </Popup>

              }
            </>)
          )}
        {currUser ?
          (<div className='absolute z-10 top-1 right-1 p-2'>
            <button className=' bg-blue-600 text-white p-2 rounded-lg w-20 m-1' onClick={logoutclick}>Logout</button>
          </div>)
          :
          <div className='absolute z-10 top-1 right-1 p-2'>
            <button className=' bg-red-600 text-white p-2 rounded-lg w-20 m-1' onClick={loginwindow}>Login</button>
            <button className=' bg-green-600 text-white p-2 rounded-lg w-20 m-1' onClick={registerwindow}>Register</button>
          </div>}

        {login &&
          <Login setCurrUser={setCurrUser} setLogin={setLogin} />
        }

        {register &&
          <Register setCurrUser={setCurrUser} setRegister={setRegister} />
        }
      </ReactMapGL>


    </div>

  );
}

export default App;