Remix lists

1 files changed, 64 insertions, 38 deletions

diff --git a/index.js b/index.js
index 2e5202a..488ce6c 100755
--- a/index.js
+++ b/index.js
@@ -185,6 +185,21 @@ const templates = {
 
     text += '</li>'
     return text
+  },
+
+  projectList: async (url, pathname, pageNumber) => {
+    const offset = (pageNumber - 1) * limit
+    const projects = await fetch(`${url}?limit=${limit}&offset=${offset}`).then(res => res.json())
+    const projectsText = projects.map(templates.projectThumbnail).join('\n')
+
+    return fixWS`
+      <ul class="thumb-list">
+        ${projectsText}
+      </ul>
+      <p>You are on page ${pageNumber}.
+        ${projects.length === limit && `<a href="${pathname}?page=${pageNumber + 1}">Next</a>`}
+        ${pageNumber > 1 && `<a href="${pathname}?page=${pageNumber - 1}">Previous</a>`}</p>
+    `
   }
 }
 
@@ -358,7 +373,7 @@ const handleRequest = async (request, response) => {
     }
   }
 
-  if (compareArr(urlParts, ['projects', id => /^[0-9]*$/.test(id)])) {
+  if (compareArr(urlParts.slice(0, 2), ['projects', id => /^[0-9]*$/.test(id)])) {
     const projectID = urlParts[1]
 
     const project = await getProject(projectID, cookie.token)
@@ -369,36 +384,56 @@ const handleRequest = async (request, response) => {
       return
     }
 
-    let parentProjectText = ''
-    if (project.remix.parent) {
-      const parentProject = await getProject(project.remix.parent, cookie.token)
-      if (parentProject.code === 'NotFound') {
-        parentProjectText = ` Based on an unshared project.`
-      } else {
-        parentProjectText = ` Based on ${templates.project(parentProject.title, parentProject.id)} by ${templates.user(parentProject.author.username)}.`
+    if (urlParts.length === 2) {
+      let parentProjectText = ''
+      if (project.remix.parent) {
+        const parentProject = await getProject(project.remix.parent, cookie.token)
+        if (parentProject.code === 'NotFound') {
+          parentProjectText = ` Based on an unshared project.`
+        } else {
+          parentProjectText = ` Based on ${templates.project(parentProject.title, parentProject.id)} by ${templates.user(parentProject.author.username)}.`
+        }
       }
-    }
 
-    await page(request, response, fixWS`
-      <h1>${project.title}</h1>
-      <p>Created by ${templates.user(project.author.username)}.${parentProjectText}</p>
-      <p><img src="${project.image}" alt="The thumbnail for this project"></p>
-      ${project.instructions ? fixWS`
-        <h2>Instructions</h2>
-        ${templates.longField(project.instructions)}
-      ` : fixWS`
-        <p>(No instructions.)</p>
-      `}
-      ${project.description ? fixWS`
-        <h2>Notes and Credits</h2>
-        ${templates.longField(project.description)}
-      ` : fixWS`
-        <p>(No notes and credits.)</p>
-      `}
-      <p><a href="https://projects.scratch.mit.edu/${project.id}">Download!</a></p>
-    `)
+      const remixes = await fetch(`https://api.scratch.mit.edu/projects/${projectID}/remixes?limit=5`).then(res => res.json())
+      const remixesText = remixes.map(templates.projectThumbnail).join('\n')
 
-    return
+      await page(request, response, fixWS`
+        <h1>${project.title}</h1>
+        <p>Created by ${templates.user(project.author.username)}.${parentProjectText}</p>
+        <p><img src="${project.image}" alt="The thumbnail for this project"></p>
+        ${project.instructions ? fixWS`
+          <h2>Instructions</h2>
+          ${templates.longField(project.instructions)}
+        ` : fixWS`
+          <p>(No instructions.)</p>
+        `}
+        ${project.description ? fixWS`
+          <h2>Notes and Credits</h2>
+          ${templates.longField(project.description)}
+        ` : fixWS`
+          <p>(No notes and credits.)</p>
+        `}
+        <p><a href="https://projects.scratch.mit.edu/${project.id}">Download!</a></p>
+        ${remixes.length ? fixWS`
+          <hr>
+          <h2>Remixes</h2>
+          <ul class="thumb-list">
+            ${remixesText}
+          </ul>
+          <p><a href="/projects/${project.id}/remixes">See all!</a></p>
+        ` : ''}
+      `)
+
+      return
+    } else if (compareArr(urlParts.slice(2), ['remixes'])) {
+      await page(request, response, fixWS`
+        <h1>Remixes of ${filterHTML(project.title)}</h1>
+        ${await templates.projectList(`https://api.scratch.mit.edu/projects/${projectID}/remixes`, pathname, pageNumber)}
+      `)
+
+      return
+    }
   }
 
   if (compareArr(urlParts.slice(0, 2), ['users', name => /^[a-zA-Z0-9\-_]*$/.test(name)])) {
@@ -439,18 +474,9 @@ const handleRequest = async (request, response) => {
 
       return
     } else if (compareArr(urlParts.slice(2), ['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>
+        ${await templates.projectList(`https://api.scratch.mit.edu/users/${username}/projects`, pathname, pageNumber)}
       `)
 
       return