diff --git a/.gitignore b/.gitignore index 06a83675..a48bcf5d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ .DS_Store node_modules package-lock.json -.env \ No newline at end of file +.env \ No newline at end of file diff --git a/README.md b/README.md index 76d6d581..255ae2ce 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This repository is for the Integrating With HubSpot I: Foundations course. This To read the full directions, please go to the [practicum instructions](https://app.hubspot.com/academy/l/tracks/1092124/1093824/5493?language=en). -**Put your HubSpot developer test account custom objects URL link here:** https://app.hubspot.com/contacts/l/objects/${custom-obj-number}/views/all/list +**Put your HubSpot developer test account custom objects URL link here:** https://app-na2.hubspot.com/contacts/242136701/objects/2-166947950/views/all/list ___ ## Tips: diff --git a/index.js b/index.js index f337a32d..0b1ea2a7 100644 --- a/index.js +++ b/index.js @@ -8,19 +8,70 @@ app.use(express.urlencoded({ extended: true })); app.use(express.json()); // * Please DO NOT INCLUDE the private app access token in your repo. Don't do this practicum in your normal account. -const PRIVATE_APP_ACCESS = ''; +const PRIVATE_APP_ACCESS = ''; + +const homeURL = 'http://localhost:3007/'; // TODO: ROUTE 1 - Create a new app.get route for the homepage to call your custom object data. Pass this data along to the front-end and create a new pug template in the views folder. -// * Code for Route 1 goes here +app.get('/', async (req, res) => { + const dogs = 'https://api.hubapi.com/crm/v3/objects/2-166947950?properties=name,breed,color'; + const headers = { + Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, + 'Content-Type': 'application/json' + } + try { + const response = await axios.get(dogs, {headers} ); + const data = response.data.results; + console.log('Data passed to template:', data); + res.render('homepage', { title: 'Homepage | HubSpot APIs', data }); + } catch (error) { + console.error(error); + } +}), // TODO: ROUTE 2 - Create a new app.get route for the form to create or update new custom object data. Send this data along in the next route. -// * Code for Route 2 goes here +app.get('/update-cobj', async (req, res) => { + const dogs = 'https://api.hubapi.com/crm/v3/objects/2-166947950'; + const headers = { + Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, + 'Content-Type': 'application/json' + } + try { + const response = await axios.get(dogs, {headers} ); + const data = response.data.results; + res.render('updates', { title: 'Update Custom Object Form | Integrating With HubSpot I Practicum', data }); + } catch (error) { + console.error(error); + } +}), // TODO: ROUTE 3 - Create a new app.post route for the custom objects form to create or update your custom object data. Once executed, redirect the user to the homepage. -// * Code for Route 3 goes here +app.post('/update-cobj', async (req, res) => { + const create = { + properties: { + "name": req.body.name, + "breed": req.body.breed, + "color": req.body.color + } + } + + const name = req.query.name; + const createDog = `https://api.hubapi.com/crm/v3/objects/2-166947950/`; + const headers = { + Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, + 'Content-Type': 'application/json' + }; + try { + await axios.post(createDog, create, { headers } ); + res.redirect(homeURL); + } catch(err) { + console.error(err); + } + +}); /** * * This is sample code to give you a reference for how you should structure your calls. @@ -68,4 +119,4 @@ app.post('/update', async (req, res) => { // * Localhost -app.listen(3000, () => console.log('Listening on http://localhost:3000')); \ No newline at end of file +app.listen(3007, () => console.log('Listening on http://localhost:3007')); \ No newline at end of file diff --git a/package.json b/package.json index 62db37aa..2699a31c 100644 --- a/package.json +++ b/package.json @@ -13,4 +13,4 @@ "express": "^4.18.2", "pug": "^3.0.2" } -} +} diff --git a/public/css/style.css b/public/css/style.css index 85587bb4..c4176a68 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -7,10 +7,10 @@ body, * { } h1 { - margin: 1rem; + margin: 1rem; } -.cards { +.cards { display: flex; align-items: center; justify-content: space-evenly; diff --git a/views/contacts.pug b/views/contacts.pug index c600ca01..a3015973 100644 --- a/views/contacts.pug +++ b/views/contacts.pug @@ -12,4 +12,4 @@ //- each contact in data //- .card //- h2.card__name #{contact.properties.firstname} #{contact.properties.lastname} -//- p.card__email #{contact.properties.email} \ No newline at end of file +//- p.card__email #{contact.properties.email} \ No newline at end of file diff --git a/views/homepage.pug b/views/homepage.pug new file mode 100644 index 00000000..b78722de --- /dev/null +++ b/views/homepage.pug @@ -0,0 +1,29 @@ +doctype html +html(lang='en') +link(rel="stylesheet", href="/css/style.css") +head + title All Dogs Go to Heaven +body + h1 Dogs + p #[a(href=`http://localhost:3007/update-cobj`) Add to this table] + body +main + .container + table.table + tr + th(style='width: 200px; display: left; max-width:33%;') name + th(style='width: 200px; display: center; max-width:33%;') breed + th(style='width: 200px; display: right; max-width:33%;') color + tbody + each dog in data + tr + li + div(style='display: inline-flex; flex-direction: row; padding-left: 80px;') + .name(style='width: 200px; border-radius: 1px; border:#000000; display: left; max-width:33%;') + | #{dog.properties.name} + .breed(style='width: 200px; display: center; max-width:33%;') + | #{dog.properties.breed} + .color(style='width: 200px; display: right; max-width:33%;') + | #{dog.properties.color} + + \ No newline at end of file diff --git a/views/updates.pug b/views/updates.pug new file mode 100644 index 00000000..5f5c5ac2 --- /dev/null +++ b/views/updates.pug @@ -0,0 +1,21 @@ +doctype html +html(lang='en') +link(rel="stylesheet", href="/css/style.css") +head + title= `${title}` +body +h1 Update Custom Object Form | Integrating With HubSpot I Practicum + #form.responsive(style='width: 200px; display: center; max-width:90%;') + form(method='POST') + .form-row + label(for='name') Name + input#name(name='name' type='text' required='') + .form-row + label(for='breed') Breed + input#breed(placeholder='Chihuahua' name='breed' type='text' required='') + .form-row + label(for='color') Color + input#color(name='color' type='text' required='') + button.btn.btn-primary(type='submit' value='Put in HubSpot' style='width: 200px; height: 35px; font-size: 20px;') Put in HubSpot + + p Return to homepage #[a(href=`http://localhost:3007/`) here] \ No newline at end of file