diff --git a/public/usernewprofile.html b/public/create_profile.html similarity index 67% rename from public/usernewprofile.html rename to public/create_profile.html index 6a7e9ac..ed42938 100644 --- a/public/usernewprofile.html +++ b/public/create_profile.html @@ -1,33 +1,32 @@ + Document + -
+ Username: - - Name: - - Surname: - - Email: - - Cohort: - - City: - - Looking for work? + Name: + Surname: + Email: + Cohort: + City: + Looking for work? Yes - No - About me: + No About me: - -
- + + + + + + + \ No newline at end of file diff --git a/public/create_profile.js b/public/create_profile.js new file mode 100644 index 0000000..65795ac --- /dev/null +++ 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 index 628a01d..bbb702a 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ Document -

ENTER STACKMATCH

+

ENTER STACKMATCH

+ - \ No newline at end of file diff --git a/public/logic.js b/public/logic.js new file mode 100644 index 0000000..747c2f0 --- /dev/null +++ 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(); + } + \ No newline at end of file diff --git a/public/userlist.html b/public/user_list.html similarity index 68% rename from public/userlist.html rename to public/user_list.html index 727afbc..eca68c5 100644 --- a/public/userlist.html +++ b/public/user_list.html @@ -9,10 +9,10 @@

STACKMATCH USERS LIST

-
-
+
- + + \ No newline at end of file diff --git a/public/dom.js b/public/user_list.js similarity index 78% rename from public/dom.js rename to public/user_list.js index 34b2742..da23364 100644 --- a/public/dom.js +++ b/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,6 +70,7 @@ function createUserCard(user) { } function populateUserList(userData) { + console.log("userData:", userData) userData.forEach(function (user) { var userCard = createUserCard(user); usersList.appendChild(userCard); @@ -92,12 +78,9 @@ function populateUserList(userData) { } - - - // IFFE on load (function () { - fetch('/userlist', populateUserList); + fetch('/user_list', populateUserList); })(); \ No newline at end of file diff --git a/public/user_profile.html b/public/user_profile.html new file mode 100644 index 0000000..b819d52 --- /dev/null +++ b/public/user_profile.html @@ -0,0 +1,24 @@ + + + + + + + + + Document + + + Users List +
+
+
+
+
+

About me:

+
+ + + + + \ No newline at end of file diff --git a/public/user_profile.js b/public/user_profile.js new file mode 100644 index 0000000..7107e81 --- /dev/null +++ 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; } + +} + \ No newline at end of file diff --git a/public/userprofile.html b/public/userprofile.html deleted file mode 100644 index cdd8ca4..0000000 --- a/public/userprofile.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - - - \ No newline at end of file diff --git a/src/handler.js b/src/handler.js index 8756627..05107a8 100644 --- 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('

Static file not found

'); } 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('

Sorry there was an error

'); } 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('

Profile page not found

'); + } 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( + '

Sorry, there was a problem getting profile information

' + ); + 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 index 6a23b7e..dd9ec45 100644 --- 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 index e69de29..98398d7 100644 --- 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; \ No newline at end of file diff --git a/src/queries/postProfileData.js b/src/queries/postProfileData.js index d6eb023..706c754 100644 --- a/src/queries/postProfileData.js +++ b/src/queries/postProfileData.js @@ -7,13 +7,22 @@ const postProfileData = (values, cb)=> { values: values } - dbConnect.query(addNewUser, (err,res)=>{ + dbConnect.query(addNewUser, (err)=>{ + if (err){ + return cb(err); + } + + //get ID of new user + dbConnect.query("SELECT users.id FROM users WHERE handle ='" + values[0] +"'", (err,res) => { if (err){ return cb(err); } - cb(null, res); - console.log("Insert new data:", res); + let response = res.rows[0].id; + cb(null, response); + console.log("New user ID:", response); + }) }) + } module.exports = postProfileData; \ No newline at end of file diff --git a/src/router.js b/src/router.js index bc9c1c1..9dee8f3 100644 --- a/src/router.js +++ b/src/router.js @@ -1,4 +1,4 @@ -const { staticHandler, listHandler, profileHandler } = require('./handler'); +const { staticHandler, listHandler, newProfileHandler, profileHandler, userDataHandler } = require('./handler'); const router = (req, res) => { const endpoint = req.url; @@ -6,16 +6,21 @@ const router = (req, res) => { if (endpoint === '/') { staticHandler('public/index.html', res) } - else if (endpoint.indexOf('public') !== -1) { - staticHandler(endpoint, res); - } - else if (endpoint === '/userlist') { + else if (endpoint === '/user_list') { listHandler(endpoint, res); } - else if (endpoint === '/usernewprofile') { - profileHandler(req, res); + else if (endpoint === '/create_profile') { + newProfileHandler(req, res); + } + else if (endpoint.indexOf('/user_profile?id=') !== -1){ + profileHandler(endpoint, res); + } + else if (endpoint.indexOf('/user_data') !== -1){ + userDataHandler(endpoint, res); + } + else if (endpoint.indexOf('public') !== -1) { + staticHandler(endpoint, res); } - //TO DO: add paths: create or update profile else { res.writeHead(404, {'Content-Type': 'text/html'}); res.end('

404 page not found

');