" change in editpage and totalpage "

component_ui
sonali 2024-10-03 18:06:37 +05:30
parent 544705f96a
commit 0dbced87d1
4 changed files with 68 additions and 42 deletions

View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import "../Common/ExpenseEditPage.css" import "../Common/ExpenseEditPage.css";
function ExpenseEditPage() { function ExpenseEditPage() {
const location = useLocation(); const location = useLocation();
@ -17,7 +17,20 @@ function ExpenseEditPage() {
const now = new Date(); const now = new Date();
const formattedDateTime = now.toLocaleString(); const formattedDateTime = now.toLocaleString();
setCurrentDateTime(formattedDateTime); 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 = () => { const handleBackClick = () => {
navigate("/expense-records"); navigate("/expense-records");
@ -34,16 +47,14 @@ function ExpenseEditPage() {
category: category, category: category,
}; };
const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
const updatedEntries = storedEntries.map((entry) => const updatedEntries = storedEntries.map((entry) =>
entry.id === updatedEntry.id ? updatedEntry : entry entry.id === updatedEntry.id ? updatedEntry : entry
); );
localStorage.setItem("entries", JSON.stringify(updatedEntries)); localStorage.setItem("entries", JSON.stringify(updatedEntries));
// console.log("Entry updated in local storage:", updatedEntry);
console.log("Entry updated in local storage:", updatedEntry); navigate("/expense-successfully", { state: updatedEntry });
navigate("/expense-successfully");
setIsLoading(false); setIsLoading(false);
}; };

View File

@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; 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 { Player } from "@lottiefiles/react-lottie-player";
import successAnimation from "../Common/Animation - 1727464749500.json"; import successAnimation from "../Common/Animation - 1727464749500.json";
import "../ExpenseSuccessfully/ExpenseSuccessfully.css" import "../ExpenseSuccessfully/ExpenseSuccessfully.css";
function ExpenseSuccessfully() { function ExpenseSuccessfully() {
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
@ -21,22 +21,26 @@ function ExpenseSuccessfully() {
}, []); }, []);
const handleBackClick = () => { 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 = () => { const handleBackToHome = () => {
navigate("/" , { state: { entryType } }); navigate("/", { state: { entryType } });
}; };
const handleBackToRecord = () => { const handleBackToRecord = () => {
navigate("/expense-records" , { state: { entryType } }) navigate("/expense-records", { state: { entryType } });
} };
const options = { hour: "2-digit", minute: "2-digit", hour12: true }; const options = { hour: "2-digit", minute: "2-digit", hour12: true };
const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString( const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString([], options)}`;
[],
options
)}`;
return ( return (
<div className="Payment-container"> <div className="Payment-container">

View File

@ -7,20 +7,27 @@ import "../Common/IncomeEdit.css";
function IncomeEdit() { function IncomeEdit() {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const [currentDateTime, setCurrentDateTime] = useState("");
const [amount, setAmount] = useState(location.state?.amount || ""); // Destructure state values passed from previous page
const [category, setCategory] = useState(location.state?.category || ""); 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 [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (!initialDateTime) {
const now = new Date(); const now = new Date();
const formattedDateTime = now.toLocaleString(); const formattedDateTime = now.toLocaleString();
setCurrentDateTime(formattedDateTime); setCurrentDateTime(formattedDateTime);
}, []); }
}, [initialDateTime]);
const handleBackClick = () => { const handleBackClick = () => {
navigate("/records"); navigate("/records"); // Navigate back to records
}; };
const handleSave = () => { const handleSave = () => {
@ -28,23 +35,22 @@ function IncomeEdit() {
setError(null); setError(null);
const updatedEntry = { const updatedEntry = {
id: location.state?.id, id: id,
amount: amount, amount: amount,
dateTime: currentDateTime, dateTime: currentDateTime,
category: category, category: category,
}; };
// Save updated entry to localStorage (or backend API if needed)
const storedEntries = JSON.parse(localStorage.getItem("entries")) || []; const storedEntries = JSON.parse(localStorage.getItem("entries")) || [];
const updatedEntries = storedEntries.map((entry) => const updatedEntries = storedEntries.map((entry) =>
entry.id === updatedEntry.id ? updatedEntry : entry entry.id === updatedEntry.id ? updatedEntry : entry
); );
localStorage.setItem("entries", JSON.stringify(updatedEntries)); localStorage.setItem("entries", JSON.stringify(updatedEntries));
// Optionally, you can navigate to a success page or display a message here // Navigate to success page
console.log("Entry updated in local storage:", updatedEntry); navigate("/successPage", { state: updatedEntry });
navigate("/successPage"); setIsLoading(false);
setIsLoading(false); // End loading
}; };
return ( return (

View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; 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 { Player } from "@lottiefiles/react-lottie-player";
import successAnimation from "../Common/Animation - 1727464749500.json"; import successAnimation from "../Common/Animation - 1727464749500.json";
import "../Income/IncomeSuccessfully.css"; import "../Income/IncomeSuccessfully.css";
@ -21,21 +21,26 @@ function IncomeSuccessfully() {
}, []); }, []);
const handleBackClick = () => { 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 = () => { const handleBackToHome = () => {
navigate("/" , { state: { entryType } }); navigate("/", { state: { entryType } });
}; };
const handleBackToRecord = () => { const handleBackToRecord = () => {
navigate("/records" , { state: { entryType } }) navigate("/records", { state: { entryType } });
} };
const options = { hour: "2-digit", minute: "2-digit", hour12: true }; const options = { hour: "2-digit", minute: "2-digit", hour12: true };
const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString( const formattedDate = `on ${currentDate.toLocaleDateString()} - ${currentDate.toLocaleTimeString(
[], [], options
options
)}`; )}`;
return ( return (