Forem: Muhammad Yusuf

Javascript Generator Function Basics

Muhammad Yusuf — Tue, 27 Jul 2021 08:03:30 +0000

We'll learn about javasciprt feature not many people use or talk about. It's generator function. So what is it?

Generator function is a function that can generate more than one value. So how do we make it?

function* greet() {
  yield 'Hello World!'
}

So what's different with regular function? First, instead of function we define it with asterisk function* to indicate this isn't your regular function. Then instead of return a value, we yield it. The special thing about yield is that the function can be yield-ed more than once!

function* greet() {
  yield 'Hello world!'
  yield 'Hello again!'
  yield 'Hello, I am bored'
}

Now how do we get those values? First we can turn it into generator object by invoking it.

let word = greet()
console.log(word) // Object [Generator] {}

And then we can get the values by invoking the next method from the word variable.

let word = greet()
console.log(word.next()) // { value: 'Hello world!', done: false }

Notice that the value logged turned into an object with 'Hello world!' there in value property. And we have another property called done with value false, what is that? The done property indicates whether all the value from greet function has been yielded or not. In a simple way, it tells you:

Hey this is the value you wanted, but I'm not done yet. I still have more.

So if we want to get the other values, we can do it again and again, you get the idea:

let word = greet()
console.log(word.next()) // { value: 'Hello world!', done: false }
console.log(word.next()) // { value: 'Hello again!', done: false }
console.log(word.next()) // { value: 'Hello, I am bored!', done: false }

But wait, is that it? Kind of. Because you can still call next after that. It's just... not too necessary. But hey it's your code.

...
console.log(word.next()) // { value: 'Hello, I am bored!', done: false }
console.log(word.next()) // { value: undefined, done: true }
console.log(word.next()) // { value: undefined, done: true }
console.log(word.next()) // { value: undefined, done: true }

Working with loop

