It17134804 w.w.s.bhagya

src/App.jsx

@@ -1,34 +1,32 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import FertilizerForm from "./components/FertilizerForm";
+import ViewFertilizers from "./components/FertilizerList";
+import FertilizerGenerator from "./components/FertilizerGenerator";
+import FertilizerTable from "./components/FertilizerGenTable";
 
 function App() {
-  const [count, setCount] = useState(0)
 
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+        <div>
+    <Routes>
+      <Route path="/" element={<FertilizerGenerator plantName="tomato"
+            plantGrowthStage="vegetative"
+            plantTime="spring" />} />            
+      </Routes>
+
+      <Routes>
+      <Route path="/add" element={<FertilizerForm />} />
+      </Routes>
+      <Routes>
+      <Route path="/view" element={<ViewFertilizers />} />
+      </Routes>
+
+
+
+
     </div>
+  </Router>
   )
 }
 

src/components/CustomerEdit.js

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import "./CustomerRegistrationForm.css";
+import axios from 'axios';
+import { Link, useParams } from 'react-router-dom';
+
+export default function CustomerEditForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [zipCode, setZipCode] = useState('');
+
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const response = await axios.get(`http://localhost:8070/customers/${id}`);
+        const userData = response.data;
+        setName(userData.name);
+        setEmail(userData.email);
+        setPassword(userData.password);
+        setCity(userData.city);
+        setState(userData.state);
+        setZipCode(userData.zipCode);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchUserData();
+  }, [id]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const updatedCustomer = { name, email, password, city, state, zipCode };
+      const response = await axios.patch(`http://localhost:8070/customers/${id}`, updatedCustomer);
+      console.log(response);
+      alert(`${updatedCustomer.name} Updated`);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+
+  return (
+    <div>
+      <Link className="nav-navbar__link" to="/customers">View Customers</Link>
+
+      <h1>Update Data</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Name:
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+        <label>
+          Email:
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required/>
+        </label>
+        <label>
+          Password:
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
+        </label>
+        <label>
+          City:
+          <input type="text" value={city} onChange={(e) => setCity(e.target.value)} required/>
+        </label>
+        <label>
+          State:
+          <input type="text" value={state} onChange={(e) => setState(e.target.value)} required/>
+        </label>
+        <label>
+          Zip Code:
+          <input type="text" value={zipCode} onChange={(e) => setZipCode(e.target.value)} required/>
+        </label>
+        <button type="submit">Submit</button>
+
+      </form>
+    </div>
+  );
+}

src/components/CustomerList.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+function CustomerList() {
+  const [customers, setCustomers] = useState([]);
+
+  useEffect(() => {
+    axios.get('http://localhost:8070/customers/')
+      .then(response => {
+        setCustomers(response.data);
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }, []);
+
+  const handleDelete = (id) => {
+    axios.delete(`http://localhost:8070/customers/${id}`)
+      .then(() => {
+        setCustomers(customers => customers.filter(customer => customer._id !== id));
+        alert("Customer deleted successfully");
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+
+
+  return (
+    <div className="container">
+      <h1>Customers</h1>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>City</th>
+            <th>State</th>
+            <th>Zip Code</th>
+            <th>Action</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {customers.map(customer => {
+            return (
+              <tr key={customer._id}>
+                <td>{customer.name}</td>
+                <td>{customer.email}</td>
+                <td>{customer.city}</td>
+                <td>{customer.state}</td>
+                <td>{customer.zipCode}</td>
+                <td>
+                  <Link to={`/customers/${customer._id}`}>Show Details</Link>   
+                </td>
+                <td>
+                <button onClick={() => handleDelete(customer._id)}>Delete</button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default CustomerList;

src/components/CustomerLoginForm.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import './CustomerLogin.css';
+
+function LoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log(`Submitted login form with username "${username}" and password "${password}"`);
+    // TODO: Send login request to server
+  };
+
+  return (
+
+    <div>
+        <h1>Customer Login</h1>
+
+    <form className="login-form" onSubmit={handleSubmit}>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        name="username"
+        value={username}
+        onChange={(event) => setUsername(event.target.value)}
+        required
+      />
+
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        name="password"
+        value={password}
+        onChange={(event) => setPassword(event.target.value)}
+        required
+      />
+
+      <button type="submit">Login</button>
+    </form>
+    </div>
+  );
+}
+
+export default LoginForm;

src/components/CustomerRegistrationForm.css

@@ -0,0 +1,37 @@
+form {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  label {
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  button[type="submit"] {
+    background-color: #8bc34a;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    padding: 10px;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+
+  button[type="submit"]:hover {
+    background-color: #689f38;
+  }
+

src/components/CustomerRegistrationForm.js

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import "./CustomerRegistrationForm.css";
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+export default function CustomerRegistrationForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [zipCode, setZipCode] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const customer = { name, email, password, city, state, zipCode };
+      const response = await axios.post('http://localhost:8070/customers/create', customer);
+      console.log(response);
+      alert(`${customer.name} Added`);
+      setName("");
+      setEmail("");
+      setPassword("");
+      setCity("");
+      setState("");
+      setZipCode("");
+
+
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <div>
+      <Link class="nav-navbar__link" to="/customers">View Customers</Link>
+      <h1>Customer Register Form</h1>
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+      </label>
+      <label>
+        Email:
+        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      </label>
+      <label>
+        Password:
+        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+      </label>
+      <label>
+        City:
+        <input type="text" value={city} onChange={(e) => setCity(e.target.value)} />
+      </label>
+      <label>
+        State:
+        <input type="text" value={state} onChange={(e) => setState(e.target.value)} />
+      </label>
+      <label>
+        Zip Code:
+        <input type="text" value={zipCode} onChange={(e) => setZipCode(e.target.value)} />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+    </div>
+  );
+}