DEV Community: Wagner Fillio

Update useState immediately

Wagner Fillio — Thu, 25 Mar 2021 14:04:18 +0000

useState does not update the state immediately.

I'm using react-select and I need to load the component with the (multi) options selected according to the result of the request.

For this reason, I created the state defaultOptions, to store the value of the queues constant.

It turns out that when loading the component, the values are displayed only the second time.

I made a console.log in the queues and the return is different from empty.

I did the same with the defaultOptions state and the return is empty.

I created a codesandbox for better viewing.

const options = [
  {
    label: "Queue 1",
    value: 1
  },
  {
    label: "Queue 2",
    value: 2
  },
  {
    label: "Queue 3",
    value: 3
  },
  {
    label: "Queue 4",
    value: 4
  },
  {
    label: "Queue 5",
    value: 5
  }
];

const CustomSelect = (props) => <Select className="custom-select" {...props} />;

const baseUrl =
  "https://my-json-server.typicode.com/wagnerfillio/api-json/posts";

const App = () => {
  const userId = 1;
  const initialValues = {
    name: ""
  };
  const [user, setUser] = useState(initialValues);
  const [defaultOptions, setDefaultOptions] = useState([]);
  const [selectedQueue, setSelectedQueue] = useState([]);

  useEffect(() => {
    (async () => {
      if (!userId) return;
      try {
        const { data } = await axios.get(`${baseUrl}/${userId}`);
        setUser((prevState) => {
          return { ...prevState, ...data };
        });

        const queues = data.queues.map((q) => ({
          value: q.id,
          label: q.name
        }));

        // Here there is a different result than emptiness
        console.log(queues);
        setDefaultOptions(queues);
      } catch (err) {
        console.log(err);
      }
    })();

    return () => {
      setUser(initialValues);
    };
  }, []);

  // Here is an empty result
  console.log(defaultOptions);

  return (
    <div className="App">
      Multiselect:
      <CustomSelect
        options={options}
        defaultValue={defaultOptions}
        isMulti
      />
    </div>
  );
};
export default App;

Advanced Javascript - List Json data in HTML using loop and triggering an element change event, using Revealing Pattern

Wagner Fillio — Thu, 09 Jul 2020 00:57:50 +0000

I wrote a working example of a real problem that I'm trying to solve

I created an object simulating the json return I have from the database

I need:

list contracts and contract batchs
when entering the function, mark the last batch of the contract as selected in the drop-down list
when entering the function, display the invoices for the last batch only of the contract selected in the ul-invoices element.
load and display the respective invoices when changing the batch

Problems:

I cannot list invoices for the last batch of the selected contract
Although there is a function for onchange="getInvoices", I always getInvoices is not defined

Note:

When entering the page, I already have the information of the selected contract, in the case of the example, I left the contract with ID 1.
In the example I am using the in-attendance class to define the selected contract
I am using Revealing Pattern and I want to keep this pattern

<html>
    <label id="contracts"></label>
    <ul id="ul-invoices"></ul>

    <script>
        let lblContract = document.querySelector('#contracts');
        let UlInvoices = document.querySelector('#ul-invoices');

        let contractInAttendance = 1;

        const objectContract = {
            id: 1,
            nome: 'wagner',
            contracts: [{
                id: 1,
                contract: '123456',
                batches: [ {
                    id: 1,
                    contract_id: 1,
                    batch: '1',
                    invoices: [ {
                        value: 10,
                        batch_id: 1,
                    }]
                },
                {
                    id: 2,
                    contract_id: 1,
                    batch: '2',
                    invoices: [{
                        value: 10,
                        batch_id: 2,
                    }]
                }]
            },
            {
                id: 2,
                contract: '246789',
                batches: [ {
                    id: 3,
                    contract_id: 2,
                    batch: '1',
                    invoices: [ {
                        value: 20,
                        batch_id: 3,
                    }]
                }]
            }]
        }

        const revelling = (function() {

            function privateInit() {
                const contracts = objectContract.contracts;
                let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance);

                for (const contract of contracts) {
                    const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : '';

                    //let batchFilteredById = contract.batches.filter(batch => batch.id === batchInAttendance);

                    let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join('');
                    lblContract.innerHTML +=
                    `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch" onchange="getInvoices(this)">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;

                    const batchOption = document.querySelector('select.sel-batch');
                    batchOption.value = 2;

                    /!* create method for load invoices */

                }
            }

            /!* Method fix for load invoices onchange sel-batch */
            function getInvoices(selectObject) {
                console.log('populate invoices element #ul-invoices');
            }

            return {
               init: privateInit()
            }

        })();
        revelling.init;
    </script>

</html>

jQuery to VannilaJS (export function using ES6)

Wagner Fillio — Fri, 20 Mar 2020 15:21:57 +0000

Hi, This script transforms the first letter of each word into a capital letter, except for some words that are part of the arrays of the variables wordContainAt, wordsToIgnore, wordUpperCase.

I'm having trouble refactoring a code made in jQuery toJavascript Vannila, using the ES6 export.

I think I didn't understand this concept very well, besides not being able to get the this object, within the scope of the function.

Can someone help me ?


javascript
$(window).on('load', function() {
    $.fn.capitalize = function() {
        // words to ignore
        let wordContainAt = '@',
            wordsToIgnore = ['to', 'and', 'the', 'it', 'or', 'that', 'this', 'dos', 'rua-', 'das', 'rh', 'r'],
            wordUpperCase = ['LTDA', 'S.A', 'S.A.', 'SMS', 'LJ', 'CS', 'II'],
            minLength = 2;

        function getWords(str) {
            if (str == undefined) {
                str = 'abc def';
            } else {
                str = str;
            }
            return str.match(/\S+\s*/g);
        }
        this.each(function() {
            let words = getWords(this.value);
            console.log(words);
            $.each(words, function(i, word) {
                // only continues if the word is not in the ignore list or contains at '@'
                if (word.indexOf(wordContainAt) != -1) {
                    words[i] = words[i].toLowerCase();
                } else if (wordUpperCase.indexOf($.trim(word).toUpperCase()) != -1) {
                    words[i] = words[i].toUpperCase();
                } else if (wordsToIgnore.indexOf($.trim(word)) == -1 && $.trim(word).length > minLength) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1).toLowerCase();
                } else {
                    words[i] = words[i].toLowerCase();
                }
            });
            if (this.value != '') {
                this.value = words.join('');
            }
        });
    };

    // field onblur with class .lower
    $(document).on('blur', '.lower', function() {
        $(this).capitalize();
    }).capitalize();
});


/// I need help in this code below
const capitalizeTheWord = () => {
    console.log('teste');
    const inputWordCapitalize = document.querySelector('input.word-capitalize');
    inputWordCapitalize.addEventListener('keypress', (e) => {
        // more code
    });
};
export default capitalizeTheWord();