fac-13 · GiuliaTeggi · Apr 7, 2018 · Apr 8, 2018 · Apr 8, 2018 · Apr 8, 2018
diff --git a/public/usernewprofile.html → public/create_profile.html b/public/usernewprofile.html → public/create_profile.html
@@ -1,33 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
 </head>
+
 <body>
-    <form class="form" action="/usernewprofile" method="POST">
+  <form class="form" action="/create_profile" method="POST">
     Username:
-    <input type="text" name="handle" value="" placeholder="" required>
-    Name:
-    <input type="text" name="first_name" value="" placeholder="" required>
-    Surname:
-    <input type="text" name="surname" value="" placeholder="" required>
-    Email:
-    <input type="email" name="email" value="" placeholder="" required>
-    Cohort:
-    <input type="text" name="cohort" value="" placeholder="" required>
-    City:
-    <input type="text" name="city" value="" placeholder="" required>
-    Looking for work? 
+    <input type="text" name="handle" value="" placeholder="" required> Name:
+    <input type="text" name="first_name" value="" placeholder="" required> Surname:
+    <input type="text" name="surname" value="" placeholder="" required> Email:
+    <input type="email" name="email" value="" placeholder="" required> Cohort:
+    <input type="text" name="cohort" value="" placeholder="" required> City:
+    <input type="text" name="city" value="" placeholder="" required> Looking for work?
     <input type="radio" name="work_looking_status" value="Y">Yes
-    <input type="radio" name="work_looking_status" value="N">No 
-    About me: 
+    <input type="radio" name="work_looking_status" value="N">No About me:
     <textarea name="about_me">
     </textarea>
-    <input type="submit" name="button">
-    </form>
-
+    <input type="submit" name="button" id="form_button" value="Create profile">
+  </form>
+
+  <script src="./logic.js" type="text/javascript"></script>
+  <script src="./create_profile.js" type="text/javascript"></script>
+
 </body>
+
 </html>
diff --git a/public/create_profile.js b/public/create_profile.js
@@ -0,0 +1,7 @@
+const button = document.getElementById('form_button'); 
+const form = document.querySelector("form"); 
+
+
+
+
+
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
   <title>Document</title>
 </head>
 <body>
-  <h1><a href="public/userlist.html">ENTER STACKMATCH</a></h1>
+  <h1><a href="public/user_list.html">ENTER STACKMATCH</a></h1>
+  <button><a href="public/create_profile.html">Sign up</a></button>
 </body>
-<!-- <script src="public/dom.js" type="text/javascript"></script> -->
 </html>
diff --git a/public/logic.js b/public/logic.js
@@ -0,0 +1,17 @@
+// Generic Fetch Request
+function fetch(url, callback) {
+    var xhr = new XMLHttpRequest();
+
+    xhr.addEventListener("load", function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        console.log("fetch is working", url);
+        var response = JSON.parse(xhr.responseText);
+        callback(response);
+      } else {
+        console.log("XHR error", xhr.readyState);
+      }
+    });
+    xhr.open('GET', url, true);
+    xhr.send();
+  }
+
diff --git a/public/userlist.html → public/user_list.html b/public/userlist.html → public/user_list.html
@@ -9,10 +9,10 @@
 <body>
   <header>
     <h1>STACKMATCH USERS LIST</h1>
-    <nav></nav>
   </header>
-  <section id="js-users-list">
+  <section id="js-users_list">
   </section>
 </body>
-<script src="./dom.js" type="text/javascript"></script>
+<script src="./logic.js" type="text/javascript"></script>
+<script src="./user_list.js" type="text/javascript"></script>
 </html>
diff --git a/public/dom.js → public/user_list.js b/public/dom.js → public/user_list.js
@@ -1,23 +1,5 @@
 // Variables
-var usersList = document.getElementById('js-users-list');
-
-// Generic Fetch Request
-function fetch(url, callback) {
-  var xhr = new XMLHttpRequest();
-
-  xhr.addEventListener("load", function () {
-    if (xhr.readyState === 4 && xhr.status === 200) {
-      console.log("fetch is working", url);
-      var response = JSON.parse(xhr.responseText);
-      callback(response);
-    } else {
-      console.log("XHR error", xhr.readyState);
-    }
-  });
-  xhr.open('GET', url, true);
-  xhr.send();
-}
-
+var usersList = document.getElementById('js-users_list');
 
 
 // User List Population
