" change in editpage and totalpage "
parent
544705f96a
commit
0dbced87d1
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
Loading…
Reference in New Issue