Rifaq expense list feature

rifaq-ahmer/01-xpense-tracker/package.json

@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-toastify": "^8.0.3",
     "redux": "^4.1.1",
     "web-vitals": "^1.1.2"
   },

rifaq-ahmer/01-xpense-tracker/public/index.html

@@ -19,6 +19,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css">
+    <script src="https://kit.fontawesome.com/ea945e6c9f.js" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

rifaq-ahmer/01-xpense-tracker/src/App.js

@@ -1,13 +1,19 @@
 import "./index.css";
 import Home from "./pages/home/index";
 import Header from "./components/header/index";
+import { Route, Switch, BrowserRouter } from "react-router-dom";
+import AddExpense from "./pages/add-expense/index";
+import Footer from "./components/footer";
 function App() {
 	return (
-		<div>
+		<BrowserRouter>
 			<Header />
-			<Home />
-			<div>Footer</div>
-		</div>
+			<Switch>
+				<Route path="/" exact component={Home} />
+				<Route path="/add-expense" exact component={AddExpense} />
+			</Switch>
+			<Footer />
+		</BrowserRouter>
 	);
 }
 

rifaq-ahmer/01-xpense-tracker/src/components/add-form/add-form.css

@@ -0,0 +1,103 @@
+.add-form {
+	background: #71ccca;
+	box-shadow: 20px 20px 60px #60adac, -20px -20px 60px #82ebe8;
+	margin: 6px 12px;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	height: 60vh;
+}
+.form-item {
+	margin: 12px 0px;
+	width: 70%;
+	padding: 4px;
+	border-radius: 6px;
+	background-color: white;
+}
+.form-item label {
+	background-color: lightgrey;
+	padding: 2px 12px;
+	border-radius: 0px 4px 4px 0px;
+}
+.form-item input {
+	font-size: 16px;
+	border: none;
+	width: 70%;
+	outline: none;
+}
+.category-container-parent {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+.category {
+	position: relative;
+	width: 40%;
+}
+.category-dropdown {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 12px 0px;
+	background-color: white;
+	border-radius: 6px;
+	padding: 4px;
+}
+.category-dropdown i {
+	display: flex;
+	align-items: center;
+}
+
+.category-container {
+	display: flex;
+	position: absolute;
+	width: 100%;
+	flex-direction: column;
+	background: #ffffff;
+}
+
+.category-item {
+	width: 98%;
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 0px;
+	cursor: pointer;
+}
+.category-item img {
+	height: 32px;
+	margin-right: 20px;
+}
+
+.form-add-button {
+	display: flex;
+	justify-content: flex-end;
+}
+.form-add-button div {
+	display: flex;
+	border: 1px solid black;
+	padding: 2px 8px;
+	border-radius: 6px;
+	cursor: pointer;
+}
+
+.form-add-button div i {
+	display: flex;
+	align-items: center;
+	margin-left: 6px;
+}
+
+@media only screen and (max-width: 1024px) {
+	.form-item {
+		width: 100%;
+	}
+	.form-item input {
+		width: 70%;
+	}
+	.amount-input {
+		width: 50% !important;
+	}
+	.category {
+		width: 80%;
+	}
+}

rifaq-ahmer/01-xpense-tracker/src/components/add-form/index.js

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { categories } from "../../constants/add-expense";
+import "react-toastify/dist/ReactToastify.css";
+import "./add-form.css";
+import { toast, ToastContainer } from "react-toastify";
+import { useDispatch } from "react-redux";
+import { addExpense } from "./../../redux/action/expenses";
+import SuccessModal from "./success-modal";
+
+const AddForm = () => {
+	const [categoryOpen, setCategoryOpen] = useState(false);
+	const cat = categories;
+	const [title, setTitle] = useState("");
+	const [amount, setAmount] = useState("");
+	const [category, setCategory] = useState();
+	const dispatch = useDispatch();
+	const [modalOpen, setModalOpen] = useState(false);
+	const handleTitle = (e) => {
+		setTitle(e.target.value);
+	};
+	const handleAmount = (e) => {
+		const val = parseFloat(e.target.value);
+		if (isNaN(val)) {
+			setAmount("");
+			return;
+		}
+		setAmount(val);
+	};
+	const handleCategory = (category) => {
+		setCategory(category);
+		setCategoryOpen(false);
+	};
+
+	const handleSubmit = () => {
+		if (title === "" || amount === "" || !category) {
+			const notify = () => toast("Please enter complete data");
+			notify();
+			return;
+		}
+		const data = {
+			title,
+			amount,
+			category,
+			createdAt: new Date(),
+		};
+		dispatch(addExpense(data));
+		setModalOpen(!modalOpen);
+	};
+
+	return (
+		<div className="add-form">
+			<SuccessModal modalOpen={modalOpen} />
+			<ToastContainer
+				position="bottom-left"
+				autoClose={1500}
+				hideProgressBar={false}
+				newestOnTop={false}
+				closeOnClick
+			/>
+			<div className="form-item">
+				<label>Title</label>
+				<input
+					placeholder="Give a name to your expenditure"
+					value={title}
+					onChange={(e) => handleTitle(e)}
+				/>
+			</div>
+			<div className="form-item">
+				<label>Amount ₹</label>
+				<input
+					placeholder="Enter Amount"
+					className="amount-input"
+					onChange={(e) => handleAmount(e)}
+					value={amount}
+				/>
+			</div>
+			<div className="category-container-parent">
+				<div className="category">
+					<div
+						className="category-dropdown"
+						onClick={() => setCategoryOpen(!categoryOpen)}
+					>
+						<label>{category ? category.title : "Category"}</label>
+						<i className="fas fa-chevron-down"></i>
+					</div>
+					{categoryOpen && (
+						<div className="category-container">
+							{cat.map((category) => (
+								<div
+									className="category-item"
+									style={{ borderRight: `5px solid ${category.color}` }}
+									key={category.id}
+									onClick={() => handleCategory(category)}
+								>
+									<label>{category.title}</label>
+									<img src={category.icon.default} alt={category.title} />
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+			<div className="form-add-button">
+				<div onClick={handleSubmit}>
+					<label>Add</label>
+					<i className="fab fa-telegram-plane" />
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default AddForm;

rifaq-ahmer/01-xpense-tracker/src/components/add-form/success-modal.css

@@ -0,0 +1,34 @@
+.modal-inner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.added-image {
+	height: 360px;
+}
+
+.take-home-button {
+	border: 1px solid black;
+	padding: 4px 8px;
+	border-radius: 6px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.take-home-button i {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 6px;
+}
+
+@media only screen and (max-width: 1024px) {
+	.added-image {
+		height: 320px;
+	}
+}
+@media only screen and (max-width: 512px) {
+	.added-image {
+		height: 240px;
+	}
+}