@@ -39,13 +21,16 @@ function createUserCard(user) {
 
   var cardHeader = document.createElement('header');
   cardHeader.className = 'usercard__header';
-  var name = document.createElement('h2');
+  var profileLink = document.createElement('a'); 
+  profileLink.setAttribute('href', './user_profile?id=' + user.id);   
+  var name = document.createElement('h2'); 
   name.className = 'usercard__headername';
   var cohort = document.createElement('span');
   cohort.className = 'usercard__headercohort';
   var handle = document.createElement('span');
   handle.className = 'usercard__headerhandle';
-  cardHeader.appendChild(name);
+  profileLink.appendChild(name); 
+  cardHeader.appendChild(profileLink);
   cardHeader.appendChild(cohort);
   cardHeader.appendChild(handle);
 
@@ -85,19 +70,17 @@ function createUserCard(user) {
 }
 
 function populateUserList(userData) {
+  console.log("userData:", userData)
   userData.forEach(function (user) {
     var userCard = createUserCard(user);
     usersList.appendChild(userCard);
   });
 
 }
 
-
-
-
 // IFFE on load
 (function () {
 
-  fetch('/userlist', populateUserList);
+  fetch('/user_list', populateUserList);
 
 })();
diff --git a/public/user_profile.html b/public/user_profile.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
+  <title>Document</title>
+</head>
+<body>
+    <a href="./user_list.html">Users List</a>
+  <header>
+  </header>
+  <section id="user_info"> 
+  </section>
+  <section id="about_me">
+    <p>About me:</p>
+  </section>
+  <script src="./logic.js" type="text/javascript"></script>
+  <script src="./user_profile.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/public/user_profile.js b/public/user_profile.js
@@ -0,0 +1,46 @@
+var url = location.search; 
+var userId = url.split('=')[1]; 
+// console.log("UserId", userId)
+var header = document.querySelector('header'); 
+var info = document.getElementById('user_info')
+
+fetch('/user_data?id=' + userId, populateUserProfile);
+
+function populateUserProfile(profileData){
+
+var userData = profileData[0]; 
+console.log(userData); 
+var title = document.createElement('h1'); 
+title.textContent= userData.first_name + ' ' + userData.surname; 
+header.appendChild(title); 
+
+var handle = document.createElement('p'); 
+handle.textContent= userData.handle; 
+header.appendChild(handle); 
+
+var cohort = document.createElement('p'); 
+cohort.textContent= 'FAC cohort:' + userData.cohort; 
+info.appendChild(cohort); 
+
+var location = document.createElement('div'); 
+var locationIcon = document.createElement('i'); 
+locationIcon.classList.add('fas', 'fa-map-marker-alt');
+location.appendChild(locationIcon);   
+var city = document.createElement('p');
+city.textContent = userData.city; 
+location.appendChild(city); 
+info.appendChild(location); 
+
+var work = document.createElement('div'); 
+var workPara = document.createElement('p'); 
+if (userData.work_looking_status == 'Y'){
+    workPara.textContent = 'Open to new opportunities'
+}else {workPara.textContent = 'I am not looking for a new job'}
+work.appendChild(workPara); 
+info.appendChild(work); 
+
+var aboutMe = document.getElementById('about_me'); 
+if (userData.about_me !== null){ aboutMe.textContent += userData.about_me; } 
+
+}
+
diff --git a/public/userprofile.html b/public/userprofile.html
diff --git a/src/handler.js b/src/handler.js
@@ -3,6 +3,7 @@ const fs = require('fs');
 const querystring = require('querystring');
 const getListData = require('./queries/getListData');
 const postProfileData = require('./queries/postProfileData');
+const getProfileData = require('./queries/getProfileData');
 
 
 const staticHandler = (req, res) => {
@@ -20,7 +21,7 @@ const staticHandler = (req, res) => {
     path.join(__dirname, '..', req), 'utf8', (error, file) => {
       if (error) {
         res.writeHead(500, { 'content-type': 'text/plain' });
-        res.end('server error');
+        res.end('<h1>Static file not found</h1>');
       } else {
         res.writeHead(200, { 'content-type': extensionType[extension] });
         res.end(file);
@@ -29,7 +30,7 @@ const staticHandler = (req, res) => {
 };
 
 const listHandler = (req, res) => {
-  console.log('List handler reached' );
+  console.log('List handler reached');
   getListData((error, result) => {
     if (error) {
       res.writeHead(500, 'Content-Type:text/html');
@@ -45,32 +46,69 @@ const listHandler = (req, res) => {
   });
 };
 
-const profileHandler = (req, res) => {
-  console.log("Profile handler reached"); 
-  let body = ''; 
+const newProfileHandler = (req, res) => {
+  let body = '';
+
   req.on('data', (chunk) => {
-    body+=chunk; 
+    body += chunk;
   })
+
   req.on('end', () => {
-    let values = querystring.parse(body); 
-    let result = Object.values(values); 
+    let values = querystring.parse(body);
+    let result = Object.values(values);
     result.pop();// Removes submit button 'submit' valuee from end.
-  
-    postProfileData(result, (error, response) => {
+
+    postProfileData(result, (error, userId) => {
       if (error) {
-        console.log("Error:", error); 
-        res.writeHead(500, {'Content-Type': 'text/html'}); 
+        console.log("Error:", error);
+        res.writeHead(500, { 'Content-Type': 'text/html' });
         res.end('<h1>Sorry there was an error</h1>');
       }
       else {
-        res.writeHead(200, {'Content-Type': 'text/html'}); 
-        res.end('Profile added to the database');
+        // res.writeHead(200, {'Content-Type': 'text/html'}); 
+        // res.end('Profile added to the database');
+        res.writeHead(303, { 'Location': 'public/user_profile?id=' + userId });
+        res.end(console.log('Successful redirection to new profile'));
       }
-
     })
   })
+}
 
+const profileHandler = (req, res) => {
+
+  fs.readFile(
+    path.join(__dirname, '..', 'public', 'user_profile.html'), 'utf8', (error, file) => {
+      if (error) {
+        res.writeHead(500, { 'Content-Type': 'text/html' });
+        res.end('<h1>Profile page not found</h1>');
+      } else {
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(file);
+      }
+    });
 }
 
+const userDataHandler = (req, res) => {
+
+  let userIdObject = querystring.parse(req);
+  let userId =  Object.values(userIdObject).join(''); 
+  console.log("UserID:", userId); 
+
+  getProfileData(userId, (error, result) => {
+    if (error) {
+      res.writeHead(500, 'Content-Type:text/html');
+      res.end(
+        '<h1>Sorry, there was a problem getting profile information<h1>'
+      );
+      console.log(error);
+    } else {
+      // console.log('Profile data handler result:', result); 
+      let profileData = JSON.stringify(result);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(profileData);
+    }
+  });
+
+}
 
-module.exports = { staticHandler, listHandler, profileHandler };
+module.exports = { staticHandler, listHandler, newProfileHandler, profileHandler, userDataHandler };
diff --git a/src/queries/getListData.js b/src/queries/getListData.js
@@ -1,7 +1,7 @@
 // Add code below to query your database
 const dbConnect = require("../database/db_connect");
 
-const allUsersWithSkills = 'SELECT users.first_name, users.surname, users.handle, users.cohort, users.city, users.work_looking_status, (SELECT array_agg(skills.skill) FROM skills JOIN user_skills ON user_skills.skill_id = skills.id WHERE user_skills.user_id = users.id) AS "skills" FROM users;'
+const allUsersWithSkills = 'SELECT users.id, users.first_name, users.surname, users.handle, users.cohort, users.city, users.work_looking_status, (SELECT array_agg(skills.skill) FROM skills JOIN user_skills ON user_skills.skill_id = skills.id WHERE user_skills.user_id = users.id) AS "skills" FROM users;'
 
 const getListData = cb => {
   dbConnect.query(allUsersWithSkills, (err, res) => {

diff --git a/src/queries/getProfileData.js b/src/queries/getProfileData.js
@@ -0,0 +1,14 @@
+const dbConnect = require("../database/db_connect");
+
+const getProfileData = (userId, cb) => {
+
+  const  profileData = "SELECT users.first_name, users.surname, users.handle, users.cohort, users.city, users.work_looking_status, users.about_me, (SELECT array_agg(skills.skill) FROM skills JOIN user_skills ON user_skills.skill_id = skills.id WHERE user_skills.user_id = users.id) AS skills FROM users WHERE users.id ='" + userId +"'"
+
+  dbConnect.query(profileData, (err, res) => {
+    if (err) return cb(err);
+    // console.log("Profile data res.rows: ", res.rows);
+    cb(null, res.rows);
+  });
+};
+
+module.exports = getProfileData;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,7 @@
		const button = document.getElementById('form_button');
		const form = document.querySelector("form");