diff --git a/cleanup.sh b/cleanup.sh new file mode 100755 index 0000000..7dda13b --- /dev/null +++ b/cleanup.sh @@ -0,0 +1,11 @@ +#!/bin/bash +echo "cleaning up old files and cache >>>" +cd . +rm -rf ./node_modules +rm -rf ./build + +echo "installing dependencies >>>" +npm ci + +echo "starting project >>>" +npm run dev diff --git a/src/App.jsx b/src/App.jsx index b850715..36f9c24 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; - import { Main, mainLoader } from "./layouts/Main"; import { deleteBudget } from "./actions/deleteBudget"; @@ -67,5 +66,3 @@ export function App() { ); } - - diff --git a/src/components/BudgetItem.jsx b/src/components/BudgetItem.jsx index 99a4f7b..1372c50 100644 --- a/src/components/BudgetItem.jsx +++ b/src/components/BudgetItem.jsx @@ -1,55 +1,106 @@ +import { useState, Fragment } from "react"; +import { Dialog, Transition } from "@headlessui/react"; import { Form, Link } from "react-router-dom"; -import { FaRegTrashCan, FaMoneyCheckDollar } from "react-icons/fa6"; +import { EditBudget } from "../components/EditBudget"; +import { FaRegTrashCan, FaMoneyCheckDollar, FaPen } from "react-icons/fa6"; import { calculateSpentByBudget, formatCurrency, formatPercentage } from "../helpers"; export function BudgetItem({ budget, showDelete = false }) { const { id, name, amount } = budget; const spent = calculateSpentByBudget(id); + const [showBudgetForm, setShowBudgetForm] = useState(false); + + function toggleBudgetForm() { + console.log("toggleBudgetForm"); + setShowBudgetForm(!showBudgetForm); + } return ( -
-
-

{name}

-

{formatCurrency(amount)} Budgeted

-
+ <> + + + +
+ - - {formatPercentage(spent / amount)} - -
- {formatCurrency(spent)} spent - - {formatCurrency(amount - spent)} remaining - -
- {showDelete ? ( -
-
{ - if (!confirm("Are you sure you want to permanently delete this budget?")) { - event.preventDefault(); - } - }}> - -
+
+
+ + + + + +
+
+
+ +
+
+

{name}

+

{formatCurrency(amount)} Budgeted

- ) : ( -
- - View Details - - + + + {formatPercentage(spent / amount)} + +
+ {formatCurrency(spent)} spent + + {formatCurrency(amount - spent)} remaining +
- )} -
+ {showDelete ? ( +
+
{ + if (!confirm("Are you sure you want to permanently delete this budget?")) { + event.preventDefault(); + } + }}> + +
+
+ +
+
+ ) : ( +
+ + View Details + + +
+ )} +
+ ); } diff --git a/src/components/EditBudget.jsx b/src/components/EditBudget.jsx new file mode 100644 index 0000000..850021b --- /dev/null +++ b/src/components/EditBudget.jsx @@ -0,0 +1,82 @@ +import { useState, useEffect, useRef } from "react"; +import { useFetcher } from "react-router-dom"; +import { getAllMatchingItems } from "../helpers"; + +export function EditBudget({ budgetId }) { + const fetcher = useFetcher(); + const isSubmitting = fetcher.state === "submitting"; + const formRef = useRef(); + const focusRef = useRef(); + const [budget, setBudget] = useState({}); + + useEffect(() => { + console.log("budgetId", budgetId); + async function getBudget() { + let result = await getAllMatchingItems({ + category: "budgets", + key: "id", + value: budgetId, + })[0]; + console.log("budget", budget); + setBudget(result); + } + getBudget(); + }, []); + + useEffect(() => { + if (!isSubmitting) { + formRef.current.reset(); + focusRef.current.focus(); + } + }, [isSubmitting]); + + return ( +
+

Edit budget

+ +
+ + +
+
+ + +
+ + + +
+ ); +} diff --git a/src/helpers.js b/src/helpers.js index f183127..cf446a5 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -47,6 +47,19 @@ export const createBudget = ({ name, amount }) => { return localStorage.setItem("budgets", JSON.stringify([...existingBudgets, newItem])); }; +export const updateBudget = ({ id, name, amount }) => { + const existingBudgets = fetchData("budgets") ?? []; + const updatedBudgets = existingBudgets.map((budget) => { + if (budget.id !== id) return budget; + return { + ...budget, + name: name, + amount: +amount, + }; + }); + return localStorage.setItem("budgets", JSON.stringify(updatedBudgets)); +}; + export const createExpense = ({ name, amount, budgetId }) => { const budgetName = getAllMatchingItems({ category: "budgets", key: "id", value: budgetId })[0] .name; @@ -62,6 +75,20 @@ export const createExpense = ({ name, amount, budgetId }) => { return localStorage.setItem("expenses", JSON.stringify([...existingExpenses, newItem])); }; +export const updateExpense = ({ id, name, amount, budgetId }) => { + const existingExpenses = fetchData("expenses") ?? []; + const updatedExpenses = existingExpenses.map((expense) => { + if (expense.id !== id) return expense; + return { + ...expense, + name: name, + amount: +amount, + budgetId: budgetId, + }; + }); + return localStorage.setItem("expenses", JSON.stringify(updatedExpenses)); +}; + export const calculateSpentByBudget = (budgetId) => { const expenses = fetchData("expenses") ?? []; const budgetSpent = expenses.reduce((acc, expense) => { diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 617e82c..1f6caaf 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -153,6 +153,7 @@ export function Dashboard() { Add Expense
+ ", error); return (
-

Uh oh! We’ve got a problem.

-

{error.message || error.statusText}

+

Uh oh! Sorry We’ve got a problem.

+

{error?.message || error?.statusText}