diff --git a/django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx b/django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx index eff66ff87..d07c6fac1 100644 --- a/django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx +++ b/django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx @@ -1,160 +1,151 @@ import React, { useEffect, useState } from 'react'; import { Text } from "../Text"; import { Field } from "formik"; -import {debounce} from '@mui/material/utils'; -import {globalVariables} from "../../utils"; +import { debounce } from '@mui/material/utils'; +import { globalVariables } from "../../utils"; import axios from "axios"; - export interface DegreeInputInterface { - label: string, + label: string; value: number; onChange: React.Dispatch>; - disabled?: boolean + disabled?: boolean; } -/** Degree input form. **/ function DegreeInput({ label, value, onChange, disabled }: DegreeInputInterface) { - const [currValue, setCurrValue] = useState(value) - const min = label === 'Latitude' ? -90 : -180 - const max = -1 * min - + const [currValue, setCurrValue] = useState(value); + const convertToSixDecimals = React.useMemo( () => debounce( - ( - value: number - ) => { - setCurrValue(Number(value).toFixed(6)) + (value: number) => { + setCurrValue(Number(value).toFixed(6)); }, 1000, ), [], ); - useEffect(() => { if (!isNaN(currValue)) { - onChange(currValue) + onChange(currValue); } - }, [currValue]); - - // useEffect(() => { - // if (value) { - // convertToSixDecimals(value) - // } - // }, [value]); - - return
- - {label}: - - { - convertToSixDecimals(evt.target.value) - }} - disabled={disabled} - className="!placeholder:text-black-900_99 !text-black-900_99 font-raleway md:h-auto p-0 sm:h-auto text-base text-left tracking-[0.50px] w-full" - wrapClassName="sm:w-full" - shape="round" - color="black_900_3a" - size="xs" - variant="outline" - min={min} - max={max} - placeholder="0.000000" - step={0.0001} - style={{ - width: '300px', - maxWidth: '300px', - height: '40px', - border: `1px solid ${!currValue ? 'red' : 'rgba(0, 0, 0, 0.23)'}`, - borderRadius: '4px', - padding: '8px 12px', - marginRight: '-2%' - }} - onChange={(evt) => { - let value = evt.target.value - if (!isNaN(parseFloat(evt.target.value))) { - if (value > max) { - value = max - } else if (value < min) { - value = min + }, [currValue, onChange]); + + return ( +
+ + {label}: + + { + convertToSixDecimals(evt.target.value); + }} + disabled={disabled} + className="!placeholder:text-black-900_99 !text-black-900_99 font-raleway md:h-auto p-0 sm:h-auto text-base text-left tracking-[0.50px] w-full" + wrapClassName="sm:w-full" + shape="round" + color="black_900_3a" + size="xs" + variant="outline" + placeholder="0.000000" + step={0.0001} + style={{ + width: '300px', + maxWidth: '300px', + height: '40px', + border: `1px solid ${!currValue ? 'red' : 'rgba(0, 0, 0, 0.23)'}`, + borderRadius: '4px', + padding: '8px 12px', + marginRight: '-2%' + }} + onChange={(evt) => { + let value = evt.target.value; + if (!isNaN(parseFloat(evt.target.value))) { + const min = label === 'Latitude' ? -90 : -180; + const max = -1 * min; + if (value > max) { + value = max; + } else if (value < min) { + value = min; + } } - } - setCurrValue(value) - }} - /> -
+ setCurrValue(value); + }} + /> +
+ ); } export interface DegreeInputsInterface { - latitude: number, + latitude: number; setLatitude: React.Dispatch>; - longitude: number, + longitude: number; setLongitude: React.Dispatch>; - disabled?: boolean + disabled?: boolean; } -/** Degree input form. **/ export default function DegreeInputs( { latitude, setLatitude, longitude, setLongitude, disabled }: DegreeInputsInterface ) { + const [valueChanged, setValueChanged] = useState(false); const checkSiteIsLand = React.useMemo( () => debounce( - ( - lat: number, - long: number, - ) => { - if (lat != 0 || long != 0) { - ( - async () => { - try { - const response = await axios.get(`${globalVariables.baseUrl}/monitor/sites/is-land/${lat}/${long}/`); - - if(response.status == 200){ - if (!response.data.is_land) - alert('Your points seem to be in the sea or not on land masses!') + (lat: number, long: number) => { + if (lat !== 0 || long !== 0) { + ( + async () => { + try { + const response = await axios.get(`${globalVariables.baseUrl}/monitor/sites/is-land/${lat}/${long}/`); + if (response.status === 200) { + if (!response.data.is_land) { + alert('Your points seem to be in the sea or not on land masses!'); + } + } + } catch (error) { + console.error('Error checking site land:', error); } - - } catch (error) { - } - } - )() + )(); } }, 1000, ), - [], + [] ); useEffect(() => { - checkSiteIsLand(latitude, longitude) - }, [latitude, longitude]); - - return <> - - - + if (valueChanged) { + checkSiteIsLand(latitude, longitude); + setValueChanged(false); + } + }, [valueChanged]); + + return ( + <> + { + setLatitude(value); + setValueChanged(true); + }} + disabled={disabled} + /> + { + setLongitude(value); + setValueChanged(true); + }} + disabled={disabled} + /> + + ); }