From 45a2dce51207b2d2fe9fc2a8d9e125b05cbd75e3 Mon Sep 17 00:00:00 2001
From: Shine Chang <shine00chang@gmail.com>
Date: Wed, 2 Oct 2024 16:47:08 -0700
Subject: [PATCH] (add) API return name + UI validations

---
 packages/api-server/src/admin.html            | 242 +++++++++++-------
 packages/api-server/src/client.html           | 187 ++++++++++----
 .../src/routes/v1/contest.routes.ts           |  28 +-
 .../api-server/src/routes/v1/user.routes.ts   |  18 +-
 4 files changed, 321 insertions(+), 154 deletions(-)
diff --git a/packages/api-server/src/admin.html b/packages/api-server/src/admin.html
index 6c4d04f9..7e6e5130 100644
--- a/packages/api-server/src/admin.html
+++ b/packages/api-server/src/admin.html
@@ -1,3 +1,62 @@
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+  <style> 
+    body{
+      margin:40px auto;max-width:700px;line-height:1.6;font-size:18px;color:#444;padding:0 10px;
+      font-family: 'Poppins'
+    }
+    h1,h2,h3{line-height:1.2}
+    input,div,button { margin: 0.2rem }
+    input {
+      padding: 5px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #24292e;
+      vertical-align: middle;
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      border: 1px solid #e1e4e8;
+      border-radius: 6px;
+      outline: none;
+      box-shadow: rgba(225, 228, 232, 0.2) 0px 1px 0px 0px inset;
+      :focus{
+          border-color: #0366d6;
+          outline: none;
+          box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
+      }
+    }
+    button {
+      display: inline-block;
+      outline: 0;
+      cursor: pointer;
+      padding: 5px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      vertical-align: middle;
+      border: 1px solid;
+      border-radius: 6px;
+      color: #24292e;
+      background-color: #fafbfc;
+      border-color: #1b1f2326;
+      box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      :hover {
+          background-color: #f3f4f6;
+          border-color: #1b1f2326;
+          transition-duration: 0.1s;
+      }
+    }
+
+    button:disabled {
+      color: #ccc
+    }
+
+  </style>
+</head>
+
 <h1>Argon Admin</h1>
 
 <input type="text" id="name" placeholder="name" value="shine"> <br>
@@ -71,23 +130,41 @@ <h2>Testcases</h2>
 
 <script>
   const uploadURL = 'http://13.93.218.61:8001';
+
   let getUserId = _ => undefined;
 
-  const getDomainId = _ => document.querySelector('input[name="domain-radio"]:checked').value;
-  const getProblemId = _ => document.querySelector('input[name="problem-radio"]:checked').value;
-  const getSeriesId = _ => document.querySelector('input[name="series-radio"]:checked').value;
-  const getContestId = _ => document.querySelector('input[name="contest-radio"]:checked').value;
-  const getTestcaseId = _ => document.querySelector('input[name="testcase-radio"]:checked').value;
+  const getDomainId = _ => {let e = document.querySelector('input[name="domain-radio"]:checked'); return e ? e.value : undefined;};
+  const getProblemId = _ => {let e = document.querySelector('input[name="problem-radio"]:checked'); return e ? e.value : undefined;};
+  const getSeriesId = _ => {let e = document.querySelector('input[name="series-radio"]:checked'); return e ? e.value : undefined;};
+  const getContestId = _ => {let e = document.querySelector('input[name="contest-radio"]:checked'); return e ? e.value : undefined;};
+  const getTestcaseId = _ => {let e = document.querySelector('input[name="testcase-radio"]:checked'); return e ? e.value : undefined;};
+
+  const betterFetch = (url, options) => 
+    fetch(url, options)
+      .then(async res => {
+        if (res.status >= 200 && res.status < 300) {
+          const contentType = res.headers.get("content-type");
+          return (!contentType || !contentType.includes("application/json")) ? 
+            res : res.json()
+        }
+        throw await res.json()
+      })
+      .catch(err => {
+        const msg = `Got ${err.statusCode}: ${err.error}, ${err.message}`;
+        console.error(msg);
+        alert(msg);
+        throw err
+      })
 
