From 0dbced87d15afa15b68b0213542d2d29837360f5 Mon Sep 17 00:00:00 2001 From: sonali Date: Thu, 3 Oct 2024 18:06:37 +0530 Subject: [PATCH] " change in editpage and totalpage " --- .../pages/Expense/Common/ExpenseEditPage.js | 25 +++++++++---- .../ExpenseSuccessfully.js | 26 ++++++++------ .../pages/Income/Common/IncomeEdit.js | 36 +++++++++++-------- .../pages/Income/Income/IncomeSuccessfully.js | 23 +++++++----- 4 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/components/pages/Expense/Common/ExpenseEditPage.js b/src/components/pages/Expense/Common/ExpenseEditPage.js index 34e247e..766d538 100644 --- a/src/components/pages/Expense/Common/ExpenseEditPage.js +++ b/src/components/pages/Expense/Common/ExpenseEditPage.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; -import "../Common/ExpenseEditPage.css" +import "../Common/ExpenseEditPage.css"; function ExpenseEditPage() { const location = useLocation(); @@ -17,14 +17,27 @@ function ExpenseEditPage() { const now = new Date(); const formattedDateTime = now.toLocaleString(); setCurrentDateTime(formattedDateTime); - }, []); + + + if (!location.state?.id) { + const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; + const entryToEdit = storedEntries.find( + (entry) => entry.id === location.state?.id + ); + + if (entryToEdit) { + setAmount(entryToEdit.amount); + setCategory(entryToEdit.category); + } + } + }, [location.state]); const handleBackClick = () => { navigate("/expense-records"); }; const handleSave = () => { - setIsLoading(true); + setIsLoading(true); setError(null); const updatedEntry = { @@ -34,16 +47,14 @@ function ExpenseEditPage() { category: category, }; - const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; const updatedEntries = storedEntries.map((entry) => entry.id === updatedEntry.id ? updatedEntry : entry ); localStorage.setItem("entries", JSON.stringify(updatedEntries)); - - console.log("Entry updated in local storage:", updatedEntry); - navigate("/expense-successfully"); + // console.log("Entry updated in local storage:", updatedEntry); + navigate("/expense-successfully", { state: updatedEntry }); setIsLoading(false); }; diff --git a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js index 6efab2d..5f0a51d 100644 --- a/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js +++ b/src/components/pages/Expense/ExpenseSuccessfully/ExpenseSuccessfully.js @@ -1,16 +1,16 @@ import React, { useEffect, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; -import { useNavigate , useLocation } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; import { Player } from "@lottiefiles/react-lottie-player"; import successAnimation from "../Common/Animation - 1727464749500.json"; -import "../ExpenseSuccessfully/ExpenseSuccessfully.css" +import "../ExpenseSuccessfully/ExpenseSuccessfully.css"; function ExpenseSuccessfully() { const [currentDate, setCurrentDate] = useState(new Date()); const navigate = useNavigate(); const location = useLocation(); - const entryType = location.state?.entryType; + const entryType = location.state?.entryType; useEffect(() => { const timer = setInterval(() => { @@ -21,22 +21,26 @@ function ExpenseSuccessfully() { }, []); const handleBackClick = () => { - navigate("/expense-editPage" , { state: { entryType } }); + const updatedEntry = { + id: location.state?.id, + amount: location.state?.amount, + category: location.state?.category, + dateTime: location.state?.dateTime, + }; + + navigate("/expense-editPage", { state: updatedEntry }); }; const handleBackToHome = () => { - navigate("/" , { state: { entryType } }); + navigate("/", { state: { entryType } }); }; const handleBackToRecord = () => { - navigate("/expense-records" , { state: { entryType } }) - } + navigate("/expense-records", { state: { entryType } }); + }; const options = { hour: "2-digit", minute: "2-digit", hour12: true }; - const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString( - [], - options - )}`; + const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`; return (
diff --git a/src/components/pages/Income/Common/IncomeEdit.js b/src/components/pages/Income/Common/IncomeEdit.js index 8d4b8bf..9bce9f0 100644 --- a/src/components/pages/Income/Common/IncomeEdit.js +++ b/src/components/pages/Income/Common/IncomeEdit.js @@ -7,44 +7,50 @@ import "../Common/IncomeEdit.css"; function IncomeEdit() { const location = useLocation(); const navigate = useNavigate(); - const [currentDateTime, setCurrentDateTime] = useState(""); - const [amount, setAmount] = useState(location.state?.amount || ""); - const [category, setCategory] = useState(location.state?.category || ""); + + // Destructure state values passed from previous page + const { id, amount: initialAmount, category: initialCategory, dateTime: initialDateTime } = location.state || {}; + + const [amount, setAmount] = useState(initialAmount || ""); + const [category, setCategory] = useState(initialCategory || ""); + const [currentDateTime, setCurrentDateTime] = useState(initialDateTime || ""); + const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); useEffect(() => { - const now = new Date(); - const formattedDateTime = now.toLocaleString(); - setCurrentDateTime(formattedDateTime); - }, []); + if (!initialDateTime) { + const now = new Date(); + const formattedDateTime = now.toLocaleString(); + setCurrentDateTime(formattedDateTime); + } + }, [initialDateTime]); const handleBackClick = () => { - navigate("/records"); + navigate("/records"); // Navigate back to records }; const handleSave = () => { - setIsLoading(true); + setIsLoading(true); setError(null); const updatedEntry = { - id: location.state?.id, + id: id, amount: amount, dateTime: currentDateTime, category: category, }; - + // Save updated entry to localStorage (or backend API if needed) const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; const updatedEntries = storedEntries.map((entry) => entry.id === updatedEntry.id ? updatedEntry : entry ); localStorage.setItem("entries", JSON.stringify(updatedEntries)); - // Optionally, you can navigate to a success page or display a message here - console.log("Entry updated in local storage:", updatedEntry); - navigate("/successPage"); - setIsLoading(false); // End loading + // Navigate to success page + navigate("/successPage", { state: updatedEntry }); + setIsLoading(false); }; return ( diff --git a/src/components/pages/Income/Income/IncomeSuccessfully.js b/src/components/pages/Income/Income/IncomeSuccessfully.js index 5acb7ad..d7c38d8 100644 --- a/src/components/pages/Income/Income/IncomeSuccessfully.js +++ b/src/components/pages/Income/Income/IncomeSuccessfully.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; -import { useNavigate , useLocation } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; import { Player } from "@lottiefiles/react-lottie-player"; import successAnimation from "../Common/Animation - 1727464749500.json"; import "../Income/IncomeSuccessfully.css"; @@ -21,21 +21,26 @@ function IncomeSuccessfully() { }, []); const handleBackClick = () => { - navigate("/editPage" , { state: { entryType } }); + const updatedEntry = { + id: location.state?.id, + amount: location.state?.amount, + category: location.state?.category, + dateTime: location.state?.dateTime, + }; + navigate("/editPage", { state: { ...updatedEntry } }); }; const handleBackToHome = () => { - navigate("/" , { state: { entryType } }); + navigate("/", { state: { entryType } }); }; const handleBackToRecord = () => { - navigate("/records" , { state: { entryType } }) - } + navigate("/records", { state: { entryType } }); + }; const options = { hour: "2-digit", minute: "2-digit", hour12: true }; const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString( - [], - options + [], options )}`; return ( @@ -68,10 +73,10 @@ function IncomeSuccessfully() {
- Home + Home
- Records + Records