Telash Comments - Reactiflux

Telash

Posts Comments

RReactiflux

•Created by Telash on 9/8/2024 in #react-forum

Why the left code isn't working but the right one is?

Turns out I was returning an object and I must wrap it with something in order to make the jsx work

4 replies

RReactiflux

•Created by Telash on 7/18/2024 in #react-forum

How can I exclude the street name out of the string this component give me?

 
import React, { useState, useRef } from 'react';
import {
  useLoadScript,
  Autocomplete,
} from '@react-google-maps/api';
import { ConstructionOutlined } from '@mui/icons-material';

const libraries = ['places'];

const GoogleMapsDropdown = ({
  setHotelForTransfer,
  placeInList,
  hotelForTransfer,
  setIsEnglishOnlyToggle,
  handleFieldChange,
  typeOfTransfer,
  initialValue,
  isValid,
  equalDepartureHotelValue,
  setTimeToRenderBasedOnArrival,
  hotelForDepartureRefs,
  setHotelForDepartureRefs,
  testDispatch
}) => {
  const [location, setLocation] = useState(initialValue);
  const autocompleteRef = useRef(null);

  const handlePlaceSelected = () => {
    const newValue = autocompleteRef.current.value;
    setLocation(newValue); // Update state with the selected value
    alterTabHotelField(newValue);
    isEnglishOnlyInput(newValue);
  };

  function testDeptRefs(newValue) {
    const newArrayOfRefs = [...hotelForDepartureRefs];
    newArrayOfRefs[placeInList] = newValue;
    setHotelForDepartureRefs(newArrayOfRefs);
  }

  function alterTabHotelField(newValue) {
    const e = { target: { value: newValue || "", name: "hotel" } };
    handleFieldChange(e, placeInList, typeOfTransfer);
    if (typeOfTransfer === "arr") {
      handleFieldChange(e, placeInList, "dept");
    }
  }

  function isEnglishOnlyInput(content) {
    // setIsEnglishOnlyToggle
    const pattern = /^[!@#\$%\^\&*\)\(+=._-\s0-9a-zA-Z`~\[\]\{\}:;"'<>,./?\\|]*$/;




    if (pattern.test(content)) {
      testDispatch(placeInList, true)
    } else {
      testDispatch(placeInList, false)
    }
    
  }


  return (
    <><Autocomplete onPlaceChanged={handlePlaceSelected}>
      <input
        className={(isValid === false && initialValue === '') ? 'hotel-search-input-invalid' : 'hotel-search-input'}
        value={typeOfTransfer === "arr" ? location : hotelForDepartureRefs[placeInList]}
        ref={autocompleteRef}
        onChange={(event) => {

          setLocation(event.target.value);
          alterTabHotelField(event.target.value);
          isEnglishOnlyInput(event.target.value);
        }} // Update state and call alterTabHotelField
        inputProps={{
          placeholder: 'test',
        }}
      />
    </Autocomplete>
      {/* <button type="button" onClick={() => testDispatch()}>Test dispatch</button> */}
    </>

  );
};

export default function App({
  setHotelForTransfer,
  placeInList,
  hotelForTransfer,
  handleFieldChange,
  typeOfTransfer,
  initialValue,
  isValid,
  equalDepartureHotelValue,
  setTimeToRenderBasedOnArrival,
  hotelForDepartureRefs,
  setHotelForDepartureRefs,
  setIsEnglishOnlyToggle,
  testDispatch
}) {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: '',
    libraries,
  });

  return (
    <div ref={isLoaded ? mapContainerStyle : null}>
      {isLoaded && (
        <GoogleMapsDropdown
          setHotelForTransfer={setHotelForTransfer}
          placeInList={placeInList}
          hotelForTransfer={hotelForTransfer}
          handleFieldChange={handleFieldChange}
          typeOfTransfer={typeOfTransfer}
          initialValue={initialValue}
          isValid={isValid}
          equalDepartureHotelValue={equalDepartureHotelValue}
          setTimeToRenderBasedOnArrival={setTimeToRenderBasedOnArrival}
          hotelForDepartureRefs={hotelForDepartureRefs}
          setHotelForDepartureRefs={setHotelForDepartureRefs}
          setIsEnglishOnlyToggle={setIsEnglishOnlyToggle}
          testDispatch={testDispatch}
        />
      )}
    </div>
  );
}

