improve: add edit button and total price for portfolio modal

Author: alexandrtab

.vscode/settings.json

@@ -3,8 +3,8 @@
 	"typescript.updateImportsOnFileMove.enabled": "always",
 	"editor.formatOnSave": false,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true,
-		"source.fixAll.stylelint": true
+		"source.fixAll.eslint": "explicit",
+		"source.fixAll.stylelint": "explicit"
 	},
 	"eslint.validate": [
 		"javascript",

src/components/button/button.scss

@@ -1,5 +1,6 @@
 $white: #f9f9f9;
 $lite-green: rgb(24, 198, 131);
+$blue: rgb(100, 181, 246);
 
 .btn {
 	border: none;
@@ -41,6 +42,13 @@ $lite-green: rgb(24, 198, 131);
 		border-radius: 50%;
 		padding:0;
 	}
+	&-edit{
+		background-color: $blue;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		padding:0;
+	}
 	&-portfolio {
 		width: 60px;
 		height: 60px;

src/components/modals/PortfolioModal/PortfolioModal.tsx

@@ -1,10 +1,18 @@
+import { useEffect, useState } from "react";
+
 import { useAppSelector, useAppDispatch } from "../../../app/hooks/useRedux";
-import { setPortfolioCurrencies } from "../../../entities/currency/model";
+import { setActiveCurrency, setPortfolioCurrencies } from "../../../entities/currency/model";
+import { ICurrency } from "../../../pages/Currency/types";
 import { Button } from "../../button";
+import { AddModal } from "../AddModal/AddModal";
+import { Modal } from "../Modal/Modal";
 
 export const PortfolioModal: React.FC = () => {
 	const { portfolioCurrencies } = useAppSelector((store) => store.currency);
 	const dispatch = useAppDispatch();
+	const [modalActive, setModalActive] = useState<boolean>(false);
+	const [portfolioPrice, setPortfolioPrice] = useState<number>(0);
+	const { currenciesData } = useAppSelector((store) => store.currency);
 	const handleRemoveCurrencyFromPortfolio = (id: number) => {
 		const confirmDeleting = window.confirm(
 			"Delete this currency from Portfolio?"
@@ -21,30 +29,65 @@ export const PortfolioModal: React.FC = () => {
 		}
 	};
 
+	const handleAddClick = (currency: ICurrency) => {
+		setModalActive(true);
+		document.body.classList.toggle("active");
+		dispatch(setActiveCurrency(currency));
+	};
+	const calcPortfolioTotalPrice = () => {
+		let priceResult = 0;
+
+		if (portfolioCurrencies?.length) {
+			portfolioCurrencies?.forEach(({ count }) => {
+				priceResult += +count;
+			});
+			setPortfolioPrice(priceResult);
+		} else {
+			setPortfolioPrice(0);
+		}
+	};
+
+	useEffect(() => {
+		calcPortfolioTotalPrice();
+	}, [portfolioCurrencies]);
+
 	return (
 		<div className="portfolio-modal-window">
 			<h3>My Portfolio</h3>
 			<ul className="portfolio-modal-window__list">
 				{portfolioCurrencies?.length ? (
-					portfolioCurrencies.map(({ id, name, count }) => (
-						<li key={ id }>
+					portfolioCurrencies.map((item: ICurrency) => (
+						<li key={ item.id }>
 							<div>
-								<p className="portfolio-modal-window__list__name">{name}</p>
-								<p>{count}</p>
+								<p className="portfolio-modal-window__list__name">{item.name}</p>
+								<p>{item.count}</p>
+								<Button
+									isSubmit={ false }
+									text={ "✏️" }
+									className={ "btn-edit" }
+									type="button"
+									onClickButton={ () => handleAddClick(item) }
+								/>
 								<Button
 									isSubmit={ false }
 									text={ "-" }
 									className={ "btn-remove" }
 									type={ "button" }
-									onClickButton={ () => handleRemoveCurrencyFromPortfolio(id) }
+									onClickButton={ () => handleRemoveCurrencyFromPortfolio(item.id) }
 								/>
 							</div>
 						</li>
 					))
 				) : (
 					<p>Sorry, your portfolio is empty :(</p>
 				)}
+				<p className="top-currency">
+					Portfolio : {parseFloat(`${portfolioPrice}`).toFixed(2)} USD
+				</p>
 			</ul>
+			<Modal active={ modalActive } setActive={ setModalActive }>
+				<AddModal />
+			</Modal>
 		</div>
 	);
 };