monorepo/music-player/client/src/main.ts

import * as _ from "lodash";

interface TrackInfo {
  id: string;
  track_number?: number;
  name?: string;
  album?: string;
  artist?: string;
}

const replaceTitle = () => {
  const title = document.querySelector(".js-title");
  if (title && title.innerHTML) {
    title.innerHTML = "Music Player Paused";
  }
};

const getTracks = () => fetch("/api/v1/tracks").then((r) => r.json());

const formatTrack = (track: TrackInfo) => {
  let row = document.createElement("tr");
  row.classList.add("track-list__row");

  let track_id = document.createElement("td");
  track_id.appendChild(document.createTextNode(track.id));
  track_id.classList.add("track-list__cell");

  let track_number = document.createElement("td");
  track_number.appendChild(
    document.createTextNode(track.track_number?.toString() || "")
  );
  track_number.classList.add("track-list__cell");

  let name = document.createElement("td");
  name.appendChild(document.createTextNode(track.name || ""));
  name.classList.add("track-list__cell");

  let album = document.createElement("td");
  album.appendChild(document.createTextNode(track.album || ""));
  album.classList.add("track-list__cell");

  let artist = document.createElement("td");
  artist.appendChild(document.createTextNode(track.artist || ""));
  artist.classList.add("track-list__cell");

  let length = document.createElement("td");
  artist.appendChild(document.createTextNode(""));
  length.classList.add("track-list__cell");

  row.appendChild(track_id);
  row.appendChild(track_number);
  row.appendChild(name);
  row.appendChild(artist);
  row.appendChild(album);
  row.appendChild(length);
  return row;
};

const updateTrackList = (tracks: TrackInfo[]) => {
  const track_list = document.querySelector(".track-list__tracks tbody");
  if (track_list) {
    let track_formats = _.map(tracks, formatTrack);
    _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
  }
};

const run = () => {
  getTracks().then((tracks) => updateTrackList(tracks));
};

run();