From 11c234e10f7ee4af7a19dc1bc357eb8bdb852abc Mon Sep 17 00:00:00 2001
From: Rava Maulana <ravamaulana14@gmail.com>
Date: Wed, 15 Nov 2023 18:07:25 +0700
Subject: [PATCH] feat: finished queue related features
---
src/lib/handleAddToQueue.ts | 33 ---------------------------------
src/pages/queue/index.tsx | 29 +++++++++++++++++++++++++++--
2 files changed, 27 insertions(+), 35 deletions(-)
delete mode 100644 src/lib/handleAddToQueue.ts
diff --git a/src/lib/handleAddToQueue.ts b/src/lib/handleAddToQueue.ts
deleted file mode 100644
index 26d606d..0000000
--- a/src/lib/handleAddToQueue.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-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 });
-};
diff --git a/src/pages/queue/index.tsx b/src/pages/queue/index.tsx
index bb746c4..f8806a1 100644
--- a/src/pages/queue/index.tsx
+++ b/src/pages/queue/index.tsx
@@ -1,4 +1,5 @@
-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) => (
--
GitLab