implemented support for clicking a row in ListAllOrgs -> prefilling fields in CreateRequest

inventory-manager/src/components/user/CreateRequest.jsx

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Axios from "axios";
+import { useLocation } from 'react-router-dom';
+
 
 export const CreateRequest = (props) => {
-  const [reqId, setReqId] = useState("");
+  // const [reqId, setReqId] = useState("");
   const [userEmail, setUserEmail] = useState("");
   const [desc, setDesc] = useState("");
-  const [orgId, setOrgId] = useState("");
+  // const [orgId, setOrgId] = useState("");
   const [status, setStatus] = useState("");
   const [type, setType] = useState("");
+  const [organizationName, setOrganizationName] = useState(""); // name of org to join/add item to
+
+  const location = useLocation();
+  const rowData = location.state?.data;
+
+  useEffect(() => {
+    console.log("in use effect");
+    if (rowData) {
+      console.log(rowData);
+      //setUserEmail(rowData.ownerEmail || ""); // Example field
+      setType("JOIN");
+      //setDesc(rowData.description || "");
+      // ... set other fields similarly
+      setOrganizationName(rowData.name || "");
+    }
+  }, [rowData]);
 
 
   const handleSubmit = (e) => {
     e.preventDefault();
     Axios.post("http://localhost:8080/request/add", {
       userEmail: userEmail,
-      reqId: reqId,
+      // reqId: reqId,
       desc: desc,
-      orgId: orgId,
+      // orgId: orgId,
       status: status,
       type: type,
+      organizationName: organizationName,
     }).then((response) => {
       console.log(response);
     });
@@ -28,13 +47,22 @@ export const CreateRequest = (props) => {
     <div className="creation-form-container">
       <h2>Create Request</h2>
       <form className="create-form" onSubmit={handleSubmit}>
-        <label htmlFor="reqId">Request ID</label>
+        {/* <label htmlFor="reqId">Request ID</label>
         <input
           value={reqId}
           onChange={(e) => setReqId(e.target.value)}
           name="reqId"
           id="reqId"
           placeholder="Request ID"
+        /> */}
+
+        <label htmlFor="name">Organization/Item Name</label>
+        <input
+          value={organizationName}
+          onChange={(e) => setOrganizationName(e.target.value)}
+          name="name"
+          id="name"
+          placeholder="name"
         />
 
         <label htmlFor="userEmail">User Email</label>
@@ -75,14 +103,14 @@ export const CreateRequest = (props) => {
           placeholder="..."
         />
 
-        <label htmlFor="orgId">Organization ID</label>
+        {/* <label htmlFor="orgId">Organization ID</label>
         <input
           value={orgId}
           onChange={(e) => setOrgId(e.target.value)}
           id="orgId"
           name="orgId"
           placeholder="Organization ID"
-        />
+        /> */}
 
         <button type="submit">Create</button>
       </form>

inventory-manager/src/components/user/ListAllOrganizations.jsx

@@ -23,17 +23,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { visuallyHidden } from '@mui/utils';
 import Axios from "axios";
-
-function createData(id, name, calories, fat, carbs, protein) {
-  return {
-    id,
-    name,
-    calories,
-    fat,
-    carbs,
-    protein,
-  };
-}
+import { useNavigate } from 'react-router-dom';
 
 
 function descendingComparator(a, b, orderBy) {
@@ -83,28 +73,22 @@ const headCells = [
   },
   {
     id: 'description',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'Description',
   },
   {
     id: 'owner',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'Owner Email',
   },
   {
     id: 'membercount',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'Member',
   },
-  // {
-  //   id: 'protein',
-  //   numeric: true,
-  //   disablePadding: false,
-  //   label: 'Protein (g)',
-  // },
 ];
 
 function EnhancedTableHead(props) {
@@ -117,15 +101,23 @@ function EnhancedTableHead(props) {
   return (
     <TableHead>
       <TableRow>
+        {/* const [selectedRow, setSelectedRow] = React.useState({});
+
+        <TableRow
+          onClick={() => setSelectedRow(row)}
+          key={row.name}
+          sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+        ></TableRow> */}
+
         <TableCell padding="checkbox">
           <Checkbox
             color="primary"
             indeterminate={numSelected > 0 && numSelected < rowCount}
             checked={rowCount > 0 && numSelected === rowCount}
             onChange={onSelectAllClick}
-            inputProps={{
-              'aria-label': 'select all desserts',
-            }}
+            // inputProps={{
+            //   'aria-label': 'select all desserts',
+            // }}
           />
         </TableCell>
         {headCells.map((headCell) => (
@@ -193,7 +185,7 @@ function EnhancedTableToolbar(props) {
           id="tableTitle"
           component="div"
         >
-          Nutrition
+          Organizations
         </Typography>
       )}
 
@@ -219,9 +211,11 @@ EnhancedTableToolbar.propTypes = {
 };
 
 //export default function EnhancedTable() {
-  export const ListAllOrganizations = (props) => {
+export const ListAllOrganizations = (props) => {
+  const navigate = useNavigate();
+
   const [order, setOrder] = React.useState('asc');
-  const [orderBy, setOrderBy] = React.useState('calories');
+  const [orderBy, setOrderBy] = React.useState('');
   const [selected, setSelected] = React.useState([]);
   const [page, setPage] = React.useState(0);
   const [dense, setDense] = React.useState(false);
@@ -277,6 +271,14 @@ EnhancedTableToolbar.propTypes = {
     setSelected(newSelected);
   };
 
+  // const toRequest = (event, id) => {
+  //   window.location.href = `http://localhost:3000/createrequest`; 
+  // }
+
+  const toRequest = (event, row) => {
+    navigate('/createrequest', { state: { data: row } });
+  };
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
@@ -331,7 +333,8 @@ EnhancedTableToolbar.propTypes = {
                 return (
                   <TableRow
                     hover
-                    onClick={(event) => handleClick(event, row.id)}
+                    // onClick={(event) => handleClick(event, row.id)}
+                    onClick={(event) => toRequest(event, row)}
                     role="checkbox"
                     aria-checked={isItemSelected}
                     tabIndex={-1}
@@ -356,11 +359,10 @@ EnhancedTableToolbar.propTypes = {
                     >
                       {row.name}
                     </TableCell>
-                   {/* <TableCell align="right">{row.name}</TableCell> */}
                    <TableCell align="left">{row.category}</TableCell>
-                   <TableCell align="right">{row.description}</TableCell>
-                   <TableCell align="right">{row.owner}</TableCell>
-                   <TableCell align="right">{row.membercount}</TableCell>
+                   <TableCell align="left">{row.description}</TableCell>
+                   <TableCell align="left">{row.ownerEmail}</TableCell>
+                   <TableCell align="left">{row.memberCount}</TableCell>
                   </TableRow>
                 );
               })}

phase 1.sql

@@ -15,8 +15,8 @@ INSERT INTO USER (email, lname, fname, password, phone_number) VALUES
 ('alicedoe@example.com', 'Doe', 'Alice', 'securepass', '987-654-3210'),
 ('emilyjohnson@example.com', 'Johnson', 'Emily', 'sciencePass', '8888888888');
 
-SELECT * FROM USER;
-DELETE FROM USER;
+-- SELECT * FROM USER;
+-- DELETE FROM USER;
 
 
 CREATE TABLE IF NOT EXISTS ORGANIZATION (
@@ -50,13 +50,14 @@ CREATE TABLE IF NOT EXISTS ORGANIZATION_ROSTER (
 CREATE TABLE IF NOT EXISTS REQUEST (
 	request_id INT AUTO_INCREMENT NOT NULL,
     user_email VARCHAR(128) NOT NULL,
-    organization_id INT NOT NULL,
+    -- organization_id INT NOT NULL,
+    organization_name VARCHAR(128) NOT NULL,
     status ENUM('PENDING', 'ACCEPTED', 'DECLINED') NOT NULL,
     description VARCHAR(256),
     type ENUM('JOIN', 'ITEM') NOT NULL,
     PRIMARY KEY (request_id),
-    CONSTRAINT fk_user_request FOREIGN KEY (user_email) REFERENCES USER (email),
-    CONSTRAINT fk_organization_request FOREIGN KEY (organization_id) REFERENCES ORGANIZATION (organization_id)
+    CONSTRAINT fk_user_request FOREIGN KEY (user_email) REFERENCES USER (email)
+    -- CONSTRAINT fk_organization_request FOREIGN KEY (organization_id) REFERENCES ORGANIZATION (organization_id)
 );
 
 CREATE TABLE IF NOT EXISTS LOCATION (

src/main/java/com/example/ReqRepository.java

+package com.example.accessingdatamysql;
+
+
+import org.springframework.data.repository.CrudRepository;
+
+import com.example.accessingdatamysql.Request;
+
+// This will be AUTO IMPLEMENTED by Spring into a Bean called userRepository
+// CRUD refers Create, Read, Update, Delete
+
+public interface ReqRepository extends CrudRepository<Request, String> {
+
+}
\ No newline at end of file

src/main/java/com/example/RequestController.java

+package com.example.accessingdatamysql;
+
+
+import org.apache.coyote.Response;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Map;
+import java.util.Optional;
+
+@CrossOrigin
+@RestController // This means that this class is a Controller
+@RequestMapping(path="/request") // This means URL's start with /demo (after Application path)
+public class RequestController {
+    @Autowired // This means to get the bean called userRepository
+    // Which is auto-generated by Spring, we will use it to handle the data
+    private ReqRepository reqRepository;
+
+
+    @PostMapping(path = "/add") // Map ONLY POST Requests
+    @ResponseBody
+    public Request addJsonOrg(@RequestBody Request req) {
+        // @ResponseBody means the returned String is the response, not a view name
+        // @RequestParam means it is a parameter from the GET or POST request
+        reqRepository.save(req);
+        return req;
+    }
+
+}

src/main/java/com/example/accessingdatamysql/Request.java

@@ -7,40 +7,46 @@ import jakarta.persistence.*;
 @Table(name = "REQUEST")
 public class Request {
 
-    enum Status {
-        PENDING,
-        ACCEPTED,
-        DECLINED
-    }
+    // enum Status {
+    //     PENDING,
+    //     ACCEPTED,
+    //     DECLINED
+    // }
 
-    enum Type {
-        JOIN,
-        ITEM
-    }
+    // enum Type {
+    //     JOIN,
+    //     ITEM
+    // }
 
     private String userEmail;
 
-    private int orgId;
+    // private int orgId;
+
+    private String organizationName;
 
     private String description;
 
-    private Status status;
+    // private Status status;
+
+    private String status;
     
-    private Type type;
+    private String type;
+    
+    // private Type type;
 
-    public Status getStatus() {
+    public String getStatus() {
         return status;
     }
 
-    public void setStatus(Status status) {
+    public void setStatus(String status) {
         this.status = status;
     }
 
-    public Type getType() {
+    public String getType() {
         return type;
     }
 
-    public void setType(Type type) {
+    public void setType(String type) {
         this.type = type;
     }
 
@@ -52,31 +58,39 @@ public class Request {
         this.userEmail = userEmail;
     }
 
-    public int getOrgId() {
-        return orgId;
+    // public int getOrgId() {
+    //     return orgId;
+    // }
+
+    // public void setOrgId(int orgId) {
+    //     this.orgId = orgId;
+    // }
+
+    public String getOrganizationName() {
+        return organizationName;
     }
 
-    public void setOrgId(int orgId) {
-        this.orgId = orgId;
+    public void setOrganizationName(String organizationName) {
+        this.organizationName = organizationName;
     }
 
-    public String getDesc() {
+    public String getDescription() {
         return description;
     }
 
-    public void setDesc(String description) {
+    public void setDescription(String description) {
         this.description = description;
     }
 
     @Id
     @Column(nullable = false)
-    private int reqId;
+    private int requestId;
 
-    public int getReqId() {
-        return reqId;
+    public int getRequestId() {
+        return requestId;
     }
 
-    public void setReqId(int reqId) {
-        this.reqId = reqId;
+    public void setRequestId(int requestId) {
+        this.requestId = requestId;
     }
 }
\ No newline at end of file

src/main/resources/application.properties

@@ -2,6 +2,6 @@
 spring.jpa.hibernate.ddl-auto=update
 spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/inventory
 spring.datasource.username=root
-spring.datasource.password=APbmCP70!
+spring.datasource.password=CSD@mysql-1872
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 #spring.jpa.show-sql: true
\ No newline at end of file