DEV Community: Phan Công Thắng

Know this thing in Cypress

Phan Công Thắng — Sat, 13 Nov 2021 00:43:55 +0000

Why Cypress!

We are working on a project that uses the Next.js framework. And in order to do unit tests for the project. We use Jest.

Jest is so great!

But when we want to test the unit page of Next.js, Jest feels a little bit harder to implement. Instead of using Jest, Cypress is an amazing selection for our goal.

In this article, we're going to figure some core concepts of Cypress.

Let's grab a drink and go forward!

before-after

When we run our test in Cypress environment, we are able to run debug or do some stuff in the browser.

For example:

I want to check the input whether it's typed or not, I need to do this flow:

Type some inputs.
Confirm the inputed value.

With this flow, the great thing in Cypress is I am able to travel forward or backward the action.

I can go backward to the input when it isn't typed. Or just go forward to the input when it is typed.

In order to better of understanding, I'm going to demo the before-after in Cypress.

This is the flow:

Having an input that isn't typed any words.
Type some words in the input.
Observe the after state in Cypress.

Step1: Create a page in Next.js

There are an input element and a label element in our page.

export default function BeforeAfter() {
  return (
    <div>
      <form>
        <label htmlFor="username" aria-describedby="userName">
          Username:
        </label>

        <input id="username" aria-describedby="userName" />
      </form>
    </div>
  )
}

Step2: Write Cypress Code

First of all, create a new file cypress.ts under the cypress folder in order to connect with Cypress.

it('by default, the number of cars is shown on the screen', () => {
  cy.visit('/before-after')

  cy.findByLabelText(/username/i).type('Henry Ford')
})

Next, we go to the BeforeAfter page, find the label username(input element), and type Henry Ford for it.

Now, on the left side, you are able to click the type state and pin it. The before and after state immediately appears. Press before and after button on the screen, we can see the content of the input is changed before
typing and after typing.

Query DOM

Asynchronous

Did you be familiar with Jquery?

Did you do some query like $(.className)?

Using Jquery, we are able to query the element in a synchronous way, and if we don't find the element, Jquery will return null for us.

But in Cypress, we don't do it synchronously, we find the element in the asynchronous way.

If the element isn't found the first time, Cypress will retry to find the element in the fixed time(4000ms).

After this fixed time, if Cypress still don't figure out the element, we will receive an error.

For ease of understanding, let's describe through the example below!

cy.get('p.username')

This is the way Cypress does:

Find the p element with class username.
If the element is found just yield it.
If the element isn't found, find the element again.
In 4000ms if Cypress still doesn't see the element, throw error for us.

Content

We also can query the element from the content of the element using contains function.

cy.contains('awesome')

We tell Cypress to find the element that has the word awesome on the screen.

Command Running

Command Asynchronous

All commands in Cypress are asynchronous. Let's discover it through the example below!

let userName = undefined

cy.get('p.name').then(($) => {
  userName = ...
})

if(userName) {
  // do some thing
} else {
  // do some thing
}

Take a look at the code above, the userName value always is undefined because the command cy.get('p.name') is asynchronous, it still doesn't finish!

How to resolve the problem above?

We just move the if else condition to .then that the element is found.

let userName = undefined

cy.get('p.name').then(($) => {
  userName = ...

  if(userName) {
  // do some thing
} else {
  // do some thing
}
})

Command Asynchronous Step By Step

Imagine that we have the code below:

cy.visit('/user-name') // 1

cy.get('input.name').type('Henry Ford') // 2,3

cy.get('button#submit').click() // 4,5

How Cypress command is run, can you guess it?

This is the way Cypress does for us:

Visit the link and wait, retry until the successful state is achieved.
Get the input with class name, wait, retry until the element is figured out.
Type the content.
Get the button with id submit, wait, retry until the element is figured out.
Trigger the click event.

In the flow above, if Cypress doesn't find the element in the retry process, it throws the error for us.

In the code above, we don't stop visiting the about route, we also wait for the load event finishes, we have DOM, and we can do some stuff after that.

Assertions

default assertions

The great thing in cypress is default assertions, what's default assertions?

cy.get('div.container').get('p.name').contains('your name')

Take a look at the code above, we have one chain with 2 steps:

find the div element with the class container
find the p element with the class name

With this chain, by default Cypress auto add assertion, assert the class container exists, and the class name exists.

should or expect

In Cypress, we have two ways in order to assert the behavior that we expect.

should
expect

Using should is preferred to use, because it's short, easy of watching the behavior happened before we have this goal.

There are a ton of property that should is supporting, take a look at the Cypress doc to see in detail.

Recap

We just learned about the core concept in Cypress, Let's recap some key points!

We can debug and travel all of the states in Cypress.
Query the element in Cypress is asynchronous.
Commands in Cypress is run asynchronously.
By default, Cypress automatically has default assertions.
Prefer to use should instead of expect.

Build this pagination in your React

Phan Công Thắng — Sun, 07 Nov 2021 02:40:11 +0000

I have data that is fetched from the API, and I would like to paginate this data. In this post, I’m going to implement pagination using React.

Requirement

Suppose that the API returns for me the total page value, and I need to use this value to make pagination. And I also need to have the current page in case the user moves on other pages.

This is the requirement:

Flow

Now, we had the simple requirement. I'm going to draw the flow before moving the coding step.

In this example, I think I need to have:

Render all pages based on the total page value.
A state pageIndex which points to the current page.

Coding

First of all, we need to have a Next.js project. Let's do it quickly!

npx create-next-app@latest --typescript

Step1: Render all pages using the total page value.

Just for the demo, so I'm going to hard code the total page value. I set it to 20.

import type {NextPage} from 'next'
import styles from '../styles/Home.module.css'

const PAGE_TOTAL = 20

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <ul className={styles.pagination}>
        {Array.from({length: PAGE_TOTAL}, (_, idx) => (
          <li className={styles.pageItem}>{idx + 1}</li>
        ))}
      </ul>
    </div>
  )
}

export default Home

Notice how I render the pages, and the number of the page just use Array.from and idx + 1.

Step2: Make the current page.

In this step, I need to make the current page.

First, define a new state in React:

const [pageIndex, setPageIndex] = React.useState(0)

By default, the current page is 0.

Next, add a function that helps us to change the current page.

function handlePageChange(idx: number) {
  setPageIndex(idx)
}

Finally, add the style for the current page, and the onClick event.

<li
  className={`${styles.pageItem} ${
    idx === pageIndex ? styles.currentPage : ''
  }`}
  onClick={() => handlePageChange(idx)}
>
  {idx + 1}
</li>

Now, we are able to change the current page.

So far, we almost finished the pagination. But suppose that I only want to render 5 pages on the screen, and whenever I click on another page, the pages automatically increase.

Can I make it?

Yes, Let's go forward!

Next requirement

In this section, we are going to make our pagination more interactive. We need to render 5 pages on the screen, and the other pages automatically change based on the current page.

For ease of imagination, take a look at the image below:

Next Flow

Based on the requirement above, to implement the new pagination, I need to make a new flow for my pagination.

We have three cases:

The total page value is less than 5.
The total page value is greater than 5 plus the pageIndex value.
The total page value is less than 5 plus the pageIndex value.

Let's break down these cases above in more detail!

The total page value is less than 5.

I set the total page value is 20, it definitely doesn't happen. But in the real world, maybe it will happen.

In this case, we don't need to change the logic code anymore. Just keep the code in the previous requirement.

The total page value is greater than 5 plus the `pageIndex` value.

Whenever we click the new page, the clicked page will move on the first positions and the remaining pages automatically are rendered.

The total page value is less than 5 plus the `pageIndex` value.

In this case, we can't automatically increase the pages, just change the current page value.

Next Coding

We need to change three things in the previous code:

The number of the page.
The total pages is rendered on the screen.
The function which we use in order to change the current page.
The current page logic.

The total page value is less than 5.

<li
  className={`${styles.pageItem} ${
    idx === pageIndex ? styles.currentPage : ''
  }`}
  onClick={() => handlePageChange(idx)}
>
  {idx + 1}
</li>

The total page value is greater than 5 plus the `pageIndex` value.

In this case, we need to implement these requirements below:

The number of the page is the current page index plus current index where we clicked.
The total pages: 5.
The current page index always zero.

