From ddf6bcd28782821ec89f05c931748b4190ae2df2 Mon Sep 17 00:00:00 2001 From: Alihaghighattalab Date: Sat, 17 Aug 2024 12:17:15 +0330 Subject: [PATCH] complete sync api --- src/components/home/status-box.tsx | 40 +++++++++++++++++- src/components/home/status-skeleton.tsx | 32 ++++++++++++++ src/components/wallet/status-box-wallet.tsx | 14 +++++-- src/components/wallet/wallet-address.tsx | 18 ++++---- src/components/wallet/wallet-page.tsx | 31 +++++++++++++- src/components/wallet/wallet-skeleton.tsx | 18 ++++++++ src/services/api/overview.ts | 2 +- src/services/api/wallet.ts | 17 ++++++++ src/utility/status.tsx | 46 --------------------- 9 files changed, 155 insertions(+), 63 deletions(-) create mode 100644 src/components/home/status-skeleton.tsx create mode 100644 src/components/wallet/wallet-skeleton.tsx create mode 100644 src/services/api/wallet.ts diff --git a/src/components/home/status-box.tsx b/src/components/home/status-box.tsx index 8cfceba..2f920ff 100644 --- a/src/components/home/status-box.tsx +++ b/src/components/home/status-box.tsx @@ -1,13 +1,49 @@ +import { useQuery } from "@tanstack/react-query" import { StatusBoxItemInterface } from "../../types" -import { statusBoxItems } from "../../utility/status" import { StatusBoxItem } from "../common/status-box-items" +import { getOverviewDetails } from "../../services/api/overview" +import { useEffect, useState } from "react" +import { Coin1, DollarCircle, Radar, Star } from "iconsax-react" +import { HomeStatusSkeleton } from "./status-skeleton" export const StatusBox = () => { + const { data, isLoading } = useQuery({ + queryKey: ['overview'], + queryFn: getOverviewDetails + }) + const [statusData, setStatusData] = useState([]) + useEffect(() => { + setStatusData([{ + name: "dollar", + title: "دارایی دلاری", + icon: , + value: data?.data?.user?.dollarBalance + }, + { + name: "coin", + title: "دارایی از تمدید اشتراک", + icon: , + value: data?.data?.user?.walletBalance + }, + { + name: "star", + title: "امتیاز شرکت در قرعه کشی", + icon: , + value: data?.data?.user?.score + }, + { + name: "radar", + title: "تعداد کل دستگاه ثبت شده موفق", + icon: , + value: data?.data?.installedDevice + }]) + }, [data]) + if (isLoading) return return (
- {statusBoxItems?.map((item: StatusBoxItemInterface) => )} + {statusData?.map((item: StatusBoxItemInterface) => )}
) } \ No newline at end of file diff --git a/src/components/home/status-skeleton.tsx b/src/components/home/status-skeleton.tsx new file mode 100644 index 0000000..ada1628 --- /dev/null +++ b/src/components/home/status-skeleton.tsx @@ -0,0 +1,32 @@ +export const HomeStatusSkeleton = () => { + return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+} \ No newline at end of file diff --git a/src/components/wallet/status-box-wallet.tsx b/src/components/wallet/status-box-wallet.tsx index f85eceb..440c485 100644 --- a/src/components/wallet/status-box-wallet.tsx +++ b/src/components/wallet/status-box-wallet.tsx @@ -1,13 +1,19 @@ +import { FC } from "react" import { StatusBoxItemInterface } from "../../types" -import { statusBoxWalletItems } from "../../utility/status" import { StatusBoxItem } from "../common/status-box-items" +import { WalletStatusSkeleton } from "./wallet-skeleton" -export const StatusBoxWallet = () => { - +type Props = { + statusData: StatusBoxItemInterface[] | [] + isLoading: boolean +} +export const StatusBoxWallet: FC = ({ statusData, + isLoading }) => { + if (isLoading) return return (
- {statusBoxWalletItems?.map((item: StatusBoxItemInterface) => )} + {statusData?.map((item: StatusBoxItemInterface) => )}
) } \ No newline at end of file diff --git a/src/components/wallet/wallet-address.tsx b/src/components/wallet/wallet-address.tsx index 214158b..ba394a9 100644 --- a/src/components/wallet/wallet-address.tsx +++ b/src/components/wallet/wallet-address.tsx @@ -1,10 +1,12 @@ import { Button } from "@headlessui/react" import { ComboBox } from "../common/combo-box" -import { useState } from "react" +import { FC } from "react" -export const WalletAddress = () => { - const [show, setSHow] = useState(false) - const handleShow = () => setSHow(prev => !prev) +type Props = { + pending: boolean +} + +export const WalletAddress: FC = ({ pending }) => { return (
@@ -13,16 +15,16 @@ export const WalletAddress = () => {

ثبت درخواست برداشت از حساب

- {!show && } + {!pending && }
- {!show &&

+ {!pending &&

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز

} - {show &&

+ {pending &&

{`همکار گرامی طبق درخواست قبلی، عملیات واریز مبلغ 765,975 تومان به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}

}
- +
diff --git a/src/components/wallet/wallet-page.tsx b/src/components/wallet/wallet-page.tsx index 4b4358a..0b305a4 100644 --- a/src/components/wallet/wallet-page.tsx +++ b/src/components/wallet/wallet-page.tsx @@ -1,11 +1,38 @@ +import { useQuery } from "@tanstack/react-query" import { StatusBoxWallet } from "./status-box-wallet" import { WalletAddress } from "./wallet-address" +import { getWalletDetails } from "../../services/api/wallet" +import { useEffect, useState } from "react" +import { StatusBoxItemInterface } from "../../types" +import { Coin1, DollarCircle } from "iconsax-react" export const WalletPage = () => { + const [statusData, setStatusData] = useState([]) + const { data, isLoading } = useQuery({ + queryKey: ["wallet"], + queryFn: getWalletDetails + }) + + useEffect(() => { + setStatusData([{ + name: "dollar", + title: "دارایی دلاری", + icon: , + value: data?.data?.user?.dollarBalance, + detail: true + }, + { + name: "coin", + title: "دارایی از تمدید اشتراک", + icon: , + value: data?.data?.user?.walletBalance, + }]) + }, [data]) + return (
- - + +
) } \ No newline at end of file diff --git a/src/components/wallet/wallet-skeleton.tsx b/src/components/wallet/wallet-skeleton.tsx new file mode 100644 index 0000000..8c13e94 --- /dev/null +++ b/src/components/wallet/wallet-skeleton.tsx @@ -0,0 +1,18 @@ +export const WalletStatusSkeleton = () => { + return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+} \ No newline at end of file diff --git a/src/services/api/overview.ts b/src/services/api/overview.ts index 483005c..32da8ee 100644 --- a/src/services/api/overview.ts +++ b/src/services/api/overview.ts @@ -13,5 +13,5 @@ export interface OverviewResponse { user: OverviewUser } -export const getOverviewDetails = () => axiosInstance.get("/gps/overview/main") +export const getOverviewDetails = () => axiosInstance.get("/gps/overview/main") diff --git a/src/services/api/wallet.ts b/src/services/api/wallet.ts new file mode 100644 index 0000000..c6f2c17 --- /dev/null +++ b/src/services/api/wallet.ts @@ -0,0 +1,17 @@ +import axiosInstance from "../axios"; + +export type OverviewUser = { + walletBalance: number, + dollarBalance: number, + score: number, + _id: string, + id: string +} + +export interface OverviewResponse { + pending: boolean, + user: OverviewUser +} + +export const getWalletDetails = () => axiosInstance.get("/gps/overview/wallet") + diff --git a/src/utility/status.tsx b/src/utility/status.tsx index 427b3e7..fa0fad3 100644 --- a/src/utility/status.tsx +++ b/src/utility/status.tsx @@ -1,47 +1 @@ -import { Coin1, DollarCircle, Radar, Star } from "iconsax-react"; -import { StatusBoxItemInterface } from "../types"; - -export const statusBoxItems: StatusBoxItemInterface[] | [] = [ - { - name: "dollar", - title: "دارایی دلاری", - icon: , - value: 8 - }, - { - name: "coin", - title: "دارایی از تمدید اشتراک", - icon: , - value: 300589 - }, - { - name: "star", - title: "امتیاز شرکت در قرعه کشی", - icon: , - value: 65 - }, - { - name: "radar", - title: "تعداد کل دستگاه ثبت شده موفق", - icon: , - value: 171 - }, -] - -export const statusBoxWalletItems: StatusBoxItemInterface[] | [] = [ - { - name: "dollar", - title: "دارایی دلاری", - icon: , - value: 8, - detail: true - }, - { - name: "coin", - title: "دارایی از تمدید اشتراک", - icon: , - value: 300589 - }, -] - export const filterNumber = (value: number) => value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") \ No newline at end of file