-  document.getElementById('signup').onclick = _ => {
+  document.getElementById('signup').onclick = async _ => {
 
     console.log('signup');
 
     const body = {
       name: document.getElementById('name').value,
-      email:document.getElementById('email').value,
       username: document.getElementById('username').value,
       password: document.getElementById('password').value,
+      email:document.getElementById('email').value,
       year:"2025",
       school:"Rock High School",
       country:"USA",
@@ -107,13 +184,11 @@ <h2>Testcases</h2>
       body: JSON.stringify(body)
     };
 
-    fetch( '/v1/users/', options) 
-      .then(response => response.json())
-      .then(response => console.log(response))
-      .catch(err => console.error(err));
+    await betterFetch('/v1/users/', options) 
+      .then(res => alert("signed up"))
   }
 
-  document.getElementById('login').onclick = _ => {
+  document.getElementById('login').onclick = async _ => {
 
     console.log('login');
 
@@ -133,16 +208,12 @@ <h2>Testcases</h2>
       body: JSON.stringify(body)
     };
 
-    fetch('/v1/sessions/', options)
-      .then(response => {console.log(response.headers); return response.json()})
-      .then(response => {
-        console.log(response)
-        document.getElementById('userId').innerText = response.userId;
-        document.getElementById('sessionId').innerText = response.sessionId;
-        getUserId = () => response.userId;
+    await betterFetch('/v1/sessions/', options)
+      .then(({userId, sessionId}) => {
+        document.getElementById('userId').innerText = userId;
+        document.getElementById('sessionId').innerText = sessionId;
+        getUserId = () => userId;
       })
-      .catch(err => console.error(err));
-
   }
 
   document.getElementById('domain-add').onclick = _ => {
@@ -177,20 +248,18 @@ <h2>Testcases</h2>
 
     console.log('domain-get');
 
-    const res = await fetch(`/v1/users/${getUserId()}/profiles/private`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getUserId() === undefined) return alert('not logged in');
+
+    const { scopes } = await betterFetch(`/v1/users/${getUserId()}/profiles/private`)
 
     let html = '';
-    for (const domainId of Object.keys(res.scopes)) {
-      const { name, id } = await fetch(`/v1/domains/${domainId}`)
-        .then(res => res.json())
-        .catch(console.error);
+    for (const domainId of Object.keys(scopes)) {
+      const { name, id } = await betterFetch(`/v1/domains/${domainId}`)
 
       html += `
       <div>
       <input type='radio' name='domain-radio' value='${id}'>
-      <label for='${id}'>${name}: ${id}</label>
+      <label for='${id}'><b>${name}</b>: (<i>${id}</i>)</label>
       </div>`
     }
 
@@ -235,19 +304,16 @@ <h2>Testcases</h2>
 
     console.log('problem-get');
 
-    const res = await fetch(`/v1/domains/${getDomainId()}/problems/`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getDomainId() === undefined) return alert('no domain selected');
 
-    if (res.error)
-      return console.error(res.message);
+    const res = await betterFetch(`/v1/domains/${getDomainId()}/problems/`)
 
     let html = '';
     for (const { name, id } of res) {
       html += `
       <div>
       <input type='radio' name='problem-radio' value='${id}'>
-      <label for='${id}'>${name}: ${id}</label>
+      <label for='${id}'><b>${name}</b>: (<i>${id}</i>)</label>
       </div>`
     }
 
@@ -262,35 +328,33 @@ <h2>Testcases</h2>
       name: document.getElementById('series-name').value,
     };
 
+    if (!body.name) return alert('no series name');
+
     const options = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body)
     };
 
-    fetch(`/v1/domains/${getDomainId()}/contest-series`, options)
-      .then(res => res.json())
-      .then(res => console.log(res))
-      .catch(console.error);
+    if (getDomainId() === undefined) return alert('no domain selected');
+
+    await betterFetch(`/v1/domains/${getDomainId()}/contest-series`, options)
+      .then(res => alert('series created'));
   }
 
   document.getElementById('series-get').onclick = async _ => {
 
     console.log('series-get');
 
-    const res = await fetch( `/v1/domains/${getDomainId()}/contest-series/`)
-      .then(res => res.json())
-      .catch(console.error);
-
-    if (res.error)
-      return console.error(res.message);
+    if (getDomainId() === undefined) return alert('no domain selected');
+    const res = await betterFetch( `/v1/domains/${getDomainId()}/contest-series/`)
 
     let html = '';
     for (const { name, id, published } of res) {
       html += `
       <div>
       <input type='radio' name='series-radio' value='${id}'>
-      <label for='${id}'>${name}: ${id}</label>
+      <label for='${id}'><b>${name}</b>: (<i>${id}</i>)</label>
       </div>`
     }
 
@@ -301,6 +365,8 @@ <h2>Testcases</h2>
 
     console.log('contest-add');
 
+    if (getSeriesId() === undefined) return alert('no series selected');
+
     const body = {
       name: document.getElementById('contest-name').value,
 	    path: document.getElementById('contest-path').value,
@@ -312,47 +378,44 @@ <h2>Testcases</h2>
 	    seriesId: getSeriesId()
     };
 
+    if (!body.name || !body.path || !body.handle || !body.startTime || !body.endTime)
+      return alert('unfilled fields');
+
     const options = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body)
     };
 
