TypeScript FrontEnd: Add Account Files (#2494)

* add account files, config, and db, fix other files, and make lint script work on cmd

* fuck operating systems

* remove project from eslint

* Merging and fixing some bugs

* fixed result ordering

* fixed quote filter stopping all results

* fixed words filter not working

* corrected type

* Update commandline-lists.ts

* Update types.d.ts

* removing explicit tag types

* mfing prettier

* small changes

* stuff

* fixes

* fix cannot read properties of undefined

* another check just to be safe

* okay that works

Co-authored-by: Miodec <[email protected]>

Author: Ferotiq

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -2,68 +2,66 @@ name: Bug report
 description: Create a report to help us improve
 labels: [bug]
 body:
-  
   - type: markdown
     attributes:
       value: |
         # Welcome
         ```
         Thanks for taking the time to fill out this bug! If you need real-time help, join us on Discord: discord.gg/monkeytype
         ```
-        
-  
+
   - type: checkboxes
     attributes:
       label: Did you clear cache before opening an issue?
       description: Sometimes your browser has old files cached and the bug you are experiencing might be already fixed, or is just a side effect of a new update. If you don't know how to do that, this website should help https://www.pcmag.com/how-to/how-to-clear-your-cache-on-any-browser.
       options:
         - label: I have cleared my cache
           required: true
-            
+
   - type: checkboxes
     attributes:
       label: Is there an existing issue for this?
       description: Please search to see if an issue already exists for the bug you encountered.
       options:
         - label: I have searched the existing issues
           required: true
-          
+
   - type: markdown
     attributes:
       value: |
         # Basic debugging
         ```
         Below fields are very important to quickly track down the issue, so please take the time to carefully check when the issue happens and when it does not.
         ```
-         
+
   - type: dropdown
     attributes:
       label: Does the issue happen when logged in?
       options: ["Yes", "No", "N/A"]
     validations:
       required: true
-      
+
   - type: dropdown
     attributes:
       label: Does the issue happen when logged out?
       options: ["Yes", "No"]
     validations:
       required: true
-      
+
   - type: dropdown
     attributes:
       label: Does the issue happen in incognito mode when logged in?
       options: ["Yes", "No", "N/A"]
     validations:
       required: true
-      
+
   - type: dropdown
     attributes:
       label: Does the issue happen in incognito mode when logged out?
       options: ["Yes", "No"]
     validations:
       required: true
-      
+
   - type: textarea
     attributes:
       label: Account information
@@ -128,4 +126,3 @@ body:
         Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
     validations:
       required: false
-

.prettierrc

@@ -1,5 +1,14 @@
 {
   "tabWidth": 2,
   "useTabs": false,
-  "htmlWhitespaceSensitivity": "ignore"
+  "htmlWhitespaceSensitivity": "ignore",
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "options": {
+        "parser": "typescript"
+      }
+    }
+  ]
 }

frontend/src/scripts/account/all-time-stats.js renamed to frontend/src/scripts/account/all-time-stats.ts

@@ -1,33 +1,37 @@
 import * as DB from "../db";
 import * as Misc from "../misc";
 
