add invoice, Display Data, Hide and show Data components

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.CustomBrowser": "chrome"
+}

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^1.2.2",
     "bootstrap": "^5.1.0",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.3.2",
@@ -18,7 +19,7 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.css

@@ -1,23 +1,31 @@
-body, html {
+
+body,
+html {
   font-size: 0.9rem;
   background: #f2f3f7
 }
-body, .form-control {
+
+body,
+.form-control {
   font-size: 0.9rem
 }
+
 body,
 html,
 #root,
 .App {
   min-height: 100vh
 }
+
 .btn {
   font-size: 0.9rem;
   font-weight: 500;
   padding: 0.66rem;
   border-radius: 0.5rem;
-  box-shadow: 0 .1rem .1rem rgba(0,0,0,.05)!important
+  box-shadow: 0 .1rem .1rem rgba(22, 97, 166, 0.05) !important;
+  width: 150px;
 }
+
 .App-link {
   color: #61dafb;
 }
@@ -32,31 +40,63 @@ html,
 }
 
 .shadow {
-  box-shadow: 0 .1rem .1rem rgba(0,0,0,.05)!important
+  box-shadow: 0 .1rem .1rem rgba(0, 0, 0, .05) !important
 }
 
 .modal-content,
 .card {
   overflow: hidden;
   border-radius: 0.756rem
 }
-
+.Nav ul li{
+	display: inline-block;
+}
+.Nav {
+  margin: 0px ;
+  padding: 0px ;
+  background-color:rgb(19, 7, 7);
+  height: 50px;
+  width: 100%;
+  display: flex ;
+  justify-content:center ;
+}
+.navBarButton {
+  margin-left: 20PX;
+  padding: 2px 2px;
+  background-color: gray;
+  font-size: 20px;
+  border-radius: 15px;
+}
 hr {
   opacity: 0.1
 }
+thead {
+  font-style: italic;
+  font-weight: bold;
+}
+table,
+tbody,
+tr,
+td {
+  border: 1px solid black;
+}
 
 .table th {
   border-top: 1px solid #0000001a;
   border-bottom: 1px solid #0000001a;
-  border-bottom-color: #0000001a!important
+  border-bottom-color: #0000001a !important;
+
 }
+
 .table td {
-   text-align: left;
+  text-align: left;
 }
+
 .table tr th:first-child,
 .table tr td:first-child {
   padding-left: 0
 }
+
 .table tr th:last-child,
 .table tr td:last-child {
   padding-right: 0
@@ -68,14 +108,17 @@ hr {
   padding: .5rem .75rem;
   border: none
 }
+
 .form-control:hover {
   background: #f5f7f9;
 }
+
 .form-control::placeholder,
 .form-control::-ms-input-placeholder,
 .form-control:-ms-input-placeholder {
   color: #9fa8b0
 }
+
 .form-control:focus {
   background: #f5f7f9;
 }
@@ -85,4 +128,4 @@ hr {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-}
+}

src/App.js

@@ -2,17 +2,21 @@ import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
 import Container from 'react-bootstrap/Container';
-import InvoiceForm from './components/InvoiceForm';
+// import InvoiceForm from './components/InvoiceForm';
+import DisplayDataAfterButtonClick from './components/DisplayDataAfterButtonClick';
+// import HideAndShow from './HideAndShow';
 
 class App extends Component {
   render() {
-  return (
-    <div className="App d-flex flex-column align-items-center justify-content-center w-100">
-      <Container>
-        <InvoiceForm/>
-      </Container>
-    </div>
-  );
-}}
+    return (
+      <div className="App d-flex flex-column align-items-center justify-content-center w-100">
+        <DisplayDataAfterButtonClick />
+        {/* <HideAndShow /> */}
+        <Container />
+        {/* <InvoiceForm /> */}
+      </div>
+    );
+  }
+}
 
-export default App;
+export default App;

src/HideAndShow.js

@@ -0,0 +1,17 @@
+import React from "react";
+import AddInvoice from "./components/AddInvoice";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Button from 'react-bootstrap/Button';
+
+function HideAndShow() {
+    const [show, setShow] = React.useState(false);
+    return (
+        <div>
+             <Button variant="primary" className="d-block w-100" onClick={() => {
+                setShow(true)
+            }}>AddInvoice</Button>
+            {show && <div><AddInvoice /> </div>}
+        </div>
+    )
+}
+export default HideAndShow;

src/components/AddInvoice.js

