From c5e8949cc723b6edb6e8c16b4563f5f53ddde9e8 Mon Sep 17 00:00:00 2001
From: Akash Edakkalathur <akash20edakkalathur@gmail.com>
Date: Sat, 23 Nov 2019 21:09:00 +0530
Subject: [PATCH 1/2] Add expense form file deleted created a general form for
 both add and update expenses

---
 .../{AddExpense.js => ExpenseForm.js}         | 45 +++++++++++--------
 src/components/Home.js                        |  5 ++-
 2 files changed, 30 insertions(+), 20 deletions(-)
 rename src/components/{AddExpense.js => ExpenseForm.js} (81%)

diff --git a/src/components/AddExpense.js b/src/components/ExpenseForm.js
similarity index 81%
rename from src/components/AddExpense.js
rename to src/components/ExpenseForm.js
index 7b90856..062916a 100644
--- a/src/components/AddExpense.js
+++ b/src/components/ExpenseForm.js
@@ -1,20 +1,26 @@
 import React, { Component } from "react";
-import { Button, Form, FormGroup, Label,  Input } from "reactstrap";
+import { Link, Redirect } from "react-router-dom";
+import { Button, Form, FormGroup, Label ,Input} from "reactstrap";
 
 import { Formik, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
-const AddExpenseSchema = Yup.object().shape({
+const LoginSchema = Yup.object().shape({
   title: Yup.string().required("Required title"),
   amount: Yup.string().required("Required Amount"),
   category: Yup.string().required("Required category")
 });
-class AddExpence extends Component {
+class ExpenseForm extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isLoggedIn: false
+    };
   }
   render() {
+    if (this.state.isLoggedIn) {
+      return <Redirect to="/dashboard" />;
+    }
     return (
       <div
         style={{
@@ -28,16 +34,17 @@ class AddExpence extends Component {
           className="heading"
           style={{ paddingBottom: "20px", color: "#03a679" }}
         >
-          <h2>Add Expense</h2>
+          <h2>{this.props.title}</h2>
         </div>
         <Formik
           initialValues={{
-            username: "",
-            password: ""
+            title: "",
+            amount: "",
+            category:""
           }}
-          validationSchema={AddExpenseSchema}
-          onSubmit={() => {
-            alert("Form is validated! Submitting the form...");
+          validationSchema={LoginSchema}
+          onSubmit={({ setSubmitting }) => {
+           
           }}
         >
           {({
@@ -61,7 +68,7 @@ class AddExpence extends Component {
                   className={`form-control ${
                     touched.title && errors.title ? "is-invalid" : ""
                   }`}
-                  placeholder="Enter Title"
+                  placeholder="Enter title"
                 />
                 <ErrorMessage
                   component="div"
@@ -69,7 +76,7 @@ class AddExpence extends Component {
                   className="invalid-feedback"
                 />
               </FormGroup>
-              <FormGroup>
+                   <FormGroup>
                 <Label for="amount">Amount</Label>
                 <Field
                   type="number"
@@ -86,10 +93,10 @@ class AddExpence extends Component {
                
                 <ErrorMessage
                   component="div"
-                  name="category"
+                  name="amount"
                   className="invalid-feedback"
                 />
-              </FormGroup>
+              </FormGroup> 
               <FormGroup>
         <Label for="category">Category</Label>
         <Input 
@@ -109,15 +116,17 @@ class AddExpence extends Component {
         
         <ErrorMessage
                   component="div"
-                  name="amount"
+                  name="category"
                   className="invalid-feedback"
                 />
       </FormGroup>
-      <FormGroup>
+       <FormGroup>
         <Label for="notes">Notes if any</Label>
         <Input type="textarea" name="text" id="notes" />
       </FormGroup>
-              <Button color="success">Add</Button>{" "}
+              <Button color="success" type="submit">
+                {this.props.buttonVal}
+              </Button>{" "}
               <Button
                 color="success"
                 style={{
@@ -136,4 +145,4 @@ class AddExpence extends Component {
   }
 }
 
-export default AddExpence;
+export default ExpenseForm;
diff --git a/src/components/Home.js b/src/components/Home.js
index cb878c3..7270f97 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import Login from "./Login";
-import AddExpense from "./AddExpense";
+import ExpenseForm from "./ExpenseForm";
 
 class Home extends Component {
   state = {};
@@ -8,7 +8,8 @@ class Home extends Component {
     return (
       <div className="container">
         <Login/>
-        <AddExpense/>
+        <ExpenseForm buttonVal="Add" title="Add expense"/>
+        <ExpenseForm buttonVal="Update" title="Update expense"/>
       </div>
     );
   }

From cb41a429b3fd4937d384036721e96d4734120c70 Mon Sep 17 00:00:00 2001
From: Akash Edakkalathur <akash20edakkalathur@gmail.com>
Date: Sun, 24 Nov 2019 09:02:12 +0530
Subject: [PATCH 2/2] PR changes in expense form

---
 src/components/ExpenseForm.js | 178 ++++++++++++++++------------------
 1 file changed, 85 insertions(+), 93 deletions(-)

diff --git a/src/components/ExpenseForm.js b/src/components/ExpenseForm.js
index 062916a..fffe459 100644
--- a/src/components/ExpenseForm.js
+++ b/src/components/ExpenseForm.js
@@ -1,11 +1,9 @@
 import React, { Component } from "react";
-import { Link, Redirect } from "react-router-dom";
-import { Button, Form, FormGroup, Label ,Input} from "reactstrap";
-
+import { Button, Form, FormGroup, Label, Input } from "reactstrap";
 import { Formik, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
-const LoginSchema = Yup.object().shape({
+const ValidationSchema = Yup.object().shape({
   title: Yup.string().required("Required title"),
   amount: Yup.string().required("Required Amount"),
   category: Yup.string().required("Required category")
@@ -18,9 +16,6 @@ class ExpenseForm extends Component {
     };
   }
   render() {
-    if (this.state.isLoggedIn) {
-      return <Redirect to="/dashboard" />;
-    }
     return (
       <div
         style={{
@@ -40,11 +35,11 @@ class ExpenseForm extends Component {
           initialValues={{
             title: "",
             amount: "",
-            category:""
+            category: ""
           }}
-          validationSchema={LoginSchema}
+          validationSchema={ValidationSchema}
           onSubmit={({ setSubmitting }) => {
-           
+
           }}
         >
           {({
@@ -55,90 +50,87 @@ class ExpenseForm extends Component {
             handleBlur,
             values
           }) => (
-            <Form onSubmit={handleSubmit}>
-              <FormGroup>
-                <Label for="title">Title</Label>
-                <Field
-                  type="text"
-                  name="title"
-                  id="title"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.title}
-                  className={`form-control ${
-                    touched.title && errors.title ? "is-invalid" : ""
-                  }`}
-                  placeholder="Enter title"
-                />
-                <ErrorMessage
-                  component="div"
-                  name="title"
-                  className="invalid-feedback"
-                />
-              </FormGroup>
-                   <FormGroup>
-                <Label for="amount">Amount</Label>
-                <Field
-                  type="number"
-                  name="amount"
-                  id="amount"
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  value={values.amount}
-                  className={`form-control ${
-                    touched.amount && errors.amount ? "is-invalid" : ""
-                  }`}
-                  placeholder="00.00"
-                />
-               
-                <ErrorMessage
-                  component="div"
-                  name="amount"
-                  className="invalid-feedback"
-                />
-              </FormGroup> 
-              <FormGroup>
-        <Label for="category">Category</Label>
-        <Input 
-        type="select" name="select" id="category"
-        onChange={handleChange}
-        onBlur={handleBlur}
-        className={`form-control ${
-            touched.category && errors.category ? "is-invalid" : ""
-          }`}
-        >
-        <option value="" label="Select a category" />
-        <option value="Food" label="Food" />
-        <option value="Cloths" label="Cloths" />
-        <option value="Medical" label="Medical" />
-        
-        </Input>
-        
-        <ErrorMessage
-                  component="div"
-                  name="category"
-                  className="invalid-feedback"
-                />
-      </FormGroup>
-       <FormGroup>
-        <Label for="notes">Notes if any</Label>
-        <Input type="textarea" name="text" id="notes" />
-      </FormGroup>
-              <Button color="success" type="submit">
-                {this.props.buttonVal}
-              </Button>{" "}
-              <Button
-                color="success"
-                style={{
-                  backgroundColor: "white",
-                  border: "2px solid #03a679",
-                  color: "#03a679"
-                }}
-              >
-                Reset all
+              <Form onSubmit={handleSubmit}>
+                <FormGroup>
+                  <Label for="title">Title</Label>
+                  <Field
+                    type="text"
+                    name="title"
+                    id="title"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.title}
+                    className={`form-control ${
+                      touched.title && errors.title ? "is-invalid" : ""
+                      }`}
+                    placeholder="Enter title"
+                  />
+                  <ErrorMessage
+                    component="div"
+                    name="title"
+                    className="invalid-feedback"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <Label for="amount">Amount</Label>
+                  <Field
+                    type="number"
+                    name="amount"
+                    id="amount"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.amount}
+                    className={`form-control ${
+                      touched.amount && errors.amount ? "is-invalid" : ""
+                      }`}
+                    placeholder="00.00"
+                  />
+                  <ErrorMessage
+                    component="div"
+                    name="amount"
+                    className="invalid-feedback"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <Label for="category">Category</Label>
+                  <Input
+                    type="select" name="select" id="category"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={`form-control ${
+                      touched.category && errors.category ? "is-invalid" : ""
+                      }`}
+                  >
+                    <option value="" label="Select a category" />
+                    <option value="Food" label="Food" />
+                    <option value="Cloths" label="Cloths" />
+                    <option value="Medical" label="Medical" />
+                  </Input>
+                  <ErrorMessage
+                    component="div"
+                    name="category"
+                    className="invalid-feedback"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <Label for="notes">Notes if any</Label>
+                  <Input type="textarea" name="text" id="notes" />
+                </FormGroup>
+                <Button color="success" type="submit">
+                  {this.props.buttonVal}
+                </Button>{" "}
+                <Button
+                  color="success"
+                  style={{
+                    backgroundColor: "white",
+                    border: "2px solid #03a679",
+                    color: "#03a679"
+                  }}
+                >
+                  Reset all
               </Button>
-            </Form>
-          )}
+              </Form>
+            )}
         </Formik>
       </div>
     );