-export function clear() {
+export function clear(): void {
   $(".pageAccount .globalTimeTyping .val").text(`-`);
   $(".pageAccount .globalTestsStarted .val").text(`-`);
   $(".pageAccount .globalTestsCompleted .val").text(`-`);
 }
 
-export function update() {
-  if (DB.getSnapshot().globalStats.time != undefined) {
+export function update(): void {
+  const snapshot = DB.getSnapshot();
+
+  if (snapshot.globalStats !== undefined) {
     // let th = Math.floor(DB.getSnapshot().globalStats.time / 3600);
     // let tm = Math.floor((DB.getSnapshot().globalStats.time % 3600) / 60);
     // let ts = Math.floor((DB.getSnapshot().globalStats.time % 3600) % 60);
     $(".pageAccount .globalTimeTyping .val").text(
       Misc.secondsToString(
-        Math.round(DB.getSnapshot().globalStats.time),
+        Math.round(snapshot.globalStats.time as number),
         true,
         true
       )
     );
   }
-  if (DB.getSnapshot().globalStats.started != undefined) {
+
+  if (snapshot.globalStats !== undefined) {
     $(".pageAccount .globalTestsStarted .val").text(
-      DB.getSnapshot().globalStats.started
+      snapshot.globalStats.started as number
     );
   }
-  if (DB.getSnapshot().globalStats.completed != undefined) {
+
+  if (snapshot.globalStats !== undefined) {
     $(".pageAccount .globalTestsCompleted .val").text(
-      DB.getSnapshot().globalStats.completed
+      snapshot.globalStats.completed as number
     );
   }
 }

frontend/src/scripts/account/mini-result-chart.js renamed to frontend/src/scripts/account/mini-result-chart.ts

@@ -1,23 +1,23 @@
 import * as ChartController from "../controllers/chart-controller";
 import Config from "../config";
 
-export function updatePosition(x, y) {
+export function updatePosition(x: number, y: number): void {
   $(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
 }
 
-export function show() {
+export function show(): void {
   $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeIn(125);
   $(".pageAccount .miniResultChartBg").stop(true, true).fadeIn(125);
 }
 
-function hide() {
+function hide(): void {
   $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeOut(125);
   $(".pageAccount .miniResultChartBg").stop(true, true).fadeOut(125);
 }
 
-export function updateData(data) {
+export function updateData(data: MonkeyTypes.ChartData): void {
   // let data = filteredResults[filteredId].chartData;
-  let labels = [];
+  const labels = [];
   for (let i = 1; i <= data.wpm.length; i++) {
     labels.push(i.toString());
   }
@@ -28,22 +28,22 @@ export function updateData(data) {
 
   ChartController.miniResult.updateColors();
 
-  let maxChartVal = Math.max(...[Math.max(...data.wpm), Math.max(...data.raw)]);
-  let minChartVal = Math.min(...[Math.min(...data.wpm), Math.min(...data.raw)]);
-  ChartController.miniResult.options.scales.yAxes[0].ticks.max = Math.round(
-    maxChartVal
+  const maxChartVal = Math.max(
+    ...[Math.max(...data.wpm), Math.max(...data.raw)]
   );
-  ChartController.miniResult.options.scales.yAxes[1].ticks.max = Math.round(
-    maxChartVal
+  const minChartVal = Math.min(
+    ...[Math.min(...data.wpm), Math.min(...data.raw)]
   );
+  ChartController.miniResult.options.scales.yAxes[0].ticks.max =
+    Math.round(maxChartVal);
+  ChartController.miniResult.options.scales.yAxes[1].ticks.max =
+    Math.round(maxChartVal);
 
   if (!Config.startGraphsAtZero) {
-    ChartController.miniResult.options.scales.yAxes[0].ticks.min = Math.round(
-      minChartVal
-    );
-    ChartController.miniResult.options.scales.yAxes[1].ticks.min = Math.round(
-      minChartVal
-    );
+    ChartController.miniResult.options.scales.yAxes[0].ticks.min =
+      Math.round(minChartVal);
+    ChartController.miniResult.options.scales.yAxes[1].ticks.min =
+      Math.round(minChartVal);
   } else {
     ChartController.miniResult.options.scales.yAxes[0].ticks.min = 0;
     ChartController.miniResult.options.scales.yAxes[1].ticks.min = 0;
@@ -52,6 +52,6 @@ export function updateData(data) {
   ChartController.miniResult.update({ duration: 0 });
 }
 
-$(document).on("click", ".pageAccount .miniResultChartBg", (event) => {
+$(document).on("click", ".pageAccount .miniResultChartBg", () => {
   hide();
 });

frontend/src/scripts/account/pb-tables.js renamed to frontend/src/scripts/account/pb-tables.ts

@@ -2,7 +2,7 @@ import * as DB from "../db";
 import Config from "../config";
 import * as Misc from "../misc";
 
-export function update() {
+export function update(): void {
   $(".pageAccount .timePbTable tbody").html(`
   <tr>
     <td>15</td>
@@ -75,10 +75,11 @@ export function update() {
   }
 
   const pb = DB.getSnapshot().personalBests;
+  if (pb === undefined) return;
   let pbData;
   let text;
   let dateText = `-<br><span class="sub">-</span>`;
-  let multiplier = Config.alwaysShowCPM ? 5 : 1;
+  const multiplier = Config.alwaysShowCPM ? 5 : 1;
 
   text = "";
   try {