lit task autorun

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import "../components/dnsentry"
import {Task} from "@lit/task";
import type {HeartbeatResponse, HeartbeatRequest} from "../types/heartbeat";

const controller = new AbortController();
const signal = controller.signal;
const heartbeatTimer = setInterval

@customElement('heartbeat-page')
export class HeartBeat extends LitElement {
  @property({type: String})
  entryId = ""

  private heartbeatInterval:number = 0
  private heartbeatCounter:number = 0

  // @function createRequestData
  // @description creates the body content for the request
  private createRequestData(): HeartbeatRequest {
    const d = new Date();
    let time = d.getTime();
    return {
      clientclock: time
    }
  }

  // @function createRequestConfig
  // @description creates the configuration used in a fetch request
  private createRequestConfig(): RequestInit {
    return {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.createRequestData()),
      credentials: 'include',
      signal
    }
  }

  private createRequest(): Promise<HeartbeatResponse> {
    return new Promise<HeartbeatResponse>((resolve, reject) => {
      let test = fetch(`https://dns.api.local.entitywind.io/dns/${this.entryId}`, this.createRequestConfig())
    })
  }

  private _entryTask = new Task(this, {
    task: async ([counter], {signal}) => {
      return this.createRequest()
    },
    args: () => [this.heartbeatCounter]
  });

  private stopHeartbeatTimer() {
    clearInterval(this.heartbeatInterval)
  }

  private updateHeartbeat() {
    if (this.heartbeatCounter===undefined) {
      this.heartbeatCounter = 0
    }
    this.heartbeatCounter++
  }

  private startHeartbeatTimer() {
    this.heartbeatInterval = setInterval(this.updateHeartbeat, 1000)
  }

  render() {
    return html`
      <div>
        <p>heartbeat page</p>
        <button class="abort" @click="${()=>this.stopHeartbeatTimer()}">Stop</button>
        <button class="abort" @click="${()=>this.startHeartbeatTimer()}">Start</button>
        <p></p>
      </div>
    `
  }
}