" 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 { 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,7 +17,20 @@ 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");
@ -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);
};

View File

@ -4,7 +4,7 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
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());
@ -21,7 +21,14 @@ 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 = () => {
@ -29,14 +36,11 @@ function ExpenseSuccessfully() {
};
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 (
<div className="Payment-container">

View File

@ -7,20 +7,27 @@ 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(() => {
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 = () => {
@ -28,23 +35,22 @@ function IncomeEdit() {
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 (

View File

@ -21,7 +21,13 @@ 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 = () => {
@ -29,13 +35,12 @@ function IncomeSuccessfully() {
};
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 (