Code Formatting

[GauravGusain98]

Do you think the code for the React component BookGrid can be formatted better to enhance readability?

import React from 'react'
import styled from 'styled-components'
import {Empty,List} from 'antd'
import { grid } from 'client';
import BookCard from './BookCard'

const StyledList = styled(List)`
  /* ... */
`

const StyledListItem = styled(List.Item)`
  /* ... */
`

const SectionHeader = styled.div`
  /* ... */
`

const Wrapper = styled.div`
  /* ... */
`

const BookGrid = ({ books, title, booksPerPage, onPageChange, onClickDelete, totalCount, currentPage, loading }) => {
  const paginationConfig = {
    pageSize: booksPerPage,
    current: currentPage,
    showSizeChanger: false,
    onChange: onPageChange
  }

  return (
    <Wrapper>
      <SectionHeader>{title && <h2>{title}</h2>}</SectionHeader>

      <StyledList
        dataSource={books}
        grid={{ gutter: 64, xs: 1, sm: 2,
          md: 4, lg: 5, xl: 5,
          xxl: 5,
        }}
        itemLayout="horizontal"
        loading={loading}
        locale={{
          emptyText: (
            <Empty description={<span>You don’t have any books yet</span>}
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          ),
        }}
        pagination={paginationConfig}
        renderItem={book => (
          <StyledListItem>
            <BookCard {...book} onClickDelete={onClickDelete} showActions />
          </StyledListItem>
        )}
        showPagination={totalCount > 10} totalCount={totalCount}
      />
    </Wrapper>
  )
}

[Abhishek-Khanduri]

Yes there are some things that can be formatted to improve the readability of the component like in this import statement import { grid } from 'client'; there is a semicolon used whereas, in other import statements, it is not the case and the imported grid is also not used anywhere in the code so there is no need of using it, etc.

import React from 'react'
import styled from 'styled-components'
import { Empty, List } from 'antd'
import BookCard from './BookCard'

const StyledList = styled(List)`
  /* ... */
`

const StyledListItem = styled(List.Item)`
  /* ... */
`

const SectionHeader = styled.div`
  /* ... */
`

const Wrapper = styled.div`
  /* ... */
`

const BookGrid = ({
  books,
  title,
  booksPerPage,
  onPageChange,
  onClickDelete,
  totalCount,
  currentPage,
  loading,
}) => {
  const paginationConfig = {
    pageSize: booksPerPage,
    current: currentPage,
    showSizeChanger: false,
    onChange: onPageChange,
  }

  return (
    <Wrapper>
      <SectionHeader>{title && <h2>{title}</h2>}</SectionHeader>

      <StyledList
        dataSource={books}
        grid={{ gutter: 64,
          xs: 1,
          sm: 2,
          md: 4,
          lg: 5,
          xl: 5,
          xxl: 5
        }}
        itemLayout="horizontal"
        loading={loading}
        locale={{
          emptyText: (
            <Empty
              description={<span>You don&rsquo;t have any books yet</span>}
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          ),
        }}
        pagination={paginationConfig}
        renderItem={(book) => (
          <StyledListItem>
            <BookCard {...book} onClickDelete={onClickDelete} showActions />
          </StyledListItem>
        )}
        showPagination={totalCount > 10}
        totalCount={totalCount}
      />
    </Wrapper>
  )
}

[vivek-kumar-pandey]

My answer is quite similar to Abhishek's, just adding a bit more formatting.

import React from 'react'
import styled from 'styled-components'
import { Empty, List } from 'antd'
import BookCard from './BookCard'

const StyledList = styled(List)`
  /* ... */
`

const StyledListItem = styled(List.Item)`
  /* ... */
`

const SectionHeader = styled.div`
  /* ... */
`

const Wrapper = styled.div`
  /* ... */
`

const BookGrid = ({
    books,
    title,
    booksPerPage,
    onPageChange,
    onClickDelete,
    totalCount,
    currentPage,
    loading
}) => {
    const paginationConfig = {
        pageSize: booksPerPage,
        current: currentPage,
        showSizeChanger: false,
        onChange: onPageChange
    }

    return (
        <Wrapper>
            <SectionHeader>
                {title && <h2>{title}</h2>}
            </SectionHeader>

            <StyledList
                dataSource={books}
                grid={{
                    gutter: 64,
                    xs: 1,
                    sm: 2,
                    md: 4,
                    lg: 5,
                    xl: 5,
                    xxl: 5,
                }}
                itemLayout="horizontal"
                loading={loading}
                locale={{
                    emptyText: (
                        <Empty description={<span>You don’t have any books yet</span>}
                            image={Empty.PRESENTED_IMAGE_SIMPLE}
                        />
                    ),
                }}
                pagination={paginationConfig}
                renderItem={book => (
                    <StyledListItem>
                        <BookCard {...book} onClickDelete={onClickDelete} showActions />
                    </StyledListItem>
                )}
                showPagination={totalCount > 10}
                totalCount={totalCount}
            />
        </Wrapper>
    )
}

[pokhiii]

One thing I noticed is the no trailing comma when defining a multi-line object

    const paginationConfig = {
        pageSize: booksPerPage,
        current: currentPage,
        showSizeChanger: false,
        onChange: onPageChange
    }

However, later on when the grid object is defined there is a trailing comma

                grid={{
                    gutter: 64,
                    xs: 1,
                    sm: 2,
                    md: 4,
                    lg: 5,
                    xl: 5,
                    xxl: 5,
                }}

I think we stick to a single rule here as well - because the ultimate rule of formatting is to be consistent whatever way you go.

My person preference is to always have a trailing comma.

[race45]

To pass the props as separate constants instead of directly within the component definition, can do so by creating a separate object that holds all the props and then passing that object as an argument to the component.

const BookGrid = (props) => {
  const { books, title, booksPerPage, onPageChange, onClickDelete, totalCount, currentPage, loading } = props;

  const paginationConfig = {
    pageSize: booksPerPage,
    current: currentPage,
    showSizeChanger: false,
    onChange: onPageChange,
  };

separating the props into a separate constant can improve code readability in certain scenarios.