Now assuming the generator function is not ours (maybe it's a package) how do we know how may values can we yield? We can get all of them by using for ... of loop.

for(let w of word) {
  console.log(w)
}
/*
Hello world!
Hello again!
Hello, I am bored
*/

Endless value generator

Now say that we want to get the first 5 numbers that are divisible by 3 (3, 6, 9, 12, 15). But when i want the first 7 numbers, 18 and 21 will come along. We can make our function like this:

function* divisibles3() {
  let num = 1
  while(true) {
    if(num % 3 === 0) yield num
    num++
  }
}

let n = divisibles3()

We can get the values by calling it as many as we want:

// 1. First 5
console.log(n.next().value) // 3
console.log(n.next().value) // 6
console.log(n.next().value) // 9
console.log(n.next().value) // 12
console.log(n.next().value) // 15

// 2. Fisrt 7
for(let i = 0; i < 5; i++) {
  console.log(n.next().value) // 3, 6, 9, 12, 15, 18, 21
}

Or better, we can make it dynamic so the function can take any divisible:

function* divisibles(div) {
  let num = 1
  while(true) {
    if(num % div === 0) yield num
    num++
  }
}

Now we can get any first numbers divisible by any number:

// 1. First 3 divisible by 4
let n = divisibles(4)
for(let i = 0; i < 3; i++) {
  console.log(n.next().value) // 4, 8, 12
}
// 2. Fisrt 4 divisible by 7
let n = divisibles(7)
for(let i = 0; i < 4; i++) {
  console.log(n.next().value) // 7, 14, 21, 28
}

Source:

dcode: https://www.youtube.com/watch?v=EzdgkEMvrvA&t=4s

Create react form without making multiple requests

Muhammad Yusuf — Thu, 22 Jul 2021 06:43:37 +0000

If you're reading this, maybe you've been in a situation where you're making a react form where you hit an API when you type in the search box, but the downside is when you type 'batman', the axios made 6 different requests which is 'b', 'ba', 'bat', 'batm', 'batma', and the actual query we're looking for, 'batman'. I hope this article works for you. Let's get started!

Assuming you've initialized the react app by using:

npx create-react-app .

and installed axios by using:

npm i axios

Let's start with initial code in app.js, we'll make a book search feature:

import './App.css';

function App() {
  return (
    <div className="App">
        <input type="text" />
        <div>Result</div>
      <div>Loading...</div>
      <div>Error</div>
    </div>
  );
}

Inside the default App div, we put a text input and three different divs, each for result, loading, and error.

Now we create our states by importing useState and useEffect:

import { useState, useEffect } from 'react'

and define our book states at the beginning of the App function (before return):

const [query, setQuery] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState(true)
const [books, setBooks] = useState([])

Then we'll create the axios request in the useEffect hook:

useEffect(() => {
  setLoading(true)
  axios({
    method: 'get',
    url: 'http://openlibrary.org/search.json',
    params: { q: query }
  })
    .then(response => {
        let data = response.data.docs.map(book => book.title)
      console.log({ query, data })
        setBooks(data)
        setLoading(false)
    })
    .catch(err => {
        setError(err)
        setLoading(false)
    })
}, [query])

We set the loading value with true to indicate that the axios is sending a request to the url, and set it to false after we get either result. And we set the books value with only their title if it succeeded, and set the error if it failed.

Then we 'rework' the three divs like this:

{
  books.map((book, index) => {
    return <div key={book}>{ book }</div>
  })
}
{
  loading &&
  <div>Loading..</div>
}
{
  error &&
  <div>Error</div>
}

And after you run it by using:

npm run start

and type 'batman', it should look like this:

Notice the queries were finished in an order we don't want, so the most recent query we'll get is the query 'b' instead of 'batman'. So now we'll make it so the axios only take the last change made in the input, which is 'batman'.

axios.CancelToken

Actually axios has an option called cancelToken that can be used to cancel the request. How do we do that? By putting it to the option when we make a request:

useEffect(() => {
  let cancel;
  console.log('axios called')
  axios({
    method: 'get',
    url: 'http://openlibrary.org/search.json',
    params: { q: query },
    cancelToken: new axios.CancelToken(c => cancel = c)
  })
    .then(...)
    .catch(...)
  return () => cancel()
})

The cancel variable will then hold the cancel function from axios.CancelToken, and will be called in useEffect callback return so axios will be cancelled once another useEffect is triggered.

Now we can test it out by running:

npm run start

And type 'batman' in our search box, we'll only get one request

Notice that axios was called 6 times, but only 'batman' request was sent, because the 'b', 'ba', 'bat', 'batm', 'batma' requests are cancelled.

Lastly, we'll get an error for every request cancellation, but because that is intended we can filter the error out by adding conditional in our catch block:

.catch(err => {
  if (axios.isCancel(err)) return
  ...
})

source:
Web Dev Simplified
https://www.youtube.com/watch?v=NZKUirTtxcg

Axios Documentation
https://github.com/axios/axios

Using GraphQL in Express JS

Muhammad Yusuf — Wed, 14 Jul 2021 05:05:34 +0000

GraphQL is a useful query language for your API. But it can be intimidating because they bring the complexity upfront as there are a lot that has to be set up before we can create our first query. I hope this article will be useful and understandable. Let's get started!

First things first, we'll need to require our module to our file and put some basic express boilerplate, let's say it's called app.js:

const express = require('express')
const app = express()
const { graphqlHTTP } = require('express-graphql')
const port = 3000

// We'll put everything here later

// This code below must be on the last part of the file
app.listen(port, () => {
  console.log('Listening on port:', port)
})

Then we'll create our first and (maybe) only route in this article:

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true
}))

Instead of using (req, res) => {} to the callback we put an invoked graphqlHTTP function, so we can let the graphql do its thing. Inside the graphqlHTTP, we put a object that contains option to switch the graphiQL interface on, and schema that we'll create later on.

So what's a schema?

Schema defines a hierarchy of types with fields that are populated from your back-end data stores. The most basic components of a GraphQL schema are object types for query and mutation (optional), which just represent a kind of object you can fetch from your service, and what fields it has.

