added relation between contacts and applications

datastore-backend/routes/contacts.js

@@ -66,7 +66,7 @@ function checkAcceptHeader (req, res, next) {
  * if not, send an error message.
  */
 function checkRequestBody (req, res, next) {
-  const allKeys = {"last_name": '', "first_name": '', "email": '', "phone": '', "notes": '', "contact_at": ''};
+  const allKeys = {"last_name": '', "first_name": '', "email": '', "phone": '', "notes": '', "contact_at_id": ''};
   const requiredKeys = ["last_name", "first_name"];
   let keyError = false;
 
@@ -113,9 +113,16 @@ function checkIdExists (req, res, next) {
 
 /* ------------- Begin Lodging Model Functions ------------- */
 
-function post_contact(last_name, first_name, email, phone, notes, contact_at) {
+function post_contact(last_name, first_name, email, phone, notes, contact_at_id) {
   var key = datastore.key(CONTACT);
-  const new_contact = { "last_name": last_name, "first_name": first_name, "email": email, "phone": phone, "notes": notes, "contact_at": contact_at };
+  const new_contact = { 
+    "last_name": last_name, 
+    "first_name": first_name, 
+    "email": email, 
+    "phone": phone, 
+    "notes": notes, 
+    "contact_at_id": contact_at_id 
+  };
   // console.log(new_contact)
   return datastore.save({ "key": key, "data": new_contact }).then(() => { return key });
 }
@@ -163,9 +170,16 @@ function get_contact(id) {
 }
 
 
-function put_contact(id, last_name, first_name, email, phone, notes, contact_at ) {
+function put_contact(id, last_name, first_name, email, phone, notes, contact_at_id ) {
   const key = datastore.key([CONTACT, parseInt(id, 10)]);
-  const contact = { "last_name": last_name, "first_name": first_name, "email": email, "phone": phone, "notes": notes, "contact_at": contact_at };
+  const contact = { 
+    "last_name": last_name, 
+    "first_name": first_name, 
+    "email": email, 
+    "phone": phone, 
+    "notes": notes, 
+    "contact_at_id": contact_at_id 
+  };
   return datastore.save({ "key": key, "data": contact });
 }
 
@@ -194,7 +208,13 @@ router.get('/', checkAcceptHeader, function (req, res) {
 
 router.post('/', checkContentTypeHeader, checkRequestBody, function (req, res) {
   console.log("Post request received!");
-  post_contact(req.body.last_name, req.body.first_name, req.body.email, req.body.phone, req.body.notes, req.body.contact_at)
+  post_contact(
+    req.body.last_name, 
+    req.body.first_name, 
+    req.body.email, req.body.phone, 
+    req.body.notes, 
+    req.body.contact_at_id
+    )
     .then(key => { res.status(201).send('{ "id": ' + key.id + ' }') })
     .catch(error => {
       console.error(error);
@@ -205,7 +225,15 @@ router.post('/', checkContentTypeHeader, checkRequestBody, function (req, res) {
 
 router.put('/:id', checkContentTypeHeader, checkRequestBody, function (req, res) {
   console.log("Put request received!");
-  put_contact(req.params.id, req.body.last_name, req.body.first_name, req.body.email, req.body.phone, req.body.notes)
+  put_contact(
+    req.params.id, 
+    req.body.last_name, 
+    req.body.first_name, 
+    req.body.email, 
+    req.body.phone, 
+    req.body.notes, 
+    req.body.contact_at_id
+    )
     .then(res.status(200).end())
     .catch(error => {
       console.error(error);

react-frontend/src/components/Contact.js

@@ -4,12 +4,12 @@ import { MdDeleteForever, MdEdit } from 'react-icons/md';
 function Contact({ contact, onDelete, onEdit }) {
   return (
     <tr>
-      <td>{contact.last_name}</td>
       <td>{contact.first_name}</td>
+      <td>{contact.last_name}</td>
       <td>{contact.email}</td>
       <td>{contact.phone}</td>
       <td>{contact.notes}</td>
-      <td>{contact.contact_at}</td>
+      <td><a href={contact.contact_at_link}>{contact.contact_at_name}</a></td>
       <td><MdEdit onClick={() => onEdit(contact)} /></td>
       <td><MdDeleteForever onClick={() => onDelete(contact.id)} /></td>
     </tr>

react-frontend/src/components/ContactList.js

@@ -6,8 +6,8 @@ function ContactList({ contacts, onDelete, onEdit, sorting }) {
     <table id="contacts">
       <thead>
         <tr>
-          <th onClick={() => sorting("last_name")} >Contact Last Name <br />(click to sort)</th>
           <th onClick={() => sorting("first_name")} >Contact First Name <br />(click to sort)</th>
+          <th onClick={() => sorting("last_name")} >Contact Last Name <br />(click to sort)</th>
           <th>Contact Email</th>
           <th>Contact Phone</th>
           <th>Notes about the contact</th>

react-frontend/src/pages/AddContactPage.js

@@ -17,7 +17,7 @@ export const AddContactPage = () => {
   const [email, setEmail] = useState('');
   const [phone, setPhone] = useState('');
   const [notes, setNotes] = useState('');
-  const [contact_at, setContactAt] = useState('');
+  const [contact_at_id, setContactAt] = useState('');
 
   const [apps, setApps] = useState([]);
 
@@ -27,7 +27,7 @@ export const AddContactPage = () => {
   const addContact = async (e) => {
     e.preventDefault();
 
-    const newContact = { last_name, first_name, email, phone, notes, contact_at };
+    const newContact = { last_name, first_name, email, phone, notes, contact_at_id };
     console.log(newContact)
 
     const response = await fetch('/contacts', {
@@ -94,8 +94,8 @@ export const AddContactPage = () => {
 
           <option>Please choose one option</option>
           {apps.map((option, index) => {
-            return <option key={index} value={option.name}>
-              {option.name}
+            return <option key={index} value={option.id}>
+              {option.title}
               </option>
           })}
 

react-frontend/src/pages/ContactPage.js

@@ -16,6 +16,7 @@ function ContactPage({ setContactToEdit }) {
 
   const [contacts, setContacts] = useState([]);
   const [order, setOrder] = useState("ASC");
+  const [apps, setApps] = useState([]);
 
   // sorts the contact table by clicking on the name of the column
   const sorting = (col) => {
@@ -63,10 +64,28 @@ function ContactPage({ setContactToEdit }) {
     setContacts(data);
   };
 
+  const getApps = async () => {
+    const response = await fetch('/applications');
+    const data = await response.json();
+    setApps(data);
+  };
+
   useEffect(() => {
     loadContacts();
+    getApps();
   }, []);
 
+
+  // iterate over contacts and applications, add name and link of application to contact
+  for (let contact of contacts) {
+    for (let app of apps) {
+      if (contact.contact_at_id === app.id) {
+        contact.contact_at_name = app.title;
+        contact.contact_at_link = app.link;
+      } 
+    }
+  }
+
   return (
     <>
       <h1>Contact Page</h1>

react-frontend/src/pages/EditContactPage.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from "react-router-dom";
 
 export const EditContactPage = ({ contactToEdit }) => {
@@ -8,13 +8,16 @@ export const EditContactPage = ({ contactToEdit }) => {
   const [email, setEmail] = useState(contactToEdit.email);
   const [phone, setPhone] = useState(contactToEdit.phone);
   const [notes, setNotes] = useState(contactToEdit.notes);
+  const [contact_at_id, setContactAt] = useState(contactToEdit.contact_at_id);
+
+  const [apps, setApps] = useState([]);
 
   const navigate = useNavigate();
 
   const editContact = async (e) => {
     e.preventDefault();
 
-    const editedContact = { last_name, first_name, email, phone, notes };
+    const editedContact = { last_name, first_name, email, phone, notes, contact_at_id };
 
     const response = await fetch(`/contacts/${contactToEdit.id}`, {
       method: 'PUT',
@@ -32,6 +35,25 @@ export const EditContactPage = ({ contactToEdit }) => {
 
     navigate(-1);  // goes back to Contact Page
   };
+
+  const getApps = async () => {
+    const response = await fetch('/applications');
+    const data = await response.json();
+    setApps(data);
+  };
+
+  useEffect(() => {
+    getApps();
+  }, []);
+
+  let contact_at_name;
+
+  // iterate over applications and add name of application to the contact
+  for (let app of apps) {
+    if (contactToEdit.contact_at_id === app.id) {
+      contact_at_name = app.title;
+    } 
+  }
 
   return (
     <div>
@@ -58,8 +80,20 @@ export const EditContactPage = ({ contactToEdit }) => {
           type="text"
           value={notes}
           onChange={e => setNotes(e.target.value)} />
+
+        <select onChange={e => setContactAt(e.target.value)}>
+
+          <option>{contact_at_name}</option>
+          {apps.map((option, index) => {
+            return <option key={index} value={option.id}>
+              {option.title}
+              </option>
+          })}
+
+        </select> 
+
         <p>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="Submit Changes" />
         <> </>
         <input type="button" value="Cancel" onClick={() => navigate(-1)} />
         </p>