-    fetch(`/v1/domains/${getDomainId()}/contests`, options)
-      .then(res => res.json())
-      .then(res => console.log(res))
-      .catch(console.error);
+    await betterFetch(`/v1/domains/${getDomainId()}/contests`, options)
+      .then(res => alert('contest created'))
   }
 
   document.getElementById('contest-add-problem').onclick = async _ => {
 
     console.log('contest-add-problem');
 
-    const options = { method: 'PUT' };
+    if (getContestId() === undefined) return alert('no contest selected');
+    if (getProblemId() === undefined) return alert('no problem selected');
 
-    fetch(`/v1/contests/${getContestId()}/problems/${getProblemId()}`, options)
-      .then(res => res.json())
-      .then(res => console.log(res))
-      .catch(console.error);
+    await betterFetch(`/v1/contests/${getContestId()}/problems/${getProblemId()}`, { method: 'PUT' })
+      .then(res => alert('problem added to contest'));
   }
 
   document.getElementById('contest-get').onclick = async _ => {
 
     console.log('contest-get');
 
-    const res = await fetch(`/v1/domains/${getDomainId()}/contests/`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getDomainId() === undefined) return alert('no domain selected');
 
-    if (res.error)
-      return console.error(res.message);
+    const res = await betterFetch(`/v1/domains/${getDomainId()}/contests/`);
 
     let html = '';
     for (const { name, id, published } of res) {
       html += `
       <div>
       <input type='radio' name='contest-radio' value='${id}'>
-      <label for='${id}'>${name}: ${id}: ${published}</label>
+      <label for='${id}'><b>${name}</b>: (<i>${id}</i>): (${published ? 'published' : 'unpublished'})</label>
       </div>`
     }
 
@@ -363,28 +426,23 @@ <h2>Testcases</h2>
 
     console.log('contest-publish');
 
-    const options = { method: 'POST' };
-
-    const res = await fetch(`/v1/contests/${getContestId()}/publish`, options)
+    if (getContestId() === undefined) return alert('no contest selected');
 
-    if (res.status !== 200) return alert('published');
-    console.log(await res.json());
+    await betterFetch(`/v1/contests/${getContestId()}/publish`, { method: 'POST' })
+      .then(res => alert('contest published'))
   }
 
   document.getElementById('contest-problem-get').onclick = async _ => {
 
     console.log('contest-problems-get');
 
-    const res = await fetch(`/v1/contests/${getContestId()}/problems/`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getContestId() === undefined) return alert('no contest selected');
 
-    if (res.error)
-      return console.error(res.message);
+    const { problems } = await betterFetch(`/v1/contests/${getContestId()}/problems/`)
 
     let html = '';
-    for (const { name, id } of res.problems) {
-      html += `<div>${name}: ${id}</div>`
+    for (const { name, id } of problems) {
+      html += `<div><b>${name}</b>: (<i>${id}</i>)</div>`
     }
 
     document.getElementById('contest-problem-list').innerHTML = html;
@@ -393,33 +451,34 @@ <h2>Testcases</h2>
   document.getElementById('testcase-upload').onclick = async _ => {
 
     console.log('testcase-upload');
-    
-    const { uploadId } = await fetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}/upload-session`)
-      .then(res => res.json())
-      .catch(console.error);
 
+    if (getDomainId() === undefined) return alert('no domain selected');
+    if (getProblemId() === undefined) return alert('no problem selected');
+    
     if (!document.getElementById('testcase-input').files[0] || !document.getElementById('testcase-output').files[0])
       return alert('files not selected');
 
+    const { uploadId } = await betterFetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}/upload-session`);
+
     const formData = new FormData();
     formData.append('input', document.getElementById('testcase-input').files[0]);
     formData.append('output', document.getElementById('testcase-output').files[0]);
 
-    const res = await fetch(uploadURL + `/testcases/${uploadId}`, {
+    const res = await betterFetch(uploadURL + `/testcases/${uploadId}`, {
       method: "POST",
       body: formData 
-    })
-      .then(res => res.json())
-      .catch(console.error)
+    });
+
+    console.log('uploaded, add testcase to problem')
 
     if (!res) return alert('no response');
     const [ input, output ] = res;
+    
+    if (!input || !output) return alert('cannot parse input & output from upload response')
 
     console.log(input, output);
     // get problem
-    const problem = await fetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`)
-      .then(res => res.json())
-      .catch(console.error);
+    const problem = await betterFetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`)
 
     // update & put problem
     if (!problem.testcases)
