diff --git a/src/hooks/useAnalyzeText.ts b/src/hooks/useAnalyzeText.ts
index 15598d3..932c528 100644
--- a/src/hooks/useAnalyzeText.ts
+++ b/src/hooks/useAnalyzeText.ts
@@ -1,9 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { useSession } from "next-auth/react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
-import { AnalysisResults } from "../types";
+import { AnalysisResults, AnalyzeFormData } from "../types";
import {
scrapeProduct,
getAIRecommendation,
@@ -13,21 +13,14 @@ import { getAnotherUserData } from "../app/profile/lib/action";
import prisma from "@/lib/prisma";
import { getMetricId } from "../services/metric.service";
-export type AnalyzeFormData = z.infer
;
-
-export interface AnalysisWithMetric {
- metric: {
- metricId: number;
- name: string;
- } | null;
-}
-
export const useAnalyseText = () => {
const { data: session } = useSession();
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(null);
const [showField, setShowField] = useState(false);
const resultRef = useRef(null);
+ const [progress, setProgress] = useState({ status: "", percent: 0 });
+ const abortControllerRef = useRef(null);
const {
control,
@@ -107,6 +100,15 @@ export const useAnalyseText = () => {
// }
// };
+ const handleCancel = useCallback(() => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort("User cancelled the analysis");
+ abortControllerRef.current = null;
+ }
+ setLoading(false);
+ setProgress({ status: "Analisis Dibatalkan", percent: 0 });
+ }, []);
+
const onSubmit = async (data: AnalyzeFormData) => {
if (!session?.user?.email) {
alert("Anda harus login terlebih dahulu.");
@@ -114,24 +116,39 @@ export const useAnalyseText = () => {
}
setLoading(true);
+ setProgress({ status: "Memulai scraping...", percent: 10 });
setResult(null);
+ abortControllerRef.current = new AbortController();
+ const signal = abortControllerRef.current.signal;
+
try {
const urlsToScrape = [data.url1, data.url2, data.url3, data.url4].filter(
(url) => url && url.trim() !== "",
) as string[];
- const scrapePromises = urlsToScrape.map((url) => scrapeProduct(url));
- const scrapeResults = await Promise.all(scrapePromises);
+ const scrapeResults = await Promise.all(
+ urlsToScrape.map(async (url) => {
+ return await scrapeProduct(url, {
+ signal: signal,
+ });
+ }),
+ );
- const candidates = scrapeResults.map((res) => ({
- name: res.data.name,
- url: res.data.url,
- reviews: res.data.reviews,
- }));
+ const candidates = scrapeResults
+ .filter((res) => res && res.success)
+ .map((res) => ({
+ name: res.data.name,
+ url: res.data.url,
+ reviews: res.data.reviews,
+ }));
+
+ if (candidates.length === 0) {
+ throw new Error("Tidak ada data produk yang berhasil diambil.");
+ }
const metricIdValue = await getMetricId();
-
+
console.log("Payload to AI:", {
user_email: session.user.email,
metric_id: metricIdValue,
@@ -139,13 +156,23 @@ export const useAnalyseText = () => {
totalReviews: candidates.reduce((acc, c) => acc + c.reviews.length, 0),
});
- const aiResult = await getAIRecommendation({
- user_email: session.user.email as string,
- candidates: candidates,
- metric_id: metricIdValue,
- });
+ setProgress({ status: "AI sedang menganalisis ulasan...", percent: 70 });
+ const aiResult = await getAIRecommendation(
+ {
+ user_email: session.user.email as string,
+ candidates: candidates,
+ metric_id: metricIdValue,
+ },
+ { signal: abortControllerRef.current?.signal },
+ );
+
+ if (!aiResult) {
+ console.log("Server menghentikan proses karena pembatalan.");
+ return;
+ }
setResult(aiResult);
+ setProgress({ status: "Selesai", percent: 100 });
setTimeout(() => {
document
@@ -153,12 +180,18 @@ export const useAnalyseText = () => {
?.scrollIntoView({ behavior: "smooth" });
}, 100);
} catch (error: any) {
+ if (error.name === "AbortError" || signal.aborted) {
+ console.log("🛠️ Request dibatalkan secara aman.");
+ return; // Keluar dari fungsi tanpa memunculkan alert error
+ }
+
console.error("Analysis Error:", error);
alert(
"Terjadi kesalahan: " + (error.message || "Gagal menganalisis ulasan."),
);
} finally {
setLoading(false);
+ abortControllerRef.current = null;
}
};
@@ -183,10 +216,12 @@ export const useAnalyseText = () => {
result,
showField,
resultRef,
+ progress,
register,
handleSubmit,
setValue,
onSubmit,
setShowField,
+ handleCancel,
};
};
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
new file mode 100644
index 0000000..114279e
--- /dev/null
+++ b/src/hooks/useSocket.ts
@@ -0,0 +1,33 @@
+// src/hooks/useSocket.ts
+import { useEffect, useState } from "react";
+import { io, Socket } from "socket.io-client";
+
+export const useSocket = () => {
+ const [socket, setSocket] = useState(null);
+ const [progress, setProgress] = useState({ status: "", percent: 0 });
+
+ useEffect(() => {
+ const socketInitializer = async () => {
+ await fetch("/api/socket"); // Panggil API untuk menyalakan server socket
+ const newSocket = io();
+
+ newSocket.on("progress", (data) => {
+ setProgress(data);
+ });
+
+ setSocket(newSocket);
+ };
+
+ socketInitializer();
+
+ return () => {
+ if (socket) socket.disconnect();
+ };
+ }, []);
+
+ const startAnalysis = (payload: any) => {
+ if (socket) socket.emit("start-analysis", payload);
+ };
+
+ return { progress, startAnalysis };
+};
diff --git a/src/services/analyze.service.ts b/src/services/analyze.service.ts
index b4f5433..58265c2 100644
--- a/src/services/analyze.service.ts
+++ b/src/services/analyze.service.ts
@@ -1,13 +1,17 @@
import prisma from "@/lib/prisma";
import { AIRecommendationResponse } from "../types";
-export const scrapeProduct = async (url: string) => {
+export const scrapeProduct = async (
+ url: string,
+ options?: { signal?: AbortSignal },
+) => {
const res = await fetch("/api/scrape", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ url }),
+ signal: options?.signal,
});
if (!res.ok) throw new Error(`Gagal scraping: ${url}`);
@@ -33,9 +37,9 @@ export const getAnalysisData = async (email: string) => {
select: {
productId: true,
brand: {
- select:{
- name: true
- }
+ select: {
+ name: true,
+ },
},
_count: {
select: {
@@ -57,16 +61,20 @@ export const getAnalysisData = async (email: string) => {
return userAnalyses;
};
-export const getAIRecommendation = async (payload: {
- user_email: string;
- metric_id: number | 1;
- candidates: { name: string; url: string; reviews: string[] }[];
-}): Promise => {
+export const getAIRecommendation = async (
+ payload: {
+ user_email: string;
+ metric_id: number | 1;
+ candidates: { name: string; url: string; reviews: string[] }[];
+ },
+ options?: { signal?: AbortSignal },
+): Promise => {
console.log("Fetching to FastAPI...");
const aiRes = await fetch("http://localhost:8000/recommend", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
+ signal: options?.signal,
});
if (!aiRes.ok) {
diff --git a/src/types/index.ts b/src/types/index.ts
index 7cfade7..defd41c 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,6 +4,7 @@ import z from "zod";
import { profileSchema } from "../app/validation/profile.schema";
import { Session } from "next-auth";
import { NextResponse } from "next/server";
+import { analyzeSchema } from "../app/validation/analyze.schema";
export interface ModelDB {
modelName: string;
@@ -362,3 +363,12 @@ export interface VisiblePageProps {
export interface RadarProps {
data: any[];
}
+
+export type AnalyzeFormData = z.infer;
+
+export interface AnalysisWithMetric {
+ metric: {
+ metricId: number;
+ name: string;
+ } | null;
+}
\ No newline at end of file