completed updated and deleted cards

client/App.jsx

@@ -4,36 +4,35 @@ import Header from './components/Header';
 import Dashboard from './components/Dashboard';
 import LoginForm from './components/LoginForm';
 import SignUp from './components/SignUpForm';
+import UpdateCard from './components/UpdateCard';
 import './css/App.css';
-import createBrowserHistory from 'history/createBrowserHistory'
+import createBrowserHistory from 'history/createBrowserHistory';
 
-const history = createBrowserHistory()
+const history = createBrowserHistory();
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       user: 'PICHICIEGO',
-      avatar: 'http://www.squishable.com/mm5/graphics/00000001/opensquish_pink_fairy_armadillo_303018_design.jpg'
-    }
+      avatar:
+        'http://www.squishable.com/mm5/graphics/00000001/opensquish_pink_fairy_armadillo_303018_design.jpg',
+    };
   }
 
   render() {
-
     return (
       <Router history={history}>
-        <div className='main-container v-flex'>
-          <Header
-            username={this.state.user}
-            avatar={this.state.avatar}
-          />
+        <div className="main-container v-flex">
+          <Header username={this.state.user} avatar={this.state.avatar} />
 
-          <Route exact path='/' component={LoginForm} />
-          <Route path='/register' component={SignUp} />
-          <Route path='/dashboard' component={Dashboard} />
+          <Route exact path="/" component={LoginForm} />
+          <Route path="/register" component={SignUp} />
+          <Route path="/dashboard" component={Dashboard} />
+          <Route path="/updatecard" component={UpdateCard} />
         </div>
       </Router>
-    )
+    );
   }
 }
 

client/components/JobApplied.jsx

@@ -10,6 +10,7 @@ class JobApplied extends Component {
       jobsArray: [],
     };
     this.pushIntoJobsArray = this.pushIntoJobsArray.bind(this);
+    this.removeFromJobsArray = this.removeFromJobsArray.bind(this);
   }
 
   pushIntoJobsArray(card) {
@@ -18,7 +19,18 @@ class JobApplied extends Component {
     });
   }
 
