Features/update crm records for the practicum

README.md

@@ -26,3 +26,6 @@ ___
 - All work must be your own. During the grading process we will check the revision history. Submissions that do not meet this requirement will not be considered.
 - You must have at least two new routes in your index.js file and one new pug template for the homepage.
 - You must create a developer test account and link to it in your README.md file. Submissions that do not meet this requirement will not be considered.
+
+## Custom Object Link
+- https://app.hubspot.com/contacts/144950122/objects/2-130795041/views/all/list

index.js

@@ -1,71 +1,49 @@
 const express = require('express');
 const axios = require('axios');
 const app = express();
+const path = require('path');
 
 app.set('view engine', 'pug');
-app.use(express.static(__dirname + '/public'));
+app.use(express.static(path.join(__dirname, 'public')));
 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.
-
-// * Code for Route 1 goes here
-
-// 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 headers = {
-        Authorization: `Bearer ${PRIVATE_APP_ACCESS}`,
-        'Content-Type': 'application/json'
-    }
-    try {
-        const resp = await axios.get(contacts, { headers });
-        const data = resp.data.results;
-        res.render('contacts', { title: 'Contacts | HubSpot APIs', data });      
-    } catch (error) {
-        console.error(error);
-    }
+app.set('views', path.join(__dirname, 'views'));
+
+require('dotenv').config();
+
+const private_app_token = process.env.PRIVATE_APP_ACCESS;
+const headers = {
+  Authorization: `Bearer ${private_app_token}`,
+  "Content-Type": "application/json",
+};
+
+app.get("/", async (req, res) => {
+  try {
+    const response = await axios.get("https://api.hubapi.com/crm/v3/objects/pets?properties=name&properties=age&properties=breed", {headers});
+    const data = response.data.results;
+    res.render("home", {title: "Home | Pets List", data});
+  } catch (error) {
+    console.error(error.response ? error.response.data : error.message);
+    res.status(500).send("An error occurred while fetching pets data.");
+  }
 });
 
-* * App.post sample
-app.post('/update', async (req, res) => {
-    const update = {
-        properties: {
-            "favorite_book": req.body.newVal
-        }
-    }
-
-    const email = req.query.email;
-    const updateContact = `https://api.hubapi.com/crm/v3/objects/contacts/${email}?idProperty=email`;
-    const headers = {
-        Authorization: `Bearer ${PRIVATE_APP_ACCESS}`,
-        'Content-Type': 'application/json'
-    };
-
-    try { 
-        await axios.patch(updateContact, update, { headers } );
-        res.redirect('back');
-    } catch(err) {
-        console.error(err);
-    }
-
+app.get("/update-cobj", (req, res) => {
+  res.render('updates', {title: 'Update Custom Object Form | Integrating With HubSpot I Practicum'});
 });
-*/
 
+app.post("/update-cobj", async (req, res) => {
+  try {
+    const { name, age, breed } = req.body;
+    const properties = { name, age, breed };
+
+    await axios.post("https://api.hubapi.com/crm/v3/objects/pets", { properties }, { headers });
+    res.redirect("/");
+  } catch (error) {
+    console.error(error.response ? error.response.data : error.message);
+    res.status(500).send("An error occurred while updating/creating a pet.");
+  }
+});
 
-// * Localhost
-app.listen(3000, () => console.log('Listening on http://localhost:3000'));
+app.use(express.static('public'));
+app.listen(3000, () => console.log('Server running on port 3000'));

package.json

@@ -10,6 +10,7 @@
     "license": "ISC",
     "dependencies": {
         "axios": "^1.3.5",
+        "dotenv": "^16.4.5",
         "express": "^4.18.2",
         "pug": "^3.0.2"
     }

public/css/style.css

@@ -1,58 +1,122 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
-body, * {
+body {
     font-family: 'Roboto', sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-h1 {
-    margin: 1rem;
-}
-
-.cards {
-    display: flex;
+    background-color: #f0f0f0; 
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    display: block;
+    justify-content: center;
     align-items: center;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
+    height: 100vh;
 }
-
-.card {
-    flex-basis: 31%;
-    margin: 1rem 0.4rem;
-    padding: 1rem 0.4rem 2.5rem 0.4rem;
-    border: solid 1px lightgrey;
-    border-radius: 15px;
-    box-shadow: 3px 2px 6px lightgrey;
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-
-.card__email {
-    font-size: 1rem;
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2.5rem;
+  color: #333;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 }
-
 .form-wrapper {
-    font-size: 18px;
-    max-width: 768px;
+  font-size: 18px;
+    max-width: 500px;
     margin: 2rem auto;
-    padding: 2rem;
+    padding: 40px;
     border: solid 1px lightgrey;
     border-radius: 15px;
     box-shadow: 3px 2px 6px lightgrey;
 }
+.form-wrapper input {
+  font-size: 16px;
+  padding: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.form-field {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
 
-label, input {
-    margin-top: 5px;
-    display: block;
-    font-size: inherit;
+.form-field label {
+  font-weight: bold;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+
+.form-field input[type="text"],
+.form-field input[type="number"] {
+  flex-grow: 1;
+  margin-bottom: 12px;
+  align-items: center;
+}
+label {
+  font-weight: bold;
+  display: flex;
 }
 
-input[type="text"] {
-    padding: .25rem;
+button[type="submit"] {
+  width: 100%;
+  background-color: #0d9ec3;
+  color: white;
+  padding: 10px;
+  margin-top: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
 }
+button[type="submit"]:hover {
+  background-color: #4CAF50;
+}
+.update-link:hover {
+  color: #4CAF50;
+}
+a {
+  display: block;
+  text-align: center;
+  margin-top: 20px;
+  color: #4CAF50;
+  text-decoration: none;
+}
+  button:hover {
+    background-color: #0b7a99;
+  }
 
-input[type="submit"] {
-    background-color: lightgrey;
-    border: none;
-    padding: .375rem 1rem;
-    margin-top: 10px;
-}
+  table {
+    width: 80%;
+    margin: 20px auto;
+    border-collapse: collapse;
+  }
+
+  th, td {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #0d9ec3;
+    color: white;
+  }
+  tr:hover {
+    background-color: #F5F5F5;
+  }
+  a {
+    display: block;
+    text-align: center;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #0d9ec3;
+  }
+

views/home.pug

@@ -0,0 +1,21 @@
+doctype html
+html
+    head
+        title= `${title}`
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        link(rel="stylesheet", href="/css/style.css")
+    body
+        h1= `${title}`
+        .container
+            a(href="/update-cobj") Add/Update this table
+            table
+                thead
+                    th Name
+                    th Age
+                    th Breed
+                tbody
+                  each pet in data
+                      tr
+                          td=`${pet.properties.name}`
+                          td=`${pet.properties.age}`
+                          td=`${pet.properties.breed}`

views/updates.pug

@@ -0,0 +1,27 @@
+doctype html
+html
+  head
+    title= `${title}`
+    link(rel="stylesheet" href="/css/style.css")
+  body
+    .content
+      h1= `${title}`
+
+    .form-wrapper
+      form(action="/update-cobj", method="POST")
+        .form-field
+          label(for="name") Name:
+          input(type="text", name="name", placeholder="Enter Pet Name", id="name")
+
+        .form-field
+          label(for="breed") Breed:
+          input(type="text", name="breed", placeholder="Enter Breed Name", id="breed")
+
+        .form-field
+          label(for="age") Age:
+          input(type="number", name="age", placeholder="Enter Pet Age", id="age")
+
+        button(type="submit") Create Pet
+
+    a.update-link(href="/") Return to the homepage
+