ProductList Implemented with React, apollo hooks and graphql code generator

ProductList.tsx

import moment from 'moment'
import Link from 'next/link'
import React, { useState } from 'react'
import { Button, Icon, Input, Label, Loader, Table } from 'semantic-ui-react'
import styled from 'styled-components'
import { useProductsQuery } from '../../generated/apollo-components'

const ProductsList = () => {
    const [state, setState] = useState({
        column: 'createdAt',
        direction: 'descending',
    })

    const [query, setQuery] = useState()

    let orderBy: any = {}
    orderBy[state.column] = [state.direction].map((dir: any) => {
        switch (dir) {
            case 'ascending':
                return 'asc'
                break

            default:
                return 'desc'
        }
    })[0]

    const { data, error, loading } = useProductsQuery({
        variables: {
            orderBy,
            query,
        },
    })
    if (loading || !data) {
        return <Loader />
    }
    if (error) {
        return (
            <span>
                Error....
                {error.toString()}
            </span>
        )
    }
    const handleSort = (clickedColumn: any) => () => {
        const { column, direction } = state

        if (column !== clickedColumn) {
            setState({
                column: clickedColumn,
                // @ts-ignore
                direction: 'ascending',
            })

            return
        }

        setState({
            column: state.column,
            // @ts-ignore
            direction: direction === 'ascending' ? 'descending' : 'ascending',
        })
    }

    // @ts-ignore
    const onChange = e => setQuery(e.target.value)

    return (
        <>
            <h1>Products</h1>

            <Input
                placeholder="Search by name, key, upc"
                name="query"
                defaultValue={query}
                onChange={e => onChange(e)}
                type="search"
                fluid
                autoFocus
            />

            {data && data.products && Boolean(data.products.length) && (
                <Table sortable celled striped>
                    <Table.Header>
                        <Table.Row>
                            {/*<HeaderCell cellName='key'/>*/}
                            <Table.HeaderCell>#</Table.HeaderCell>
                            <Table.HeaderCell
                                // @ts-ignore
                                sorted={
                                    state.column === 'key'
                                        ? state.direction
                                        : null
                                }
                                onClick={handleSort('key')}
                            >
                                <Icon name="sort" />
                                Key
                            </Table.HeaderCell>

                            <Table.HeaderCell
                                // @ts-ignore
                                sorted={
                                    state.column === 'name'
                                        ? state.direction
                                        : null
                                }
                                onClick={handleSort('name')}
                            >
                                <Icon name="sort" />
                                Name
                            </Table.HeaderCell>
                            <Table.HeaderCell
                                // @ts-ignore
                                sorted={
                                    state.column === 'upc'
                                        ? state.direction
                                        : null
                                }
                                onClick={handleSort('upc')}
                            >
                                <Icon name="sort" />
                                UPC
                            </Table.HeaderCell>
                            <Table.HeaderCell
                                // @ts-ignore
                                sorted={
                                    state.column === 'style'
                                        ? state.direction
                                        : null
                                }
                                onClick={handleSort('style')}
                            >
                                <Icon name="sort" />
                                Style
                            </Table.HeaderCell>

                            <Table.HeaderCell
                                // @ts-ignore
                                sorted={
                                    state.column === 'createdAt'
                                        ? state.direction
                                        : null
                                }
                                onClick={handleSort('createdAt')}
                            >
                                <Icon name="sort" />
                                Date Created
                            </Table.HeaderCell>
                            <Table.HeaderCell>Action</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        {data.products.map((product: any, index: number) => (
                            <Table.Row key={product.key}>
                                <Table.Cell>{index + 1}</Table.Cell>
                                <Table.Cell>
                                    {product.key ? product.key : 'n/a'}
                                </Table.Cell>
                                <Table.Cell>
                                    <Link
                                        href={`/ecom/products/${product.slug}`}
                                    >
                                        <StyledName>{product.name}</StyledName>
                                    </Link>
                                    <Label.Group size="small">
                                        <Label>
                                            {product.productType.value
                                                ? product.productType.value
                                                : 'n/a'}
                                        </Label>
                                        <Label>
                                            {product.category.value
                                                ? product.category.value
                                                : 'n/a'}
                                        </Label>
                                        <Label>
                                            {product.department.value
                                                ? product.department.value
                                                : 'n/a'}
                                        </Label>
                                    </Label.Group>
                                </Table.Cell>
                                <Table.Cell>
                                    {product.upc ? product.upc : 'n/a'}
                                </Table.Cell>
                                <Table.Cell>
                                    {product.style ? product.style : 'n/a'}
                                </Table.Cell>

                                <Table.Cell>
                                    {product.createdAt
                                        ? moment(product.createdAt).format('L')
                                        : 'n/a'}
                                </Table.Cell>
                                <Table.Cell>
                                    <Button
                                        size="tiny"
                                        basic
                                        circular
                                        icon="trash"
                                    />
                                    <Button
                                        size="tiny"
                                        basic
                                        circular
                                        icon="pencil"
                                    />
                                </Table.Cell>
                            </Table.Row>
                        ))}
                    </Table.Body>
                </Table>
            )}
        </>
    )
}

export default ProductsList
const StyledName = styled.a`
    &&& {
        font-size: 16px;
        cursor: pointer;
        display: block;
        line-height 1.5;
        margin-bottom: 5px;
    }
`