// Optional styling for the map container (can be customized)
const mapContainerStyle = {
  width: '400px',
  height: '400px',
};

 
import React, { useState, useRef } from 'react';
import {
  useLoadScript,
  Autocomplete,
} from '@react-google-maps/api';
import { ConstructionOutlined } from '@mui/icons-material';

const libraries = ['places'];

const GoogleMapsDropdown = ({
  setHotelForTransfer,
  placeInList,
  hotelForTransfer,
  setIsEnglishOnlyToggle,
  handleFieldChange,
  typeOfTransfer,
  initialValue,
  isValid,
  equalDepartureHotelValue,
  setTimeToRenderBasedOnArrival,
  hotelForDepartureRefs,
  setHotelForDepartureRefs,
  testDispatch
}) => {
  const [location, setLocation] = useState(initialValue);
  const autocompleteRef = useRef(null);

  const handlePlaceSelected = () => {
    const newValue = autocompleteRef.current.value;
    setLocation(newValue); // Update state with the selected value
    alterTabHotelField(newValue);
    isEnglishOnlyInput(newValue);
  };

  function testDeptRefs(newValue) {
    const newArrayOfRefs = [...hotelForDepartureRefs];
    newArrayOfRefs[placeInList] = newValue;
    setHotelForDepartureRefs(newArrayOfRefs);
  }

  function alterTabHotelField(newValue) {
    const e = { target: { value: newValue || "", name: "hotel" } };
    handleFieldChange(e, placeInList, typeOfTransfer);
    if (typeOfTransfer === "arr") {
      handleFieldChange(e, placeInList, "dept");
    }
  }

  function isEnglishOnlyInput(content) {
    // setIsEnglishOnlyToggle
    const pattern = /^[!@#\$%\^\&*\)\(+=._-\s0-9a-zA-Z`~\[\]\{\}:;"'<>,./?\\|]*$/;




    if (pattern.test(content)) {
      testDispatch(placeInList, true)
    } else {
      testDispatch(placeInList, false)
    }
    
  }


  return (
    <><Autocomplete onPlaceChanged={handlePlaceSelected}>
      <input
        className={(isValid === false && initialValue === '') ? 'hotel-search-input-invalid' : 'hotel-search-input'}
        value={typeOfTransfer === "arr" ? location : hotelForDepartureRefs[placeInList]}
        ref={autocompleteRef}
        onChange={(event) => {

          setLocation(event.target.value);
          alterTabHotelField(event.target.value);
          isEnglishOnlyInput(event.target.value);
        }} // Update state and call alterTabHotelField
        inputProps={{
          placeholder: 'test',
        }}
      />
    </Autocomplete>
      {/* <button type="button" onClick={() => testDispatch()}>Test dispatch</button> */}
    </>

  );
};

export default function App({
  setHotelForTransfer,
  placeInList,
  hotelForTransfer,
  handleFieldChange,
  typeOfTransfer,
  initialValue,
  isValid,
  equalDepartureHotelValue,
  setTimeToRenderBasedOnArrival,
  hotelForDepartureRefs,
  setHotelForDepartureRefs,
  setIsEnglishOnlyToggle,
  testDispatch
}) {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: '',
    libraries,
  });

  return (
    <div ref={isLoaded ? mapContainerStyle : null}>
      {isLoaded && (
        <GoogleMapsDropdown
          setHotelForTransfer={setHotelForTransfer}
          placeInList={placeInList}
          hotelForTransfer={hotelForTransfer}
          handleFieldChange={handleFieldChange}
          typeOfTransfer={typeOfTransfer}
          initialValue={initialValue}
          isValid={isValid}
          equalDepartureHotelValue={equalDepartureHotelValue}
          setTimeToRenderBasedOnArrival={setTimeToRenderBasedOnArrival}
          hotelForDepartureRefs={hotelForDepartureRefs}
          setHotelForDepartureRefs={setHotelForDepartureRefs}
          setIsEnglishOnlyToggle={setIsEnglishOnlyToggle}
          testDispatch={testDispatch}
        />
      )}
    </div>
  );
}

// Optional styling for the map container (can be customized)
const mapContainerStyle = {
  width: '400px',
  height: '400px',
};