fix: remove dashboard auto-refresh churn
This commit is contained in:
@@ -7,30 +7,21 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { userApi } from "@/lib/api";
|
import { userApi } from "@/lib/api";
|
||||||
import { useSocket } from "@/lib/socket";
|
|
||||||
|
|
||||||
export function RequestHistory() {
|
export function RequestHistory({ onRefresh }: { onRefresh?: () => void }) {
|
||||||
const [requests, setRequests] = useState<any[]>([]);
|
const [requests, setRequests] = useState<any[]>([]);
|
||||||
const [status, setStatus] = useState("");
|
const [status, setStatus] = useState("");
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const socket = useSocket();
|
|
||||||
|
|
||||||
const load = async () => {
|
const load = async () => {
|
||||||
const res = await userApi.getRequests(1, 50, status || undefined);
|
const res = await userApi.getRequests(1, 50, status || undefined);
|
||||||
setRequests(res.data.requests || []);
|
setRequests(res.data.requests || []);
|
||||||
|
onRefresh?.();
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
}, [status]);
|
}, [status]);
|
||||||
useEffect(() => {
|
|
||||||
if (!socket) return;
|
|
||||||
const refresh = () => load();
|
|
||||||
socket.on("request_updated", refresh);
|
|
||||||
return () => {
|
|
||||||
socket.off("request_updated", refresh);
|
|
||||||
};
|
|
||||||
}, [socket, status]);
|
|
||||||
|
|
||||||
const filtered = requests.filter(
|
const filtered = requests.filter(
|
||||||
(r) =>
|
(r) =>
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ import {
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { api, authApi, overseerApi, userApi } from "@/lib/api";
|
import { api, authApi, overseerApi, userApi } from "@/lib/api";
|
||||||
import { useSocket } from "@/lib/socket";
|
|
||||||
import { useStore } from "@/lib/store";
|
import { useStore } from "@/lib/store";
|
||||||
import { formatNumber } from "@/lib/utils";
|
import { formatNumber } from "@/lib/utils";
|
||||||
import { ActivityFeed } from "./components/ActivityFeed";
|
import { ActivityFeed } from "./components/ActivityFeed";
|
||||||
@@ -36,7 +35,6 @@ export default function DashboardPage() {
|
|||||||
const [pendingRequests, setPendingRequests] = useState<any[]>([]);
|
const [pendingRequests, setPendingRequests] = useState<any[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||||
const socket = useSocket();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isAuthenticated) {
|
if (!isAuthenticated) {
|
||||||
@@ -46,26 +44,6 @@ export default function DashboardPage() {
|
|||||||
loadWalletAndPending();
|
loadWalletAndPending();
|
||||||
loadCosts();
|
loadCosts();
|
||||||
}, [isAuthenticated, router]);
|
}, [isAuthenticated, router]);
|
||||||
useEffect(() => {
|
|
||||||
const id = setInterval(() => {
|
|
||||||
if (isAuthenticated) loadWalletAndPending();
|
|
||||||
}, 30000);
|
|
||||||
return () => clearInterval(id);
|
|
||||||
}, [isAuthenticated]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!socket) return;
|
|
||||||
const refresh = () => loadWalletAndPending();
|
|
||||||
socket.on("credits_earned", refresh);
|
|
||||||
socket.on("bonus_received", refresh);
|
|
||||||
socket.on("credits_spent", refresh);
|
|
||||||
socket.on("request_updated", refresh);
|
|
||||||
return () => {
|
|
||||||
socket.off("credits_earned", refresh);
|
|
||||||
socket.off("bonus_received", refresh);
|
|
||||||
socket.off("credits_spent", refresh);
|
|
||||||
socket.off("request_updated", refresh);
|
|
||||||
};
|
|
||||||
}, [socket]);
|
|
||||||
|
|
||||||
const loadWalletAndPending = async () => {
|
const loadWalletAndPending = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -94,6 +72,9 @@ export default function DashboardPage() {
|
|||||||
logout();
|
logout();
|
||||||
router.push("/login");
|
router.push("/login");
|
||||||
};
|
};
|
||||||
|
const handleRefresh = () => {
|
||||||
|
loadWalletAndPending();
|
||||||
|
};
|
||||||
|
|
||||||
if (isLoading) return <div className="p-8">Loading...</div>;
|
if (isLoading) return <div className="p-8">Loading...</div>;
|
||||||
|
|
||||||
@@ -176,7 +157,7 @@ export default function DashboardPage() {
|
|||||||
<WatchHistory />
|
<WatchHistory />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="requests">
|
<TabsContent value="requests">
|
||||||
<RequestHistory />
|
<RequestHistory onRefresh={handleRefresh} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="leaderboard">
|
<TabsContent value="leaderboard">
|
||||||
<Leaderboard />
|
<Leaderboard />
|
||||||
|
|||||||
Reference in New Issue
Block a user