Pull-to-refresh on Pulse, usePullToRefresh hook
This commit is contained in:
@@ -2,11 +2,13 @@
|
|||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Puzzle, Timer, Sparkles, Settings } from "lucide-react";
|
import { Puzzle, Timer, Sparkles, Settings } from "lucide-react";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { StatusCard } from "@/components/StatusCard";
|
import { StatusCard } from "@/components/StatusCard";
|
||||||
import { StatsCard } from "@/components/StatsCard";
|
import { StatsCard } from "@/components/StatsCard";
|
||||||
import { SessionCard } from "@/components/SessionCard";
|
import { SessionCard } from "@/components/SessionCard";
|
||||||
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
|
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
|
||||||
import { useSessions } from "@/lib/hooks";
|
import { useSessions } from "@/lib/hooks";
|
||||||
|
import { usePullToRefresh } from "@/lib/usePullToRefresh";
|
||||||
|
|
||||||
const QUICK_LINKS = [
|
const QUICK_LINKS = [
|
||||||
{ href: "/skills", label: "Skills", icon: Puzzle, color: "#a78bfa" },
|
{ href: "/skills", label: "Skills", icon: Puzzle, color: "#a78bfa" },
|
||||||
@@ -16,8 +18,13 @@ const QUICK_LINKS = [
|
|||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
export default function PulsePage() {
|
export default function PulsePage() {
|
||||||
|
const qc = useQueryClient();
|
||||||
const { data: sessionsData, isLoading } = useSessions(8);
|
const { data: sessionsData, isLoading } = useSessions(8);
|
||||||
|
|
||||||
|
usePullToRefresh(() => {
|
||||||
|
qc.invalidateQueries();
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
|
<h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef, useEffect, useCallback } from "react";
|
||||||
|
|
||||||
|
export function usePullToRefresh(onRefresh: () => Promise<void> | void) {
|
||||||
|
const startY = useRef(0);
|
||||||
|
const pulling = useRef(false);
|
||||||
|
|
||||||
|
const handleTouchStart = useCallback((e: TouchEvent) => {
|
||||||
|
if (window.scrollY === 0) {
|
||||||
|
startY.current = e.touches[0].clientY;
|
||||||
|
pulling.current = true;
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleTouchEnd = useCallback(
|
||||||
|
(e: TouchEvent) => {
|
||||||
|
if (!pulling.current) return;
|
||||||
|
pulling.current = false;
|
||||||
|
const diff = e.changedTouches[0].clientY - startY.current;
|
||||||
|
if (diff > 80) {
|
||||||
|
onRefresh();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onRefresh]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.addEventListener("touchstart", handleTouchStart, { passive: true });
|
||||||
|
document.addEventListener("touchend", handleTouchEnd, { passive: true });
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("touchstart", handleTouchStart);
|
||||||
|
document.removeEventListener("touchend", handleTouchEnd);
|
||||||
|
};
|
||||||
|
}, [handleTouchStart, handleTouchEnd]);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user