add init page (#197)

domechn · Dec 2, 2023 · 5c49b1e · 5c49b1e
1 parent 6e6dc03
commit 5c49b1e
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 36 deletions.
diff --git a/src/components/data-management.tsx b/src/components/data-management.tsx
@@ -115,7 +115,7 @@ const App = ({
     } catch (e: any) {
       toast({
         description: e.message || e,
-        variant: "destructive"
+        variant: "destructive",
       });
     } finally {
       if (force) {
@@ -157,7 +157,7 @@ const App = ({
       .catch((err) => {
         toast({
           description: err.message || err,
-          variant: "destructive"
+          variant: "destructive",
         });
       });
   }
@@ -172,7 +172,7 @@ const App = ({
       if (!email || !verificationCode) {
         toast({
           description: "email or verification code is empty",
-          variant: "destructive"
+          variant: "destructive",
         });
         return;
       }
@@ -184,13 +184,13 @@ const App = ({
       if (msg.includes("400")) {
         toast({
           description: "invalid verification code",
-          variant: "destructive"
+          variant: "destructive",
         });
         return;
       }
       toast({
         description: e.message || e,
-        variant: "destructive"
+        variant: "destructive",
       });
     } finally {
       setSignLoading(false);
@@ -201,7 +201,7 @@ const App = ({
     if (!email) {
       toast({
         description: "email is empty",
-        variant: "destructive"
+        variant: "destructive",
       });
       return;
     }
@@ -214,7 +214,7 @@ const App = ({
     if (!emailRegex.test(email)) {
       toast({
         description: "invalid email",
-        variant: "destructive"
+        variant: "destructive",
       });
       return;
     }
@@ -238,7 +238,7 @@ const App = ({
     } catch (e: any) {
       toast({
         description: e.message || e,
-        variant: "destructive"
+        variant: "destructive",
       });
     } finally {
       setSendEmailLoading(false);
@@ -293,12 +293,8 @@ const App = ({
                 className="ml-1 wd-40"
                 disabled={sendVerifyCodeDisabledSeconds > 0}
               >
-                {sendEmailLoading ? (
+                {sendEmailLoading && (
                   <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-                ) : (
-                  sendVerifyCodeDisabledSeconds > 0 && (
-                    <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-                  )
                 )}
                 Send Code
                 {sendVerifyCodeDisabledSeconds > 0 &&

diff --git a/src/components/index/index.tsx b/src/components/index/index.tsx
@@ -17,6 +17,7 @@ import ChartDataLabels from "chartjs-plugin-datalabels";
 import HistoricalData from "../historical-data";
 import Overview from "../overview";
 import Comparison from "../comparison";
+import PageWrapper from "../page-wrapper";
 import WalletAnalyzer from "../wallet-analyzer";
 import "./index.css";
 import {
@@ -38,7 +39,7 @@ import {
   TopCoinsRankData,
   TotalValueData,
 } from "@/middlelayers/types";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import {
   queryAssetChange,
   queryLastRefreshAt,
@@ -53,6 +54,7 @@ import { useWindowSize } from "@/utils/hook";
 import { Chart } from "chart.js";
 import { LoadingContext } from "@/App";
 import {
+  getConfiguration,
   getCurrentPreferCurrency,
   getQuerySize,
 } from "@/middlelayers/configuration";
@@ -64,7 +66,6 @@ import Configuration from "@/components/configuration";
 import DataManagement from "@/components/data-management";
 import SystemInfo from "@/components/system-info";
 import React from "react";
-import { queryCoinPrices } from "@/middlelayers/data";
 
 ChartJS.register(
   ...registerables,
@@ -97,6 +98,8 @@ const App = () => {
     getDefaultCurrencyRate()
   );
 
+  const [hasData, setHasData] = useState(true);
+
   const [activeMenu, setActiveMenu] = useState("overview");
 
   const [latestAssetsPercentageData, setLatestAssetsPercentageData] =
@@ -143,14 +146,26 @@ const App = () => {
   }, [windowSize]);
 
   useEffect(() => {
+    resizeAllChartsInPage()
+  }, [lastSize]);
+
+  useEffect(() => {
+    if (hasData) {
+      setTimeout(()=>{
+        resizeAllChartsInPage()
+      }, resizeDelay / 2);
+    }
+  }, [hasData]);
+
+  function resizeAllChartsInPage() {
     if (
       lastSize.width === windowSize.width &&
       lastSize.height === windowSize.height &&
       (activeMenu === "overview" || activeMenu === "wallets")
     ) {
       resizeAllCharts();
     }
-  }, [lastSize]);
+  }
 
   function resizeAllCharts() {
     const overviewsCharts = [
@@ -215,14 +230,18 @@ const App = () => {
 
     const lra = await queryLastRefreshAt();
     setLastRefreshAt(lra);
+
+    if (lap.length > 0) {
+      setHasData(true);
+    } else {
+      setHasData(false);
+    }
   }
 
   function loadAllData(size = 10) {
     setLoading(true);
     // set a loading delay to show the loading animation
-    setTimeout(() => {
-      loadAllDataAsync(size).finally(() => setLoading(false));
-    }, 100);
+    loadAllDataAsync(size).finally(() => setLoading(false));
   }
 
   useEffect(() => {
@@ -304,34 +323,46 @@ const App = () => {
           <Route
             path="/overview"
             element={
-              <Overview
-                currency={currentCurrency}
-                latestAssetsPercentageData={latestAssetsPercentageData}
-                pnlData={pnlData}
-                assetChangeData={assetChangeData}
-                totalValueData={totalValueData}
-                coinsAmountAndValueChangeData={coinsAmountAndValueChangeData}
-                topCoinsRankData={topCoinsRankData}
-                topCoinsPercentageChangeData={topCoinsPercentageChangeData}
-              />
+              <PageWrapper hasData={hasData}>
+                <Overview
+                  currency={currentCurrency}
+                  latestAssetsPercentageData={latestAssetsPercentageData}
+                  pnlData={pnlData}
+                  assetChangeData={assetChangeData}
+                  totalValueData={totalValueData}
+                  coinsAmountAndValueChangeData={coinsAmountAndValueChangeData}
+                  topCoinsRankData={topCoinsRankData}
+                  topCoinsPercentageChangeData={topCoinsPercentageChangeData}
+                />
+              </PageWrapper>
             }
           />
 
           <Route
             path="/wallets"
-            element={<WalletAnalyzer currency={currentCurrency} />}
+            element={
+              <PageWrapper hasData={hasData}>
+                <WalletAnalyzer currency={currentCurrency} />
+              </PageWrapper>
+            }
           />
           <Route
             path="/comparison"
-            element={<Comparison currency={currentCurrency} />}
+            element={
+              <PageWrapper hasData={hasData}>
+                <Comparison currency={currentCurrency} />
+              </PageWrapper>
+            }
           />
           <Route
             path="/history"
             element={
-              <HistoricalData
-                currency={currentCurrency}
-                afterDataDeleted={() => loadAllData(querySize)}
-              />
+              <PageWrapper hasData={hasData}>
+                <HistoricalData
+                  currency={currentCurrency}
+                  afterDataDeleted={() => loadAllData(querySize)}
+                />
+              </PageWrapper>
             }
           />
           <Route path="/settings" element={<Setting />}>

diff --git a/src/components/latest-assets-percentage.tsx b/src/components/latest-assets-percentage.tsx
@@ -215,7 +215,7 @@ const App = ({
     <div>
       <Card>
         <CardContent className="p-6">
-          <div className="grid gap-4 grid-cols-2 md:grid-cols-5">
+          <div className="grid gap-4 grid-cols-2 md:grid-cols-5 h-[330px]">
             <div className="col-span-2 md:col-span-3">{renderDoughnut()}</div>
             <div className="col-span-2 md:col-span-2 flex flex-col items-start justify-top">
               {renderTokenHoldingList()}

diff --git a/src/components/page-wrapper.tsx b/src/components/page-wrapper.tsx
@@ -0,0 +1,41 @@
+import { Button } from "./ui/button";
+import { useNavigate } from "react-router-dom";
+import {
+  ArrowTopRightIcon
+} from "@radix-ui/react-icons";
+
+// if there is no data, show a message and a button to go to settings page
+const App = ({
+  hasData,
+  children,
+}: {
+  hasData: boolean;
+  children: React.ReactNode;
+}) => {
+  const navigate = useNavigate();
+  return (
+    <>
+      {hasData ? (
+        children
+      ) : (
+        <div className="flex items-center justify-center h-[400px]">
+          <div className="space-y-2">
+            <div className="text-xl font-bold text-left">There is no enough data</div>
+            <div className='text-l text-muted-foreground text-left'>
+              Please add configurations in "settings" and click "Refresh" Button
+            </div>
+            <Button
+              onClick={() => navigate("/settings")}
+              className="float-right"
+            >
+              <ArrowTopRightIcon className="mr-2 h-4 w-4"/>
+              Go to settings
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default App;