Merge page and querystring abstraction

src/misc.ts

@@ -485,10 +485,8 @@ export function getOrderDirection(asc: boolean): OrderDirection {
   return asc ? OrderDirection.ASC : OrderDirection.DESC;
 }
 
-export function getArrowDirection(
+export function getArrowDirection(asc: boolean): TableCellHeaderArrowDirection {
-  order: OrderDirection
+  return asc ? "asc" : "desc";
-): TableCellHeaderArrowDirection {
-  return order === OrderDirection.ASC ? "asc" : "desc";
 }
 
 export function parseBoolean(a: string): boolean {

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<ProductListColumns>,
     ListActions,
-    SortPage<ProductOrderField>,
+    SortPage<ProductListUrlSortField>,
     WithStyles<typeof styles> {
   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
+                sort.sort === ProductListUrlSortField.name
-                  ? getArrowDirection(sort.direction)
+                  ? getArrowDirection(sort.asc)
                   : undefined
               }
-              onClick={() => onSort(ProductOrderField.NAME)}
+              onClick={() => onSort(ProductListUrlSortField.name)}
             >
               <span className={classes.colNameHeader}>
                 <FormattedMessage defaultMessage="Name" description="product" />
@@ -188,11 +187,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
               <TableCellHeader
                 className={classes.colType}
                 direction={
-                  sort.field === ProductOrderField.TYPE
+                  sort.sort === ProductListUrlSortField.productType
-                    ? getArrowDirection(sort.direction)
+                    ? getArrowDirection(sort.asc)
                     : undefined
                 }
-                onClick={() => onSort(ProductOrderField.TYPE)}
+                onClick={() => onSort(ProductListUrlSortField.productType)}
               >
                 <FormattedMessage
                   defaultMessage="Type"
@@ -207,11 +206,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
               <TableCellHeader
                 className={classes.colPublished}
                 direction={
-                  sort.field === ProductOrderField.PUBLISHED
+                  sort.sort === ProductListUrlSortField.status
-                    ? getArrowDirection(sort.direction)
+                    ? getArrowDirection(sort.asc)
                     : undefined
                 }
-                onClick={() => onSort(ProductOrderField.PUBLISHED)}
+                onClick={() => onSort(ProductListUrlSortField.status)}
               >
                 <FormattedMessage
                   defaultMessage="Published"
@@ -240,12 +239,12 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
               <TableCellHeader
                 className={classes.colPrice}
                 direction={
-                  sort.field === ProductOrderField.PRICE
+                  sort.sort === ProductListUrlSortField.price
-                    ? getArrowDirection(sort.direction)
+                    ? getArrowDirection(sort.asc)
                     : undefined
                 }
                 textAlign="right"
-                onClick={() => onSort(ProductOrderField.PRICE)}
+                onClick={() => onSort(ProductListUrlSortField.price)}
               >
                 <FormattedMessage
                   defaultMessage="Price"

src/products/components/ProductListPage/ProductListPage.tsx

@@ -24,8 +24,7 @@ import {
   PageListProps,
   SortPage
 } from "@saleor/types";
-import { ProductOrder, ProductOrderField } from "@saleor/types/globalTypes";
+import { ProductListUrlFilters, ProductListUrlSortField } from "../../urls";
-import { ProductListUrlFilters } from "../../urls";
 import ProductList from "../ProductList";
 import ProductListFilter, { ProductFilterKeys } from "../ProductListFilter";
 
@@ -34,13 +33,12 @@ export interface ProductListPageProps
     ListActions,
     FilterPageProps<ProductFilterKeys>,
     FetchMoreProps,
-    SortPage<ProductOrderField> {
+    SortPage<ProductListUrlSortField> {
   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) => ({

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<RouteComponentProps<any>> = ({
   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 <ProductListComponent params={params} />;
 };

src/products/urls.ts

@@ -30,13 +30,13 @@ export enum ProductListUrlFiltersEnum {
   query = "query"
 }
 export type ProductListUrlFilters = Filters<ProductListUrlFiltersEnum>;
-export enum ProductListUrlSortFields {
+export enum ProductListUrlSortField {
   name = "name",
-  productType = "type",
+  productType = "productType",
   status = "status",
   price = "price"
 }
-export type ProductListUrlSort = Sort<ProductListUrlSortFields>;
+export type ProductListUrlSort = Sort<ProductListUrlSortField>;
 export type ProductListUrlQueryParams = BulkAction &
   Dialog<ProductListUrlDialog> &
   ProductListUrlFilters &

src/products/views/ProductList/ProductList.tsx

@@ -229,16 +229,15 @@ export const ProductList: React.StatelessComponent<ProductListProps> = ({
                       return (
                         <>
                           <ProductListPage
-                            sort={sort}
+                            sort={{
+                              asc: params.asc,
+                              sort: params.sort
+                            }}
                             onSort={field =>
                               navigate(
                                 productListUrl({
                                   ...params,
-                                  ...getSortUrlVariables(
+                                  ...getSortUrlVariables(field, params)
-                                    field,
-                                    sort.field,
-                                    params
-                                  )
                                 })
                               )
                             }

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";
+import { ProductOrder, ProductOrderField } from "@saleor/types/globalTypes";
-
-export function getSortQueryVariables(params: ProductListUrlQueryParams) {
-  return {
-    direction: getOrderDirection(params.asc),
-    field: getSortQueryField(params.sort)
-  };
-}
 
 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,
+  field: ProductListUrlSortField,
-  selectedField: ProductOrderField,
   params: Sort<ProductListUrlSortField>
 ): Sort<ProductListUrlSortField> {
-  if (field === selectedField) {
+  if (field === params.sort) {
     return {
       asc: !params.asc,
-      sort: getSortUrlField(field)
+      sort: field
     };
   }
 
   return {
     asc: true,
-    sort: getSortUrlField(field)
+    sort: field
   };
 }

src/types.ts

@@ -49,6 +49,7 @@ export interface ListProps<TColumns extends string = string> {
 }
 
 export interface SortPage<TSortKey extends string> {
+  sort: Sort<TSortKey>;
   onSort: (field: TSortKey) => void;
 }
 export interface ListActionsWithoutToolbar {