diff --git a/client/App.jsx b/client/App.jsx index 8635c29..9f70f32 100644 --- a/client/App.jsx +++ b/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 ( -
-
+
+
- - - + + + +
- ) + ); } } diff --git a/client/components/JobApplied.jsx b/client/components/JobApplied.jsx index 2bd3a5d..976436c 100644 --- a/client/components/JobApplied.jsx +++ b/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(); + this.state.jobsArray.forEach((job, i) => { + jobsToRender.push( + , + ); }); return (
diff --git a/client/components/JobCards.jsx b/client/components/JobCards.jsx index 6e682a8..515d73e 100644 --- a/client/components/JobCards.jsx +++ b/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 ( + + ); + } return (
    @@ -53,9 +87,18 @@ class JobCards extends Component {
  • Notes: {notes}
+
); } } export default JobCards; + +{ + /* +Edit Card + */ +} diff --git a/client/components/UpdateCard.jsx b/client/components/UpdateCard.jsx new file mode 100644 index 0000000..12cd561 --- /dev/null +++ b/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 ( +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); + } +} + +export default UpdateCard; diff --git a/server/controllers/cardController.js b/server/controllers/cardController.js index 1417402..a725794 100644 --- a/server/controllers/cardController.js +++ b/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 diff --git a/server/db/cardModel.js b/server/db/cardModel.js index 7588891..c257fe4 100644 --- a/server/db/cardModel.js +++ b/server/db/cardModel.js @@ -87,7 +87,7 @@ cardModel.updateCard = async (req, res) => { notes, contact, priority, - username, + last_updated, } = req.body; return client @@ -102,28 +102,23 @@ cardModel.updateCard = async (req, res) => { salary = '${salary}', notes = '${notes}', contact = '${contact}', - priority = '${priority}' + priority = '${priority}', + last_updated = '${last_updated}' WHERE card_id = '${card_id}' ;`, ) - .then(res => res) - .catch((err) => { - console.log('err in cardModel', err); - return false; - }); + .then(() => ({ cardUpdated: true })) + .catch(() => ({ cardUpdated: false })); }; // DELETE row in cards that match card_id cardModel.deleteCard = async (req, res) => { const { card_id } = req.body; - console.log('deletcard is running in the server. card_id:', card_id); + // console.log('deletcard is running in the server. card_id:', card_id); return client - .query(`DELETE FROM cards WHERE card_id = ${card_id};`) - .then(res => true) - .catch((err) => { - console.log('ERROR with deleting card in database', err); - return false; - }); + .query(`DELETE FROM cards WHERE card_id = '${card_id}';`) + .then(() => ({ cardUpdated: true })) + .catch(() => ({ cardUpdated: false })); }; // DELETE all rows in cards that match given uuid diff --git a/server/server.js b/server/server.js index ab07932..0845549 100644 --- a/server/server.js +++ b/server/server.js @@ -45,15 +45,9 @@ app.post('/newjobcard', cardController.addCard); app.post('/getcards', cardController.getCards); -app.put('/updatecards', cardController.updateCard, (req, res, next) => { - if (res.locals.result) res.status(200).send('CARD SUCCESSFULLY UPDATED!'); - else res.status(404).send('SHENANIGANS problems updating card :('); -}); +app.put('/updatecards', cardController.updateCard); -app.delete('/deletecards', cardController.deleteCard, (req, res, next) => { - if (res.locals.result) res.status(200).send('CARD SUCCESSFULLY DELETED!'); - else res.status(404).send('SHENANIGANS :('); -}); +app.delete('/deletecards', cardController.deleteCard); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../index.html'));