Provide a simple leaderboard on the homepage.

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "express": "^4.19.2",
-    "mysql2": "^3.11.0"
+    "mysql2": "^3.11.0",
+    "pug": "^3.0.3"
   }
 }

public/app.css

@@ -0,0 +1,61 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: sans-serif;
+    font-size: 16px;
+    line-height: 1.4;
+    margin: 0;
+}
+
+h1, h2 {
+    margin: 0;
+    line-height: 1;
+    word-wrap: break-word;
+}
+
+h1 {
+    margin-bottom: 1rem;
+}
+
+.header {
+    background: #333;
+    color: #fafafa;
+    padding: 4rem 1rem;
+    text-align: center;
+}
+
+.leaderboard {
+    max-width: 750px;
+    padding-inline: 1rem;
+    margin-inline: auto;
+    margin-block: 1rem;
+}
+
+.leaderboard > div {
+    display: grid;
+    grid-template-columns: 1.5rem 1fr 3rem;
+    gap: .5rem;
+    padding: .5rem;
+}
+
+.leaderboard > div:not(:last-child) {
+    border-bottom: 1px solid #ccc;
+}
+
+.leaderboard > div:hover {
+    background: #333;
+    color: #fafafa;
+}
+
+.leaderboard-number,
+.leaderboard-video-count {
+    text-align: right;
+}
+
+.leaderboard-nickname {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

routes/api/leaderboard.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const router = express.Router();
+const leaderboard = require('../../services/leaderboard');
+
+/* GET leaderboard */
+router.get('/', async function(req, res, next) {
+  try {
+    res.json(await leaderboard.get(req.query.page));
+  } catch (err) {
+    console.error(`Error while getting leaderboard `, err.message);
+    next(err);
+  }
+});
+
+module.exports = router;

routes/users.js → routes/api/users.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const users = require('../services/users');
+const users = require('../../services/users');
 
 /* GET users */
 router.get('/', async function(req, res, next) {

routes/home.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const router = express.Router();
+const leaderboard = require('../services/leaderboard');
+
+router.get("/", async (req, res) => {
+  const users = await leaderboard.getTop50();
+
+  return res.render('home', { users });
+});
+
+module.exports = router;

server.js

@@ -3,15 +3,18 @@ const app = express();
 
 const port = process.env.PORT || 5000;
 
-const usersRouter = require("./routes/users");
+const homeRouter = require("./routes/home");
+const usersRouter = require("./routes/api/users");
+const leaderboardRouter = require("./routes/api/leaderboard");
 
-app.get("/", (req, res) => {
-  return res.status(200).send({
-    message: "Hello World!",
-  });
-});
+app.set('view engine', 'pug');
+
+app.use(express.static('public'));
+
+app.use("/", homeRouter);
 
-app.use("/users", usersRouter);
+app.use("/api/users", usersRouter);
+app.use("/api/leaderboard", leaderboardRouter);
 
 app.use((err, req, res, next) => {
   const statusCode = err.statusCode || 500;

services/leaderboard.js

@@ -0,0 +1,33 @@
+const db = require('./db');
+const helper = require('../helper');
+const config = require('../config');
+
+const sql = `SELECT nickname, COUNT(DISTINCT videoId) AS video_count FROM user_video
+  INNER JOIN ircbot.user ON ircbot.user_video.userId = ircbot.user.userId GROUP BY user_video.userId
+  ORDER BY video_count DESC LIMIT ?,?`;
+
+async function get(page = 1){
+  const offset = helper.getOffset(page, config.listPerPage);
+  const rows = await db.query(sql, [offset, config.listPerPage]);
+  const data = helper.emptyOrRows(rows);
+  const meta = {page};
+
+  return {
+    data,
+    meta
+  }
+}
+
+async function getTop50() {
+  const rows = await db.query(sql, ['0', '50']);
+  const data = helper.emptyOrRows(rows);
+
+  return {
+    data,
+  }
+}
+
+module.exports = {
+  get,
+  getTop50,
+}

views/home.pug

@@ -0,0 +1,18 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1")
+    link(rel="stylesheet", href="/app.css")
+    title MusicBox Leaderboard
+  body
+    header(class="header")
+      hgroup
+        h1 MusicBox Leaderboard
+        h2 Top 50
+    section(class="leaderboard")
+      each user, index in users.data
+        div
+          span(class="leaderboard-number")= index + 1 + "."
+          span(class="leaderboard-nickname")= user.nickname
+          span(class="leaderboard-video-count")= user.video_count