From a3b27361ecf6d2783dd9fe12b2e475467ce24909 Mon Sep 17 00:00:00 2001 From: oiov Date: Sun, 23 Mar 2025 23:02:54 +0800 Subject: [PATCH] add url search params --- app/(protected)/admin/urls/page.tsx | 7 ++- app/(protected)/dashboard/page.tsx | 1 + app/(protected)/dashboard/urls/live-logs.tsx | 20 ++++--- app/(protected)/dashboard/urls/page.tsx | 7 ++- app/(protected)/dashboard/urls/url-list.tsx | 60 ++++++++++++++++++-- app/api/url/admin/route.ts | 8 +++ app/api/url/route.ts | 7 +++ components/shared/icons.tsx | 2 + lib/dto/short-urls.ts | 17 +++++- public/sw.js.map | 2 +- 10 files changed, 114 insertions(+), 17 deletions(-) diff --git a/app/(protected)/admin/urls/page.tsx b/app/(protected)/admin/urls/page.tsx index 389580f..3e9c205 100644 --- a/app/(protected)/admin/urls/page.tsx +++ b/app/(protected)/admin/urls/page.tsx @@ -27,7 +27,12 @@ export default async function DashboardPage() { /> diff --git a/app/(protected)/dashboard/page.tsx b/app/(protected)/dashboard/page.tsx index b82254b..d05a1f8 100644 --- a/app/(protected)/dashboard/page.tsx +++ b/app/(protected)/dashboard/page.tsx @@ -64,6 +64,7 @@ export default async function DashboardPage() { id: user.id, name: user.name || "", apiKey: user.apiKey || "", + role: user.role, }} action="/api/url" /> diff --git a/app/(protected)/dashboard/urls/live-logs.tsx b/app/(protected)/dashboard/urls/live-logs.tsx index 91f1b4e..54374f2 100644 --- a/app/(protected)/dashboard/urls/live-logs.tsx +++ b/app/(protected)/dashboard/urls/live-logs.tsx @@ -150,7 +150,9 @@ export default function LiveLog({ admin }: { admin: boolean }) {
- Live Log + + Live Log + Real-time updates of short URL visits. @@ -161,7 +163,9 @@ export default function LiveLog({ admin }: { admin: boolean }) { variant={"outline"} size="sm" className={`ml-auto gap-2 transition-colors hover:border-blue-600 hover:text-blue-600 ${ - isLive ? "border-blue-600 text-blue-500" : "" + isLive + ? "animate-pulse border-dashed border-blue-600 text-blue-500" + : "" }`} > {isLive ? "Stop" : "Live"} @@ -171,7 +175,7 @@ export default function LiveLog({ admin }: { admin: boolean }) { variant={"outline"} size="sm" onClick={() => handleRefresh()} - disabled={isLoading} + disabled={!isLive} > {isLoading ? ( @@ -190,17 +194,17 @@ export default function LiveLog({ admin }: { admin: boolean }) { }`} disabled={logs.length === 0} > - +
- + 0 ? " pb-6" : "")}> {error ? (
{error.message}
) : logs.length === 0 && !newLogs ? ( - + // + <> ) : ( - // <>
@@ -213,7 +217,7 @@ export default function LiveLog({ admin }: { admin: boolean }) { Clicks - + {logs.map((log, index) => ( diff --git a/app/(protected)/dashboard/urls/url-list.tsx b/app/(protected)/dashboard/urls/url-list.tsx index e1a4e00..ced7d36 100644 --- a/app/(protected)/dashboard/urls/url-list.tsx +++ b/app/(protected)/dashboard/urls/url-list.tsx @@ -23,6 +23,7 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, @@ -49,7 +50,7 @@ import { PaginationWrapper } from "@/components/shared/pagination"; import UserUrlMetaInfo from "./meta"; export interface UrlListProps { - user: Pick; + user: Pick; action: string; } @@ -91,17 +92,29 @@ export default function UserUrlsList({ user, action }: UrlListProps) { const [pageSize, setPageSize] = useState(10); const [isShowStats, setShowStats] = useState(false); const [selectedUrlId, setSelectedUrlId] = useState(""); + const [searchParams, setSearchParams] = useState({ + slug: "", + target: "", + userName: "", + }); const { mutate } = useSWRConfig(); const { data, error, isLoading } = useSWR<{ total: number; list: ShortUrlFormData[]; - }>(`${action}?page=${currentPage}&size=${pageSize}`, fetcher, { - revalidateOnFocus: false, - }); + }>( + `${action}?page=${currentPage}&size=${pageSize}&slug=${searchParams.slug}&userName=${searchParams.userName}&target=${searchParams.target}`, + fetcher, + { + revalidateOnFocus: false, + }, + ); const handleRefresh = () => { - mutate(`${action}?page=${currentPage}&size=${pageSize}`, undefined); + mutate( + `${action}?page=${currentPage}&size=${pageSize}&slug=${searchParams.slug}&userName=${searchParams.userName}&target=${searchParams.target}`, + undefined, + ); }; return ( @@ -148,6 +161,41 @@ export default function UserUrlsList({ user, action }: UrlListProps) { +
+ { + setSearchParams({ + ...searchParams, + slug: e.target.value, + }); + }} + /> + { + setSearchParams({ + ...searchParams, + target: e.target.value, + }); + }} + /> + {user.role === "ADMIN" && ( + { + setSearchParams({ + ...searchParams, + userName: e.target.value, + }); + }} + /> + )} +
{isShowForm && ( + + ) : data && data.list && data.list.length ? ( data.list.map((short) => ( diff --git a/app/api/url/admin/route.ts b/app/api/url/admin/route.ts index e23ae2c..7e26960 100644 --- a/app/api/url/admin/route.ts +++ b/app/api/url/admin/route.ts @@ -17,16 +17,24 @@ export async function GET(req: Request) { const url = new URL(req.url); const page = url.searchParams.get("page"); const size = url.searchParams.get("size"); + const userName = url.searchParams.get("userName") || ""; + const slug = url.searchParams.get("slug") || ""; + const target = url.searchParams.get("target") || ""; const data = await getUserShortUrls( user.id, 1, Number(page || "1"), Number(size || "10"), "ADMIN", + userName, + slug, + target, ); return Response.json(data); } catch (error) { + console.log(error); + return Response.json(error?.statusText || error, { status: error.status || 500, statusText: error.statusText || "Server error", diff --git a/app/api/url/route.ts b/app/api/url/route.ts index a595e99..3dc2408 100644 --- a/app/api/url/route.ts +++ b/app/api/url/route.ts @@ -11,11 +11,18 @@ export async function GET(req: Request) { const url = new URL(req.url); const page = url.searchParams.get("page"); const size = url.searchParams.get("size"); + const userName = url.searchParams.get("userName") || ""; + const slug = url.searchParams.get("slug") || ""; + const target = url.searchParams.get("target") || ""; const data = await getUserShortUrls( user.id, 1, Number(page || "1"), Number(size || "10"), + "USER", + userName, + slug, + target, ); return Response.json(data); diff --git a/components/shared/icons.tsx b/components/shared/icons.tsx index 89d0763..a73f37d 100644 --- a/components/shared/icons.tsx +++ b/components/shared/icons.tsx @@ -33,6 +33,7 @@ import { Moon, MoreVertical, Package, + Paintbrush, Plus, QrCode, Search, @@ -62,6 +63,7 @@ export const Icons = { fileText: FileText, dashboard: LayoutPanelLeft, ellipsis: MoreVertical, + paintbrush: Paintbrush, github: ({ ...props }: LucideProps) => (