added retry button for ManualLyricDialog

src/components/ManualLyricDialog.tsx

@@ -1,4 +1,4 @@
-import { FlexLayout, QDialog, QLabel, QScrollArea, QWidget, TextFormat } from "@nodegui/nodegui";
+import { FlexLayout, QDialog, QLabel, QPushButton, QScrollArea, QWidget, TextFormat } from "@nodegui/nodegui";
 import React, { PropsWithChildren, useEffect, useState } from "react";
 import showError from "../helpers/showError";
 import fetchLyrics from "../helpers/fetchLyrics";
@@ -12,12 +12,27 @@ interface ManualLyricDialogProps extends PropsWithChildren<{}> {
 function ManualLyricDialog({ open, track, onClose }: ManualLyricDialogProps) {
   const dialog = new QDialog();
   const areaContainer = new QWidget();
+  const retryButton = new QPushButton();
   const scrollArea = new QScrollArea();
   const titleLabel = new QLabel();
   const lyricLabel = new QLabel();
+  const [lyricNotFound, setLyricNotFound] = useState<boolean>(false);
   const [lyrics, setLyrics] = useState<string>("");
   const artists = track.artists.map((artist) => artist.name).join(", ");
 
+  async function handleBtnClick() {
+    try {
+      const lyrics = await fetchLyrics(artists, track.name);
+      console.log('lyrics:', lyrics)
+      setLyrics(lyrics);
+      setLyricNotFound(lyrics === "Not Found");
+    } catch (error) {
+      showError(error, `[Finding lyrics for ${track.name} failed]: `);
+      setLyrics("No lyrics found, rare track :)");
+      setLyricNotFound(true);
+    }
+  }
+
   useEffect(() => {
     // title label
     titleLabel.setText(`
@@ -34,27 +49,40 @@ function ManualLyricDialog({ open, track, onClose }: ManualLyricDialogProps) {
     areaContainer.setInlineStyle("flex: 1; flex-direction: 'column'; padding: 10px;");
     areaContainer.layout?.addWidget(titleLabel);
     areaContainer.layout?.addWidget(lyricLabel);
+    areaContainer.layout?.addWidget(retryButton);
     // scroll area
     scrollArea.setInlineStyle("flex: 1;");
     scrollArea.setWidget(areaContainer);
+
+    // reload button
+    retryButton.setText("Retry");
+    retryButton.addEventListener("clicked", handleBtnClick);
     // dialog
     dialog.setWindowTitle("Lyrics");
     dialog.setLayout(new FlexLayout());
     dialog.layout?.addWidget(scrollArea);
     open ? dialog.open() : dialog.close();
-    open && fetchLyrics(artists, track.name)
+    open &&
+      fetchLyrics(artists, track.name)
         .then((lyrics: string) => {
           setLyrics(lyrics);
+          setLyricNotFound(lyrics === "Not Found");
         })
         .catch((e: Error) => {
           showError(e, `[Finding lyrics for ${track.name} failed]: `);
           setLyrics("No lyrics found, rare track :)");
+          setLyricNotFound(true);
         });
     return () => {
-      dialog.hide()
+      retryButton.removeEventListener("clicked", handleBtnClick);
-    }
+      dialog.hide();
+    };
   }, [open, track, lyrics]);
 
+  useEffect(() => {
+    retryButton.setEnabled(!lyricNotFound);
+  }, [lyricNotFound]);
+
   return <></>;
 }
 

src/helpers/fetchLyrics.ts

@@ -1,6 +1,6 @@
-
+import axios from "axios";
-import axios from 'axios';
+import htmlToText from "html-to-text";
-import htmlToText from 'html-to-text';
+import showError from "./showError";
 const delim1 = '</div></div></div></div><div class="hwc"><div class="BNeawe tAd8D AP7Wnd"><div><div class="BNeawe tAd8D AP7Wnd">';
 const delim2 = '</div></div></div></div></div><div><span class="hwc"><div class="BNeawe uEec3 AP7Wnd">';
 const url = "https://www.google.com/search?q=";
@@ -8,32 +8,40 @@ const url = "https://www.google.com/search?q=";
 export default async function fetchLyrics(artists: string, title: string) {
   let lyrics;
   try {
+    console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+lyrics`);
     lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+lyrics`, { responseType: "text" })).data;
     [, lyrics] = lyrics.split(delim1);
     [lyrics] = lyrics.split(delim2);
-    } catch (m) {
+  } catch (err) {
+    showError(err, "[Lyric Query Error]: ");
     try {
+      console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`);
       lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`)).data;
       [, lyrics] = lyrics.split(delim1);
       [lyrics] = lyrics.split(delim2);
-        } catch (n) {
+    } catch (err_1) {
+      showError(err_1, "[Lyric Query Error]: ");
       try {
+        console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+song`);
         lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song`)).data;
         [, lyrics] = lyrics.split(delim1);
         [lyrics] = lyrics.split(delim2);
-            } catch (o) {
+      } catch (err_2) {
+        showError(err_2, "[Lyric Query Error]: ");
         try {
+          console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}`);
           lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}`)).data;
           [, lyrics] = lyrics.split(delim1);
           [lyrics] = lyrics.split(delim2);
-                } catch (p) {
+        } catch (err_3) {
-                    lyrics = 'Not Found';
+          showError(err_3, "[Lyric Query Error]: ");
+          lyrics = "Not Found";
         }
       }
     }
   }
-    const rets = lyrics.split('\n');
+  const rets = lyrics.split("\n");
-    let final = '';
+  let final = "";
   for (const ret of rets) {
     final = `${final}${htmlToText.htmlToText(ret)}\n`;
   }