Merge pull request #20 from jessy-bgl/dev/client

1.1.3 : - new API route GET /dca/:id - dashboard redesigned
jessy-bgl · Jun 19, 2022 · 5b6b002 · 5b6b002
2 parents d5c843c + f4232a6
commit 5b6b002
Show file tree

Hide file tree

Showing 48 changed files with 617 additions and 488 deletions.
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "proxy": "http://api:5000",
   "dependencies": {

diff --git a/...iews/dashboard/dca/hooks/useDcaQueries.ts → client/src/hooks/useDcaQueries.ts b/...iews/dashboard/dca/hooks/useDcaQueries.ts → client/src/hooks/useDcaQueries.ts
@@ -2,16 +2,24 @@ import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
-import { Dca } from "../../../../models/Dca";
-import { Pair } from "../../../../models/Exchange";
-import { DcaService } from "../../../../services/api/DcaService";
-import { ExchangeService } from "../../../../services/api/ExchangeService";
+import { Dca } from "../models/Dca";
+import { Pair } from "../models/Exchange";
+import { DcaService } from "../services/api/DcaService";
+import { ExchangeService } from "../services/api/ExchangeService";
 
-const DCAS_QUERY_KEY = "dcas";
+const DCA_QUERY_KEY = "dcas";
+const SINGLE_DCA_QUERY_KEY = "dca";
 const EXCHANGE_PAIRS_QUERY_KEY = "pairs";
 
 const useFetchDcas = () => {
-  return useQuery<Dca[], Error>(DCAS_QUERY_KEY, () => DcaService.fetchDcas());
+  return useQuery<Dca[], Error>(DCA_QUERY_KEY, () => DcaService.fetchDcas());
+};
+
+const useFetchOneDca = (id?: string) => {
+  return useQuery<Dca, Error>(SINGLE_DCA_QUERY_KEY, () => {
+    if (!id) throw new Error("Missing ID");
+    return DcaService.fetchOneDca(id);
+  });
 };
 
 const useCreateDca = () => {
@@ -22,8 +30,8 @@ const useCreateDca = () => {
   return useMutation(DcaService.createDca, {
     onSuccess: (newDca: Dca) => {
       // this is a little hack, because using setQueryData do not trigger any update
-      queryClient.refetchQueries(DCAS_QUERY_KEY);
-      // queryClient.setQueryData<Dca[]>(DCAS_QUERY_KEY, (dcas) => {
+      queryClient.refetchQueries(DCA_QUERY_KEY);
+      // queryClient.setQueryData<Dca[]>(DCA_QUERY_KEY, (dcas) => {
       //   if (!dcas) return [];
       //   dcas.push(newDca);
       //   return dcas;
@@ -43,7 +51,7 @@ const useUpdateDca = () => {
 
   return useMutation(DcaService.updateDca, {
     onSuccess: (updatedDca: Dca) => {
-      queryClient.setQueryData<Dca[]>(DCAS_QUERY_KEY, (dcas) => {
+      queryClient.setQueryData<Dca[]>(DCA_QUERY_KEY, (dcas) => {
         if (!dcas) return [];
         const dataIndex = dcas.findIndex((dca) => dca.id === updatedDca.id);
         dcas[dataIndex] = updatedDca;
@@ -65,7 +73,7 @@ const useUpdateDcaStatus = () => {
   return useMutation(DcaService.updateDcaStatus, {
     onSuccess: (updatedDca: Dca) => {
       // this is a little hack, because using setQueryData do not trigger any update
-      queryClient.refetchQueries(DCAS_QUERY_KEY);
+      queryClient.refetchQueries(DCA_QUERY_KEY);
       enqueueSnackbar(t("updateDcaSuccess"), { variant: "success" });
     },
     onError: (error: Error) => {
@@ -81,8 +89,9 @@ const useFetchExchangePairs = (exchangeId: string) => {
 };
 
 export {
-  useCreateDca,
   useFetchDcas,
+  useFetchOneDca,
+  useCreateDca,
   useUpdateDca,
   useUpdateDcaStatus,
   useFetchExchangePairs,

diff --git a/client/src/i18n/en/common.json b/client/src/i18n/en/common.json
@@ -13,5 +13,6 @@
   "close": "Close",
   "yes": "Yes",
   "no": "No",
-  "none": "None"
+  "none": "None",
+  "goBack": "Back"
 }
diff --git a/client/src/i18n/en/dca.json b/client/src/i18n/en/dca.json
@@ -7,7 +7,7 @@
   "noNextTransaction": "No planned buy",
   "summary": "Buy {{quantity}} {{cryptoToUse}} of {{cryptoToBuy}} every {{days}} days at {{hour}}h (UTC)",
   "statistics": "Statistics",
-  "info": "Info",
+  "info": "Information",
   "form": {
     "requiredField": "Required field",
     "exchange": "Exchange",
@@ -25,15 +25,15 @@
     "mustBeGreaterOrEqualTo": "Must be greater or equal to {{value}}"
   },
   "status": {
-    "active": "Active",
-    "paused": "Paused",
-    "archived": "Archived",
-    "delete": "Delete"
+    "active": "Active bots",
+    "paused": "Paused bots",
+    "archived": "Archived bots"
   },
   "action": {
     "activate": "Activate",
     "pause": "Pause",
-    "archive": "Archive"
+    "archive": "Archive",
+    "delete": "Delete"
   },
   "stats": {
     "dcaCounter": "DCA bots",

diff --git a/client/src/i18n/en/navigation.json b/client/src/i18n/en/navigation.json
@@ -1,6 +1,7 @@
 {
   "dashboard": "Dashboard",
   "activeDcas": "Active bots",
+  "inactiveDcas": "Inactive bots",
   "pausedDcas": "Paused bots",
   "archivedDcas": "Archived bots",
   "theme": "Theme",

diff --git a/client/src/i18n/fr/common.json b/client/src/i18n/fr/common.json
@@ -13,5 +13,6 @@
   "close": "Fermer",
   "yes": "Oui",
   "no": "Non",
-  "none": "Aucun"
+  "none": "Aucun",
+  "goBack": "Revenir en arrière"
 }
diff --git a/client/src/i18n/fr/dca.json b/client/src/i18n/fr/dca.json
@@ -7,7 +7,7 @@
   "noNextTransaction": "Aucun achat programmé",
   "summary": "Achat de {{quantity}} {{cryptoToUse}} de {{cryptoToBuy}} tous les {{days}} jours à {{hour}}h (UTC)",
   "statistics": "Statistiques",
-  "info": "Infos",
+  "info": "Informations",
   "form": {
     "requiredField": "Champ requis",
     "exchange": "Exchange",
@@ -25,15 +25,15 @@
     "mustBeGreaterOrEqualTo": "Doit être supérieur ou égal à {{value}}"
   },
   "status": {
-    "active": "Actif",
-    "paused": "En pause",
-    "archived": "Archivé",
-    "delete": "Supprimer"
+    "active": "Bots actifs",
+    "paused": "Bots en pause",
+    "archived": "Bots archivés"
   },
   "action": {
     "activate": "Activer",
     "pause": "Mettre en pause",
-    "archive": "Archiver"
+    "archive": "Archiver",
+    "delete": "Supprimer"
   },
   "stats": {
     "dcaCounter": "bots DCA",

diff --git a/client/src/i18n/fr/navigation.json b/client/src/i18n/fr/navigation.json
@@ -1,6 +1,7 @@
 {
   "dashboard": "Tableau de bord",
   "activeDcas": "Bots actifs",
+  "inactiveDcas": "Bots inactifs",
   "pausedDcas": "Bots en pause",
   "archivedDcas": "Bots archivés",
   "theme": "Thème",

diff --git a/client/src/navigation/Routes.tsx b/client/src/navigation/Routes.tsx
@@ -4,10 +4,11 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { Navigation } from "../views/navigation/Navigation";
 import { Exchanges } from "../views/exchanges/Exchanges";
 import { Settings } from "../views/settings/Settings";
-import { DcaStatusEnum } from "../models/Dca";
 import { Transactions } from "../views/transactions/Transactions";
 import { Dashboard } from "../views/dashboard/Dashboard";
 import { About } from "../views/about/About";
+import { InactiveDcaBots } from "../views/inactive-dca-bots/InactiveDcaBots";
+import { Bot } from "../views/dca-bot/Bot";
 
 function Router() {
   const { t } = useTranslation("navigation");
@@ -16,38 +17,16 @@ function Router() {
     <Routes>
       <Route
         path="/"
-        element={
-          <Navigation
-            child={<Navigate to="/dca/active" />}
-            title={t("dashboard")}
-          />
-        }
-      />
-      <Route
-        path="/dca/active"
-        element={
-          <Navigation
-            child={<Dashboard dcaStatus={DcaStatusEnum.ACTIVE} />}
-            title={t("activeDcas")}
-          />
-        }
+        element={<Navigation child={<Dashboard />} title={t("dashboard")} />}
       />
       <Route
-        path="/dca/paused"
-        element={
-          <Navigation
-            child={<Dashboard dcaStatus={DcaStatusEnum.PAUSED} />}
-            title={t("pausedDcas")}
-          />
-        }
+        path="/dca/:id"
+        element={<Navigation child={<Bot />} title={t("dashboard")} />}
       />
       <Route
-        path="/dca/archived"
+        path="/inactive-bots"
         element={
-          <Navigation
-            child={<Dashboard dcaStatus={DcaStatusEnum.ARCHIVED} />}
-            title={t("archivedDcas")}
-          />
+          <Navigation child={<InactiveDcaBots />} title={t("inactiveDcas")} />
         }
       />
       <Route
@@ -68,6 +47,7 @@ function Router() {
         path="/about"
         element={<Navigation child={<About />} title={t("about")} />}
       />
+      <Route path="*" element={<Navigate to="/" />} />
     </Routes>
   );
 }

diff --git a/client/src/services/api/DcaService.ts b/client/src/services/api/DcaService.ts
@@ -8,6 +8,7 @@ import {
 
 const DcaService = {
   fetchDcas: (): Promise<Dca[]> => api.get("/dca"),
+  fetchOneDca: (id: string): Promise<Dca> => api.get(`/dca/${id}`),
   createDca: (dto: CreateDcaDTO): Promise<Dca> => api.post("/dca", dto),
   updateDca: (dto: UpdateDcaDTO): Promise<Dca> =>
     api.put(`/dca/${dto.id}`, dto),

diff --git a/client/src/views/dashboard/Dashboard.tsx b/client/src/views/dashboard/Dashboard.tsx
@@ -1,62 +1,25 @@
-import { Grid, Tabs, Tab } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { Grid } from "@mui/material";
 
-import { DcaStatusEnum } from "../../models/Dca";
-import { GlobalStatistics } from "./statistics/global/GlobalStatistics";
-import { DcaStatistics } from "./statistics/dca/DcaStatistics";
-import { DcaInfo } from "./dca/DcaInfo";
-import { Dcas } from "./dca/Dcas";
-import { DcaTabs, useDashboard } from "./hooks/useDashboard";
-
-type Props = {
-  dcaStatus: DcaStatusEnum;
-};
-
-const Dashboard = ({ dcaStatus }: Props) => {
-  const {
-    dcas,
-    isLoading,
-    selectedDcaId,
-    setSelectedDcaId,
-    selectedTab,
-    handleSelectTab,
-  } = useDashboard(dcaStatus);
+import { Statistics } from "./statistics/Statistics";
+import { Bots } from "../dca-bots/Bots";
+import { useDashboard } from "./hooks/useDashboard";
 
+const Dashboard = () => {
   const { t } = useTranslation("dca");
 
-  const renderInfoStats = () => {
-    if (!selectedDcaId) return <GlobalStatistics />;
-    else if (selectedDcaId && selectedTab === DcaTabs.STATISTICS)
-      return <DcaStatistics />;
-    else if (selectedDcaId && selectedTab === DcaTabs.INFO)
-      return <DcaInfo data={dcas.find((dca) => dca.id === selectedDcaId)} />;
-  };
+  const { dcas, isLoading } = useDashboard();
 
   if (isLoading) return <div />;
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12} md={4} xl={3}>
-        <Dcas
-          data={dcas}
-          showAddDca={dcaStatus === DcaStatusEnum.ACTIVE}
-          selectedDcaId={selectedDcaId}
-          setSelectedDcaId={setSelectedDcaId}
-        />
+      <Grid item xs={12} md={6}>
+        <Statistics />
       </Grid>
 
-      <Grid item xs={12} md={8} xl={9}>
-        {selectedDcaId && (
-          <Tabs
-            value={selectedTab}
-            onChange={handleSelectTab}
-            variant="fullWidth"
-          >
-            <Tab label={t("statistics")} value={DcaTabs.STATISTICS} />
-            <Tab label={t("info")} value={DcaTabs.INFO} />
-          </Tabs>
-        )}
-        {renderInfoStats()}
+      <Grid item xs={12} md={6}>
+        <Bots data={dcas} showAddDca={true} title={t("status.active")} />
       </Grid>
     </Grid>
   );