feat: edição de movimentações

zolppy · Nov 10, 2024 · e93cc24 · e93cc24
1 parent cc852b5
commit e93cc24
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 8 deletions.
diff --git a/context/MovimentationCtx.tsx b/context/MovimentationCtx.tsx
@@ -12,6 +12,7 @@ interface IMovimentationCtx {
   spentValues: IMovimentation[];
   addMovimentation: (movimentation: IMovimentation) => void;
   removeMovimentation: (id: string) => void;
+  editMovimentation: (id: string, mov: IMovimentation) => void;
 }
 
 const Movimentation = createContext<IMovimentationCtx | undefined>(undefined);
@@ -100,13 +101,44 @@ const MovimentationProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
+  const editMovimentation = (id: string, mov: IMovimentation) => {
+    const { date, reason, value } = mov;
+
+    const formatDate = (dateStr: string) => {
+      const [day, month, year] = dateStr.split("-");
+      return `${year}/${month}/${day}`;
+    };
+
+    const treatedDate = formatDate(date as string);
+
+    const updatedReceivedValues = receivedValues.map((receivedValue) =>
+      receivedValue.id === id
+        ? { ...receivedValue, date: treatedDate, reason, value }
+        : receivedValue
+    );
+
+    const updatedSpentValues = spentValues.map((spentValue) =>
+      spentValue.id === id
+        ? { ...spentValue, date: treatedDate, reason, value }
+        : spentValue
+    );
+
+    // Atualiza o estado e salva no storage
+    setReceivedValues(updatedReceivedValues);
+    setSpentValues(updatedSpentValues);
+
+    saveToStorage("receivedValues", updatedReceivedValues);
+    saveToStorage("spentValues", updatedSpentValues);
+  };
+
   return (
     <Movimentation.Provider
       value={{
         receivedValues,
         spentValues,
         addMovimentation,
         removeMovimentation,
+        editMovimentation,
       }}
     >
       {children}

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,7 @@ import Header from "./components/Header";
 import Informations from "./components/Informations";
 import ReceivedTable from "./components/ReceivedTable";
 import RemoveModal from "./components/RemoveModal";
+import EditModal from "./components/EditModal";
 import SpentTable from "./components/SpentTable";
 
 const App = () => {
@@ -31,6 +32,7 @@ const App = () => {
         </section>
         <AddModal />
         <RemoveModal />
+        <EditModal />
       </main>
       <Footer />
     </>

diff --git a/src/components/ReceivedTable/index.tsx b/src/components/ReceivedTable/index.tsx
@@ -1,6 +1,7 @@
 import { useRef } from "react";
 import BodyRow from "../Table/BodyRow";
 import RemoveButton from "../RemoveButton";
+import EditButton from "../EditButton";
 import TableButtonWrapper from "../Table/TableButtonWrapper";
 import Td from "../Table/Td";
 import Th from "../Table/Th";
@@ -10,18 +11,37 @@ import { MovimentationType } from "../../../utils/enums/movimentationType";
 import { useCurrentRemoveTarget } from "../../../context/CurrentRemoveTargetCtx";
 import { useMovimentation } from "../../../context/MovimentationCtx";
 import { useOpenCloseRemoveModal } from "../../../context/OpenCloseRemoveModalCtx";
+import { useOpenCloseEditModal } from "../../../context/OpenCloseEditModalCtx";
+import { useCurrentMovimentation } from "../../../context/CurrentMovimentationCtx";
 
 const ReceivedTable = () => {
   const { openRemoveModal } = useOpenCloseRemoveModal();
-  const { receivedValues } = useMovimentation();
+  const { openEditModal } = useOpenCloseEditModal();
   const { setRemoveTargetID } = useCurrentRemoveTarget();
+  const { setCurrentMovimentation } = useCurrentMovimentation();
+  const { receivedValues } = useMovimentation();
   const trRefs = useRef<(HTMLTableRowElement | null)[]>([]);
 
   const removeMovimentation = (index: number) => {
     setRemoveTargetID(trRefs.current[index]?.id as string);
     openRemoveModal();
   };
 
+  const editMovimentation = (index: number) => {
+    openEditModal();
+
+    const treatedDate = String(receivedValues[index].date).split("/");
+    const newDate = `${treatedDate[2]}-${treatedDate[1]}-${treatedDate[0]}`;
+
+    setCurrentMovimentation({
+      id: receivedValues[index].id,
+      date: newDate,
+      value: receivedValues[index].value,
+      reason: receivedValues[index].reason,
+      type: receivedValues[index].type,
+    });
+  };
+
   const setRef = (el: HTMLTableRowElement | null, index: number) =>
     (trRefs.current[index] = el);
 
@@ -58,6 +78,10 @@ const ReceivedTable = () => {
                         index={index}
                         handleClick={removeMovimentation}
                       />
+                      <EditButton
+                        index={index}
+                        handleClick={editMovimentation}
+                      />
                     </TableButtonWrapper>
                   </Td>
                 </BodyRow>

diff --git a/src/components/SpentTable/index.tsx b/src/components/SpentTable/index.tsx
@@ -1,6 +1,7 @@
 import { useRef } from "react";
 import BodyRow from "../Table/BodyRow";
 import RemoveButton from "../RemoveButton";
+import EditButton from "../EditButton";
 import TableButtonWrapper from "../Table/TableButtonWrapper";
 import Td from "../Table/Td";
 import Th from "../Table/Th";
@@ -10,10 +11,14 @@ import { MovimentationType } from "../../../utils/enums/movimentationType";
 import { useCurrentRemoveTarget } from "../../../context/CurrentRemoveTargetCtx";
 import { useMovimentation } from "../../../context/MovimentationCtx";
 import { useOpenCloseRemoveModal } from "../../../context/OpenCloseRemoveModalCtx";
+import { useOpenCloseEditModal } from "../../../context/OpenCloseEditModalCtx";
+import { useCurrentMovimentation } from "../../../context/CurrentMovimentationCtx";
 
 const SpentTable = () => {
   const { openRemoveModal } = useOpenCloseRemoveModal();
+  const { openEditModal } = useOpenCloseEditModal();
   const { setRemoveTargetID } = useCurrentRemoveTarget();
+  const { setCurrentMovimentation } = useCurrentMovimentation();
   const { spentValues } = useMovimentation();
   const trRefs = useRef<(HTMLTableRowElement | null)[]>([]);
 
@@ -22,6 +27,21 @@ const SpentTable = () => {
     openRemoveModal();
   };
 
+  const editMovimentation = (index: number) => {
+    openEditModal();
+
+    const treatedDate = String(spentValues[index].date).split("/");
+    const newDate = `${treatedDate[2]}-${treatedDate[1]}-${treatedDate[0]}`;
+
+    setCurrentMovimentation({
+      id: spentValues[index].id,
+      date: newDate,
+      value: spentValues[index].value,
+      reason: spentValues[index].reason,
+      type: spentValues[index].type,
+    });
+  };
+
   const setRef = (el: HTMLTableRowElement | null, index: number) =>
     (trRefs.current[index] = el);
 
@@ -57,6 +77,7 @@ const SpentTable = () => {
                       index={index}
                       handleClick={removeMovimentation}
                     />
+                    <EditButton index={index} handleClick={editMovimentation} />
                   </TableButtonWrapper>
                 </Td>
               </BodyRow>

diff --git a/src/main.tsx b/src/main.tsx
@@ -7,18 +7,21 @@ import { CurrentRemoveTargetProvider } from "../context/CurrentRemoveTargetCtx.t
 import { MovimentationProvider } from "../context/MovimentationCtx.tsx";
 import { OpenCloseAddModalProvider } from "../context/OpenCloseAddModalCtx.tsx";
 import { OpenCloseRemoveModalProvider } from "../context/OpenCloseRemoveModalCtx.tsx";
+import { OpenCloseEditModalProvider } from "../context/OpenCloseEditModalCtx.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <MovimentationProvider>
       <OpenCloseAddModalProvider>
-        <OpenCloseRemoveModalProvider>
-          <CurrentMovimentationProvider>
-            <CurrentRemoveTargetProvider>
-              <App />
-            </CurrentRemoveTargetProvider>
-          </CurrentMovimentationProvider>
-        </OpenCloseRemoveModalProvider>
+      	<OpenCloseEditModalProvider>
+		      <OpenCloseRemoveModalProvider>
+		        <CurrentMovimentationProvider>
+		          <CurrentRemoveTargetProvider>
+		            <App />
+		          </CurrentRemoveTargetProvider>
+		        </CurrentMovimentationProvider>
+		      </OpenCloseRemoveModalProvider>
+      	</OpenCloseEditModalProvider>
       </OpenCloseAddModalProvider>
     </MovimentationProvider>
   </StrictMode>