saleor-dashboard/src/orders/index.tsx
2019-12-18 11:22:02 +01:00

75 lines
2.1 KiB
TypeScript

import { parse as parseQs } from "qs";
import React from "react";
import { useIntl } from "react-intl";
import { Route, RouteComponentProps, Switch } from "react-router-dom";
import { sectionNames } from "@saleor/intl";
import { asSortParams } from "@saleor/utils/sort";
import { WindowTitle } from "../components/WindowTitle";
import {
orderDraftListPath,
OrderDraftListUrlQueryParams,
orderListPath,
OrderListUrlQueryParams,
orderPath,
OrderUrlQueryParams,
OrderDraftListUrlSortField,
OrderListUrlSortField
} from "./urls";
import OrderDetailsComponent from "./views/OrderDetails";
import OrderDraftListComponent from "./views/OrderDraftList";
import OrderListComponent from "./views/OrderList";
const OrderList: React.FC<RouteComponentProps<any>> = ({ location }) => {
const qs = parseQs(location.search.substr(1));
const params: OrderListUrlQueryParams = asSortParams(
qs,
OrderListUrlSortField,
OrderListUrlSortField.number,
false
);
return <OrderListComponent params={params} />;
};
const OrderDraftList: React.FC<RouteComponentProps<any>> = ({ location }) => {
const qs = parseQs(location.search.substr(1));
const params: OrderDraftListUrlQueryParams = asSortParams(
qs,
OrderDraftListUrlSortField,
OrderDraftListUrlSortField.number,
false
);
return <OrderDraftListComponent params={params} />;
};
const OrderDetails: React.FC<RouteComponentProps<any>> = ({
location,
match
}) => {
const qs = parseQs(location.search.substr(1));
const params: OrderUrlQueryParams = qs;
return (
<OrderDetailsComponent
id={decodeURIComponent(match.params.id)}
params={params}
/>
);
};
const Component = () => {
const intl = useIntl();
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.orders)} />
<Switch>
<Route exact path={orderDraftListPath} component={OrderDraftList} />
<Route exact path={orderListPath} component={OrderList} />
<Route path={orderPath(":id")} component={OrderDetails} />
</Switch>
</>
);
};
export default Component;