In the simplest way, we might represent the object types like this:

{
  name: 'Book',
  fields: {
    title: { type: GraphQLString },
    author: { type: GraphQLString }
  }
}

What's GraphQLString? It's a type that can only be recognized by graphQL instead of regular String in javascript. They have other types as well like GraphQLInt, GraphQLList, and GraphQLObjectType. And we can define them like this:

const {
  GraphQLSchema, // for base schema type
  GraphQLString,
  GraphQLInt,
  GraphQLList,
  GraphQLObjectType
} = require('graphql')

Now before we make our schema, we can create our own type first by putting the book object from earlier.

const BookType = new GraphQLObjectType({
  name: 'Book',
  fields: {
    title: { type: GraphQLString },
    author: { type: GraphQLString }
  }
})

Then we create our query object and prepare it with a small dummy data:

let dummyBooks = [
  { title: 'Harry Potter', author: 'JK Rowling' },
  { title: 'Lord of The Rings', author: 'JRR Tolkien' },
  { title: 'Sherlock Holmes', author: 'Arthur Conan Doyle' }
]

const queryType = new GraphQLObjectType({
  name: 'Book query',
  fields: function () {
    return {
      // we called it books so we can type 'books' later on
      books: {
        type: new GraphQLList(BookType),
        resolve: function () {
          return dummyBooks
        }
      }
    }
  }
})

Query object requires fields function that returns an object. The object itself contains properties of what we want to find via the query later on. And each has to have type and resolve. type property defines the type returned to us users and resolve gives the actual data, which is dummyBooks.

Lastly, we can define our schema like this:

const schema = new GraphQLSchema({
  query: queryType
})

Running the file

Now we can run this from terminal:

node app.js

Type this in the browser:

localhost:3000/graphql

Now you'll see this:

There are two main parts in the screen, the white part on the left is the query editor, we can crate our query there. And the gray part on the right side will show the result of query done in the left.

Now we can create our first query:

query {
  books {
    title
  }
}

Notice there's no author in the query, and we'll get the data exactly like our query format:

{
  "data": {
    "books": [
      {
        "title": "Harry Potter"
      },
      {
        "title": "Lord of The Rings"
      },
      {
        "title": "Sherlock Holmes"
      }
    ]
  }
}

source: https://graphql.org/learn/

Handling multiple checkboxes in react

Muhammad Yusuf — Wed, 05 May 2021 08:47:29 +0000

Let's say we want to have input for our favorite foods and we want to show it on the page.

First, we should prepare two variables, one for the food list, and another for a list of the selected food which is empty by default.



this.state = {
  foods: [
    {
      id: 1,
      name: '🍕'
    },
    {
      id: 2,
      name: '🍙'
    },
    {
      id: 3,
      name: '🍰'
    },
  ],
  selected: [],
}

Now we make the form and show the selected state.



<form>
  <p>
    { JSON.stringify(this.state.selected) }
  </p>
  <p>Foods</p>
  {
    this.state.foods.map(item => {
      return (
        <label key={ item.id }>
          <input type="checkbox"></input>
          <span>{ item.name }</span>
        </label>
      )
    })
  }
</form>

For checkbox input, we need to add selected and the usual onChange attributes.



<input type="checkbox"
  onChange={ () => this.onChange(item.id) }
  selected={ this.state.selected.includes(item.id) }
  ></input>

The selected attribute accepts a boolean value that specifies if the input should be 'pre-selected' (checked) or not. And the onChange attribute will be triggered each time the input is checked and unchecked.

So because of this behavior, we have to put a function on the onChange attribute.



onChange(id) {
  let selected = this.state.selected
  let find = selected.indexOf(id)

  if(find > -1) {
    selected.splice(find, 1)
  } else {
    selected.push(id)
  }

  this.setState({ selected })
}

