editContract.js complete/ CRUD cycle for contract complete

FigueroaR · Dec 17, 2021 · d42a78b · d42a78b
1 parent 7aa2d29
commit d42a78b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 37 deletions.
diff --git a/src/components/contract/Contract.js b/src/components/contract/Contract.js
@@ -10,33 +10,38 @@ import {bindActionCreators} from 'redux'
 function Contract(props){
 
     let navigate = useNavigate()
-    const {active,
+
+
+    if(props.details){
+        const {active,
             budget,
             contractManager,
             contractName,
             dateOfcompletion,
             employeesTotal,
             pastDue} = props.details.data;
 
-    const { id }  = props.details
+        const { id }  = props.details
 
-    console.log("individual contratc", props.details.id)
+        let onClickRead = () => {
+            navigate(`/contract/${id}/`)
+            props.getContract(props.details)
+        }    
 
-    let onClickRead = () => {
-        navigate(`/contract/${id}/`)
-        props.getContract(props.details)
-    }
+        console.log("individual contratc", props.details.id)
 
-    return(
-        <div>
-            <div onClick={onClickRead}>  
-                <h1>{contractName}</h1>
-                <h2>{contractManager}</h2>
-                <p>Active: {active === "Yes" ? "true" : "false"}</p>
+        return(
+            <div>
+                <div onClick={onClickRead}>  
+                    <h1>{contractName}</h1>
+                    <h2>{contractManager}</h2>
+                    <p>Active: {active === "Yes" ? "true" : "false"}</p>
+                </div>
             </div>
-        </div>
-
-    )
+
+        )
+    } else {return <div>LOADING</div>}
+
 }
 
 const mapStateToProps = (store) => ({

diff --git a/src/components/contract/EditContract.js b/src/components/contract/EditContract.js
@@ -1,12 +1,9 @@
 import NavBar from "../NavBar";
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
-
 import { useNavigate } from "react-router";
-
 import {editContract} from '../../redux/actions/index'
-import { useEffect } from "react/cjs/react.development";
 
 
 function EditContract(props){
@@ -28,13 +25,11 @@ function EditContract(props){
     }
     useEffect(() => {
         if(props.contract == null){
-            return navigate("/")
+            navigate("/")
         }
     })
 
-
     if(props.contract){
-
         const {active,budget,
             contractManager,
             contractName,
@@ -47,13 +42,15 @@ function EditContract(props){
             e.preventDefault()
             console.log("HANDLE SUBMIT")
 
-            props.editContract({newContractName , 
+            props.editContract({id, data: {newContractName , 
                                 newContractManager, 
                                 newBudget, 
                                 newEmployeesTotal, 
                                 newActive, 
                                 newPastDue,
-                                newDateOfcompletion})
+                                newDateOfcompletion}})
+
+            navigate(`/contract/${id}`)
         }
         console.log("edit ",props, active, newContractName, "n.e.l.: ",newEmployeesTotal)
         return(
@@ -62,25 +59,45 @@ function EditContract(props){
                 <div>
                     <form onSubmit={handleSubmit}>
                         <label>Edit Contract Name</label>
-                        <input type="text"  placeholder={contractName} onBlur={ newContractName.length === 0 ? () => setNewContractName(contractName) : null} onChange={e => setNewContractName(e.target.value)} /><br/>
+                        <input  type="text" placeholder={contractName} 
+                                            onBlur={ newContractName.length === 0 ? setNewContractName(contractName) : null} 
+                                            onChange={e => setNewContractName(e.target.value)} /><br/>
+
                         <label>Edit contract manager:</label>
-                        <input type="text" placeholder={contractManager} onBlur={newContractManager.length === 0 ? () => setNewContractManager(contractManager) : null} onChange={ e => setNewContractManager(e.target.value)} /><br/>
+                        <input  type="text" placeholder={contractManager} 
+                                            onBlur={newContractManager.length === 0 ? setNewContractManager(contractManager) : null} 
+                                            onChange={ e => setNewContractManager(e.target.value)} /><br/>
+
                         <label>Edit budget:</label>
-                        <input type="text" placeholder={budget} onBlur={newBudget.length === 0 ? () => setNewBudget(budget) : null } onChange={e => setNewBudget(e.target.value)} /><br/>
+                        <input type="text"  placeholder={budget} 
+                                            onBlur={newBudget.length === 0 ? setNewBudget(budget) : null } 
+                                            onChange={e => setNewBudget(e.target.value)} /><br/>
+
                         <label>Edit Employees: </label>
-                        <input type="text" placeholder={employeesTotal} onBlur={newEmployeesTotal.length === 0 ? setNewEmployeesTotal(employeesTotal) : null} onChange={e => setNewEmployeesTotal(e.target.value)}  /><br/>
+                        <input type="text"  placeholder={employeesTotal} 
+                                            onBlur={newEmployeesTotal.length === 0 ? setNewEmployeesTotal(employeesTotal) : null} 
+                                            onChange={e => setNewEmployeesTotal(e.target.value)}  /><br/>
+
                         <label>Edit Active</label>
-                        <select value={active} onChange={ e => setNewActive(e.target.value)} >
+                        <select value={newActive} 
+                                onBlur={ newActive.length === 0 ? setNewActive(active) : null}
+                                onChange={ e => setNewActive(e.target.value)} >
                             <option >Yes</option>
                             <option >No</option>
                         </select> <br/>
+
                         <label>Edit Past Due:</label>
-                        <select value={pastDue} onChange={ e => setNewPastDue(e.target.value)} >
+                        <select value={newPastDue} 
+                                onBlur={ newPastDue.length === 0 ? setNewPastDue(pastDue) : null }
+                                onChange={ e => setNewPastDue(e.target.value)} >
                             <option >Yes</option>
                             <option >No</option>
                         </select><br/>
-                        <label>Edit Completion date: {dateOfcompletion}</label><br/>
-                        <input type="date" pvalue={newDateOfcompletion} onChange={e => setNewDateOfcompletion(e.target.value)}/> <br/>
+
+                        <label>Edit Completion date: </label><br/>
+                        <input type="date"  value={newDateOfcompletion} 
+                                            onBlur={ newDateOfcompletion.length === 0 ? setNewDateOfcompletion(dateOfcompletion) : null}
+                                            onChange={e => setNewDateOfcompletion(e.target.value)}/> <br/>
 
                         <input type="submit" value="Edit Contract" />
                     </form>

diff --git a/src/components/contract/ReadContract.js b/src/components/contract/ReadContract.js
@@ -12,7 +12,8 @@ import {bindActionCreators} from 'redux'
 function ReadContract(props){
 
     let navigate = useNavigate()
-    const {active,
+    if(props.contract){
+        const {active,
             budget,
             contractManager,
             contractName,
@@ -22,7 +23,7 @@ function ReadContract(props){
 
     const { id }  = props.contract
 
-    console.log("READ individual contract", props.contract)
+    console.log("READ individual contract", props.contract, active, budget, contractName)
 
     let onClickEdit = () => {
         console.log("onclick edit", id)
@@ -44,14 +45,16 @@ function ReadContract(props){
             <h2>{contractManager}</h2>
             <p>budget: {budget}</p> 
             <p>employees: {employeesTotal}</p> 
-            <p>Date of completion: {dateOfcompletion[0]}</p> 
+            <p>Date of completion: {dateOfcompletion}</p> 
             <p>Active: {active === "Yes" ? "true" : "false"}</p>
             <p>past due: {pastDue === "Yes" ? "true" : "false"}</p>  
             <button className="contract edit" onClick={onClickEdit}>Edit</button>
             <button className="contract delete" onClick={onClickDelete}>Delete</button>
         </div>
 
     )
+    } else {return <div>LOADING</div>}
+
 }
 
 const mapStateToProps = (store) => ({

diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js
@@ -57,7 +57,28 @@ export const postContract = (obj) => {
 export const editContract = (obj) => {
     console.log("EDIT CONTRACT  ", obj)
     return (dispatch) => {
-
+        firebase.firestore()
+        .collection("contracts")
+        .doc(obj.id)
+        .set({
+            active: obj.data.newActive,
+            budget: obj.data.newBudget,
+            contractManager: obj.data.newContractManager,
+            contractName: obj.data.newContractName,
+            dateOfcompletion: obj.data.newDateOfcompletion,
+            employeesTotal: obj.data.newEmployeesTotal,
+            pastDue: obj.data.newPastDue
+        })
+        dispatch({type: "GET_CONTRACT", payload: {id: obj.id , data: { 
+            active: obj.data.newActive,
+            budget: obj.data.newBudget,
+            contractManager: obj.data.newContractManager,
+            contractName: obj.data.newContractName,
+            dateOfcompletion: obj.data.newDateOfcompletion,
+            employeesTotal: obj.data.newEmployeesTotal,
+            pastDue: obj.data.newPastDue}
+            }
+        })
     }
 }