support deleting single record in historical data page

domechn · Oct 30, 2023 · da973cd · da973cd
1 parent b423bab
commit da973cd
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 7 deletions.
diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import {
   deleteHistoricalDataByUUID,
+  deleteHistoricalDataDetailById,
   queryHistoricalData,
 } from "../../middlelayers/charts";
 import { CurrencyRateDetail, HistoricalData } from "../../middlelayers/types";
@@ -25,6 +26,8 @@ import ImageStack from "../common/image-stack";
 
 type RankData = {
   id: number;
+  // real id in db
+  assetId: number;
   rank: number;
   symbol: string;
   value: number;
@@ -36,7 +39,9 @@ const App = ({
   afterDataDeleted,
   currency,
 }: {
-  afterDataDeleted?: (id: string) => unknown;
+  // uuid is id for batch data
+  // id is for single data
+  afterDataDeleted?: (uuid?: string, id?: number) => unknown;
   currency: CurrencyRateDetail;
 }) => {
   const [data, setData] = useState([] as HistoricalData[]);
@@ -128,14 +133,14 @@ const App = ({
       .finally(() => setLoading(false));
   }
 
-  function onDeleteClick(id: string) {
+  function onHistoricalDataDeleteClick(uuid: string) {
     setLoading(true);
-    deleteHistoricalDataByUUID(id)
+    deleteHistoricalDataByUUID(uuid)
       .then(() => {
         toast.success("Record deleted");
         loadAllData();
         if (afterDataDeleted) {
-          afterDataDeleted(id);
+          afterDataDeleted(uuid);
         }
         // hide rank data when some data is deleted
         setRankData([]);
@@ -147,6 +152,28 @@ const App = ({
       });
   }
 
+  function onHistoricalDataDetailDeleteClick(id: number) {
+    setLoading(true);
+    deleteHistoricalDataDetailById(id)
+      .then(() => {
+        toast.success("Record deleted");
+        loadAllData();
+        if (afterDataDeleted) {
+          afterDataDeleted(undefined, id);
+        }
+
+        setRankData(
+          _(rankData)
+            .filter((d) => d.assetId !== id)
+            .value()
+        );
+      })
+      .catch((e) => toast.error(e.message))
+      .finally(() => {
+        setLoading(false);
+      });
+  }
+
   function onRowClick(id: number | string) {
     const d = _(data).find((d) => d.id === id);
     if (!d) {
@@ -158,6 +185,7 @@ const App = ({
       _(d.assets)
         .map((asset, idx) => ({
           id: idx,
+          assetId: asset.id,
           rank: _(revAssets).findIndex((a) => a.symbol === asset.symbol) + 1,
           amount: asset.amount,
           symbol: asset.symbol,
@@ -206,7 +234,7 @@ const App = ({
 
             <div className="historical-data-card-bottom">
               <div className="historical-data-card-bottom-operations">
-                <a href="#" onClick={() => onDeleteClick(d.id)}>
+                <a href="#" onClick={() => onHistoricalDataDeleteClick(d.id)}>
                   <img
                     src={deleteIcon}
                     alt="delete"
@@ -221,7 +249,7 @@ const App = ({
               <div
                 style={{
                   position: "absolute",
-                  left: '30%',
+                  left: "30%",
                 }}
               >
                 <ImageStack
@@ -339,6 +367,22 @@ const App = ({
                   )}
               </p>
             </td>
+            <td>
+              <a
+                href="#"
+                onClick={() => onHistoricalDataDetailDeleteClick(d.assetId)}
+              >
+                <img
+                  src={deleteIcon}
+                  alt="delete"
+                  style={{
+                    border: 0,
+                    height: 20,
+                    width: 20,
+                  }}
+                />
+              </a>
+            </td>
           </tr>
         );
       })
@@ -405,6 +449,14 @@ const App = ({
                 >
                   Value
                 </th>
+                <th
+                  style={{
+                    width: "2%",
+                    textAlign: "end",
+                  }}
+                >
+                  Opt
+                </th>
               </tr>
             </thead>
             <tbody>{renderDetailPage(rankData)}</tbody>

diff --git a/src/middlelayers/charts.ts b/src/middlelayers/charts.ts
@@ -108,6 +108,11 @@ async function deleteAssetByUUID(uuid: string): Promise<void> {
 	await db.execute(`DELETE FROM ${ASSETS_TABLE_NAME} WHERE uuid = ?`, [uuid])
 }
 
+async function deleteAssetByID(id: number): Promise<void> {
+	const db = await getDatabase()
+	await db.execute(`DELETE FROM ${ASSETS_TABLE_NAME} WHERE id = ?`, [id])
+}
+
 export async function queryTotalValue(): Promise<TotalValueData> {
 	const results = groupAssetModelsListBySymbol(await queryAssets(2))
 
@@ -222,7 +227,7 @@ export async function queryTopCoinsPercentageChangeData(size = 10): Promise<TopC
 	}
 }
 
-export async function queryLastRefreshAt() : Promise<string | null>{
+export async function queryLastRefreshAt(): Promise<string | null> {
 	const assets = await queryAssets(1)
 	if (_(assets).isEmpty() || _(assets[0]).isEmpty()) {
 		return null
@@ -343,10 +348,16 @@ export async function queryHistoricalData(size = 30): Promise<HistoricalData[]>
 	return _(models).map(m => assetsModelsToHistoricalData(m)).value()
 }
 
+// delete batch records by uuid
 export async function deleteHistoricalDataByUUID(uuid: string): Promise<void> {
 	return deleteAssetByUUID(uuid)
 }
 
+// delete single record by id
+export async function deleteHistoricalDataDetailById(id: number): Promise<void> {
+	return deleteAssetByID(id)
+}
+
 export async function queryCoinDataById(id: string): Promise<CoinData[]> {
 	const models = groupAssetModelsBySymbol(await queryAssetByUUID(id))