{
  Array.from({length: 5}, (_, idx) => (
    <li
      className={`${styles.pageItem} ${idx === 0 ? styles.currentPage : ''}`}
      onClick={() => handlePageChange(pageIndex + idx)}
    >
      {pageIndex + idx + 1}
    </li>
  ))
}

The total page value is less than 5 plus the `pageIndex` value.

In this case, we need to implement these requirements below:

The right pages that are calculated from the current page index to the total page value, it's not equal to 5, so we need to take the remaining pages on the left side and the start index is the first page in the left side pages.
The total pages: 5.
The current page index always zero.

const PAGE_TOTAL = 20

const Home: NextPage = () => {
  const [pageIndex, setPageIndex] = React.useState(17)

  function handlePageChange(idx: number) {
    setPageIndex(idx)
  }

  // the right pages: 18,19,20
  // the left pages: 16,17
  // the start index: 15(page 16)
  const numberOfRightPages = PAGE_TOTAL - pageIndex
  const numberOfLeftPages = 5 - numberOfRightPages
  const startPageIndex = pageIndex - numberOfLeftPages

  return (
    <div className={styles.container}>
      <ul className={styles.pagination}>
        {Array.from({length: 5}, (_, idx) => (
          <li
            key={`pagination-items-${idx}`}
            className={`${styles.pageItem} ${
              startPageIndex + idx === pageIndex ? styles.currentPage : ''
            }`}
            onClick={() => handlePageChange(startPageIndex + idx)}
          >
            {startPageIndex + idx + 1}
          </li>
        ))}
      </ul>
    </div>
  )
}

Improvement

We have three cases, consider these cases, there are four different logic.

The number of page.
The current page check.
The page index.
The total page.

And we can improve our code by writing the component using
Inversion of Control method.

import type {NextPage} from 'next'
import styles from '../styles/Home.module.css'
import * as React from 'react'

const PAGE_TOTAL = 20
const NUMBER_PAGE = 5

function Pagination({
  length,
  isCurrentPage,
  goToNewPage,
  makeNumberPage,
}: {
  length: number
  isCurrentPage: (idx: number) => boolean
  goToNewPage: (idx: number) => void
  makeNumberPage: (idx: number) => number
}) {
  return (
    <ul className={styles.pagination}>
      {Array.from({length}, (_, idx) => (
        <li
          className={`${styles.pageItem} ${
            isCurrentPage(idx) ? styles.currentPage : ''
          }`}
          onClick={() => goToNewPage(idx)}
        >
          {makeNumberPage(idx)}
        </li>
      ))}
    </ul>
  )
}

const Home: NextPage = () => {
  const [pageIndex, setPageIndex] = React.useState(0)

  function handlePageChange(idx: number) {
    setPageIndex(idx)
  }

  if (PAGE_TOTAL < NUMBER_PAGE) {
    return (
      <Pagination
        length={PAGE_TOTAL}
        isCurrentPage={(idx) => idx === pageIndex}
        goToNewPage={(idx) => handlePageChange(idx)}
        makeNumberPage={(idx) => idx + 1}
      />
    )
  }

  if (PAGE_TOTAL >= pageIndex + NUMBER_PAGE) {
    return (
      <Pagination
        length={NUMBER_PAGE}
        isCurrentPage={(idx) => idx === 0}
        goToNewPage={(idx) => handlePageChange(pageIndex + idx)}
        makeNumberPage={(idx) => pageIndex + idx + 1}
      />
    )
  }

  if (PAGE_TOTAL < pageIndex + NUMBER_PAGE) {
    // the right pages: 18,19,20
    // the left pages: 16,17
    // the start index: 15(page 16)
    const numberOfRightPages = PAGE_TOTAL - pageIndex
    const numberOfLeftPages = NUMBER_PAGE - numberOfRightPages
    const startPageIndex = pageIndex - numberOfLeftPages

    return (
      <Pagination
        length={NUMBER_PAGE}
        isCurrentPage={(idx) => startPageIndex + idx === pageIndex}
        goToNewPage={(idx) => handlePageChange(startPageIndex + idx)}
        makeNumberPage={(idx) => startPageIndex + idx + 1}
      />
    )
  }

  throw new Error(`Just avoid the error comes from typescript!`)
}

export default Home

And we have the new pagination!

You can change the NUMBER_PAGE value, e.g: I change it to 7.

Conclusion

We just created pagination in a React app. In the first example, everything seems easy, but if we add some features to our pagination we need more code than we think. So why don't think some ideal for your pagination and play with it?

Know this easily test React app

Phan Công Thắng — Sun, 31 Oct 2021 02:02:21 +0000

Jest and Testing Library were the most powerful tool for testing React App. In this post, we are going to discover the important concept of them.

Let's dig in!

This is the simplest test that we can write in the first time using Jest.

test('1 plus 2 equal 3', () => {
  expect(1 + 2).toBe(3)
})

Test Asynchronous

Suppose that I have a fake API that returns the user response with id: 1, in the test case, I intentionally set change id: 3 to check whether the test works properly or not, and I end up with a passed message.

The reason is that the test case is completed before the promise finishes.

test('user is equal user in response', () => {
  const user = {
    userId: 1,
    id: 3,
    title: 'delectus aut autem',
    completed: false,
  }

  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((json) => expect(user).toEqual(json))
})

In order to avoid this bug, we need to have return in front of fetch.

test('user is equal user in response', () => {
  const user = {
    userId: 1,
    id: 3,
    title: 'delectus aut autem',
    completed: false,
  }

  return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((json) => expect(user).toEqual(json))
})

The test case above can rewrite using async, await:

test('user is equal user in response using async, await', async () => {
  const user = {
    userId: 1,
    id: 2,
    title: 'delectus aut autem',
    completed: false,
  }

  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const resJson = await res.json()

  expect(user).toEqual(resJson)
})

Useful methods

beforeAll: To add some code that we want to run once before the test cases is run.

afterAll: To add some code that we want to run after all test cases are finished. e.g. clear the database.

beforeEach: To add some code that we want to run before each test case.

afterEach: To add some code that we want to run at the point that each test case finishes.

Suppose that I have three test cases, and I set:

beforeEach(() => {
  console.log('beforeEach is working...')
})

Three console will appear on my terminal. Conversely, Using beforeAll I only see one console.

The logic way is the same with afterEach and afterAll.

The order run

We already have describe(combines many test cases), test(test case).

What is the order that jest run if test file was mixed by many describe, test?

You only need to remember this order: describe -> test.

To illustrate:

describe('describe for demo', () => {
  console.log('this is describe')

  test('1 plus 2 equal 3', () => {
    console.log('this is test case in describe')

    expect(1 + 2).toBe(3)
  })

  describe('sub-describe for demo', () => {
    console.log('this is sub-describe')

    test('2 plus 2 equal 4', () => {
      console.log('this is test case in sub-describe')

      expect(2 + 2).toBe(4)
    })
  })
})

Can you spot on the order in the example above?

My terminal log:

this is describe
this is sub-describe
this is test case in describe
this is test case in sub-describe

Mock function

I think the most powerful of Jest is having a mock function that we are able to mock the params, object which defined by the new keyword, and customize the return value.

This is an example:

function plusTwoNumbers(
  list: Array<number>,
  callback: (a: number, b: number) => void,
) {
  callback(list[0], list[1])
}

test('mock function callback', () => {
  const mockFnc = jest.fn((a, b) => console.log('total:', a + b))

  plusTwoNumbers([1, 2], mockFnc)
})

We mock callback function, get the params of it, and customize the result console.log("total:", a + b).

We are also able to mock modules, e.g. I use uuid in order to generate a unique id.

When I move on to testing, instead of using uuid, I can mock the uuid module like the code below:

Normally, whenever I call uuid.v4() I will get a random value like this: 5442486-0878-440c-9db1-a7006c25a39f

But I want my value to be 1234, I can use the code below:

import * as uuid from 'uuid'

jest.mock('uuid')

test('mock uuid module', () => {
  uuid.v4.mockReturnValue('1234')

  console.log('uuid.v4()', uuid.v4())

  // 1234
})

Otherwise, I can use mockImplementation to customize.

uuid.v4.mockImplementation(() => '1234')

mockImplementation is the function that we customize the function that is created from other modules.

Config Jest

I'm going to introduce to you about the most important configs in Jest.

Let's go!

collectCoverageFrom

This config helps Jest knows exactly the place that needs to collect information, and check coverage. It is very useful, you can run:

Run jest --coverage in order to figure out the component, the function, we still need to write test, and discover the spots we still don't test yet.

moduleDirectories

This config points to the module that we will use in the test file.

By default, it was configured ["node_modules"], and we are able to use the the module under node_modules folder in our test cases.

moduleNameMapper

This config provides for us the ability to access the resources, based on the place that we have set.


moduleNameMapper: {
  "assets/(*)": [
    "<rootDir>/images/$1"
  ]
}

See the example above, now we set the path assets/(*) that pointed to <rootDir>/images/$1.

If I set assets/logo.png, Jest will find <rootDir>/images/logo.png.

rootDir

By default, it is the place that contains jest.config.js, package.json.

The place is where Jest will find to use modules, and run test cases.

It turns out I can set "rootDir: 'test'" and run test cases without config roots, but I shouldn't do this.

roots

This is the config that we set the place that test files belong to.

For example:

If I set:

roots: ['pages/']

but I write test in __test__ folder which is the same level with pages/. No test cases will be run with the config above. I need to change pages/ -> __test__.

testMatch

We use this config in order to communicate to Jest what files we want to test, otherwise, please skip!

testPathIgnorePatterns

Please ignore files under a place, that is the reason this config exists.

transform

Sometimes, in our test cases, we write some new code that node doesn't support at all, so we need to transform to the code that Jest can understand.

If my project use typescript, I need to set up transform in order to make typescript to javascript code that node can understand.

transformIgnorePatterns

We might have some files, some folders we don't want to transform, so we use this config.

How to write test

We need to write tests in order to be more confident about the code that we wrote. So when we think about the test cases, the core concept is we have to think about the use case, do not think about the code. It means we must focus
into what's the future that the code can support for users.

This is the main concept when we think about creating test cases.

e.g:

I have created a react-hook in order to support four features below:

returns the value in first data using first property, condition true.
returns the value in second data using second property, condition false.
returns the value in second data using first property, condition false.
returns the default value with second data undefined, condition false.

import * as React from 'react'

type Props<F, S> = {
  condition: boolean
  data: [F, S]
}

function useInitialState<F, S>({condition, data}: Props<F, S>) {
  const giveMeState = React.useCallback(
    (
      property: keyof F,
      anotherProperty: S extends undefined ? undefined : keyof S | undefined,
      defaultValue: Array<string> | string | number | undefined,
    ) => {
      return condition
        ? data[0][property]
        : data[1]?.[anotherProperty ?? (property as unknown as keyof S)] ??
            defaultValue
    },

    [condition, data],
  )

  return {giveMeState}
}

export {useInitialState}

So I only need to write four test cases for the four features above:

import {useInitialState} from '@/utils/hooks/initial-state'

import {renderHook} from '@testing-library/react-hooks'

describe('useInitialState', () => {
  const mockFirstData = {
    name: 'Thang',
    age: '18',
  }

  test('returns the value in first data using first property, condition true', () => {
    const mockSecondData = {
      name: 'Phan',
      age: 20,
    }

    const {result} = renderHook(() =>
      useInitialState({
        condition: Boolean(mockFirstData),
        data: [mockFirstData, mockSecondData],
      }),
    )

    const data = result.current.giveMeState('name', undefined, '')

    expect(data).toBe(mockFirstData.name)
  })

  test('returns the value in second data using second property, condition false', () => {
    const mockSecondData = {
      firstName: 'Phan',
      age: 20,
    }

    const {result} = renderHook(() =>
      useInitialState({
        condition: Boolean(false),
        data: [mockFirstData, mockSecondData],
      }),
    )

    const data = result.current.giveMeState('name', 'firstName', '')

    expect(data).toBe(mockSecondData.firstName)
  })

  test('returns the value in second data using first property, condition false', () => {
    const mockSecondData = {
      name: 'Phan',
      age: 20,
    }

    const {result} = renderHook(() =>
      useInitialState({
        condition: Boolean(false),
        data: [mockFirstData, mockSecondData],
      }),
    )

    const data = result.current.giveMeState('name', undefined, '')

    expect(data).toBe(mockSecondData.name)
  })

  test('returns the default value with second data undefined, condition false', () => {
    const mockDefaultValue = 21

    const {result} = renderHook(() =>
      useInitialState({
        condition: Boolean(false),
        data: [mockFirstData, undefined],
      }),
    )

    const data = result.current.giveMeState('age', undefined, mockDefaultValue)

    expect(data).toBe(mockDefaultValue)
  })
})

Testing Library

Let's take a slight review about the main things in Testing Library.

getBy..: we find the DOM element, throw error if no element is found.
queryBy..: we find the DOM element, return null if no element is found.
findBy..: we find the DOM element, throw an error if no element is found, the search process is a promise.

The list below is the priority we should use in order to write test nearer with the way that our app is used.

getByRole
getByLabelText
getByAltText
getByDisplayValue

For example:

I have a component that contains two components: AutoAddress, Address.I need to find the use case that I want to support in order to create test cases.

This is a test case: by default, name value of inputs was set.

render the components
create the mockResult value
add assertions

test('by default, name of address input was set', async () => {
  render(
    <AutoAddress wasSubmitted={false}>
      <Address wasSubmitted={false} />
    </AutoAddress>,
  )

  const mockResult = {
    namePrefectureSv: 'prefertureSv',
    namePrefectureSvLabel: 'prefectureSvLabel',
    nameCity: 'city',
  }

  expect(screen.getByLabelText('Prefecture Code')).toHaveAttribute(
    'name',
    mockResult.namePrefectureSv,
  )

  expect(screen.getByLabelText('Prefecture')).toHaveAttribute(
    'name',
    mockResult.namePrefectureSvLabel,
  )

  expect(screen.getByLabelText('City')).toHaveAttribute(
    'name',
    mockResult.nameCity,
  )
})

And this is a test case: returns one address through postCode.

render the components
create the mockResult value
mock the request API
input the postCode
click the search button
add assertions

test('returns one address through postCode', async () => {
  const mockResult = [
    {
      id: '14109',
      zipCode: '1880011',
      prefectureCode: '13',
      city: 'Tokyo',
    },
  ]

  server.use(
    rest.get(
      `${process.env.NEXT_PUBLIC_API_OFF_KINTO}/${API_ADDRESS}`,
      (req, res, ctx) => {
        return res(ctx.json(mockResult))
      },
    ),
  )

  render(
    <AutoAddress wasSubmitted={false}>
      <Address wasSubmitted={false} />
    </AutoAddress>,
  )

  // input the post code value

  userEvent.type(screen.getByLabelText('first postCode'), '111')
  userEvent.type(screen.getByLabelText('second postCode'), '1111')

  // search the address

  userEvent.click(screen.getByRole('button', {name: /search address/i}))

  // wait for the search process finishes.

  await waitForElementToBeRemoved(() =>
    screen.getByRole('button', {name: /searching/i}),
  )

  const address = mockResult[0]
  const {prefectureCode, city} = address

  expect(screen.getByLabelText('Prefecture Code')).toHaveAttribute(
    'value',
    prefectureCode,
  )

  expect(screen.getByLabelText('Prefecture')).toHaveAttribute(
    'value',
    PREFECTURE_CODE[prefectureCode as keyof typeof PREFECTURE_CODE],
  )

  expect(screen.getByLabelText('City')).toHaveAttribute('value', city)
})

Recap

We just learned the main concepts in Testing React App! Let's recap some key points.

Testing asynchronous need to have return in front of promise.
We are able to control testing using Jest configs.
Thinking test cases, we must forget about code, focus on the use case.
The order of DOM methods in Testing Library.

Step by step: grid layout CSS

Phan Công Thắng — Sun, 24 Oct 2021 03:07:44 +0000

Grid helps us lay the content out in an effective way. The element is laid out in rows and columns. When we need to customize the complex layout, grid is so powerful.

In order to consider grid, we're going to learn some basic CSS that we can do in grid, and make a demo using it together.

Let's dig in!

Make it grid

This is the code in order to demo the CSS property in Grid:

grid-template-columns

By default, Grid element behaves as the normal flow, and it doesn't make any effects for the layout. Using grid-template-columns we can now divide the element into many columns.

Some values we need to consider using grid-template-columns:

. 1fr: 1 fraction, make the width of the element as wide as possible until no available space exists.

. auto: the width is decided by the content that it contains.

