Saving of Fips

PHOTO

Wed Jan 03 2024 18:25:16 GMT+0000 (Coordinated Universal Time)

Saved by @bfpulliam #react.js

      <FormLayoutSection className="Location-Info" title="Location Info">
        <div className="mb-5">
          <div className="inline-flex justify-between w-full">
            <div className="block mb-1 text-sm font-semibold text-gray-700 dark:text-gray-100">
              County FIPS(s):
              <span className="text-red-500 text-md">{`  `}*</span>
            </div>
            <Tooltip
              className="-mt-1"
              direction="left"
              content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
            />
          </div>
          {/* {FIPSList.map(fipsCode => (
            <div key={fipsCode}>
              <input
                type="checkbox"
                id={fipsCode}
                name="CountyFIPS"
                value={fipsCode}
                ref={register({ required: true })}
                onChange={() => handleSelect(fipsCode)}
                checked={selectedOptions.includes(fipsCode)}
              />
              <label htmlFor={fipsCode}>
                {fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
              </label>
            </div>
          ))} */}
          {/* {FIPSList.map(fipsCode => (
            <div key={fipsCode}>
              <Checkbox
                id={fipsCode}
                name="CountyFIPS"
                value={fipsCode}
                ref={register({ required: true })}
                defaultChecked={false}
              >
                {fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
              </Checkbox>
            </div>
          ))} */}
        </div>
        <div className="mb-5">
          <Controller
            name="CountyFIPS"
            control={control}
            defaultValue={[]}
            render={({ ...field }) => (
              <div>
                {FIPSList.map(fipsCode => (
                  <label key={fipsCode} className="inline-flex items-center">
                    <input
                      className="rounded border-gray-300 focus:ring-2 focus:ring-opacity-50"
                      type="checkbox"
                      {...field}
                      value={fipsCode}
                      checked={field.value.includes(fipsCode)}
                      onChange={e => {
                        const selectedOptions = [...field.value]
                        if (e.target.checked) {
                          selectedOptions.push(fipsCode)
                        } else {
                          const index = selectedOptions.indexOf(fipsCode)
                          if (index > -1) {
                            selectedOptions.splice(index, 1)
                          }
                        }
                        field.onChange(selectedOptions)
                      }}
                    />
                    <span className="mx-2 text-sm">
                      {fipsCode} - {findFipsCodeName(fipsCode)},{' '}
                      {findFipsCodeState(fipsCode)}
                    </span>
                  </label>
                ))}
              </div>
            )}
          />
          {/* <MultiSelect
            id="CountyFIPS"
            ref={register({ required: true })}
            name="CountyFIPS"
            label="OCV County FIPS(s):"
            labelTooltipComponent={
              <Tooltip
                content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
                direction="left"
              />
            }
            required
            multiple
            onChange={event => {
              if (event.target.value === 'Select FIPS Code') {
                setError('CountyFIPS', {
                  type: 'manual',
                  message: 'Please select the FIPS Code',
                })
              }
            }}
            onBlur={event => {
              if (event.target.value === 'Select FIPS Code') {
                setError('CountyFIPS', {
                  type: 'manual',
                  message: 'Please select the FIPS Code',
                })
              }
            }}
            value={FIPSList}
          >
            <option defaultValue="">Select FIPS Code</option>
            {FIPSList.map((fipsCode, index) => (
              <option key={index} value={fipsCode}>
                {fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
              </option>
            ))}
            {!FIPSList.length && (
              <option defaultValue="">No FIPS Codes. Please add in settings.</option>
            )}
          </MultiSelect> */}
          <p className="text-sm text-red-500">
            {errors.CountyFIPS && errors.CountyFIPS.message}
          </p>
        </div>
        <div className="mb-5">
          <p className="block text-sm font-semibold text-gray-700 dark:text-gray-100">
            Validation Info:{' '}
            <span className="text-sm font-semibold text-red-500">
              {locationPoints > 100 &&
                'More than 100 points added please remove locations.'}{' '}
              {locationShapes > 10 &&
                'More than 10 shapes added please remove locations.'}
            </span>
          </p>
          <p className="text-sm font-semibold text-gray-700 dark:text-gray-100">
            {locationPoints} Points - {locationShapes} Shapes
          </p>
        </div>
        {!locationShapes && (
          <div className="px-2 py-1 bg-yellow-700 rounded-md mb-5">
            <p className="text-md font-semibold text-gray-100">
              Note: If no shape is selected, the notification will go to the entire FIPS
              Code.
            </p>
          </div>
        )}

        {/* {notificationType === 'IPAWS' && (
            //   <Input
            //     id="CountyFIPS"
            //     name="CountyFIPS"
            //     type="number"
            //     onBlur={e =>
            //       e.target.removeEventListener('wheel', function (e) {
            //         e.preventDefault()
            //       })
            //     }
            //     onFocus={e =>
            //       e.target.addEventListener(
            //         'wheel',
            //         function (e) {
            //           e.preventDefault()
            //         },
            //         { passive: false }
            //       )
            //     }
            //     label="County FIPS(s):"
            //     labelTooltipComponent={
            //       <Tooltip
            //         content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
            //         direction="left"
            //       />
            //     }
            //     placeholder="######"
            //     required
            //     ref={register({
            //       required: true,
            //       validate: validateSixDigits,
            //     })}
            //     error={errors.FIPS ? errors.FIPS.message : ''}
            //   />
            // )}
            // {errors.CountyFIPS && (
            //   <p className="text-sm text-red-500">{errors.CountyFIPS.message}</p>*/}
        {/* <div className="mb-5">
          <NativeSelect
            id="CountyFIPS"
            ref={register({ required: true })}
            name="CountyFIPS"
            label="County FIPS(s):"
            labelTooltipComponent={
              <Tooltip
                content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
                direction="left"
              />
            }
            required
            onChange={event => {
              if (event.target.value === 'Select FIPS Code') {
                setError('CountyFIPS', {
                  type: 'manual',
                  message: 'Please select the FIPS Code',
                })
              }
            }}
            onBlur={event => {
              if (event.target.value === 'Select FIPS Code') {
                setError('CountyFIPS', {
                  type: 'manual',
                  message: 'Please select the FIPS Code',
                })
              }
            }}
          >
            <option defaultValue="">Select FIPS Code</option>
            {FIPSList.map((fipsCode, index) => (
              <option key={index} value={fipsCode}>
                {fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
              </option>
            ))}
            {!FIPSList.length && (
              <option defaultValue="">No FIPS Codes. Please add in settings.</option>
            )}
          </NativeSelect>
          <p className="text-sm text-red-500">{errors.CountyFIPS && errors.CountyFIPS.message}</p>
        </div> */}
        {/* <MultiSelect options={FIPSList} onSelect={handleSelect} ref></MultiSelect> */}

        <div className="flex flex-col">
          <p className="block mb-1 text-sm font-semibold text-gray-700 dark:text-gray-100">
            Choose a Geographic Location
          </p>
          <Button
            onClick={mapModalState}
            icon={<Icon className="mr-2 -ml-1" name="globe" />}
          >
            Choose Location
          </Button>
        </div>
      </FormLayoutSection>

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

useWorker | useWorker

https://useworker.js.org/

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

import React, { useState, useEffect } from 'react';

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


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

GRID material ui

<Grid container><Grid item></Grid></Grid>

MATERIAL UI _ custom style

import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;

#react.js #setstate

A correct way to log the current state after the update would be:

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

Browse more snippets >>