@@ -0,0 +1,33 @@
+// const [invoice, setInvoices] = React.useState([{billfrom:'manasa', billto: 'abhilash'},{billFrom: 'santosh', billTo:'sandeep'}])
+//add a new button with lable "Add Invoice" below "Review Invoice" button.
+//when the user clicks on the "Add Invoice" button, a new table with columns "billFrom" and "billTo" should be displayed below Notes section.
+
+//1. change invoices data text style 
+//2. don't repeat billFrom and billTo 
+//3. add space after add in "Add Invoice" button text. 
+
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+
+function AddInvoice(props) {
+    // const [Invoices, setInvoices] = React.useState([{billFrom:'manasa' }, {billFrom:'santosh'}])
+    const invoicesFrom = <li key={0}>{props.childBillFrom}</li>
+    const invoocesTo =  <li key={0}>{props.childBillTo}</li>
+
+    return (
+        <div>
+        <Form.Label className="fw-bold">Invoices Data</Form.Label> <br/>
+            <Row>
+                <Col><td>Bill From</td>{invoicesFrom}</Col>
+                <Col><td>Bill To</td>{invoocesTo}</Col>
+            </Row>
+
+        </div>
+    )
+}
+
+export default AddInvoice;

src/components/ApiCall.js

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Form from 'react-bootstrap/Form';
+import Axios from "axios";
+
+function UserData() {
+  const [data, setData] = useState([]);
+  const [search, setSearch] = useState('');
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [showUsers, setShowUsers] = useState(true);
+  const [showFilteredUsers, setShowFilteredUsers] = useState(false);
+  // console.log(data);
+  useEffect(() => {
+    Axios.get("https://jsonplaceholder.typicode.com/users").then(
+      response => setData(response.data)
+    )
+  }, []);
+  const length = search.length;
+  function isSubstringPresent(a, b) {
+    let matchedLength = 0;
+    if (a !== undefined) {
+      for (let i = 0; i <= a.length - b.length; i++) {
+        for (let j = 0; j < b.length; j++) {
+          if (a[i + j] === b[j]) {
+            matchedLength = matchedLength + 1;
+          }
+          if (a[i + j] !== b[j]) {
+            matchedLength = 0;
+            break;
+          }
+          if (matchedLength === b.length) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  function filterUsers() {
+    let filteredData = [];
+    let userText = search;
+    console.log(userText);
+    for (let i = 0; i < data.length; i++) {
+      let subStringData = isSubstringPresent(data[i].name, userText);
+      if (subStringData) {
+        filteredData.push(data[i]);
+      }
+      setFilteredUsers(filteredData);
+    }
+  }
+
+  console.log(filteredUsers);
+
+  return (
+    <div className="App">
+      <Form.Label className="fw-bold">Users Data</Form.Label> <br />
+      <h5>Search Data Here: </h5>
+      <input type="text" value={search}
+        onChange={(e) => setSearch(e.target.value)} onKeyUp={() => {
+          filterUsers(setShowFilteredUsers(true), setShowUsers(false))
+          if (length === 0) {
+            setShowFilteredUsers(false)
+            setShowUsers(true)
+          }
+        }
+        }></input> <br /><br/>
+      {/* <button onKeyUp={() => {filterUsers(setShowFilteredUsers(true), setShowUsers(false)) 
+      if(search === 0) {
+        setShowFilteredUsers(false)
+      }}
+      }>Search</button> */}
+      {showUsers && <table className="table1">
+        <thead>
+          <tr>
+            <td >Name</td>
+            <td>Website</td>
+            <td>Email</td>
+            <td>UserName</td>
+            <td>Phone</td>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((userData, index) => {
+            return (
+              <tr key={index}>
+                <td>{userData.name}</td>
+                <td>{userData.website}</td>
+                <td>{userData.email}</td>
+                <td>{userData.username}</td>
+                <td>{userData.phone}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      }<br /> <br />
+      {showFilteredUsers && <table className="table2">
+        <thead>
+          <tr>
+            <td >Name</td>
+            <td>Website</td>
+            <td>Email</td>
+            <td>UserName</td>
+            <td>Phone</td>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredUsers.map((userfltData, index) => {
+            return (
+              <tr key={index}>
+                <td>{userfltData.name}</td>
+                <td>{userfltData.website}</td>
+                <td>{userfltData.email}</td>
+                <td>{userfltData.username}</td>
+                <td>{userfltData.phone}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      }
+    </div>
+  );
+}
+export default UserData;