Ntitas work

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-eu1.hubspot.com/contacts/145222748/objects/2-132345631/views/all/list
 
 ___
 ## Tips:

index.js

@@ -8,64 +8,55 @@ 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 = '';
-
-// 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.
+const PRIVATE_APP_ACCESS = "";
 
 // * Code for Route 1 goes here
+app.get('/', async (req, res) => {
 
-// 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
-
-// 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
-
-/** 
-* * This is sample code to give you a reference for how you should structure your calls. 
-
-* * App.get sample
-app.get('/contacts', async (req, res) => {
-    const contacts = 'https://api.hubspot.com/crm/v3/objects/contacts';
+    const cars = 'https://api.hubspot.com/crm/v3/objects/cars?properties=car_name,car_price,car_color';
     const headers = {
         Authorization: `Bearer ${PRIVATE_APP_ACCESS}`,
         'Content-Type': 'application/json'
     }
+
     try {
-        const resp = await axios.get(contacts, { headers });
+        const resp = await axios.get(cars, { headers });
         const data = resp.data.results;
-        res.render('contacts', { title: 'Contacts | HubSpot APIs', data });      
+        res.render('cars', { title: 'Cars', data });
     } catch (error) {
         console.error(error);
     }
+
+});
+
+// * Code for Route 2 goes here
+app.get('/update-cobj', async (req, res) => {
+    res.render('update', { title: 'Update Custom Object Form | Integrating With HubSpot I Practicum' });
 });
 
-* * App.post sample
-app.post('/update', async (req, res) => {
+// * Code for Route 3 goes here
+app.post('/update-cobj', async (req, res) => {
     const update = {
         properties: {
-            "favorite_book": req.body.newVal
+            "car_name": req.body.car_name,
+            "car_color": req.body.car_color,
+            "car_price": req.body.car_price
         }
     }
 
-    const email = req.query.email;
-    const updateContact = `https://api.hubapi.com/crm/v3/objects/contacts/${email}?idProperty=email`;
+    const updateCar = 'https://api.hubspot.com/crm/v3/objects/cars';
     const headers = {
         Authorization: `Bearer ${PRIVATE_APP_ACCESS}`,
         'Content-Type': 'application/json'
     };
 
     try { 
-        await axios.patch(updateContact, update, { headers } );
-        res.redirect('back');
+        await axios.post(updateCar, update, { headers } );
+        res.redirect('/');
     } catch(err) {
         console.error(err);
     }
-
 });
-*/
-
 
 // * Localhost
 app.listen(3000, () => console.log('Listening on http://localhost:3000'));

public/css/style.css

@@ -8,6 +8,11 @@ body, * {
 
 h1 {
     margin: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+.header {
+    margin: 1rem 5rem;
 }
 
 .cards {
@@ -20,7 +25,7 @@ h1 {
 .card {
     flex-basis: 31%;
     margin: 1rem 0.4rem;
-    padding: 1rem 0.4rem 2.5rem 0.4rem;
+    padding: 1.5rem;
     border: solid 1px lightgrey;
     border-radius: 15px;
     box-shadow: 3px 2px 6px lightgrey;
@@ -40,6 +45,10 @@ h1 {
     box-shadow: 3px 2px 6px lightgrey;
 }
 
+.form-wrapper form {
+    padding-bottom: 1.5rem;
+}
+
 label, input {
     margin-top: 5px;
     display: block;

views/cars.pug

@@ -0,0 +1,17 @@
+//- ** This is a sample of a pug template and how it uses the data passed to it from index.js.
+doctype html
+html 
+    head 
+        title= `${title}`
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        link(rel="stylesheet", href="/css/style.css")
+    body    
+        .header
+            h1 Cars
+            a(href="/update-cobj") Add to this table (Add new record)
+        .cards 
+            each car in data
+                .card 
+                    h2.card__name #{car.properties.car_name}
+                    p.card__email $#{car.properties.car_price}
+                    p.card__email color: #{car.properties.car_color}

views/update.pug

@@ -0,0 +1,19 @@
+doctype html
+html(lang="en")
+    head
+        title= `${title}`
+        link(rel="stylesheet", href="/css/style.css")
+    body
+        .form-wrapper
+            form(method="POST")
+                .form-group
+                    label(for="car_color") Car Color
+                    input(type="text" name="car_color" id="car_color" placeholder="Obsidian Black Ultra Metallic Gloss" required)
+                .form-group
+                    label(for="car_name") Car Name
+                    input(type="text" name="car_name" id="car_name" placeholder="Land Rover Range Rover Sport Carbon Edition" required)
+                .form-group
+                    label(for="car_price") Car Price ($)
+                    input(type="number" name="car_price" id="car_price" placeholder="224890" required)
+                input(type="submit" value="Submit")
+            a(href="/") Back to Home