Updated timer logic

This reverts commit 21b6f0609e.

src/style.css

@@ -96,8 +96,19 @@ fieldset {
   flex: 1;
   font-weight: bold;
   border: none;
+  min-width: 200px;
 }
 
 label {
   font-weight: 300;
 }
+
+.timer {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/tokenList.ts

@@ -1,3 +1,10 @@
+import { displayTokenListItem } from "./TokenListItem";
+import { tokens } from "./tokens";
+
 export function tokenList() {
-    return `<form id="tokens"></form>`
+  const element = document.createElement("div");
+  element.classList.add("test");
+  return `<form id="tokens">${tokens.map((token) =>
+    displayTokenListItem(token.account, token.secret, element)
+  )}</form>`;
 }

src/tokenListItem.test.ts

@@ -1,12 +1,24 @@
 // @vitest-environment jsdom
 
-import { expect, test } from 'vitest'
-import { tokenListitem } from './tokenListItem'
+import { expect, test } from "vitest";
+import { displayTokenListItem } from "./tokenListItem";
 
+test("displays correct account name", () => {
+  const div: HTMLDivElement = document.createElement("div");
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  expect(div.innerHTML).toContain("Github");
+});
 
-test('displays correct account name', () => {
-    const div: HTMLDivElement = document.createElement('div')
-    tokenListitem('Github', 'ABCDEFGHIJKLMNOP', div);
-    expect(div.innerHTML).toContain('Github')
-})
-
+test("displays multiple list items", () => {
+  const div: HTMLDivElement = document.createElement("div");
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  displayTokenListItem("Gmail", "ABCDEFGHIJKLMNOP", div);
+  const tokens = [
+    { account: "Github", secret: "blahblahblah" },
+    { account: "Gmail", secret: "blahblahblah" },
+  ];
+  tokens.map((token) => displayTokenListItem(token.account, token.secret, div));
+  console.log("dv", div.innerHTML);
+  expect(div.innerHTML).toContain("Github");
+  expect(div.innerHTML).toContain("Gmail");
+});

src/tokenListItem.ts

@@ -1,14 +1,48 @@
+import { displayToken } from "./token";
+var secondsSinceEpoch: number;
+var secondsSinceStart: number;
+var secondsRemaining: number;
+secondsSinceStart = 0;
+secondsRemaining = 30;
+const period = 30;
+var token;
 
-export function tokenListitem(account: string, secret: string, element: HTMLDivElement){
+export function displayTokenListItem(
+  account: string,
+  secret: string,
+  element: HTMLDivElement
+) {
+  function countdown() {
+    secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1;
+    secondsSinceStart = 0 + (secondsSinceEpoch % period);
+    secondsRemaining = period - (secondsSinceEpoch % period);
+    const timerDiv = document.getElementById(`timer-${account}`);
+    const tokenDiv = document.getElementById(`secret-${account}`)
+    if (timerDiv && tokenDiv) {
+      timerDiv.innerHTML = secondsRemaining.toString();
+      timerDiv.style.background = `conic-gradient(transparent ${
+        (100 / 30) * secondsSinceStart
+      }%, ${secondsRemaining < 10 ? "salmon" : "gainsboro"} 0)`;
+      token = displayToken(secret)
+      tokenDiv.innerHTML = token;
+    }
 
-    element.innerHTML += `<div class="fieldset-wrapper">
+  }
+  setInterval(() => {
+    countdown();
+  }, 1000);
+  return (element.innerHTML = `<div class="fieldset-wrapper">
     <fieldset>
       <label>Account</label>
         <p data-test-id="account">${account}</p>
     </fieldset>
     <fieldset>
       <label>Code</label>
-      <p data-test-id="secret">${token}</p>
+      <p id="secret-${account}"></p>
     </fieldset>
-    </div>`;
+    <fieldset>
+    <label></label>
+    <p><div class="timer" id="timer-${account}">
+    </div></p>
+    </div>`);
 }

src/tokenTimer.ts

@@ -0,0 +1,28 @@
+import { displayToken } from "./token";
+
+class Timer {
+  constructor(public counter = 30, public element: HTMLDivElement, public account: string, public secret: string) {
+  
+      let intervalId = setInterval(() => {
+          this.counter = this.counter - 1;
+          console.log(this.counter)
+          if(this.counter === 0) clearInterval(intervalId)
+          element.innerHTML = `<div class="fieldset-wrapper">
+    <fieldset>
+      <label>Account</label>
+        <p data-test-id="account">${account}</p>
+    </fieldset>
+    <fieldset>
+      <label>Code</label>
+      <p data-test-id="secret">${displayToken(secret)}</p>
+    </fieldset>
+    <fieldset>
+    <label></label>
+    <p>${this.counter}</p>
+    </div>`
+          return this.element
+
+      }, 1000)
+  }
+}
+export default Timer