@@ -429,27 +488,26 @@ <h2>Testcases</h2>
       output,
       points: 1
     });
-    console.log(problem);
 
-    await fetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`, {
+    await betterFetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`, {
       method: "PUT",
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(problem)
     })
-      .then(res => res.json())
-      .catch(console.error)
+      .alert('testcase added')
   }
 
   document.getElementById('testcase-get').onclick = async _ => {
 
     console.log('testcase-get');
 
-    const problem = await fetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`)
-      .then(res => res.json())
-      .catch(console.error);    
+    if (getDomainId() === undefined) return alert('no domain selected');
+    if (getProblemId() === undefined) return alert('no problem selected');
+
+    const { testcases } = await betterFetch(`/v1/domains/${getDomainId()}/problems/${getProblemId()}`);
 
     let html = '';
-    for (const { input, output, points } of problem.testcases) {
+    for (const { input, output, points } of testcases) {
       html += `<div>${input.name} => ${output.name}: ${points}pts</div>`
     }
 
diff --git a/packages/api-server/src/client.html b/packages/api-server/src/client.html
index 0d4a1328..2038087f 100644
--- a/packages/api-server/src/client.html
+++ b/packages/api-server/src/client.html
@@ -1,3 +1,57 @@
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+  <style> 
+    body{
+      margin:40px auto;max-width:700px;line-height:1.6;font-size:18px;color:#444;padding:0 10px;
+      font-family: 'Poppins';
+    }
+    h1,h2,h3{line-height:1.2}
+    input,div,button { margin: 0.2rem }
+    input {
+      padding: 5px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #24292e;
+      vertical-align: middle;
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      border: 1px solid #e1e4e8;
+      border-radius: 6px;
+      outline: none;
+      box-shadow: rgba(225, 228, 232, 0.2) 0px 1px 0px 0px inset;
+      :focus{
+          border-color: #0366d6;
+          outline: none;
+          box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
+      }
+    }
+    button {
+      display: inline-block;
+      outline: 0;
+      cursor: pointer;
+      padding: 5px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      vertical-align: middle;
+      border: 1px solid;
+      border-radius: 6px;
+      color: #24292e;
+      background-color: #fafbfc;
+      border-color: #1b1f2326;
+      box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
+      transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+      transition-property: color, background-color, border-color;
+      :hover {
+          background-color: #f3f4f6;
+          border-color: #1b1f2326;
+          transition-duration: 0.1s;
+      }
+
+  </style>
+</head>
+
 <h1> Argon Client </h1>
 
 <input type="text" id="name" placeholder="name" value="alvin"> <br>
@@ -46,12 +100,28 @@ <h2>Ranklist</h2>
 <script>
   let getUserId = _ => undefined;
 
-  const getProblemId = _ => document.querySelector('input[name="problem-radio"]:checked').value;
-  const getSeriesId = _ => document.querySelector('input[name="series-radio"]:checked').value;
-  const getContestId = _ => document.querySelector('input[name="contest-radio"]:checked').value;
-
+  const getProblemId = _ => {let e = document.querySelector('input[name="problem-radio"]:checked'); return e ? e.value : undefined;};
+  const getSeriesId = _ => {let e = document.querySelector('input[name="series-radio"]:checked'); return e ? e.value : undefined;};
+  const getContestId = _ => {let e = document.querySelector('input[name="contest-radio"]:checked'); return e ? e.value : undefined;};
+
+  const betterFetch = (url, options) => 
+    fetch(url, options)
+      .then(async res => {
+        if (res.status >= 200 && res.status < 300) {
+          const contentType = res.headers.get("content-type");
+          return (!contentType || !contentType.includes("application/json")) ? 
+            res : res.json()
+        }
+        throw await res.json()
+      })
+      .catch(err => {
+        const msg = `Got ${err.statusCode}: ${err.error}, ${err.message}`;
+        console.error(msg);
+        alert(msg);
+        throw err
+      })
 
-  document.getElementById('signup').onclick = _ => {
+  document.getElementById('signup').onclick = async _ => {
 
     console.log('signup');
 
@@ -79,13 +149,11 @@ <h2>Ranklist</h2>
       body: JSON.stringify(body)
     };
 
-    fetch('/v1/users/', options) 
-      .then(response => response.json())
-      .then(response => console.log(response))
-      .catch(err => console.error(err));
+    await betterFetch('/v1/users/', options) 
+      .then(res => alert("signed up"))
   }
 
-  document.getElementById('login').onclick = _ => {
+  document.getElementById('login').onclick = async _ => {
 
     console.log('login');
 
@@ -105,39 +173,29 @@ <h2>Ranklist</h2>
       body: JSON.stringify(body)
     };
 
-    fetch('/v1/sessions/', options)
-      .then(response => {console.log(response.headers); return response.json()})
-      .then(response => {
-        console.log(response)
-        document.getElementById('userId').innerText = response.userId;
-        document.getElementById('sessionId').innerText = response.sessionId;
-        getUserId = () => response.userId;
+    await betterFetch('/v1/sessions/', options)
+      .then(({userId, sessionId}) => {
+        document.getElementById('userId').innerText = userId;
+        document.getElementById('sessionId').innerText = sessionId;
+        getUserId = () => userId;
       })
-      .catch(err => console.error(err));
   }
 
   document.getElementById('contest-get').onclick = async _ => {
 
     console.log('contest-get');
 
-    const res = await fetch(`/v1/contest-series/`)
-      .then(res => res.json())
-      .catch(console.error);
-
-    if (res.error)
-      return console.error(res.message);
+    const res = await betterFetch(`/v1/contest-series/`)
 
     let html = '';
     for (const { name: series, contests } of res) {
       for (const id of contests) {
-        const { name, published } = await fetch (`/v1/contests/${id}`)
-          .then(res => res.json())
-          .catch(console.error);
+        const { name, published } = await betterFetch(`/v1/contests/${id}`)
         
         html += `
           <div>
           <input type='radio' name='contest-radio' value='${id}'>
-          <label for='${id}'><b>${name}</b> from <i>${series}</i> (${published}): ${id}</label>
+          <label for='${id}'><b>${name}</b> from <i>${series}</i> (${published ? 'published' : 'unpublished'}): (<i>${id}</i>)</label>
           </div>`
       }
     }
@@ -160,25 +218,40 @@ <h2>Ranklist</h2>
       body: JSON.stringify(body)
     };
 
-    const { teamId } = await fetch(`/v1/contests/${getContestId()}/teams/`, options)
-      .then(res => res.json())
-      .catch(console.error);
+    await betterFetch(`/v1/contests/${getContestId()}/teams/`, options)
+      .then(res => alert("team created"));
   }
 
   document.getElementById('team-get').onclick = async _ => {
 
     console.log('team-get');
 
-    const { teams } = await fetch(`/v1/users/${getUserId()}/profiles/private`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getUserId() === undefined) 
+      return alert('not logged in');
+
+    let { teams } = await betterFetch(`/v1/users/${getUserId()}/profiles/private`)
+
+    const fetches = Object.entries(teams)
+      .map(([contestId, teamId]) => new Promise(async (res, rej) => 
+      {
+        const team = await fetch(`/v1/contests/${contestId}/teams/${teamId}`)
+          .then(res => res.json())
+          .catch(rej);
+        const { name: contestName } = await fetch(`/v1/contests/${contestId}`)
+          .then(res => res.json())
+          .catch(rej);
 
+        res({ ...team, contestName })
+      }));
+    teams = await Promise.all(fetches);
     console.log(teams);
+
     let html = '';
-    for (const [contestId, teamId] of Object.entries(teams)) {
-      html += `<div><b>${teamId}</b>: ${contestId}</div>`
+    for (const { name, contestName, id, contestId, captain, members } of teams) {
+      html += `<div><b>${name}</b>, for: <b>${contestName}</b> (<i>${id}</i>) <ul>`;
+      for (const { name, id } of members) html += `<li><b>${name}</b>: (<i>${id}</i>)</li>`
+      html += '</ul></div>';
     }
-
     document.getElementById('team-list').innerHTML = html;
   }
 
@@ -186,9 +259,9 @@ <h2>Ranklist</h2>
 
     console.log('problems-get');
 
-    const res = await fetch(`/v1/contests/${getContestId()}/problems/`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getContestId() === undefined) return alert('no contest selected');
+    
+    const res = await betterFetch(`/v1/contests/${getContestId()}/problems/`)
 
     if (res.error)
       return console.error(res.message);
@@ -198,7 +271,7 @@ <h2>Ranklist</h2>
       html += ` 
       <div>
       <input type='radio' name='problem-radio' value='${id}'>
-      <label for='${id}'>${name}: ${id}</label>
+      <label for='${id}'><b>${name}</b> (<i>${id}</i>)</label>
       </div>`
     }
 
@@ -228,23 +301,27 @@ <h2>Ranklist</h2>
       body: JSON.stringify(body)
     };
 
-    const { teamId } = await fetch(`/v1/contests/${getContestId()}/problems/${getProblemId()}/submissions`, options)
-      .then(res => res.json())
-      .catch(console.error);
+    await betterFetch(`/v1/contests/${getContestId()}/problems/${getProblemId()}/submissions`, options)
+      .then(res => alert('submitted'))
   }
 
   document.getElementById('submission-get').onclick = async _ => {
 
     console.log('submission-get');
 
-    const submissions = await fetch(`/v1/users/${getUserId()}/submissions`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getUserId() === undefined) return alert('not logged in');
+
+    // NOTE: special case. read note in API route.
+    const submissions = await betterFetch(`/v1/users/${getUserId()}/submissions`)
+      .then(res => res.json());
 
     let html = '';
-    for (const { problemId, createdAt, status, score } of submissions) {
-      html += `
-      <div>${problemId} @ ${createdAt}: <b>${status}</b> => ${score !== undefined ? score : '...'}</div>`
+    for (const { problemName, problemId, createdAt, status, score, testcases, id } of submissions) {
+      html += `<div><b>${problemName}</b> @ ${(new Date(createdAt)).toLocaleString()}: <b>${status}</b> <i>(${id})</i><br> <b>${score !== undefined ? score : '...'}</b> => `
+      for (const { result } of testcases) {
+        html += `${result.status}:${result.wallTime}ms <b>||</b> `
+      }
+      html += `</div>`;
     }
 
     document.getElementById('submission-list').innerHTML = html;
@@ -254,14 +331,14 @@ <h2>Ranklist</h2>
 
     console.log('ranklist-get');
 
-    const list = await fetch(`/v1/contests/${getContestId()}/ranklist`)
-      .then(res => res.json())
-      .catch(console.error);
+    if (getContestId() === undefined) return alert('no contest selected');
+
+    const list = await betterFetch(`/v1/contests/${getContestId()}/ranklist`)
 
     let html = '';
-    for (const { id, totalScore: score } of list) {
+    for (const { name, id, totalScore: score } of list) {
       html += `
-      <div>${id}: <b>${score}</b></div>`
+      <div><b>${name}</b> (<i>${id}</i>): ${score}</div>`
     }
 
     document.getElementById('ranklist-list').innerHTML = html;
