complete sync api

2024-08-17 12:17:15 +03:30
parent 49cd5faf9d
commit ddf6bcd287
9 changed files with 155 additions and 63 deletions
@@ -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<StatusBoxItemInterface[] | []>([])

+    useEffect(() => {
+        setStatusData([{
+            name: "dollar",
+            title: "دارایی دلاری",
+            icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.dollarBalance
+        },
+        {
+            name: "coin",
+            title: "دارایی از تمدید اشتراک",
+            icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.walletBalance
+        },
+        {
+            name: "star",
+            title: "امتیاز شرکت در قرعه کشی",
+            icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.score
+        },
+        {
+            name: "radar",
+            title: "تعداد کل دستگاه ثبت شده موفق",
+            icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.installedDevice
+        }])
+    }, [data])

+    if (isLoading) return <HomeStatusSkeleton />
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
-            {statusBoxItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
+            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
        </div>
    )
 }
@@ -0,0 +1,32 @@
+export const HomeStatusSkeleton = () => {
+    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+    </div>
+}
@@ -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<Props> = ({ statusData,
+    isLoading }) => {
+    if (isLoading) return <WalletStatusSkeleton />
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-            {statusBoxWalletItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} detail={item?.detail} />)}
+            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} detail={item?.detail} />)}
        </div>
    )
 }
@@ -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<boolean>(false)
-    const handleShow = () => setSHow(prev => !prev)
+type Props = {
+    pending: boolean
+}
+
+export const WalletAddress: FC<Props> = ({ pending }) => {
    return (
        <div className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
            <div className="w-full h-full flex items-center justify-center">
@@ -13,16 +15,16 @@ export const WalletAddress = () => {
            <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                <div className="flex flex-col gap-10">
                    <p className="text-2xl font-medium text-primary-text-color">ثبت درخواست برداشت از حساب</p>
-                    {!show && <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" />}
+                    {!pending && <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" />}
                </div>
-                {!show && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
+                {!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>}
-                {show && <p className="text-lg font-normal text-justify lg:text-wrap">
+                {pending && <p className="text-lg font-normal text-justify lg:text-wrap">
                    {`همکار گرامی
                    طبق درخواست قبلی، عملیات واریز مبلغ 765,975 تومان به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}</p>}
                <div className="w-full flex justify-end">
-                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60" onClick={handleShow}>{show ? "لغو درخواست" : "ثبت درخواست"}</Button>
+                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60">{pending ? "لغو درخواست" : "ثبت درخواست"}</Button>
                </div>
            </div>
        </div>
@@ -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<StatusBoxItemInterface[] | []>([])
+    const { data, isLoading } = useQuery({
+        queryKey: ["wallet"],
+        queryFn: getWalletDetails
+    })
+
+    useEffect(() => {
+        setStatusData([{
+            name: "dollar",
+            title: "دارایی دلاری",
+            icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.dollarBalance,
+            detail: true
+        },
+        {
+            name: "coin",
+            title: "دارایی از تمدید اشتراک",
+            icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.walletBalance,
+        }])
+    }, [data])
+
    return (
        <div className="flex flex-col gap-y-[30px] w-full">
-            <StatusBoxWallet />
-            <WalletAddress />
+            <StatusBoxWallet statusData={statusData} isLoading={isLoading} />
+            <WalletAddress pending={data?.data?.pending} />
        </div>
    )
 }
@@ -0,0 +1,18 @@
+export const WalletStatusSkeleton = () => {
+    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+    </div>
+}
@@ -13,5 +13,5 @@ export interface OverviewResponse {
    user: OverviewUser
 }

-export const getOverviewDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | []>("/gps/overview/main")
+export const getOverviewDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | [], any>("/gps/overview/main")

@@ -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<OverviewResponse[] | OverviewResponse | [], any>("/gps/overview/wallet")
+
@@ -1,47 +1 @@
-import { Coin1, DollarCircle, Radar, Star } from "iconsax-react";
-import { StatusBoxItemInterface } from "../types";
-
-export const statusBoxItems: StatusBoxItemInterface[] | [] = [
-    {
-        name: "dollar",
-        title: "دارایی دلاری",
-        icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 8
-    },
-    {
-        name: "coin",
-        title: "دارایی از تمدید اشتراک",
-        icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 300589
-    },
-    {
-        name: "star",
-        title: "امتیاز شرکت در قرعه کشی",
-        icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 65
-    },
-    {
-        name: "radar",
-        title: "تعداد کل دستگاه ثبت شده موفق",
-        icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 171
-    },
-]
-
-export const statusBoxWalletItems: StatusBoxItemInterface[] | [] = [
-    {
-        name: "dollar",
-        title: "دارایی دلاری",
-        icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 8,
-        detail: true
-    },
-    {
-        name: "coin",
-        title: "دارایی از تمدید اشتراک",
-        icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 300589
-    },
-]
-
 export const filterNumber = (value: number) => value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")