feat: finished queue related features

src/lib/handleAddToQueue.ts

-import axios from "axios";
-
-export const handleAddToQueue = async (idpodcast: number) => {
-  const axiosInstance = axios.create({
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
-  });
-
-  await axiosInstance.delete(`${import.meta.env.VITE_REST_URL}/queue`);
-
-  await axiosInstance.post(`${import.meta.env.VITE_REST_URL}/queue/podcast`, {
-    idPodcast: idpodcast,
-  });
-
-  if (queue.current) {
-    await axiosInstance.post(`${import.meta.env.VITE_REST_URL}/queue/forward`);
-  }
-
-  const [current, next, prev] = await Promise.all([
-    axiosInstance.get(`${import.meta.env.VITE_REST_URL}/queue/current`),
-    axiosInstance.get(`${import.meta.env.VITE_REST_URL}/queue/next`),
-    axiosInstance.get(`${import.meta.env.VITE_REST_URL}/queue/previous`),
-  ]);
-
-  const tempQueue: Queue = {
-    prev: prev.data.result,
-    current: current.data.result,
-    next: next.data.result,
-  };
-
-  dispatchQueue({ type: "SET_QUEUE", payload: tempQueue });
-};

src/pages/queue/index.tsx

-import { useLoaderData } from "react-router-dom";
+import axios from "axios";
+import { useLoaderData, useRevalidator } from "react-router-dom";
 
 export type queueItem = {
   Episode: {
@@ -14,9 +15,33 @@ export type queueItem = {
 export default function QueuePage() {
   const queue = useLoaderData() as queueItem[];
 
+  const revalidator = useRevalidator();
+
+  const handleClearQueue = async () => {
+    try {
+      await axios.delete(`${import.meta.env.VITE_REST_URL}/queue`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+
+      revalidator.revalidate();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <section className="px-8 mb-8">
-      <h1 className="h1">Your Queue</h1>
+      <div className="w-full flex items-end justify-between">
+        <h1 className="h1">Your Queue</h1>
+        <h4
+          onClick={handleClearQueue}
+          className="h4 text-[#ed5c5c] hover:text-[#ed5c5c]/80 cursor-pointer"
+        >
+          Clear Queue
+        </h4>
+      </div>
 
       <ul className="w-full mt-[22px]">
         {queue.map((item, idx) => (