From 99803aa7fcd980dc6a4b225beb5f6a004778f522 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 7 Oct 2021 18:04:54 +0700 Subject: [PATCH 1/2] feat: feature get user order --- framework/vendure/schema.d.ts | 2 +- .../utils/queries/get-user-order-query.ts | 19 +++++++++++++ src/components/hooks/account/index.ts | 3 ++ .../hooks/account/useGetUserOrder.tsx | 20 +++++++++++++ src/components/hooks/index.ts | 2 -- .../account/AccountPage/AccountPage.tsx | 22 +++++---------- .../EditInfoModal/EditInfoModal.tsx | 2 +- .../OrderInformation/OrderInformation.tsx | 28 +++++++++---------- .../account/DeliveryItem/DeliveryItem.tsx | 3 +- .../components/Products/Products.tsx | 12 ++++---- 10 files changed, 73 insertions(+), 40 deletions(-) create mode 100644 framework/vendure/utils/queries/get-user-order-query.ts create mode 100644 src/components/hooks/account/index.ts create mode 100644 src/components/hooks/account/useGetUserOrder.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index b3ea2a038..a09e8421c 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3211,7 +3211,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { activeCustomer?: Maybe< { __typename?: 'Customer' } & Pick< Customer, - 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' + 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' | 'orders' > > } diff --git a/framework/vendure/utils/queries/get-user-order-query.ts b/framework/vendure/utils/queries/get-user-order-query.ts new file mode 100644 index 000000000..adf75365c --- /dev/null +++ b/framework/vendure/utils/queries/get-user-order-query.ts @@ -0,0 +1,19 @@ +export const getUserOrderQuery = /* GraphQL */ ` + query activeCustomer { + activeCustomer { + orders{ + items{ + lines{ + productVariant{ + name + } + quantity + } + total + state + code + } + } + } + } +` diff --git a/src/components/hooks/account/index.ts b/src/components/hooks/account/index.ts new file mode 100644 index 000000000..34f1b545e --- /dev/null +++ b/src/components/hooks/account/index.ts @@ -0,0 +1,3 @@ +export { default as useGetUserOrder } from './useGetUserOrder'; +export { default as useEditUserInfo } from './useEditUserInfo' +export { default as useEditCustomerAddress } from './useEditCustomerAddress' diff --git a/src/components/hooks/account/useGetUserOrder.tsx b/src/components/hooks/account/useGetUserOrder.tsx new file mode 100644 index 000000000..9ef249fbd --- /dev/null +++ b/src/components/hooks/account/useGetUserOrder.tsx @@ -0,0 +1,20 @@ +import { ActiveCustomerQuery, Order } from '@framework/schema' +import { getUserOrderQuery } from '@framework/utils/queries/get-user-order-query' +import gglFetcher from 'src/utils/gglFetcher' +import useSWR from 'swr' + +const useGetUserOrder = () => { + const { data, ...rest } = useSWR([getUserOrderQuery], gglFetcher) + console.log(data); + const addingItem = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'AddingItems'); + const arrangingPayment = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'ArrangingPayment'); + const cancelled = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == "Cancelled"); + return { + addingItem: addingItem, + arrangingPayment: arrangingPayment, + cancelled: cancelled, + ...rest + } +} + +export default useGetUserOrder diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts index d01d505ea..2d4c2da24 100644 --- a/src/components/hooks/index.ts +++ b/src/components/hooks/index.ts @@ -1,4 +1,2 @@ export { default as useModalCommon } from './useModalCommon' -export { default as useEditUserInfo } from './account/useEditUserInfo' -export { default as useEditCustomerAddress } from './account/useEditCustomerAddress' diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index d8c169647..d40ba1845 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -12,20 +12,10 @@ import EditInfoModal from './components/EditInfoModal/EditInfoModal' import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" import { useRouter } from "next/router" -import { useActiveCustomer } from 'src/components/hooks/auth' +import { useActiveCustomer} from 'src/components/hooks/auth' +import { useGetUserOrder} from 'src/components/hooks/account' import { AccountProps } from "./components/AccountInfomation/AccountInfomation" -const waiting = [ - { - id: "NO 123456", - products: ["Tomato", "Fish", "Pork", "Onion"], - totalPrice : 1000 - }, - { - id: "NO 123457", - products: ["Tomato", "Fish", "Pork", "Onion"], - totalPrice : 1000 - } -] + const delivering = [ { @@ -73,7 +63,9 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { const router = useRouter() const {userInfo} = useActiveCustomer(); - + + const {addingItem,arrangingPayment,cancelled} = useGetUserOrder(); + const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); @@ -104,7 +96,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { - + diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index c3a2b1e34..3a86210a7 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -8,7 +8,7 @@ import { } from 'src/components/common' import * as Yup from 'yup' import { Form, Formik } from 'formik' -import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks"; +import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks/account"; import { LANGUAGE } from 'src/utils/language.utils' import { useMessage } from 'src/components/contexts' interface EditInfoModalProps { diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx index 211cebe3b..9e825696e 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -4,50 +4,50 @@ import s from './OrderInformation.module.scss' import { TabCommon } from '../../../../../common' import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane' import DeliveryItem from '../../../DeliveryItem/DeliveryItem' +import { Order } from "@framework/schema" interface OrderInformationProps { - waiting: {id: string, products: string[], totalPrice: number}[], - delivering: {id: string, products: string[], totalPrice: number}[], - delivered: {id: string, products: string[], totalPrice: number}[], + addingItem?: Order[], + arrangingPayment?: Order[], + cancelled?: Order[], } -const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => { - +const OrderInformation = ({ addingItem, arrangingPayment, cancelled} : OrderInformationProps) => { return (
Order Information
- +
{ - waiting.map((order, i) => { + addingItem?.map((order, i) => { return ( - + ) }) } - +
{ - delivering.map((order, i) => { + arrangingPayment?.map((order, i) => { return ( - + ) }) } - +
{ - delivered.map((order, i) => { + cancelled?.map((order, i) => { return ( - + ) }) } diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx index b42a0f91e..71432264a 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx @@ -5,12 +5,13 @@ import IdAndStatus from './components/IdAndStatus/IdAndStatus' import Products from './components/Products/Products' import TotalPrice from './components/TotalPrice/TotalPrice' import ReOrder from './components/ReOrder/ReOrder' +import { OrderLine } from "@framework/schema" interface DeliveryItemProps { id: string; status: "waiting" | "delivering" | "delivered"; - products: string[]; + products?: OrderLine[]; totalPrice: number; } diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx index fdbba2c73..0e054a171 100644 --- a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx +++ b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx @@ -1,19 +1,19 @@ +import { OrderLine } from "@framework/schema"; import React from "react" import s from './Products.module.scss' interface ProductsProps { - products: string[]; + products?: OrderLine[]; } const Products = ({ products } : ProductsProps) => { - - function toString(products:string[]): string { + function toString(products?:OrderLine[]): string { let strProducts = ""; - products.map((prod, i) => { + products?.map((prod, i) => { if (i === 0) { - strProducts += prod; + strProducts += prod.productVariant?.name; } else { - strProducts += `, ${prod}` + strProducts += `, ${prod.productVariant?.name}` } }); return strProducts; From bd06e1d8157fec36e54d2a9b5f6ada81790fa7da Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Fri, 15 Oct 2021 17:23:42 +0700 Subject: [PATCH 2/2] delete console.log --- src/components/hooks/account/useGetUserOrder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hooks/account/useGetUserOrder.tsx b/src/components/hooks/account/useGetUserOrder.tsx index 9ef249fbd..26e945abf 100644 --- a/src/components/hooks/account/useGetUserOrder.tsx +++ b/src/components/hooks/account/useGetUserOrder.tsx @@ -5,7 +5,7 @@ import useSWR from 'swr' const useGetUserOrder = () => { const { data, ...rest } = useSWR([getUserOrderQuery], gglFetcher) - console.log(data); + const addingItem = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'AddingItems'); const arrangingPayment = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == 'ArrangingPayment'); const cancelled = data?.activeCustomer?.orders.items.filter((val:Order) =>val.state == "Cancelled");