Merge pull request #68 from rahulpoonia29/Ascii-Issue

Fixed issue 67
Satyam1923 · May 12, 2024 · 891d56f · 891d56f
2 parents 3250870 + 66972a5
commit 891d56f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "he": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-h5-audio-player": "^3.9.1"

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -3,6 +3,7 @@ import AudioPlayer from "react-h5-audio-player";
 import "react-h5-audio-player/lib/styles.css";
 import "./App.css";
 import axios from "axios";
+import he from "he";
 
 const App = () => {
     const [data, setData] = useState(null);
@@ -11,6 +12,10 @@ const App = () => {
     const [timePassed, setTimePassed] = useState(0);
     const [currplaying, setCurrplaying] = useState(0);
 
+    const decodeEntities = (str) => {
+        return he.decode(str);
+    };
+
     const fetchSongData = async () => {
         try {
             const response = await axios.get(
@@ -61,11 +66,20 @@ const App = () => {
                 </div>
                 <ul className="details">
                     <li className="name">
-                        {data && data.length > 0 && data[currplaying].name}
+                        {data &&
+                            data.length > 0 &&
+                            data[currplaying] &&
+                            decodeEntities(data[currplaying].name)}
                     </li>
                     <li className="author">
-                        {data && data[currplaying].artist}{" "}
-                        {data && data[currplaying].year}
+                        {data &&
+                            data.length > 0 &&
+                            data[currplaying] &&
+                            decodeEntities(data[currplaying].artist)}{" "}
+                        {data &&
+                            data.length > 0 &&
+                            data[currplaying] &&
+                            data[currplaying].year}
                     </li>
                 </ul>
                 {data && (
@@ -124,9 +138,12 @@ const App = () => {
                                         width="20px"
                                     />
                                     <div className="search-details">
-                                        <h4 id="elementname">{element.name}</h4>
+                                        <h4 id="elementname">
+                                            {decodeEntities(element.name)}
+                                        </h4>
                                         <p>
-                                            {element.artist} - {element.year}
+                                            {decodeEntities(element.artist)} -{" "}
+                                            {element.year}
                                         </p>
                                     </div>
                                 </div>