diff --git a/packages/api-server/src/routes/v1/contest.routes.ts b/packages/api-server/src/routes/v1/contest.routes.ts
index eada5d3d..65a42b3e 100644
--- a/packages/api-server/src/routes/v1/contest.routes.ts
+++ b/packages/api-server/src/routes/v1/contest.routes.ts
@@ -64,6 +64,7 @@ import { hasVerifiedEmail } from '../../auth/email.auth.js'
 import { userAuthHook } from '../../hooks/authentication.hooks.js'
 import { contestInfoHook } from '../../hooks/contest.hooks.js'
 import { requestUserProfile } from '../../utils/auth.utils.js'
+import {fetchUser} from '../../services/user.services.js'
 
 async function contestProblemRoutes (problemRoutes: FastifyTypeBox): Promise<void> {
   problemRoutes.addHook('onRequest', contestInfoHook)
@@ -284,7 +285,16 @@ async function contestTeamRoutes (teamRoutes: FastifyTypeBox): Promise<void> {
       schema: {
         params: Type.Object({ contestId: Type.String(), teamId: Type.String() }),
         response: {
-          200: TeamSchema,
+          200: Type.Object({
+            name: Type.String(),
+            id: Type.String(),
+            contestId: Type.String(),
+            captain: Type.String(),
+            members: Type.Array(Type.Object({
+              name: Type.String(),
+              id: Type.String()
+            }))
+          }),
           400: badRequestSchema,
           404: notFoundSchema
         }
@@ -293,7 +303,12 @@ async function contestTeamRoutes (teamRoutes: FastifyTypeBox): Promise<void> {
     async (request, reply) => {
       const { contestId, teamId } = request.params
       const team = await fetchTeam({ teamId, contestId })
-      return await reply.status(200).send(team)
+      const members = await Promise.all(team.members.map(async member => {
+        const { name, id } = await fetchUser({userId: member});
+        return { name, id };
+      }));
+      const _team = { ...team, members }
+      return await reply.status(200).send(_team)
     }
   )
 
@@ -504,7 +519,7 @@ async function contestRanklistRoutes (ranklistRoutes: FastifyTypeBox): Promise<v
       schema: {
         params: Type.Object({ contestId: Type.String() }),
         response: {
-          200: Type.Array(TeamScoreSchema),
+          200: Type.Array(Type.Intersect([TeamScoreSchema, Type.Object({name: Type.String()})])),
           400: badRequestSchema,
           403: forbiddenSchema,
           404: notFoundSchema
@@ -518,7 +533,12 @@ async function contestRanklistRoutes (ranklistRoutes: FastifyTypeBox): Promise<v
     async (request, reply) => {
       const { contestId } = request.params
       const ranklist = await fetchContestRanklist({ contestId })
-      return await reply.status(200).send(ranklist)
+      const _ranklist = await Promise.all(ranklist.map(async team => {
+        const { name } = await fetchTeam({ contestId: team.contestId, teamId: team.id });
+        return { ...team, name };
+      }));
+      
+      return await reply.status(200).send(_ranklist)
     }
   )
 }
diff --git a/packages/api-server/src/routes/v1/user.routes.ts b/packages/api-server/src/routes/v1/user.routes.ts
index fa92fe7b..30b87531 100644
--- a/packages/api-server/src/routes/v1/user.routes.ts
+++ b/packages/api-server/src/routes/v1/user.routes.ts
@@ -8,7 +8,7 @@ import { contestNotBegan, contestPublished } from '../../auth/contest.auth.js'
 import { completeTeamInvitation } from '../../services/team.services.js'
 import { hasDomainPrivilege, hasNoPrivilege } from '../../auth/scope.auth.js'
 import { isTeamMember } from '../../auth/team.auth.js'
-import { fetchSubmission } from '@argoncs/common'
+import { fetchDomainProblem, fetchSubmission } from '@argoncs/common'
 import { isSuperAdmin } from '../../auth/role.auth.js'
 import { userAuthHook } from '../../hooks/authentication.hooks.js'
 import { contestInfoHook } from '../../hooks/contest.hooks.js'
@@ -120,7 +120,10 @@ async function userSubmissionRoutes (submissionRoutes: FastifyTypeBox): Promise<
       schema: {
         params: Type.Object({ userId: Type.String() }),
         response: {
-          200: Type.Array(SubmissionSchema),
+          200: Type.Array(Type.Intersect([
+            Type.Object({ problemName: Type.String(), problemId: Type.String() }),
+            SubmissionSchema
+          ])),
           400: badRequestSchema,
           401: unauthorizedSchema,
           403: forbiddenSchema
@@ -134,7 +137,16 @@ async function userSubmissionRoutes (submissionRoutes: FastifyTypeBox): Promise<
     async (request, reply) => {
       const { userId } = request.params
       const submissions = await querySubmissions({ query: { userId } })
-      return await reply.status(200).send(submissions)
+      const _submissions = await Promise.all(submissions.map(async submission => {
+        const { name: problemName } = await fetchDomainProblem({ problemId: submission.problemId, domainId: submission.domainId });
+        return { ...submission, problemName };
+      }));
+      // NOTE: having some issues with the _submissions object being GC'ed before returning
+      // When you print _submissions, the object is present, but on the HTTP response it only shows 'PROBLEM NAME'.
+      // I'm guessing this is something to do with ownership, not the typing.
+      // I've just made it stringify it first so that GC won't mess with it.
+      // NOTE: Doing JSON.parse(JSON.stringify(x)) doesn't work either for some reason.
+      return await reply.status(200).send(JSON.stringify(_submissions))
     }
   )
 
