User project list

2 files changed, 73 insertions, 11 deletions

diff --git a/index.js b/index.js
index 5b14d51..588d76e 100755
--- a/index.js
+++ b/index.js
@@ -83,6 +83,7 @@ const templates = {
   project: (name, id) => `<a href="/projects/${id}">${filterHTML(name.trim())}</a>`,
   studio: (name, id) => `<a href="/studios/${id}">${filterHTML(name.trim())}</a>`,
   forumThread: (name, id) => `<a href="/topics/${id}">${filterHTML(name.trim())}</a>`,
+
   longField: text => {
     return text.split('\n')
       .map(filterHTML)
@@ -114,6 +115,12 @@ const templates = {
       .join('\n')
   },
 
+  projectThumbnail: project => {
+    return fixWS`
+      <li><img src="${project.image}" height="40px" width="This project's thumbnail"> <a href="/projects/${project.id}">${project.title}</a></li>
+    `
+  },
+
   notification: (notif, username) => {
     let text = '<li>'
 
@@ -218,6 +225,16 @@ const handleRequest = async (request, response) => {
   const queryData = qs.parse(query)
   const cookie = parseCookies(request)
 
+  // Not used by nearly all paths, but available to all for convenience.
+  let { page: pageNumber = 1 } = queryData
+  pageNumber = parseInt(pageNumber)
+  if (isNaN(pageNumber)) {
+    pageNumber = 1
+  } else {
+    pageNumber = Math.max(1, pageNumber)
+  }
+
+
   if (request.url === '/login') {
     await page(request, response, fixWS`
       <h1>Login</h1>
@@ -288,14 +305,6 @@ const handleRequest = async (request, response) => {
       return
     }
 
-    let { page: pageNumber = 1 } = queryData
-    pageNumber = parseInt(pageNumber)
-    if (isNaN(pageNumber)) {
-      pageNumber = 1
-    } else {
-      pageNumber = Math.max(1, pageNumber)
-    }
-
     const notifications = await getNotifications(cookie.username, cookie.token, pageNumber)
     const nText = arr => arr.map(n => templates.notification(n, cookie.username)).join('\n')
 
@@ -378,11 +387,32 @@ const handleRequest = async (request, response) => {
     return
   }
 
-  const userMatch = pathname.match(/^\/users\/([a-zA-Z0-9\-_]*)\/?/)
-  if (userMatch) {
+  const userMatch = pathname.match(/^\/users\/([a-zA-Z0-9\-_]*)(\/[^/]*$)?/)
+  if (userMatch) buildUserPage: {
     const username = userMatch[1]
-
     const user = await getUser(username)
+
+    const path = userMatch[2]
+    if (path === '/projects') {
+      const offset = (pageNumber - 1) * limit
+      const projects = await fetch(`https://api.scratch.mit.edu/users/${username}/projects?limit=${limit}&offset=${offset}`).then(res => res.json())
+      const projectsText = projects.map(templates.projectThumbnail).join('\n')
+
+      await page(request, response, fixWS`
+        <h1>${user.username}'s projects</h1>
+        <ul class="thumb-list">
+          ${projectsText}
+        </ul>
+        <p>You are on page ${pageNumber}.
+          ${projects.length === limit && `<a href="/users/${username}/projects?page=${pageNumber + 1}">Next</a>`}
+          ${pageNumber > 1 && `<a href="/users/${username}/projects?page=${pageNumber - 1}">Previous</a>`}</p>
+      `)
+
+      return
+    } else if (path && path !== '/') {
+      break buildUserPage // 404
+    }
+
     if (username.code === 'NotFound') {
       await page(request, response, fixWS`
         Sorry, that user doesn't exist.
@@ -390,6 +420,9 @@ const handleRequest = async (request, response) => {
       return
     }
 
+    const projects = await fetch(`https://api.scratch.mit.edu/users/${username}/projects?limit=5`).then(res => res.json())
+    const projectsText = projects.map(templates.projectThumbnail).join('\n')
+
     await page(request, response, fixWS`
       <h1><img src="${user.profile.images['60x60']}" height="60px" alt="This user's profile picture"> ${user.username}</h1>
       ${user.profile.bio ? fixWS`
@@ -404,6 +437,11 @@ const handleRequest = async (request, response) => {
       ` : fixWS`
         <p>(No "what I'm working on".)</p>
       `}
+      <h2>Projects</h2>
+      <ul class="thumb-list">
+        ${projectsText}
+      </ul>
+      <p><a href="/users/${username}/projects">See all!</a></p>
     `)
 
     return
@@ -423,6 +461,8 @@ const handleRequest = async (request, response) => {
     await page(request, response, fixWS`
       You are at the homepage. Sorry, I haven't implmented any content for it yet.
     `)
+
+    return
   }
 
   await page(request, response, fixWS`
diff --git a/style.css b/style.css
index f39dcf7..08917bf 100644
--- a/style.css
+++ b/style.css
@@ -9,3 +9,25 @@ li {
   margin-top: 4px;
   margin-bottom: 4px;
 }
+
+.thumb-list {
+  padding-left: 0;
+}
+
+.thumb-list li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #888;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 4px;
+}
+
+.thumb-list li:first-child {
+  border-top: 1px solid #888;
+}
+
+.thumb-list li img {
+  margin-right: 10px;
+}