. xxxpx: we can define a specific value for the column width.

How can we add the space between the elements?

Grid already had the gap property for us. Specifically, you can use grid-row-gap, grid-column-gap.

grid-auto-columns

Sometimes, our grid was created in an implicit way, without using grid-temlate-columns. As an escape hatch, we can use grid-auto-columns in order to set the size for the column of the child element.

Take a look at the second example above.

number of grid

Assuming, I have the layout as below, I would like to define the position that the element's width will be.

Fortunately, Grid supports it. We can define the start position, the end position for the element using grid-row-start, grid-row-end, or a brief property grid-row.

The Column 1 element's width starts from number 1 and ends at 3.
The Column 2 element's width automatically is the remaining width.
The Column 3 element's width starts from number 1 and ends at 3.

grid-area

Using grid-area we can point exactly what place the element will be, instead of we define the start position and the end position of the element.

I'm going to use grid-area to make the layout below.

Based on the layout above, We have this assertion:

The layout need to have two columns.
The layout need to have three rows.

Next, I need to define the label of the element. These are header, nav, main, and footer.

.header {
  grid-are: header;
}

...

And then combine them using grid-template-areas:

grid-template-areas:
  'header header'
  'nav main'
  'footer footer';

repeat, minmax

It is very helpful if you don't know how many elements you have . If you don't know, you only need to make it repeat with the same layout.

Sometimes, you also want to make the element have a specific minimum width, and that element's width can be opened wider more than the minimum width.

Assuming, I would like to have seven columns, the first six columns have equal width in the range 50 px - 100 px. And the last column is in the rage 100px - 1fr.

I can use repeat to make the first six columns, and minmax to make the range width, the remaining column only needs to use minmax.

grid-template-columns: repeat(6, minmax(50px, 100px)) minmax(100px, 1fr);

Conclusion

We just learned about Grid in CSS, it is powerful CSS that we can use and make customizing the complex layout become easier than ever. Why don't pick some layout and use the power of grid for your website?

Push that to AWS S3 for me

Phan Công Thắng — Sat, 16 Oct 2021 03:04:43 +0000

Hi friend! Today, I'm going to introduce to you how I upload the image to AWS S3 using Javascript.

Let's dig in!

Core Concept

Grap a drink and take a glance with about the core concept of AWS S3. I'm try to keep it simple as much as possible.

Here we go:

Bucket

Bucket is where contains the objects we would like to upload, and it is unique global.

Object

The object might be an image, a font file, or whatever file we want to upload to Bucket. The object has a unique key, and metadata like the type of image, type of file.

CORS

By default, AWS S3 will block public access, and our object will be private. So we need to set up cors for our object in order to public it.

Flow

My goal is to allow the user can upload the object to the bucket that I defined.In AWS S3, we can use presigned URL, in order to allow users to do this..

First, We use the bucket's name, AWS access key, AWS secret key to get the signed URL. Second, we use the signed URL to allow users to make the request to our bucket like: putObject, deleteObject...

Here is the flow:

Coding

Setup

Let's create a nextjs app quickly:

npx create-next-app@latest --typescript

Next, add a bucket on AWS S3:

I call olala-bucket.

You need to create an AWS access key and AWS secret key.

Write code

I install aws-sdk to make a connect to AWS s3.

First of all, I need to create an API nextjs that creates the signed URL. It receives the key of the object, fileType from the user's request.

import type {NextApiRequest, NextApiResponse} from 'next'
import {responseError} from '@/utils/api-stuff'
import aws from 'aws-sdk'

// you need to set up these values in .env file

const s3 = new aws.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY,
})

function responseError(res: NextApiResponse, message: string) {
  return res.status(404).json({message})
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {key, fileType} = req.query

  if (!key) {
    return responseError(res, 'Key of object is required!')
  }

  if (!fileType) {
    return responseError(res, 'MetaData of object is required!')
  }

  const bucketParams = {
    Bucket: process.env.BUCKET_NAME,
    Key: key,
    ContentType: fileType,
  }

  try {
    const signedUrl = await s3.getSignedUrl('putObject', bucketParams)

    res.status(200).json({url: signedUrl})
  } catch (error) {
    res.status(401).json({message: (error as Error).message})
  }
}

Make a request to receive signed url, and save it to a value.

const signedUrlRef = React.useRef<string | null>(null)

React.useEffect(() => {
  const query = new URLSearchParams({
    // name of object
    key: 'naruto',
    fileType: 'image/jpeg',
  })

  async function getSignedUrls() {
    try {
      const {url} = await fetcher(`/api/your-bucket?${query}`)
      if (!signedUrlRef.current) {
        signedUrlRef.current = url
      }
    } catch (error) {
      console.log('GetSignedUrls._error:', error)
    }
  }

  getSignedUrls()
}, [])

And add a form element to submit our image:

async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()
  if (!signedUrlRef.current) return

  const {myFile} = event.currentTarget
  const file = myFile.files[0]

  try {
    await fetch(signedUrlRef.current, {
      method: 'PUT',
      headers: {
        'Content-Type': file.type,
      },
      body: file,
    })
  } catch (error) {
    console.log('pushObjectToBucket._error:', error)
  }
}
return (
  <div>
    <form onSubmit={handleFormSubmit}>
      <input type="file" name="myFile" />
      <button>Submit</button>
    </form>
  </div>
)

This is all of code:

import * as React from 'react'

const fetcher = (args: string) => fetch(args).then((res) => res.json())

function Demo() {
  const signedUrlRef = React.useRef<string | null>(null)

  React.useEffect(() => {
    const query = new URLSearchParams({
      // name of object
      key: 'naruto',
      fileType: 'image/jpeg',
    })

    async function getSignedUrls() {
      try {
        const {url} = await fetcher(`/api/your-bucket?${query}`)
        if (!signedUrlRef.current) {
          signedUrlRef.current = url
        }
      } catch (error) {
        console.log('GetSignedUrls._error:', error)
      }
    }

    getSignedUrls()
  }, [])

  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (!signedUrlRef.current) return

    const {myFile} = event.currentTarget
    const file = myFile.files[0]

    try {
      await fetch(signedUrlRef.current, {
        method: 'PUT',
        headers: {
          'Content-Type': file.type,
        },
        body: file,
      })
    } catch (error) {
      console.log('pushObjectToBucket._error:', error)
    }
  }
  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input type="file" name="myFile" />
        <button>Submit</button>
      </form>
    </div>
  )
}

export default Demo

Let's now hit the submit button and check our bucket:

Conclusion

Here is the way I upload the image to AWS S3 using nextjs framework. Why don't try to upload your image or whatever file you would like to add to the bucket.

Make the flexbox CSS stick

Phan Công Thắng — Sat, 09 Oct 2021 07:54:42 +0000

Hi friend! Today, we are going to review about the flexbox in CSS.

Let's dig in!

Flexbox

The reason flexbox exists is that it helps us easy to customize the layout of content.

We can take some advantages below using flexbox:

Being able to make the flex item in flex container have the same sizes(with, height), and don't need to care about their intrinsic size.
Customize the position of the flex items in the simplest way.

Have you ever seen this CSS before?

flex: 1 100px;

Here is the CSS above in detail:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;

Let's now discover the property CSS above in more detail!

Flex basis, grow, shrink

You can think of this property as a width milestones of the element. It sets the minimum width of the element, and you might know the width also is able to shrink(at least min-content size of the element) or grow, it dependents on the situation we set CSS.

First of all I would love to take a glance about min-content and max-content in CSS.

Here is the example code using min-content and max-content:

Then we can said that:

min-content sets the width of the element as the longest word's width. In the example above, it's "content"'s width.

max-content sets the width of the element as the total width of text content. In the example above, it's "Max content" 's width.

I'm using the example below for ease of understanding the concepts:

Flex basis

In the first example above, I set flex-basis: 0 for the item element, and you can see, it makes the item width is the min-content value.

The flex item can be shrink at least min-content size of the text content.

Flex shrink

In the second example above, I set the parent element to 100px, and the item element to flex-basis: 200px. It turns out using flex-shrink: 0 the item width will be wider than the parent element width. You can set flex-shrink: 1 and see the item width is equal with the parent element. It means the flex item is shrunk to 100px.

The flex item can be shrunk in case its width is greater than the parent element width.

Flex grow

In the third example above, I set:

flex-basis: 50px;
flex-grow: 1;

