add ability to sort by id, title, and score

Author: zubyj

src/popup/company.css

@@ -48,4 +48,15 @@ a {
 
 a:hover {
     color: lightcyan;
+}
+
+.header {
+    color: lightgreen;
+
+}
+
+.header:hover {
+    cursor: pointer;
+    color: lightcyan;
+    background-color: #202020;
 }

src/popup/company.html

@@ -16,9 +16,9 @@ <h1 id="title">Amazon</h1>
     </p>
     <table id="solutionTable">
         <tr>
-            <th>#</th>
-            <th>Title</th>
-            <th>Score</th>
+            <th id="#" class="header">#</th>
+            <th id="Title" class="header">Title</th>
+            <th id="Score" class="header">Score</th>
         </tr>
     </table>
     <script src="../../dist/popup/company.js"></script>

src/popup/company.ts

@@ -1,14 +1,26 @@
+// define solutions and companyName outside of the functions so they can be accessed globally
+let solutions = [];
+let companyName = "Amazon";
+
 function main() {
 
-    let companyName = "Amazon";
-    let solutions = [];
 
     chrome.storage.local.get("clickedCompany", function (data) {
         companyName = data.clickedCompany;
         document.getElementById("title").textContent = companyName;
         document.title = companyName + "'s favorite problems"
     });
 
+    addCompanyProblems("Score");
+
+    // attach click listeners to table headers for sorting
+    document.getElementById('#').addEventListener('click', () => sortBy('#'));
+    document.getElementById('Title').addEventListener('click', () => sortBy('Title'));
+    document.getElementById('Score').addEventListener('click', () => sortBy('Score'));
+}
+
+// Adds the company problems by sorting method
+function addCompanyProblems(sortMethod) {
     chrome.storage.local.get("leetcodeProblems", function (data) {
         data.leetcodeProblems.questions.forEach(question => {
             if (!question.companies) return;
@@ -26,7 +38,9 @@ function main() {
 
         const table = document.getElementById("solutionTable");
 
-        solutions.sort((a, b) => b.score - a.score);
+        if (sortMethod === "Score") {
+            solutions.sort((a, b) => b.score - a.score);
+        }
 
         solutions.forEach(solution => {
             const row = table.insertRow(-1);
@@ -38,5 +52,34 @@ function main() {
     });
 }
 
+function sortBy(column) {
+    if (column === 'Score') {
+        solutions.sort((a, b) => b.score - a.score);
+    }
+    else if (column === 'Title') {
+        solutions.sort((a, b) => a.title.localeCompare(b.title));
+    }
+    else {
+        solutions.sort((a, b) => a.id - b.id);
+    }
+
+    // after sorting, you might want to re-render your table
+    const table = document.getElementById("solutionTable");
+
+    // remove all existing rows
+    while (table.rows.length > 1) {
+        table.deleteRow(1);
+    }
+
+    // add sorted rows
+    solutions.forEach(solution => {
+        const row = table.insertRow(-1);
+        row.insertCell(0).innerText = solution.id;
+        const titleCell = row.insertCell(1);
+        titleCell.innerHTML = `<a href="${solution.url}" target="_blank">${solution.title}</a>`;
+        row.insertCell(2).innerText = solution.score;
+    });
+}
+
 /* Run the script */
-main();
+main();