diff --git a/package-lock.json b/package-lock.json index de47074c..15a04f42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -847,6 +847,30 @@ } } }, + "@material-ui/icons": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz", + "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==", + "requires": { + "@babel/runtime": "^7.2.0", + "recompose": "0.28.0 - 0.30.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.2.tgz", + "integrity": "sha512-7Bl2rALb7HpvXFL7TETNzKSAeBVCPHELzc0C//9FCxN8nsiueWSJBqaF+2oIJScyILStASR/Cx5WMkXGYTiJFA==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } + } + }, "@svgr/core": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz", @@ -7854,6 +7878,11 @@ "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz", "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==" }, + "mangodb": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/mangodb/-/mangodb-1.0.0.tgz", + "integrity": "sha1-6qElxyUc1xPzjvmqdYRRh1IsFJ4=" + }, "map-age-cleaner": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz", @@ -8181,9 +8210,9 @@ "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=" }, "nan": { - "version": "2.11.1", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz", - "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==", + "version": "2.13.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz", + "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==", "optional": true }, "nanomatch": { diff --git a/package.json b/package.json index 24aafd40..21fb361b 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,9 @@ "private": true, "dependencies": { "@material-ui/core": "^3.3.1", + "@material-ui/icons": "^3.0.2", + "body-parser": "^1.18.3", + "mangodb": "^1.0.0", "react": "^16.6.0", "react-dom": "^16.6.0", "react-redux": "^5.1.1", diff --git a/server.js b/server.js new file mode 100644 index 00000000..c4c10e04 --- /dev/null +++ b/server.js @@ -0,0 +1,72 @@ +var express = require('express'); +var app = express(); + + +var HttpStatus = require('http-status-codes'); +var cors = require('cors'); + +app.use(cors()); + +const MongoClient = require('mongodb').MongoClient; +var url = "mongodb://localhost:27017/"; +let db; +MongoClient.connect(url, function(err, client) { + if (err) throw err; + db=client.db("mydb"); +}); + + + +// This responds with "Hello World" on the homepage +app.get('/', function (req, res) { + console.log("Got a GET request for the homepage"); + db.collection('postings').find({}).toArray(function(err, result) { + if (err) throw err; + res.status(HttpStatus.OK).send(result); + }); +}) + +// This responds a POST request for the homepage +app.post('/', function (req, res) { + console.log("Got a POST request for the homepage"); + if(req.headers.title == null + ||req.headers.author == null + ||req.headers.summary == null + ||req.headers.description == null + ||req.headers.price == null) { + res.status(HttpStatus.NOT_FOUND).send("error, missing arguments in the header"); + }else{ + var posting ={ + title:req.headers.title, + author:req.headers.author, + summary:req.headers.summary, + description:req.headers.description, + price:req.headers.price + }; + console.log(posting) + db.collection('postings').insertOne(posting, function(err, results) { + if (err) throw err; + res.status(HttpStatus.OK).send("1 document inserted"); + }); + } + +}) + +// This responds a DELETE request for the /del_user page. +app.delete('/', function (req, res) { + console.log("Got a DELETE request for /del_user"); + + + + res.send('Hello DELETE'); + + +}) + + +var server = app.listen(8081, function () { + var host = server.address().address + var port = server.address().port + + console.log("Example app listening at http://%s:%s", host, port) +}) \ No newline at end of file diff --git a/src/App.js b/src/App.js index 41693519..311cad9b 100644 --- a/src/App.js +++ b/src/App.js @@ -9,12 +9,14 @@ import CreateJob from './create job/CreateJob'; import MainPage from './main page/MainPage'; import Profile from './profile/Profile'; + class App extends Component { constructor(props){ super(props); this.state={ thing:1, + open:false, } } diff --git a/src/create job/CreateJob.js b/src/create job/CreateJob.js index f4967c57..ed892c9a 100644 --- a/src/create job/CreateJob.js +++ b/src/create job/CreateJob.js @@ -1,13 +1,27 @@ import React, { Component } from 'react'; +import Stepper from '@material-ui/core/Stepper'; +import Step from '@material-ui/core/Step'; +import StepLabel from '@material-ui/core/StepLabel'; + import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; + +import Paper from '@material-ui/core/Paper' + import Button from '@material-ui/core/Button'; +import IconButton from'@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; import TextField from '@material-ui/core/TextField'; -import { Route, Link, BrowserRouter as Router } from 'react-router-dom' +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; + +function getSteps() { + return ['Create', 'Review', 'Finish']; +} + + class CreateJob extends Component{ @@ -18,6 +32,9 @@ class CreateJob extends Component{ summary:"", description:"", price:0, + activeStep: 0, + disableNext:true, + error:false, } this.changeState=this.changeState.bind(this); } @@ -27,6 +44,13 @@ class CreateJob extends Component{ } changeState(e){ + var state = this.state; + if(state.description!="" &&state.summary!=""&& state.title!="" ){ + this.setState({disableNext:false}); + } + if(e.target.value==""){ + this.setState({disableNext:true}); + } switch(e.target.id){ case "Title": this.setState({title:e.target.value}) @@ -45,88 +69,234 @@ class CreateJob extends Component{ } } + handleNext = () => { + const { activeStep } = this.state; + this.setState({activeStep: activeStep + 1,}); + }; + + handleSubmit = () => { + const { activeStep } = this.state; + this.setState({activeStep: activeStep + 1,}); + + const payload = { + title:this.state.title, + summary:this.state.summary, + description:this.state.description, + price:this.state.price, + author:"rim tichards" + } + + fetch("http://localhost:8081/", { + method: 'POST', + mode:"cors", + headers: payload + }) + .then(response => response.json()) + .then(response => console.log('Success:', JSON.stringify(response))) + .catch(error => console.error('Error:', error)); + } + + handleBack = () => { + this.setState(state => ({activeStep: state.activeStep - 1,})); + }; + + handleReset = () => { + this.setState({ + activeStep: 0, + }); + }; + handleClick(){ console.log(this.state) } render(){ + const { classes } = this.props; + const { activeStep } = this.state; + const steps = getSteps(); + const state=this.state; + var changeState=this.changeState; + + + function getStepContent(step) { + switch (step) { + case 0: + return ( +
+ + +
+ + Create Job Posting: + +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ ); + case 1: + return ( + + + + {state.title}:

{state.price}

+ + + {state.summary} + + + {state.description} + + + + ); + case 2: + return ( + Are you ready to submit? + ); + default: + return 'Unknown step'; + } + } return(
- - +
+ + + {steps.map((label, index) => { + const props = {}; + const labelProps = {}; + return ( + + {label} + + ); + })} + + +
+
+ {activeStep === steps.length ? (
- - Create Job Posting: + + + All steps completed - your job has been posted! -
-
- -
-
- -
-
- -
-
- -
- - - - + + - - +
+ ) : ( +
+ {getStepContent(activeStep)} +
+ + + + {activeStep === steps.length - 1 ? + + : + + } + + +
+
+ )} +
); } diff --git a/src/login/Login.js b/src/login/Login.js index 9572b2a9..68e341f1 100644 --- a/src/login/Login.js +++ b/src/login/Login.js @@ -7,7 +7,8 @@ import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import Typography from '@material-ui/core/Typography'; -import { Route, Link, BrowserRouter as Router } from 'react-router-dom' +import Snackbar from '@material-ui/core/Snackbar'; +import CloseIcon from '@material-ui/icons/Close'; class Login extends Component{ @@ -16,6 +17,7 @@ class Login extends Component{ this.state={ username:"", password:"", + open:false, } } @@ -25,6 +27,9 @@ class Login extends Component{ } submit(){ + if(this.state.username == "" || this.state.password ==""){ + this.setState({open:true}); + } console.log(this.state); } @@ -40,6 +45,10 @@ class Login extends Component{ break; } } + handleClose= () => { + this.setState({ open: false }); + }; + render(){ return( @@ -87,7 +96,6 @@ class Login extends Component{ send */} - - + Invalid username or password, please try again} + action={[ + + + , + ]} + /> ) } diff --git a/src/main page/MainPage.js b/src/main page/MainPage.js index 021a8cc0..c2a9730d 100644 --- a/src/main page/MainPage.js +++ b/src/main page/MainPage.js @@ -3,38 +3,8 @@ import Posting from './Posting' import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import { Route, Link, BrowserRouter as Router } from 'react-router-dom' - -const DATA={ - "postings":[ - { - "title":"Posting 1", - "author":"Ross Hahn", - "summary":"a very brief summary of the job for posting 1", - "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", - "price":25 - },{ - "title":"Posting 2", - "author":"Tim Richards", - "summary":"a very brief summary of the job for posting 2", - "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", - "price":30 - },{ - "title":"Posting 3", - "author":"Emily Goroza", - "summary":"a very brief summary of the job for posting 3", - "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", - "price":30 - },{ - "title":"Posting 4", - "author":"Emily Goroza", - "summary":"a very brief summary of the job for posting 4", - "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", - "price":32 - } - ] -} class MainPage extends Component{ @@ -43,25 +13,35 @@ class MainPage extends Component{ super(props); this.state={ sx:4, + postings:[], } } componentDidMount(){ - console.log(DATA); - } + fetch("http://localhost:8081/") + .then(data=>data.json(),{ + method:"GET", + mode:"cors", + }) + .then(res=>this.setState({postings:res})) + .catch(error=>console.log("error", error) + ); + console.log(this.state.postings); + } +//this.setState({postings:res}) render(){ return (
- QuickServer Job Postings: + Job Postings:
- + - - + - {DATA.postings.map(post=>( + {this.state.postings.map(post=>( - + ))} -
diff --git a/src/main page/Posting.js b/src/main page/Posting.js index 3291804e..4aa3c3ad 100644 --- a/src/main page/Posting.js +++ b/src/main page/Posting.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; - import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; import CardMedia from '@material-ui/core/CardMedia'; @@ -30,11 +29,11 @@ class Posting extends Component{ constructor(props){ super(props); this.state={ - title:"Posting 1", - summary:"a very brief summary of the job for posting 1", - price:20, - description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", - author:"Ross Hahn", + title:"", + summary:"", + price:0, + description:"", + author:"", open:false, } this.handleClose=this.handleClose.bind(this); @@ -42,21 +41,23 @@ class Posting extends Component{ } componentDidMount(){ - console.log("props",this.props) - // this.setState({ - // title:this.props.title, - // summary:this.props.summary, - // price:this.props.price, - // description:this.props.description, - // author:this.props.author, - // }) + console.log("props",this.props); + this.setState({ + title:this.props.data.title, + summary:this.props.data.summary, + price:this.props.data.price, + description:this.props.data.description, + author:this.props.data.author, + }) } handleClose(){ + console.log(this.props) this.setState({open:false}); } handleOpen(){ + console.log(this.props) this.setState({open:true}); }