for the flex item. The item width then became wider than 50px, in this case, it distributed the item width and grew it up. You can set flex-grow: 0 and the item width will be exactly 50px.

You can use firefox to see what your flex item behaves.

In the fourth example above, I set flex-grow: 2 for the third item element. As you can see, the third item width became wider than the first and second item.

It means the remain size will be distributed based on the value of flex-grow that we set for each the flex item.

Conclusion

We have just reviewed the flexbox in CSS. Why don't take a bright review for your self. I would like to share with you the Make it stick method to help you for ease of learning.

Have one strange float in CSS

Phan Công Thắng — Fri, 01 Oct 2021 09:58:05 +0000

When we talk about float in CSS, we usually only think about two values left, right, and wrap it up. But is it all of float?

In this article, we're going to discover some cases of float property in CSS.

Float

The floated element breaks the normal flow, and it will be wrapped by the inline element or text. I think we are familiar with this concept.

Here's what I want to say:

Case 1

Add the floated element to an element which we can change display property.

<div class="parent">
  <div class="float">Floated element</div>
</div>

.parent {
  display: block;
  /*flex, grid, inline-flex, inline-grid, table...*/
}

.float {
  float: left;
}

And I realize that:

float doesn't work with grid, flex property.

Case 2

What happen if I add display to the floated element?

<div id="float">Floated element</div>

#float {
  display: inline-flex;
  float: left;
}

I'm going to use javascript to check whether the CSS property change or not:

window.getComputedStyle(document.getElementById('float')).display
// it returns flex

As you can see the display property was changed from inline-flex to flex.

Float can change the display property in CSS.

Case3

What happen if I set the height for the floated element.

<div class="parent">
  <div class="float">Floated element</div>
</div>

.parent {
  border: solid 1px black;
  /*
   float: left
  */
}

.float {
  float: left;
  height: 100px;
}

It will overload the parent's height. But If I add float: left to the parent element, the parent element is as tall as its tallest floated children.

To ensure the parent element can cover its nested floated children, we can set it to the floated element.

Conclusion

It's only a simple property in CSS, but there is a ton of cases that we can discover. If you have another case about the floated element.
Please share it with me!

Debug Your Css With This Tool

Phan Công Thắng — Fri, 24 Sep 2021 08:09:00 +0000

There are tons of CSS properties that we can't remember, and sometime we write some CSS and didn't know why it doesn't work as we expect?

It turns out we used the wrong CSS property. How to know what exactly point we are wrong? Let's move on next step to discover that tool.

Prepare

First of all, I need to create a file HTML and a file CSS for this demo.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug CSS</title>
    <!-- import css file here -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="hello">Hello! CSS!</div>
  </body>
</html>

styles.css:

.hello {
}

I'm ready! Let's move on next step!

Demo

I'm going to use Firefox, in order to figure out what CSS I'm wrong.

In Firefox, I can hit Style Editor, and I can see the style.css file that I just created. Let's edit the CSS directly here.

As you can see, CSS was reflected immediately.

Hit inspector, and look at the right side, if I add the CSS below to class hello. Firefox will show me what CSS I was wrong in a specific way. The wrong CSS will be gray, and there is i icon that we can hover and see the reason.

display: inline;
/* we can't set width for an inline element */
width: 100px;

This is the error:

It told me that I can't set width for an element that has display: inline.

Let's try another property maybe we can test.

display: inline;
/* we can't set width for an inline element */
width: 100px;
align-items: center;

And I get an error:

Conclusion

I just introduced how to debug in CSS using Firefox. Why don't try your CSS, and observe what message Firefox will give, it appears like magic.

Step by Step: Block and Inline CSS (2021)

Phan Công Thắng — Thu, 23 Sep 2021 09:19:56 +0000

I usually use display: block, display: inline to CSS the HTML elements. But I only stop at the basic level of understanding these. In this post, I'm going to discover some properties that I thought it is interesting about block, inline.

Review

Before I go forward, let's take a slight review of what I know so far.

Block

When I set:

display: block;

The HTML element can have some benefits like:

Be able to set width, height.
Break the next element to new line.
Be able to set padding, margin, border.
Element's width automatically is the full width of its parent.

Inline

When I set:

display: inline;

The HTML element can be had some benefits like:

Don't be able to set width, height.
Don't break the next element to new line.
Be able to set padding, margin, border.
Element's width doesn't automatically be the full width of its parent.

It's simple! Right! But I think it's not enough to make sure we can custom the layout of content. Let's move on next step to see what we can discover further.

Writing Mode

Normally, text in the HTML element has the layout from left to right( some language that renders from right to left). If I want to set the direction of my content from right to left, how can I handle it?

Fortunately, we have writing mode, we can set the direction: horizontal, vertical for our content.

You might think: what am I talking about? Does it relate to block and inline?

Don't rush! My friend! We will learn about it step by step.

Writing Mode CSS

In order to turn on writing mode, I need to use the CSS below.

/* The content will be normal(horizontal direction) */
writing-mode: horizontal-tb;

/* The content will be vertical(left to right) */
writing-mode: vertical-lr;

/* The content will be vertical(right to left) */
writing-mode: vertical-rl;

Toggle the comment that was defined in style element, you can see the difference in the layout in three cases.

horizontal-tb: content is rendered normally.
vertical-lr: content is rendered vertical direction, header appear on the left side, paragraph on the right side.
vertical-rl: content is rendered vertical direction, header appear on the right side, paragraph on the left side.

So far, nothing special! But I want to introduce to you one thing in writing mode.

When we turn on writing mode, it creates two directions, they are: inline, block, both of them are injected into the HTML element, and the direction of them depends on the property that we set on writing-mode CSS.

Hmm, It might look a little bit confusing here. Let's see three pictures below.

writing-mode: horizontal-tb
writing-mode: vertical-lr
writing-mode: vertical-rl

What do inline, block mean in these pictures above?.

These directions are defined in writing-mode for making the base, and other properties CSS in writing-mode will be based on these directions(block, inline) to reflect. We need to use them later on.

Tip: For easy to remember what directions will be block or inline.

The block direction: the flow that content is displayed.

The inline direction: the sentences flow

Let's use the tip above.

writting-mode: horizontal-tb

header -> paragraph is displayed from top to bottom, you can see they take a break from header to paragraph -> vertical is the block direction.
The sentences flow is horizontal -> horizontal is the inline direction.

writting-mode: vertical-lr

header -> paragraph is displayed from left to right, you can see they take a break from header to paragraph -> horizontal is the block direction.
The sentences flow is vertical -> vertical is the inline direction.

writting-mode: vertical-rl I save it for you.

Custom Content

Now, we already had the basic knowledge about writing-mode. Let's use it to custom the content.

I have two blocks: writing-mode: horizontal-tb, writing-mode: vertical-lr.

Using the tip above I can determine that:

The first block directions: horizontal: inline, vertical: block.
The second block directions: horizontal: block, vertical: inline.

Now, I'm able to use other CSS(logical CSS: the CSS use for writing-mode) to
custom the content.

I'm going to use the inline-size property. You need to remember that
inline-size will define the dimension for inline direction that we talked
about above. In this case, inline-size will define the dimension of horizontal
for the first block(you can think it defines width dimension), and define the
dimension of vertical for the second block(height dimension).

Replace width: 100px using

inline-size: 200px;

I will have the result below.

Go further

There are tons of properties in writing-mode, and they are called Logical Properties.
You can learn more here.

I have ever met some CSS like margin-block-start, and didn't know what is it?

It turns out I met Logical Properties CSS.

Let's use some Logical Properties to illustrate.

/*
- The first case
    - margin-top: 20px, padding-left: 20px, border-right: solid 2px red;
- The second case
    - margin-left: 20px, padding-top: 20px, border-bottom: solid 2px red; 
*/
margin-block-start: 20px;
padding-inline-start: 20px;
border-inline-end: solid 2px red;

And we have the result below.

Conclusion

I have covered about writing-mode in this article. But can you remember the most important concept? Why don't take a review and practice with some example ?
I think it's worth understanding the concepts of writing-mode before we moving on to CSS layout.

Know this CSS You will not have any pain later on

Phan Công Thắng — Mon, 20 Sep 2021 07:07:58 +0000

Something it's very basic, but if we don't know about it, it can give you a lot of pain later on. This post will give you a basic view of inheritance of CSS.

