djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge page and querystring abstraction

Browse source
This commit is contained in:
dominik-zeglen 2019-09-13 16:17:12 +02:00
parent 9570aebc5f
commit 0311790550
8 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/misc.ts
View file

@ -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 {

29
src/products/components/ProductList/ProductList.tsx
View file

@ -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
? getArrowDirection(sort.direction)
sort.sort === ProductListUrlSortField.name
? 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
? getArrowDirection(sort.direction)
sort.sort === ProductListUrlSortField.productType
? 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
? getArrowDirection(sort.direction)
sort.sort === ProductListUrlSortField.status
? 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
? getArrowDirection(sort.direction)
sort.sort === ProductListUrlSortField.price
? getArrowDirection(sort.asc)
: undefined
}
textAlign="right"
onClick={() => onSort(ProductOrderField.PRICE)}
onClick={() => onSort(ProductListUrlSortField.price)}
>
<FormattedMessage
defaultMessage="Price"

6
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -24,8 +24,7 @@ import {
PageListProps,
SortPage
} from "@saleor/types";
import { ProductOrder, ProductOrderField } from "@saleor/types/globalTypes";
import { ProductListUrlFilters } from "../../urls";
import { ProductListUrlFilters, ProductListUrlSortField } 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) => ({

8
src/products/index.tsx
View file

@ -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} />;
};

6
src/products/urls.ts
View file

@ -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 &

11
src/products/views/ProductList/ProductList.tsx
View file

@ -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(
field,
sort.field,
params
)
...getSortUrlVariables(field, params)
})
)
}

29
src/products/views/ProductList/sort.ts
View file

@ -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<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
};
}

1
src/types.ts
View file

@ -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 {