wip: NaN on cards

mtguerson · May 8, 2024 · b08281f · b08281f
1 parent 6f14858
commit b08281f
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 33 deletions.
diff --git a/frontend/src/app/services/bankAccountsService/getAll.ts b/frontend/src/app/services/bankAccountsService/getAll.ts
@@ -0,0 +1,16 @@
+import { httpClient } from "../httpClient";
+
+type BankAccountsResponse = Array<{
+  id: string;
+  name: string;
+  initialBalance: number;
+  type: 'CHECKING' | 'INVESTMENT' | 'CASH';
+  color: string;
+  currentBalance: number;
+}>;
+
+export async function getAll() {
+  const { data } = await httpClient.get<BankAccountsResponse>('/bank-accounts');
+
+  return data;
+}
diff --git a/frontend/src/app/services/bankAccountsService/index.ts b/frontend/src/app/services/bankAccountsService/index.ts
@@ -0,0 +1,7 @@
+import { create } from "./create";
+import { getAll } from "./getAll";
+
+export const bankAccountsService = {
+  create,
+  getAll,
+};
diff --git a/frontend/src/app/utils/currencyStringToNumber.ts b/frontend/src/app/utils/currencyStringToNumber.ts
@@ -0,0 +1,5 @@
+export function currencyStringToNumber(value: string) {
+  const sanitizedString = value.replace(/\./g, '').replace(',', '.');
+
+  return Number(sanitizedString);
+}
diff --git a/frontend/src/view/components/InputCurrency.tsx b/frontend/src/view/components/InputCurrency.tsx
@@ -4,7 +4,7 @@ import { cn } from "../../app/utils/cn";
 
 interface InputCurrencyProps {
   error?: string;
-  value?: string;
+  value?: string | number;
   onChange?(value: string): void;
 }
 

diff --git a/frontend/src/view/pages/Dashboard/components/Accounts/index.tsx b/frontend/src/view/pages/Dashboard/components/Accounts/index.tsx
@@ -96,32 +96,16 @@ export function Accounts() {
                     />
                   </div>
 
-                  <SwiperSlide>
-                    <AccountCard
-                      color="#7950F2"
-                      name="Nubank"
-                      balance={1000.50}
-                      type="CASH"
-                    />
-                  </SwiperSlide>
-
-                  <SwiperSlide>
-                    <AccountCard
-                      color="#333"
-                      name="XP"
-                      balance={1000.50}
-                      type="INVESTMENT"
-                    />
-                  </SwiperSlide>
-
-                  <SwiperSlide>
-                    <AccountCard
-                      color="##0f0"
-                      name="Carteira"
-                      balance={1000.50}
-                      type="CASH"
-                    />
-                  </SwiperSlide>
+                  {accounts.map(account => (
+                    <SwiperSlide key={account.id}>
+                      <AccountCard
+                        color={account.color}
+                        name={account.name}
+                        balance={account.currentBalance}
+                        type={account.type}
+                      />
+                    </SwiperSlide>
+                  ))}
 
                 </Swiper>
               </div>

diff --git a/frontend/src/view/pages/Dashboard/components/Accounts/useAccountsController.ts b/frontend/src/view/pages/Dashboard/components/Accounts/useAccountsController.ts
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { useWindowWidth } from "../../../../../app/hooks/useWindowWidth";
 import { useDashboard } from "../DashboardContext/useDashboard";
+import { useQuery } from "@tanstack/react-query";
+import { bankAccountsService } from "../../../../../app/services/bankAccountsService";
 
 export function UseAccountsController() {
   const windowWidth = useWindowWidth();
@@ -11,14 +13,19 @@ export function UseAccountsController() {
     isEnd: false,
   });
 
+  const { data, isFetching } = useQuery({
+    queryKey: ['bankAccounts'],
+    queryFn: bankAccountsService.getAll,
+  });
+
   return {
     sliderState,
     setSliderState,
     windowWidth,
     areValuesVisible,
     toggleValuesVisibility,
-    isLoading: false,
-    accounts: [],
+    isLoading: isFetching,
+    accounts: data ?? [],
     openNewAccountModal,
   }
 }
diff --git a/frontend/src/view/pages/Dashboard/components/DashboardContext/index.tsx b/frontend/src/view/pages/Dashboard/components/DashboardContext/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useCallback, useState } from "react";
+import { createContext, useCallback, useState } from "react";
 
 interface DashboardContextProps {
   areValuesVisible: boolean;
@@ -14,7 +14,7 @@ interface DashboardContextProps {
 
 export const DashboardContext = createContext({} as DashboardContextProps);
 
-export function DashboardProvider({ children }: { children: ReactNode }) {
+export function DashboardProvider({ children }: { children: React.ReactNode }) {
   const [areValuesVisible, setAreValuesVisible] = useState(true);
   const [isNewAccountModalOpen, setIsNewAccountModalOpen] = useState(false);
   const [isNewTransactionModalOpen, setIsNewTransactionModalOpen] = useState(false);

diff --git a/frontend/src/view/pages/Dashboard/modals/NewAccountModal/index.tsx b/frontend/src/view/pages/Dashboard/modals/NewAccountModal/index.tsx
@@ -15,6 +15,7 @@ export function NewAccountModal() {
     handleSubmit,
     register,
     control,
+    isPending,
   } = useNewAccountModalController();
 
   return (
@@ -94,7 +95,7 @@ export function NewAccountModal() {
           />
         </div>
 
-        <Button type="submit" className="w-full mt-6">
+        <Button type="submit" className="w-full mt-6" isPending={isPending}>
           Criar
         </Button>
       </form>

diff --git a/frontend/src/view/pages/Dashboard/modals/NewAccountModal/useNewAccountModalController.ts b/frontend/src/view/pages/Dashboard/modals/NewAccountModal/useNewAccountModalController.ts
@@ -2,6 +2,11 @@ import { z } from "zod";
 import { useDashboard } from "../../components/DashboardContext/useDashboard";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { bankAccountsService } from "../../../../../app/services/bankAccountsService";
+import { BankAccountParams } from "../../../../../app/services/bankAccountsService/create";
+import { currencyStringToNumber } from "../../../../../app/utils/currencyStringToNumber";
+import toast from "react-hot-toast";
 
 const schema = z.object({
   initialBalance: z.string().min(1, "Saldo inicial é obrigatório"),
@@ -23,12 +28,33 @@ export function useNewAccountModalController() {
     handleSubmit: hookFormSubmit,
     formState: { errors },
     control,
+    reset,
   } = useForm<FormData>({
     resolver: zodResolver(schema),
   });
 
+  const queryClient = useQueryClient();
+
+  const { mutateAsync, isPending } = useMutation({
+    mutationFn: async (data: BankAccountParams) => {
+      return bankAccountsService.create(data);
+    },
+  });
+
   const handleSubmit = hookFormSubmit(async (data) => {
-    console.log(data);
+    try {
+      await mutateAsync({
+        ...data,
+        initialBalance: currencyStringToNumber(data.initialBalance),
+      });
+
+      queryClient.invalidateQueries({ queryKey: ['bankAccounts'] });
+      toast.success('Conta cadastrada com sucesso!');
+      closeNewAccountModal();
+      reset();
+    } catch {
+      toast.error('Erro ao cadastrar a conta!');
+    }
   });
 
   return {
@@ -38,5 +64,6 @@ export function useNewAccountModalController() {
     errors,
     handleSubmit,
     control,
+    isPending,
   };
 }