Inheritance CSS

There are four properties we need to know, I'm going to explain each of those for ease of understanding.

Inherit

It's simple. The child element will inherit CSS from the parent.

To illustrate:

<div style="color: red">
  <p style="color: inherit">Child Element</p>
</div>

p element will inherit color of div element. It will be red in this case.

Initial

This property might look a little bit confusing. But you need to remember that it's not default CSS of browser.

What I mean default CSS of browser?

The default CSS of browser is something like:

font-weight: bold of h1->h6 elements.
font-style: italic of em element.
color: blue of a element.
etc...

To illustrate:

<h1 style="font-weight: initial">Font Weight Initial Element</h1>

What font-weight do you expect h1 will be? Is it bold?

No, bold is default CSS of browser, It's not initial value. The initial value of font-weight is normal. In this case, h1 element will be an element that has a normal weight.

The initial value of CSS is something like:

color: initial -> color: black
font-weight: initial -> font-weight: normal
background: initial -> background: white
etc...

Unset

This property makes the element's CSS either inheritance or initial value(if it's not inheritance)

To illustrate:

<div style="color: red">
  <p style="color: unset">Unset Element</p>
</div>

Unset Element will be red as the example above, but as black in the example below. Because it's not inherited, then it will take the initial value. In this case, the initial value of color is black.

<div>
  <p style="color: unset">Unset Element</p>
</div>

Revert

This value will revert the CSS of element back to default CSS of the browser.

To illustrate:

<h2 style="font-weight: unset">Unset Element</h2>
<h2 style="font-weight: revert">Revert Element</h2>

h2 with unset CSS will take the initial value of font-weight(normal) to behavior.

h2 with revert CSS will take the default CSS of the browser font-weight(bold) to behavior.

And this is the result:

Unset Element
Revert Element

Conclusion

Phew! We learned about inheritance in CSS in 2 minutes. It’s basic but I think it’s so important to make sure we understand it. My friend! Let me know if you think they are important either.

How to make Pdf in React, Next js quickly

Phan Công Thắng — Sun, 19 Sep 2021 02:50:16 +0000

I have some data, and I'd like to make a PDF file for that data. How can I make a PDF file as a quick way in React. In this post, I will try to do it fast as possible in React using PdfMake library.

Requirements

This is a part of PDF file that I want to make in this post.

Before I go forward, I would like to remind you that everything in PdfMake is table. Using the picture above, I can divide it to many tables.

The reason I need to do it, because as you can see the number of columns in each table is different, and the size of each columns is different either. It's very difficult to custom the layout, If I combine them in one table.

Components in PdfMake

In this example, I'm going to use text, table, and stack component in PdfMake.

text

This is syntax of text component:

''

