From 53f29a8a65cdbfd653e6d8bd735ec943639e8e6b Mon Sep 17 00:00:00 2001 From: domchan <31119455+domechn@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:14:06 -0600 Subject: [PATCH] improve select components (#147) * improve select components * improve path --- .../index.tsx => asset-change.tsx} | 8 +-- ....tsx => coins-amount-and-value-change.tsx} | 33 ++++++++---- src/components/comparison/index.tsx | 54 +++++++++++++------ .../index.tsx => configuration.tsx} | 32 +++++------ .../index.tsx => data-management.tsx} | 18 +++---- src/components/historical-data/index.tsx | 16 +++--- ...index.tsx => latest-assets-percentage.tsx} | 4 +- ...ex.tsx => top-coins-percentage-change.tsx} | 10 ++-- .../index.tsx => top-coins-rank.tsx} | 8 +-- .../index.tsx => wallet-analyzer.tsx} | 12 ++--- .../index.tsx => wallet-assets-change.tsx} | 6 +-- ...index.tsx => wallet-assets-percentage.tsx} | 8 +-- 12 files changed, 121 insertions(+), 88 deletions(-) rename src/components/{asset-change/index.tsx => asset-change.tsx} (86%) rename src/components/{coins-amount-and-value-change/index.tsx => coins-amount-and-value-change.tsx} (78%) rename src/components/{configuration/index.tsx => configuration.tsx} (97%) rename src/components/{data-management/index.tsx => data-management.tsx} (96%) rename src/components/{latest-assets-percentage/index.tsx => latest-assets-percentage.tsx} (92%) rename src/components/{top-coins-percentage-change/index.tsx => top-coins-percentage-change.tsx} (92%) rename src/components/{top-coins-rank/index.tsx => top-coins-rank.tsx} (91%) rename src/components/{wallet-analyzer/index.tsx => wallet-analyzer.tsx} (78%) rename src/components/{wallet-assets-change/index.tsx => wallet-assets-change.tsx} (96%) rename src/components/{wallet-assets-percentage/index.tsx => wallet-assets-percentage.tsx} (91%) diff --git a/src/components/asset-change/index.tsx b/src/components/asset-change.tsx similarity index 86% rename from src/components/asset-change/index.tsx rename to src/components/asset-change.tsx index eaccda4..f71d8df 100644 --- a/src/components/asset-change/index.tsx +++ b/src/components/asset-change.tsx @@ -1,9 +1,9 @@ import { Line } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; -import { timestampToDate } from "../../utils/date"; -import { AssetChangeData, CurrencyRateDetail } from "../../middlelayers/types"; +import { useWindowSize } from "@/utils/hook"; +import { timestampToDate } from "@/utils/date"; +import { AssetChangeData, CurrencyRateDetail } from "@/middlelayers/types"; import _ from 'lodash' -import { currencyWrapper } from '../../utils/currency' +import { currencyWrapper } from '@/utils/currency' const App = ({ data, diff --git a/src/components/coins-amount-and-value-change/index.tsx b/src/components/coins-amount-and-value-change.tsx similarity index 78% rename from src/components/coins-amount-and-value-change/index.tsx rename to src/components/coins-amount-and-value-change.tsx index c325637..d7ac5e3 100644 --- a/src/components/coins-amount-and-value-change/index.tsx +++ b/src/components/coins-amount-and-value-change.tsx @@ -1,15 +1,16 @@ import _ from "lodash"; +import React from "react"; import { useEffect, useState } from "react"; import { Line } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; -import { timestampToDate } from "../../utils/date"; +import { useWindowSize } from "@/utils/hook"; +import { timestampToDate } from "@/utils/date"; import { CoinsAmountAndValueChangeData, CurrencyRateDetail, -} from "../../middlelayers/types"; -import Select from "../common/select"; -import { currencyWrapper } from "../../utils/currency"; -import { ButtonGroup, ButtonGroupItem } from "../ui/button-group"; +} from "@/middlelayers/types"; +import { currencyWrapper } from "@/utils/currency"; +import { ButtonGroup, ButtonGroupItem } from "./ui/button-group"; +import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select' const prefix = "caaavc"; @@ -141,11 +142,23 @@ const App = ({
{
- + + + + + + Base Dates + {dateOptions.map((d) => ( + + {d.label} + + ))} + + +
- + + + + + + Head Dates + {dateOptions.map((d) => ( + + {d.label} + + ))} + + +
{_(data).isEmpty() ? ( diff --git a/src/components/configuration/index.tsx b/src/components/configuration.tsx similarity index 97% rename from src/components/configuration/index.tsx rename to src/components/configuration.tsx index a730ee9..385d6af 100644 --- a/src/components/configuration/index.tsx +++ b/src/components/configuration.tsx @@ -3,16 +3,15 @@ import { useContext, useEffect, useMemo, useState } from "react"; import { getConfiguration, saveConfiguration, -} from "../../middlelayers/configuration"; +} from "../middlelayers/configuration"; import { toast } from "react-hot-toast"; -import deleteIcon from "../../assets/icons/delete-icon.png"; -import { GlobalConfig, TokenConfig } from "../../middlelayers/datafetch/types"; -import { LoadingContext } from "../../App"; -import { CurrencyRateDetail } from "../../middlelayers/types"; -import { listAllCurrencyRates } from "../../middlelayers/currency"; -import { Separator } from "../ui/separator"; -import { Checkbox } from "../ui/checkbox"; -import { Label } from "../ui/label"; +import deleteIcon from "@/assets/icons/delete-icon.png"; +import { GlobalConfig, TokenConfig } from "../middlelayers/datafetch/types"; +import { CurrencyRateDetail } from "../middlelayers/types"; +import { listAllCurrencyRates } from "../middlelayers/currency"; +import { Separator } from "./ui/separator"; +import { Checkbox } from "./ui/checkbox"; +import { Label } from "./ui/label"; import { Select, SelectContent, @@ -21,8 +20,8 @@ import { SelectLabel, SelectTrigger, SelectValue, -} from "../ui/select"; -import { Button } from "../ui/button"; +} from "./ui/select"; +import { Button } from "./ui/button"; import { Dialog, DialogContent, @@ -31,9 +30,9 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from "../ui/dialog"; -import { Input } from "../ui/input"; -import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"; +} from "./ui/dialog"; +import { Input } from "./ui/input"; +import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"; import React from "react"; const initialConfiguration: GlobalConfig = { @@ -126,7 +125,6 @@ const Configuration = ({ }: { onConfigurationSave?: () => void; }) => { - const { setLoading } = useContext(LoadingContext); const [groupUSD, setGroupUSD] = useState(true); const [querySize, setQuerySize] = useState(0); const [formChanged, setFormChanged] = useState(false); @@ -210,7 +208,6 @@ const Configuration = ({ } function loadConfiguration() { - setLoading(false); getConfiguration() .then((d) => { const globalConfig = d ?? initialConfiguration; @@ -257,8 +254,7 @@ const Configuration = ({ }) .catch((e) => { toast.error("get configuration failed:", e); - }) - .finally(() => setLoading(false)); + }); } function onGroupUSDSelectChange(v: boolean) { diff --git a/src/components/data-management/index.tsx b/src/components/data-management.tsx similarity index 96% rename from src/components/data-management/index.tsx rename to src/components/data-management.tsx index 4fed8d6..d3d243f 100644 --- a/src/components/data-management/index.tsx +++ b/src/components/data-management.tsx @@ -2,7 +2,7 @@ import { toast } from "react-hot-toast"; import { exportHistoricalData, importHistoricalData, -} from "../../middlelayers/data"; +} from "@/middlelayers/data"; import { useEffect, useState } from "react"; import _ from "lodash"; @@ -17,20 +17,20 @@ import { signIn, signOut, syncAssetsToCloudAndLocal, -} from "../../middlelayers/cloudsync"; -import { timestampToDate } from "../../utils/date"; -import { trackEventWithClientID } from "../../utils/app"; -import { Separator } from "../ui/separator"; -import { Checkbox } from "../ui/checkbox"; -import { Label } from "../ui/label"; -import { Button } from "../ui/button"; +} from "@/middlelayers/cloudsync"; +import { timestampToDate } from "@/utils/date"; +import { trackEventWithClientID } from "@/utils/app"; +import { Separator } from "./ui/separator"; +import { Checkbox } from "./ui/checkbox"; +import { Label } from "./ui/label"; +import { Button } from "./ui/button"; import { ReloadIcon, UploadIcon, ExitIcon, EnterIcon, } from "@radix-ui/react-icons"; -import { Input } from "../ui/input"; +import { Input } from "./ui/input"; const App = ({ onDataImported, diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx index 5d3284b..05f3956 100644 --- a/src/components/historical-data/index.tsx +++ b/src/components/historical-data/index.tsx @@ -3,25 +3,25 @@ import { deleteHistoricalDataByUUID, deleteHistoricalDataDetailById, queryHistoricalData, -} from "../../middlelayers/charts"; -import { CurrencyRateDetail, HistoricalData } from "../../middlelayers/types"; -import deleteIcon from "../../assets/icons/delete-icon.png"; +} from "@/middlelayers/charts"; +import { CurrencyRateDetail, HistoricalData } from "@/middlelayers/types"; +import deleteIcon from "@/assets/icons/delete-icon.png"; import _ from "lodash"; import "./index.css"; import { toast } from "react-hot-toast"; -import { LoadingContext } from "../../App"; -import { timestampToDate } from "../../utils/date"; +import { LoadingContext } from "@/App"; +import { timestampToDate } from "@/utils/date"; import { currencyWrapper, prettyNumberToLocaleString, prettyPriceNumberToLocaleString, -} from "../../utils/currency"; +} from "@/utils/currency"; import Modal from "../common/modal"; -import { downloadCoinLogos } from "../../middlelayers/data"; +import { downloadCoinLogos } from "@/middlelayers/data"; import { appCacheDir as getAppCacheDir } from "@tauri-apps/api/path"; import { convertFileSrc } from "@tauri-apps/api/tauri"; -import { useWindowSize } from "../../utils/hook"; +import { useWindowSize } from "@/utils/hook"; import ImageStack from "../common/image-stack"; type RankData = { diff --git a/src/components/latest-assets-percentage/index.tsx b/src/components/latest-assets-percentage.tsx similarity index 92% rename from src/components/latest-assets-percentage/index.tsx rename to src/components/latest-assets-percentage.tsx index b94d331..29fbe5e 100644 --- a/src/components/latest-assets-percentage/index.tsx +++ b/src/components/latest-assets-percentage.tsx @@ -1,6 +1,6 @@ import { Doughnut } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; -import { LatestAssetsPercentageData } from "../../middlelayers/types"; +import { useWindowSize } from "@/utils/hook"; +import { LatestAssetsPercentageData } from "@/middlelayers/types"; const App = ({ data }: { data: LatestAssetsPercentageData }) => { const size = useWindowSize(); diff --git a/src/components/top-coins-percentage-change/index.tsx b/src/components/top-coins-percentage-change.tsx similarity index 92% rename from src/components/top-coins-percentage-change/index.tsx rename to src/components/top-coins-percentage-change.tsx index c16dcad..f165715 100644 --- a/src/components/top-coins-percentage-change/index.tsx +++ b/src/components/top-coins-percentage-change.tsx @@ -1,13 +1,13 @@ import { Line } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; -import { timestampToDate } from "../../utils/date"; -import { TopCoinsPercentageChangeData } from "../../middlelayers/types"; +import { useWindowSize } from "@/utils/hook"; +import { timestampToDate } from "@/utils/date"; +import { TopCoinsPercentageChangeData } from "@/middlelayers/types"; import { useRef, useState } from "react"; import _ from "lodash"; import { ChartJSOrUndefined } from "react-chartjs-2/dist/types"; import { BubbleDataPoint, Point } from "chart.js"; -import { legendOnClick } from "../../utils/legend"; -import { ButtonGroup, ButtonGroupItem } from "../ui/button-group"; +import { legendOnClick } from "@/utils/legend"; +import { ButtonGroup, ButtonGroupItem } from "./ui/button-group"; const prefix = "tcpc"; diff --git a/src/components/top-coins-rank/index.tsx b/src/components/top-coins-rank.tsx similarity index 91% rename from src/components/top-coins-rank/index.tsx rename to src/components/top-coins-rank.tsx index 1c6f81e..11ce1ba 100644 --- a/src/components/top-coins-rank/index.tsx +++ b/src/components/top-coins-rank.tsx @@ -1,12 +1,12 @@ import { Line } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; -import { timestampToDate } from "../../utils/date"; -import { TopCoinsRankData } from "../../middlelayers/types"; +import { useWindowSize } from "@/utils/hook"; +import { timestampToDate } from "@/utils/date"; +import { TopCoinsRankData } from "@/middlelayers/types"; import { useRef } from "react"; import { ChartJSOrUndefined } from "react-chartjs-2/dist/types"; import { BubbleDataPoint, Point } from "chart.js"; import _ from "lodash"; -import { legendOnClick } from "../../utils/legend"; +import { legendOnClick } from "@/utils/legend"; const App = ({ data }: { data: TopCoinsRankData }) => { const size = useWindowSize(); diff --git a/src/components/wallet-analyzer/index.tsx b/src/components/wallet-analyzer.tsx similarity index 78% rename from src/components/wallet-analyzer/index.tsx rename to src/components/wallet-analyzer.tsx index e86209c..3715182 100644 --- a/src/components/wallet-analyzer/index.tsx +++ b/src/components/wallet-analyzer.tsx @@ -1,14 +1,14 @@ import { useContext, useEffect, useState } from "react"; -import WalletAssetsPercentage from "../wallet-assets-percentage"; -import WalletAssetsChange from "../wallet-assets-change"; -import { LoadingContext } from "../../App"; +import WalletAssetsPercentage from "./wallet-assets-percentage"; +import WalletAssetsChange from "./wallet-assets-change"; +import { LoadingContext } from "@/App"; import { CurrencyRateDetail, WalletAssetsChangeData, WalletAssetsPercentageData, -} from "../../middlelayers/types"; -import { WALLET_ANALYZER } from "../../middlelayers/charts"; -import { Separator } from "../ui/separator"; +} from "@/middlelayers/types"; +import { WALLET_ANALYZER } from "@/middlelayers/charts"; +import { Separator } from "./ui/separator"; const App = ({ currency }: { currency: CurrencyRateDetail }) => { const { setLoading } = useContext(LoadingContext); diff --git a/src/components/wallet-assets-change/index.tsx b/src/components/wallet-assets-change.tsx similarity index 96% rename from src/components/wallet-assets-change/index.tsx rename to src/components/wallet-assets-change.tsx index 4813d38..8ca52db 100644 --- a/src/components/wallet-assets-change/index.tsx +++ b/src/components/wallet-assets-change.tsx @@ -2,12 +2,12 @@ import _ from "lodash"; import { CurrencyRateDetail, WalletAssetsChangeData, -} from "../../middlelayers/types"; +} from "@/middlelayers/types"; import { currencyWrapper, prettyNumberToLocaleString, -} from "../../utils/currency"; -import { insertEllipsis } from "../../utils/string"; +} from "@/utils/currency"; +import { insertEllipsis } from "@/utils/string"; import { TableHead, TableRow, diff --git a/src/components/wallet-assets-percentage/index.tsx b/src/components/wallet-assets-percentage.tsx similarity index 91% rename from src/components/wallet-assets-percentage/index.tsx rename to src/components/wallet-assets-percentage.tsx index 53caddb..ad7121e 100644 --- a/src/components/wallet-assets-percentage/index.tsx +++ b/src/components/wallet-assets-percentage.tsx @@ -1,13 +1,13 @@ import { Bar } from "react-chartjs-2"; -import { useWindowSize } from "../../utils/hook"; +import { useWindowSize } from "@/utils/hook"; import { CurrencyRateDetail, WalletAssetsPercentageData, -} from "../../middlelayers/types"; -import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency"; +} from "@/middlelayers/types"; +import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency"; import _ from "lodash"; import { useEffect, useState } from "react"; -import { insertEllipsis } from '../../utils/string' +import { insertEllipsis } from '@/utils/string' const App = ({ data,