find is a variable that checks whether the checked item is in the selected array or not. find > -1 means that the item exists in the selected variable and it is checked so we want to remove it from the selected list while find == -1 means the opposite. The item doesn't exist in the selected array so we want to add it to the array.

Now it should look like this

Beyond IDs

If you want to keep the whole object (not only the id), we can change the way we find the index and push the item to the selected array



onChange(id) {
  let selected = this.state.selected
  // instead of using indexOf, we can use findIndex to look through array of objects
  let find = selected.findIndex(item => item.id === id)

  if(find > -1) {
    selected.splice(find, 1)
  } else {
    // We can use find to get the item based on its id
    selected.push(this.state.foods.find(item => item.id === id))
  }

  this.setState({ selected })
}

Now it should look like this

Sorting

And finally, basically the selected array has no specific order so if you want to keep the order you can add some sorting method before we use the setState.



// sort by id in ascending order
selected.sort((a, b) => a.id - b.id)

Handling react input forms (and their states)

Muhammad Yusuf — Tue, 04 May 2021 07:05:56 +0000

Overview & text input

In react, form input is usually handled by the components while in HTML is handled by the DOM.

Basically a HTML form can be as simple as this:

<form>
  <p>Name:</p>
  <input type="text"/>
</form>

By default, this form will bring you to a new page. But most of the time there will be a script to handle the form submission and has access to the submitted value.

Now let's say we want to show what's being submitted by the user by showing what they're typing. We can do that by converting the form into a new component first

class App extends React.component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <form>
        <p>Name</p>
        <input type="text"/>
      </form>
    )
  }
}

Then we need to define its state and add the onChange handler so we can get the name value and show it later on.

class App extends React.component {
  constructor(props) {
    super(props)
    this.state = { name: '' }
  }
  render() {
    return (
      <form>
        <p>Name:</p>
        <input type="text"
          onChange={(e) => this.setState({ name: e.target.value }) }/>
      </form>
    )
  }
}

Now we can see the current state by putting it in the render method. And finally, we can put the current state value to the input so the input won't be empty on the first load.

<form>
  { JSON.stringify(this.state) }
  <p>Name</p>
  <input type="text"
    value={ this.state.name }
    onChange={(e) => this.setState({ name: e.target.value })} 
  />
</form>

Now it should look like this

Other input types (number, radio, select-option, checkbox)

For other input types, we need to add more variables for each respective input.

this.state = {
  name: '',
  age: 10, // for number
  gender: 'none', // for radio
  occupation: 'none', // for select-option
  isCool: false // for checkbox
}

For number input, it's similar to the text input, we can add it below the name input

<p>Age:</p>
<input type="number" value={ this.state.age }
  onChange= { e => { this.setState({ age: Number(e.target.value) })}}
  ></input>

Now with radio input, it needs an additional attribute called checked, it determines if the radio button is selected (checked) or not by accepting a boolean or true/false value.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>

If you want multiple radio buttons which most of the time happens, you can duplicate the input tag with another different value in value, checked, and onChange attributes.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>
<input type="radio" name="gender" value="female"
  checked={ this.state.gender === 'female' }
  onChange={ e => { this.setState({ gender: 'female' }) }}
  />
<label>Female</label>

For select-option, each option will have its value as usual, but if you want a value to be initially selected you can put value attribute to the root select tag along with onChange attribute.

<p>Occupation:</p>
<select name="occupation" value={ this.state.occupation } onChange={ e => this.setState({ occupation: e.target.value })}>
  <option value="">-- SELECT --</option>
  <option value="Frontend">Frontend</option>
  <option value="Backend">Backend</option>
  <option value="Full Stack">Full Stack</option>
</select>

And finally, for checkbox input, you can add checked and onChange attributes.

<p>Are you cool?</p>
<input type="checkbox" checked={ this.state.isCool } onChange={ e => this.setState({ isCool: e.target.checked })}/>
<label>Of course I'm cool!</label>

Now you can access all the input in your script and it should look like this

For further reading, you can go to:
https://reactjs.org/docs/forms.html