added retry button for ManualLyricDialog

KRTirtho · May 7, 2021 · b878c74 · b878c74
1 parent 19457cd
commit b878c74
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 43 deletions.
diff --git a/src/components/ManualLyricDialog.tsx b/src/components/ManualLyricDialog.tsx
@@ -1,23 +1,38 @@
-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";
 
 interface ManualLyricDialogProps extends PropsWithChildren<{}> {
   open: boolean;
-  onClose?: (closed:boolean) => void;
+  onClose?: (closed: boolean) => void;
   track: SpotifyApi.TrackObjectSimplified | SpotifyApi.TrackObjectFull;
 }
 
 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)
-      .then((lyrics: string) => {
-        setLyrics(lyrics);
-      })
-      .catch((e: Error) => {
-        showError(e, `[Finding lyrics for ${track.name} failed]: `);
-        setLyrics("No lyrics found, rare track :)");
-      });
+    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 <></>;
 }
 

diff --git a/src/helpers/fetchLyrics.ts b/src/helpers/fetchLyrics.ts
@@ -1,41 +1,49 @@
-
-import axios from 'axios';
-import htmlToText from 'html-to-text';
+import axios from "axios";
+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=";
 
-export default async function fetchLyrics(artists:string, title: string) {
-    let lyrics;
+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 (err) {
+    showError(err, "[Lyric Query Error]: ");
     try {
-        lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+lyrics`, {responseType: "text"})).data;
+      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 (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 (m) {
+      } catch (err_2) {
+        showError(err_2, "[Lyric Query Error]: ");
         try {
-            lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`)).data;
-            [, lyrics] = lyrics.split(delim1);
-            [lyrics] = lyrics.split(delim2);
-        } catch (n) {
-            try {
-                lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song`)).data;
-                [, lyrics] = lyrics.split(delim1);
-                [lyrics] = lyrics.split(delim2);
-            } catch (o) {
-                try {
-                    lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}`)).data;
-                    [, lyrics] = lyrics.split(delim1);
-                    [lyrics] = lyrics.split(delim2);
-                } catch (p) {
-                    lyrics = 'Not Found';
-                }
-            }
+          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 (err_3) {
+          showError(err_3, "[Lyric Query Error]: ");
+          lyrics = "Not Found";
         }
+      }
     }
-    const rets = lyrics.split('\n');
-    let final = '';
-    for (const ret of rets) {
-        final = `${final}${htmlToText.htmlToText(ret)}\n`;
-    }
-    return final.trim();
-}
+  }
+  const rets = lyrics.split("\n");
+  let final = "";
+  for (const ret of rets) {
+    final = `${final}${htmlToText.htmlToText(ret)}\n`;
+  }
+  return final.trim();
+}