-  componentDidMount() {
+  removeFromJobsArray(cardID) {
+    const updatedArray = this.state.jobsArray.reduce((acc, cur) => {
+      if (cur['card_id'] === cardID) return acc;
+      acc.push(cur);
+      return acc;
+    }, []);
+    this.setState({
+      jobsArray: updatedArray,
+    });
+  }
+
+  fetchData() {
     fetch('/getcards', {
       method: 'POST',
       headers: {
@@ -32,11 +44,26 @@ class JobApplied extends Component {
       });
   }
 
+  componentDidUpdate() {
+    this.fetchData();
+  }
+  componentDidMount() {
+    this.fetchData();
+  }
+
   render() {
-    console.log('JobsApplied.jsx state.jobsArray: ', this.state.jobsArray);
+    // console.log('JobsApplied.jsx state.jobsArray: ', this.state.jobsArray);
     const jobsToRender = [];
-    this.state.jobsArray.forEach(job => {
-      jobsToRender.push(<JobCards jobsArray={job} />);
+    this.state.jobsArray.forEach((job, i) => {
+      jobsToRender.push(
+        <JobCards
+          jobsArray={job}
+          index={i}
+          key={i}
+          removeFromJobsArray={this.removeFromJobsArray}
+          pushIntoJobsArray={this.pushIntoJobsArray}
+        />,
+      );
     });
     return (
       <div className="job-posting-container v-flex">

client/components/JobCards.jsx

@@ -1,24 +1,49 @@
 import React, { Component } from 'react';
 import '../css/JobCards.css';
+import { withRouter } from 'react-router';
+import { Link, NavLink, Redirect } from 'react-router-dom';
+import UpdateCard from './UpdateCard.jsx';
 
 class JobCards extends Component {
   constructor(props) {
     super(props);
-
+    this.state = {
+      edit: false,
+    };
     this.deleteCard = this.deleteCard.bind(this);
+    this.editCard = this.editCard.bind(this);
   }
 
   deleteCard() {
-    console.log('im running: delete card', this.props.jobsArray.card_id);
+    // console.log('im running: delete card', this.props.jobsArray.card_id);
     let card_id = this.props.jobsArray.card_id;
-
+    console.log(card_id);
     fetch('/deletecards', {
       method: 'DELETE',
-      body: JSON.stringify({ card_id }),
       headers: {
         'Content-Type': 'application/json',
       },
-    }).then(response => response.json());
+      body: JSON.stringify({ card_id }),
+    })
+      .then(res => res.json())
+      .then(res => {
+        console.log('the response is', res);
+        if (res.cardDeleted) {
+          console.log('deleting..', this.props.jobsArray.card_id, this.props.index);
+          this.props.removeFromJobsArray(this.props.jobsArray.card_id);
+          return;
+        } else {
+          console.log('Error deleting card from databbase');
+          return;
+        }
+      })
+      .catch(err => console.log(err));
+  }
+
+  editCard() {
+    this.setState({
+      edit: !this.state.edit,
+    });
   }
 
   render() {
@@ -36,7 +61,16 @@ class JobCards extends Component {
       created_date,
       last_updated,
     } = this.props.jobsArray;
-    console.log(this.props);
+    // console.log(this.props);
+    if (this.state.edit === true) {
+      return (
+        <UpdateCard
+          jobInfo={this.props.jobsArray}
+          pushIntoJobsArray={this.props.pushIntoJobsArray}
+          edited={this.editCard}
+        />
+      );
+    }
     return (
       <div className="jobCards">
         <ul>
@@ -53,9 +87,18 @@ class JobCards extends Component {
           <li>Notes: {notes}</li>
         </ul>
         <button onClick={this.deleteCard}>Delete Card</button>
+        <button onClick={this.editCard}> edit</button>
       </div>
     );
   }
 }
 
 export default JobCards;
+
+{
+  /* <Link
+to={{ pathname: '/updatecard', state: { newtest: 'wow', test: this.props.jobsArray } }}
+>
+Edit Card
+</Link> */
+}

client/components/UpdateCard.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { Link, NavLink, Redirect } from 'react-router-dom';
+
+class UpdateCard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: this.props.jobInfo.title,
+      company: this.props.jobInfo.company,
+      description: this.props.jobInfo.description,
+      location: this.props.jobInfo.location,
+      link: this.props.jobInfo.link,
+      salary: this.props.jobInfo.salary,
+      notes: this.props.jobInfo.notes,
+      contact: this.props.jobInfo.contact,
+      priority: this.props.jobInfo.priority,
+    };
+
+    this.updateState = this.updateState.bind(this);
+    this.handleFormSubmission = this.handleFormSubmission.bind(this);
+  }
+
+  updateState(event) {
+    const input = {
+      [event.target.name]: event.target.value,
+    };
+    this.setState(input, console.log('im setting state'));
+  }
+
+  handleFormSubmission(e) {
+    e.preventDefault();
+
+    const reqBody = Object.assign(
+      {},
+      this.state,
+      { card_id: this.props.jobInfo.card_id },
+      { last_updated: new Date().toLocaleDateString() },
+    );
+    fetch('/updatecards', {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(reqBody),
+    })
+      .then(res => res.json())
+      .then(res => {
+        if (res.cardUpdated) {
+          this.props.pushIntoJobsArray(reqBody);
+          this.props.edited();
+          return;
+        } else {
+          console.log('ERROR: did not add card to database');
+          return;
+        }
+      })
+      .catch(err => console.log(err));
+  }
+
+  render() {
+    return (
+      <div>
+        <Link to="/dashboard">
+          <button>Back</button>
+        </Link>
+
+        <form onSubmit={this.handleFormSubmission}>
+          <label htmlFor="title">Job title:</label>
+          <input
+            type="text"
+            name="title"
+            id="signup_title"
+            value={this.state.title}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_company">Company:</label>
+          <input
+            type="text"
+            name="company"
+            id="signup_company"
+            value={this.state.company}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_description">Job Description:</label>
+          <input
+            type="text"
+            name="description"
+            id="signup_description"
+            value={this.state.description}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_location">Job Location:</label>
+          <input
+            type="text"
+            name="location"
+            id="signup_location"
+            value={this.state.location}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_link">URL:</label>
+          <input
+            type="text"
+            name="link"
+            id="signup_link"
+            value={this.state.link}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_salary">Salary range:</label>
+          <input
+            type="number"
+            name="salary"
+            id="signup_salary"
+            value={this.state.salary}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_notes">Note:</label>
+          <input
+            type="text"
+            name="notes"
+            id="signup_notes"
+            value={this.state.notes}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_contact">Contact:</label>
+          <input
+            type="text"
+            name="contact"
+            id="signup_contact"
+            value={this.state.contact}
+            onChange={this.updateState}
+          />
+
+          <label htmlFor="signup_priority">Priority:</label>
+          <input
+            type="number"
+            name="priority"
+            id="signup_priority"
+            value={this.state.priority}
+            onChange={this.updateState}
+          />
+
+          <button type="submit">update card </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default UpdateCard;

server/controllers/cardController.js

@@ -8,16 +8,13 @@ cardController.addCard = async (req, res) => {
 };
 
 cardController.updateCard = async (req, res, next) => {
-  console.log('im in cardcontroller, updateCard');
   const result = await Cards.updateCard(req);
-  res.locals.result = result;
-  return next();
+  res.json(result);
 };
 
 cardController.deleteCard = async (req, res, next) => {
   const result = await Cards.deleteCard(req);
-  res.locals.result = result;
-  return next();
+  res.json(result);
 };
 
 // should return an array of results