diff --git a/src/misc.ts b/src/misc.ts index 6cbfafde9..154b1d246 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -485,10 +485,8 @@ export function getOrderDirection(asc: boolean): OrderDirection { return asc ? OrderDirection.ASC : OrderDirection.DESC; } -export function getArrowDirection( - order: OrderDirection -): TableCellHeaderArrowDirection { - return order === OrderDirection.ASC ? "asc" : "desc"; +export function getArrowDirection(asc: boolean): TableCellHeaderArrowDirection { + return asc ? "asc" : "desc"; } export function parseBoolean(a: string): boolean { diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index cee340599..e3c3530e5 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -31,8 +31,8 @@ import { } from "@saleor/products/components/ProductListPage/utils"; import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes"; import { ProductList_products_edges_node } from "@saleor/products/types/ProductList"; +import { ProductListUrlSortField } from "@saleor/products/urls"; import { ListActions, ListProps, SortPage } from "@saleor/types"; -import { ProductOrder, ProductOrderField } from "@saleor/types/globalTypes"; import TDisplayColumn, { DisplayColumnProps } from "@saleor/utils/columns/DisplayColumn"; @@ -98,11 +98,10 @@ const DisplayColumn = TDisplayColumn as React.FunctionComponent< interface ProductListProps extends ListProps, ListActions, - SortPage, + SortPage, WithStyles { gridAttributes: AvailableInGridAttributes_grid_edges_node[]; products: ProductList_products_edges_node[]; - sort: ProductOrder; } export const ProductList = withStyles(styles, { name: "ProductList" })( @@ -171,11 +170,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( [classes.colNameFixed]: settings.columns.length > 4 })} direction={ - sort.field === ProductOrderField.NAME - ? getArrowDirection(sort.direction) + sort.sort === ProductListUrlSortField.name + ? getArrowDirection(sort.asc) : undefined } - onClick={() => onSort(ProductOrderField.NAME)} + onClick={() => onSort(ProductListUrlSortField.name)} > @@ -188,11 +187,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( onSort(ProductOrderField.TYPE)} + onClick={() => onSort(ProductListUrlSortField.productType)} > onSort(ProductOrderField.PUBLISHED)} + onClick={() => onSort(ProductListUrlSortField.status)} > onSort(ProductOrderField.PRICE)} + onClick={() => onSort(ProductListUrlSortField.price)} > , FetchMoreProps, - SortPage { + SortPage { availableInGridAttributes: AvailableInGridAttributes_availableInGrid_edges_node[]; currencySymbol: string; gridAttributes: AvailableInGridAttributes_grid_edges_node[]; totalGridAttributes: number; products: ProductList_products_edges_node[]; - sort: ProductOrder; } const useStyles = makeStyles((theme: Theme) => ({ diff --git a/src/products/index.tsx b/src/products/index.tsx index 85d080971..ca16a2e59 100644 --- a/src/products/index.tsx +++ b/src/products/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl"; import { Route, RouteComponentProps, Switch } from "react-router-dom"; import { sectionNames } from "@saleor/intl"; -import { parseBoolean } from "@saleor/misc"; +import { findInEnum, parseBoolean } from "@saleor/misc"; import { WindowTitle } from "../components/WindowTitle"; import { productAddPath, @@ -12,6 +12,7 @@ import { ProductImageUrlQueryParams, productListPath, ProductListUrlQueryParams, + ProductListUrlSortField, productPath, ProductUrlQueryParams, productVariantAddPath, @@ -31,7 +32,10 @@ const ProductList: React.StatelessComponent> = ({ const qs = parseQs(location.search.substr(1)); const params: ProductListUrlQueryParams = { ...qs, - asc: parseBoolean(qs.asc) + asc: parseBoolean(qs.asc), + sort: qs.sort + ? findInEnum(qs.sort, ProductListUrlSortField) + : ProductListUrlSortField.name }; return ; }; diff --git a/src/products/urls.ts b/src/products/urls.ts index 4250470f4..7a408857d 100644 --- a/src/products/urls.ts +++ b/src/products/urls.ts @@ -30,13 +30,13 @@ export enum ProductListUrlFiltersEnum { query = "query" } export type ProductListUrlFilters = Filters; -export enum ProductListUrlSortFields { +export enum ProductListUrlSortField { name = "name", - productType = "type", + productType = "productType", status = "status", price = "price" } -export type ProductListUrlSort = Sort; +export type ProductListUrlSort = Sort; export type ProductListUrlQueryParams = BulkAction & Dialog & ProductListUrlFilters & diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index ab482d8d8..b1bb62c87 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -229,16 +229,15 @@ export const ProductList: React.StatelessComponent = ({ return ( <> navigate( productListUrl({ ...params, - ...getSortUrlVariables( - field, - sort.field, - params - ) + ...getSortUrlVariables(field, params) }) ) } diff --git a/src/products/views/ProductList/sort.ts b/src/products/views/ProductList/sort.ts index 5ef794e36..4c91b3321 100644 --- a/src/products/views/ProductList/sort.ts +++ b/src/products/views/ProductList/sort.ts @@ -1,17 +1,10 @@ import { getOrderDirection } from "@saleor/misc"; import { ProductListUrlQueryParams, - ProductListUrlSortFields as ProductListUrlSortField + ProductListUrlSortField } from "@saleor/products/urls"; import { Sort } from "@saleor/types"; -import { ProductOrderField } from "@saleor/types/globalTypes"; - -export function getSortQueryVariables(params: ProductListUrlQueryParams) { - return { - direction: getOrderDirection(params.asc), - field: getSortQueryField(params.sort) - }; -} +import { ProductOrder, ProductOrderField } from "@saleor/types/globalTypes"; export function getSortQueryField( sort: ProductListUrlSortField @@ -30,6 +23,15 @@ export function getSortQueryField( } } +export function getSortQueryVariables( + params: ProductListUrlQueryParams +): ProductOrder { + return { + direction: getOrderDirection(params.asc), + field: getSortQueryField(params.sort) + }; +} + export function getSortUrlField( sort: ProductOrderField ): ProductListUrlSortField { @@ -48,19 +50,18 @@ export function getSortUrlField( } export function getSortUrlVariables( - field: ProductOrderField, - selectedField: ProductOrderField, + field: ProductListUrlSortField, params: Sort ): Sort { - if (field === selectedField) { + if (field === params.sort) { return { asc: !params.asc, - sort: getSortUrlField(field) + sort: field }; } return { asc: true, - sort: getSortUrlField(field) + sort: field }; } diff --git a/src/types.ts b/src/types.ts index bebdb22c1..1ff50fea8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -49,6 +49,7 @@ export interface ListProps { } export interface SortPage { + sort: Sort; onSort: (field: TSortKey) => void; } export interface ListActionsWithoutToolbar {