{text: '', // need to define some property here}

table

This is syntax of table component:

    {
        table: {
            widths: [50, 50], // column sizes: 50pt-50pt
            body: [
                ['Column1', 'Colum2'] // Row1
                ['Column1', 'Colum2'] // Row2
            ]
        }
    }

stack: I use stack, in order to combine many tables.

{
  stack: [
    // table1,
    // table2
    // etc
  ]
}

Ok, That is enough!. We knew the usage of text, table and stack. Let's
move on next step.

Draw PDF

In order to make sure the first column and the second column in each table have the same size . I need to hard code widths for them. I defined [20, 95].

Table1

Table1's requirements:

A column that have width *(full width).
Having a text(2 Register Contents) within the column.
A padding left for the layout of table.

Let's do it:

{
  table: {
    widths: ['*'],
    body: [[{text: '2 Register Contents', border: [true, true, true, false]}]],
  },
  layout: {
    paddingLeft: function () {
      return 18
    },
  },
}

Table2

Table2's requirements:

Three columns with sizes: [20, 95, '*']
The second column, the third column must be rendered without the border bottom.

{
  table: {
    widths: [20, 95, '*'],
    body: [
      [
        {text: '', border: [true, false, false, false]},
        {text: 'Register Plan', ...noBorderBottom},
        {
          text: 'SERVICE A',
          ...noBorderBottom,
        },
      ],
    ],
  },
},

Table3

Table3's requirements:

Five columns with sizes: [20, 95, 155, 70, '*']
All columns have no the border bottom.

{
  table: {
    widths: [20, 95, 155, 70, '*'],
    body: [
      [
        {text: '', ...noBorderTopBottom},
        {text: 'Register Day', ...noBorderBottom},
        {text: '10/5/2021 16:04:15', ...noBorderBottom},
        {text: 'Signed Day', ...noBorderBottom},
        {text: '10/5/2021 16:25:59', ...noBorderBottom},
      ],
    ],
  },
},

Table4

Table4's requirements:

Three columns with sizes: [20, 95, '*']
All columns have no the border bottom.
First column only have the border left.

{
  table: {
    widths: [20, 95, '*'],
    body: [
      [
        {text: '', border: [true, false, false, false]},
        {text: 'Contract Number', ...noBorderBottom},
        {text: '77777KKK2021050', ...noBorderBottom},
      ],
      [
        {text: '', border: [true, false, false, false]},
        {text: 'Time List', ...noBorderBottom},
        {
          text: '17/6/2021~',
          ...noBorderBottom,
        },
      ],
      [
        {text: '', border: [true, false, false, false]},
        {text: 'Monthly Mileage', ...noBorderBottom},
        {
          text: '1,500Km',
          ...noBorderBottom,
        },
      ],
    ],
  },
},

Table5

Table5's requirements:

Six columns with sizes: [20, 95, 91, 138, 68, '*']
First, Second, Fifth column need to be had rowSpan.
Fourth column and Sixth column have flex layout.

// make a flex layout for fourth column and sixth column
const flexLayout = (title: string, money: string) => ({
  table: {
    widths: ['60%', '40%'],
    body: [
      [
        {
          text: title,
          margin: [0, 0, 0, 0],
        },
        {
          text: money,
          margin: [0, 0, 0, 0],
          alignment: 'right',
        },
      ],
    ],
  },
  layout: 'noBorders',
})

// layout of the table
{
  table: {
    widths: [20, 95, 91, 138, 68, '*'],
    body: [
      [
        {text: '', rowSpan: 3, ...noBorderTopBottom},
        {
          text: 'Lease fee and consumption tax, etc',
          rowSpan: 3,
          margin: [0, 30, 0, 0],
          ...noBorderBottom,
        },
        {
          rowSpan: 3,
          text: '1 time\n(Monthly)',
          margin: [0, 20, 0, 0],
          alignment: 'center',
          ...noBorderBottom,
        },
        {
          ...flexLayout('Lease fee excluding tax', '71,500円'),
          ...noBorderBottom,
        },
        {
          rowSpan: 3,
          text: 'Bonus addition amount (added in January / July)',
          alignment: 'center',
          margin: [0, 10, 0, 0],
          ...noBorderBottom,
        },
        flexLayout('Lease fee excluding tax', '0円'),
      ],
      [
        {text: '', border: [true, false, false, true]},
        {text: ''},
        {
          text: '',
        },
        flexLayout('Consumption tax, etc.', '71,500円'),
        {
          text: '',
        },
        flexLayout('Consumption tax, etc.', '0円'),
      ],
      [
        {text: ''},
        {text: ''},
        {
          text: '',
        },
        {
          ...flexLayout('Total', '78,650円'),
          ...noBorderBottom,
        },
        {
          text: '',
        },
        {
          ...flexLayout('Total', '0円'),
          ...noBorderBottom,
        },
      ],
    ],
  },
  layout: {
    paddingTop: function (i: number) {
      return 0
    },
    paddingBottom: function (i: number) {
      return 0
    },
  },
},

Table6

Table6's requirements:

Five columns with sizes: [20, 95, 91, 138, '*']

{
  table: {
    widths: [20, 95, 91, 138, '*'],
    body: [
      [
        {text: ''},
        {text: ''},
        {
          text: 'Total lease fee (tax included)',
        },
        {
          text: '2,831,400円',
          alignment: 'right',
        },
        {
          text: '',
        },
      ],
    ],
  },
},

Finally, I need to combine six tables in a stack, and add it to a page in Next.js.

{
  stack: [
    // table1
    // table2
    // table3
    // table4
    // table5
    // table6
  ]
}

Note: I will add stack to registerSection, then add registerSection to a page in Next.js app.

import * as React from 'react'
import {registerSection} from '../components/register-section'
import pdfMake from 'pdfmake/build/pdfmake'

// I uploaded my font to AWS S3 and set up CORS for it.
const fonts = {
  yourFontName: {
    normal: 'https://okt.s3.us-west-2.amazonaws.com/ipaexg.ttf',
    bold: 'https://okt.s3.us-west-2.amazonaws.com/ipaexg.ttf',
    italics: 'https://okt.s3.us-west-2.amazonaws.com/ipaexg.ttf',
    bolditalics: 'https://okt.s3.us-west-2.amazonaws.com/ipaexg.ttf',
  },
}
const docDefinition = {
  pageMargins: [20, 97, 20, 60] as [number, number, number, number],
  pageSize: {
    width: 595.28,
    height: 879,
  },
  content: [{...registerSection()}],
  styles: {},
  images: {
    snow: 'https://okt.s3.us-west-2.amazonaws.com/logo.png',
  },
  defaultStyle: {
    fontSize: 10,
    font: 'yourFontName',
  },
}

function ClientSidePdf() {
  function openPdf() {
    // @ts-ignore
    pdfMake.createPdf(docDefinition, null, fonts).open()
  }

  return (
    <div>
      ClientSidePdf
      <button onClick={openPdf}>Open</button>
    </div>
  )
}

export default ClientSidePdf

Hmm, I just created a component PDF using PdfMake. While doing that, I encountered a matter that I have thought it was interesting. Let's take a glance in next section.

Table Width

I assume I'd like to add a table(table7) below table6, and in table7 I would like to have one column more than table6, and the size total of fourth column and the fifth column is equal to the size of the fourth column in table6. And I defined sizes: 38 for the fourth column, 100 for the fifth column. I think It will be equal to 138(the fourth column in table6).

{
  table: {
    widths: [20, 95, 91, 38, 100, '*'],
    body: [
      [
        {text: '', ...noBorderTop},
        {text: '', ...noBorderTop},
        {
          text: 'Total',
          ...noBorderTop,
        },
        {
          text: 'Lease fee (tax included)',
          ...noBorderTop,
        },
        {
          text: '2,831,400円',
          alignment: 'right',
          ...noBorderTop,
        },
        {
          text: '',
          ...noBorderTop,
        },
      ],
    ],
  },
},

This is the result I got.

It turns out the width total is not equal to the fourth column in table6. The reason is because in PdfMake when I define:

138: 1 paddingLeft: 4pt, 1 paddingRight: 4pt, vlineWidth: 1pt
38, 100: 2 paddingLeft: 4pt, 2 paddingRight: 4pt, 2 vlineWidth: 1pt

So in the second case, the size total will be greater than the first case 9pt.
You can learn more here.

If I set sizes of the fourth column, the fifth column in table7 to 29(decreased 9pt), 100.

Both sizes of the two cases will be equal.

Conclusion

I finished drawing a basic layout in a PDF file. It's time to try to your layout PDF. Why don't pick some layout, and draw it. Go ahead and spend sometime with your PDF file.
Please feel free to refer source code.

Build address search component in React

Phan Công Thắng — Sun, 12 Sep 2021 06:28:47 +0000

In this post, I'm going to build an address search component using React.

Requirements

In the component, I have a postcode value, and every time I click the search button, I can get the address.

It will have two cases of the result:

Return one address.
Return many addresses.

If the result is one address, I will set the value for the addresses inputs(disabled) otherwise I have to show the address list for the user. When the user selects an address from the address list, the selected address will be showed in the address's inputs.

Thinking in React

Components

My component will have 4 child components:

PostCode.
Search.
Addresses.
Address.

State

This is some states I need to have for my components:

postCode for PostCode.
addresses for Addresses.
address for Address.
isOpen for toggling the Addresses component.

Implement

Coding

I will use Context in order to avoid props drilling in React.

Search component need to use these state: postCode, address, addresses, isOpen.
Addresses component need to use state: address.

So I will have the Providers like below:

<AddressProvider>
  <AddressesProvider>
    <IsOpenProvider>
      <PostCodeProvider>
        <PostCode />
        <Search />
      </PostCodeProvider>
      <Addresses />
    </IsOpenProvider>
  </AddressesProvider>
  <Address />
</AddressProvider>

I created a function that helps me for generating the context and a hook to consume that context.

function createContext(name: string) {
  const context = React.createContext(null)

  function useContext() {
    const contextValue = React.useContext(context)

    if (contextValue === null) {
      throw new Error(`use${name} must be used within ${name}Provider`)
    }

    return contextValue
  }

  return {Context: context, useContext}
}

Now, I will create the provider above:


type IsOpenContextType = {
  isOpen: boolean
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}
const {Context: IsOpenContext, useContext: useIsOpen} =
  createContext<IsOpenContextType>('IsOpen')

function IsOpenProvider({children}: {children: React.ReactNode}) {
  const [isOpen, setIsOpen] = React.useState(false)
  const value = React.useMemo(() => ({isOpen, setIsOpen}), [isOpen, setIsOpen])
  return (
    <IsOpenContext.Provider value={value}>{children}</IsOpenContext.Provider>
  )
}

type Address = {
  code: number
  prefecture: string
  city: string
  ward: string
}
type AddressContextType = {
  address: Address | null
  setAddress: React.Dispatch<React.SetStateAction<Address | null>>
}
const {Context: AddressContext, useContext: useAddress} =
  createContext<AddressContextType>('Address')

function AddressProvider({children}: {children: React.ReactNode}) {
  const [address, setAddress] = React.useState<Address | null>(null)
  const value = React.useMemo(
    () => ({address, setAddress}),
    [address, setAddress],
  )

  return (
    <AddressContext.Provider value={value}>{children}</AddressContext.Provider>
  )
}

type AddressesContextType = {
  addresses: Array<Address> | null
  setAddresses: React.Dispatch<React.SetStateAction<Array<Address> | null>>
}

const {Context: AddressesContext, useContext: useAddresses} =
  createContext<AddressesContextType>('Addresses')
function AddressesProvider({children}: {children: React.ReactNode}) {
  const [addresses, setAddresses] = React.useState<Array<Address> | null>(null)
  const value = React.useMemo(
    () => ({addresses, setAddresses}),
    [addresses, setAddresses],
  )

  return (
    <AddressesContext.Provider value={value}>
      {children}
    </AddressesContext.Provider>
  )
}
type PostCodeContextType = {
  postCode: Array<string>
  setPostCode: React.Dispatch<React.SetStateAction<Array<string>>>
}

const {Context: PostCodeContext, useContext: usePostCode} =
  createContext<PostCodeContextType>('PostCode')
function PostCodeProvider({children}: {children: React.ReactNode}) {
  const [postCode, setPostCode] = React.useState(() =>
    Array.from({length: 2}, () => ''),
  )

  const value = React.useMemo(
    () => ({postCode, setPostCode}),
    [postCode, setPostCode],
  )

  return (
    <PostCodeContext.Provider value={value}>
      {children}
    </PostCodeContext.Provider>
  )
}

PostCode component:


function PostCode() {
  const {postCode, setPostCode} = usePostCode()

  function hanldePostCodeChange(
    event: React.ChangeEvent<HTMLInputElement>,
    idx: number,
  ) {
    const newPostCode = [...postCode]
    newPostCode.splice(idx, 1, event.target.value)
    setPostCode(newPostCode)
  }
  return (
    <div>
      <input onChange={(e) => hanldePostCodeChange(e, 0)} />
      <input onChange={(e) => hanldePostCodeChange(e, 1)} />
    </div>
  )
}

When I click the search button, I have to fake an API for it. I will use msw, and create a fake API.

rest.get('/addresses', (req, res, ctx) => {
  return res(
    ctx.delay(3000),
    ctx.status(200),
    ctx.json({
      data: [
        {
          code: 13,
          prefecture: 'Tokyo',
          city: 'Otaku',
          ward: 'Kamata',
        },
        {
          code: 12,
          prefecture: 'Osaka',
          city: 'Namba',
          ward: 'Suidou',
        },
      ],
    }),
  )
}),

Search component:


function Search() {
  const {setAddress} = useAddress()
  const {postCode} = usePostCode()
  const {setAddresses} = useAddresses()
  const {setIsOpen} = useIsOpen()

  async function handleAddressesSearch() {
    const query = postCode.every((pc) => Boolean(pc)) ? postCode.join('-') : ''
    if (!query) return

    const res = await fetch(`addresses?postCode=${query}`)
    const resJson = await res.json()

    if (resJson.data.length > 1) {
      setIsOpen(true)
      setAddresses(resJson.data)
    } else {
      setAddress(resJson.data[0])
    }
  }
  return <button onClick={handleAddressesSearch}>Search</button>
}

Addresses component:


function Addresses() {
  const {addresses} = useAddresses()
  const {setAddress} = useAddress()
  const {isOpen, setIsOpen} = useIsOpen()

  function handleAddressSelect(address: Address) {
    setIsOpen(false)
    setAddress(address)
  }

  if (!isOpen) return null
  return (
    <ul>
      {addresses?.map((ad, _idx) => (
        <li
          key={`addresses-items-${_idx}`}
          onClick={() => handleAddressSelect(ad)}
        >
          {ad.prefecture},{ad.city}, {ad.ward}
        </li>
      ))}
    </ul>
  )
}

Address component:


function Address() {
  const {address, setAddress} = useAddress()

  function handleWardChange(event: React.ChangeEvent<HTMLInputElement>) {
    setAddress({
      ...address,
      ward: event.target.value,
    })
  }

  return (
    <div>
      <input value={address?.code ?? ''} disabled />
      <input value={address?.prefecture ?? ''} disabled />
      <input value={address?.city ?? ''} disabled />
      <input value={address?.ward ?? ''} onChange={handleWardChange} />
    </div>
  )
}

And combine all of the components to my page:

function AutoAddress() {
  return (
    <AddressProvider>
      <AddressesProvider>
        <IsOpenProvider>
          <PostCodeProvider>
            <PostCode />
            <Search />
          </PostCodeProvider>
          <Addresses />
        </IsOpenProvider>
      </AddressesProvider>
      <Address />
    </AddressProvider>
  )
}

Let's test my app with two cases:

Result with one address:

Result with many addresses:

Improvement

My component worked as I expected, but it has a problem is every time I click the button search, I have to re-fetch API. It will be better if I can cache the addresses in case the postCode wasn't changed.

And swr is very helpful in this case.

I need to have a flag wasSearched to make sure calling API only happens when I click the button search.
When I pass query of postCode to useSWR, useSWR will automatically determine the value of postCode changed or not.
I have to check if postCode wasn't changed for two cases(one address or many addresses), and do some stuff with each case.

Let's create WasSearchedProvider:


type WasSearchedContextType = {
  wasSearched: boolean
  setWasSearched: React.Dispatch<React.SetStateAction<boolean>>
}
const {Context: WasSearchedContext, useContext: useWasSearched} =
  createContext<WasSearchedContextType>('WasSearched')

function WasSearchedProvider({children}: {children: React.ReactNode}) {
  const [wasSearched, setWasSearched] = React.useState(false)
  const value = React.useMemo(
    () => ({wasSearched, setWasSearched}),
    [wasSearched, setWasSearched],
  )
  return (
    <WasSearchedContext.Provider value={value}>
      {children}
    </WasSearchedContext.Provider>
  )
}

Change Addresses component code to using swr:

function AddressesProvider({children}: {children: React.ReactNode}) {
  const {wasSearched} = useWasSearched()
  const {postCode} = usePostCode()
  const {setIsOpen} = useIsOpen()
  const {address, setAddress} = useAddress()
  const query = postCode.every((pc) => Boolean(pc)) ? postCode.join('-') : ''

  const {data: addresses, error} = useSWR(
    wasSearched ? `addresses?postCode=${query}` : null,
    (arg: string) =>
      fetch(arg)
        .then((r) => r.json())
        .then((res) => {
          if (res?.data.length === 1) {
            const {code, city, prefecture, ward} = res.data[0]
            setAddress({
              ...address,
              code,
              city,
              prefecture,
              ward,
            })
          }

          return res?.data
        }),
  )

  useDeepCompareEffect(() => {
    if (!addresses) return

    if (addresses.length > 1) {
      setIsOpen(true)
    }
  }, [{addresses}])

  const value = React.useMemo(() => ({addresses, error}), [addresses, error])

  return (
    <AddressesContext.Provider value={value}>
      {children}
    </AddressesContext.Provider>
  )
}

If the response is one address, I will set the state for address immediately.
If the response is many addresses, I will have to wait for the addresses state to be set, then trigger a compare between the current state and previous state using useDeepCompareEffect. If it is different, I will change isOpen from false -> true.

Addresses component also need to access these states: postCode, wasSearched, isOpen, setAddress.

Let's change the providers:

function AutoAddress() {
  return (
    <AddressProvider>
      <WasSearchedProvider>
        <PostCodeProvider>
          <IsOpenProvider>
            <AddressesProvider>
              <PostCode />
              <Search />
              <Addresses />
            </AddressesProvider>
          </IsOpenProvider>
        </PostCodeProvider>
      </WasSearchedProvider>
      <Address />
    </AddressProvider>
  )
}

Change the logic in Search component:


function TwoArrayStringIsEqual(a: Array<string>, b: Array<string>) {
  return a.every((str, idx) => str === b[idx])
}

function usePrevious<T>(value: T) {
  const ref = React.useRef(value)

  React.useEffect(() => {
    ref.current = value
  })

  return ref.current
}

function Search() {
  const {address, setAddress} = useAddress()
  const {postCode} = usePostCode()
  const previousPostCode = usePrevious<Array<string>>(postCode)
  const {addresses} = useAddresses()
  const {setWasSearched} = useWasSearched()
  const {setIsOpen} = useIsOpen()

  async function handleAddressesSearch() {
    setWasSearched(true)

    if (addresses && TwoArrayStringIsEqual(previousPostCode, postCode)) {
      if (addresses.length === 1) {
        const {code, city, prefecture, ward} = addresses[0]
        setAddress({
          ...address,
          code,
          city,
          prefecture,
          ward,
        })
      } else {
        setIsOpen(true)
      }
    }
  }
  return <button onClick={handleAddressesSearch}>Search</button>
}

When I change the postCode input, It will call API, because the value of postCode was changed. So I have to reset wasSearched to false.

function hanldePostCodeChange(
  event: React.ChangeEvent<HTMLInputElement>,
  idx: number,
) {
  if (wasSearched) {
    setWasSearched(false)
  }
  const newPostCode = [...postCode]
  newPostCode.splice(idx, 1, event.target.value)
  setPostCode(newPostCode)
}

Now, I can see the address list immediately and don't need to trigger a fetch request.

Change the postCode and re-fetch API:

Conclusion

I have just built an address component using React, and improve the performance by using swr. Please feel free to refer to the source code.

DEV Community: Phan Công Thắng

Know this thing in Cypress

Why Cypress!

before-after

Query DOM

Asynchronous

Content

Command Running

Command Asynchronous

Command Asynchronous Step By Step

Assertions

default assertions

should or expect

Recap

Build this pagination in your React

Requirement

Flow

Coding

Next requirement

Next Flow

The total page value is less than 5.

The total page value is greater than 5 plus the pageIndex value.

The total page value is less than 5 plus the pageIndex value.

Next Coding

The total page value is less than 5.

The total page value is greater than 5 plus the pageIndex value.

The total page value is less than 5 plus the pageIndex value.

Improvement

Conclusion

Know this easily test React app

Test Asynchronous

Useful methods

The order run

Mock function

Config Jest

How to write test

Testing Library

Recap

Step by step: grid layout CSS

Make it grid

Conclusion

Push that to AWS S3 for me

Core Concept

Bucket

Object

CORS

Flow

Coding

Setup

Write code

Conclusion

Make the flexbox CSS stick

Flexbox

Flex basis, grow, shrink

Flex basis

Flex shrink

Flex grow

Conclusion

Have one strange float in CSS

Float

Case 1

Case 2

Case3

Conclusion

Debug Your Css With This Tool

Prepare

Demo

Conclusion

Step by Step: Block and Inline CSS (2021)

Review

Block

Inline

Writing Mode

Writing Mode CSS

Custom Content

Go further

Conclusion

Know this CSS You will not have any pain later on

Inheritance CSS

Conclusion

The total page value is greater than 5 plus the `pageIndex` value.

The total page value is less than 5 plus the `pageIndex` value.

The total page value is greater than 5 plus the `pageIndex` value.

The total page value is less than 5 plus the `pageIndex` value.