links search
This commit is contained in:
@@ -18,10 +18,14 @@ export async function GET(request: NextRequest) {
|
||||
const whereConditions = ['deleted_at IS NULL'];
|
||||
|
||||
if (search) {
|
||||
// Expand search to include more fields: slug, shortUrl in attributes, team name, tag name, original_url
|
||||
whereConditions.push(`(
|
||||
title ILIKE '%${search}%' OR
|
||||
slug ILIKE '%${search}%' OR
|
||||
original_url ILIKE '%${search}%'
|
||||
original_url ILIKE '%${search}%' OR
|
||||
title ILIKE '%${search}%' OR
|
||||
JSONHas(attributes, 'shortUrl') AND JSONExtractString(attributes, 'shortUrl') ILIKE '%${search}%' OR
|
||||
arrayExists(x -> JSONExtractString(x, 'team_name') ILIKE '%${search}%', JSONExtractArrayRaw(teams)) OR
|
||||
arrayExists(x -> JSONExtractString(x, 'tag_name') ILIKE '%${search}%', JSONExtractArrayRaw(tags))
|
||||
)`);
|
||||
}
|
||||
|
||||
|
||||
@@ -20,17 +20,32 @@ interface LinkAttributes {
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
// Define Link type based on the database schema
|
||||
// 更新 ShortLink 类型定义以匹配 ClickHouse 数据结构
|
||||
interface ShortLink {
|
||||
id: string;
|
||||
external_id: string | null;
|
||||
attributes: LinkAttributes | null;
|
||||
type: string | null;
|
||||
creator_id: string | null;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
deleted_at: string | null;
|
||||
schema_version: number | null;
|
||||
external_id?: string;
|
||||
type?: string;
|
||||
slug?: string;
|
||||
original_url?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
attributes: string | Record<string, unknown>;
|
||||
schema_version?: number;
|
||||
creator_id?: string;
|
||||
creator_email?: string;
|
||||
creator_name?: string;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
deleted_at?: string | null;
|
||||
projects?: string | Record<string, unknown>[];
|
||||
teams?: string | Record<string, unknown>[];
|
||||
tags?: string | Record<string, unknown>[];
|
||||
qr_codes?: string | Record<string, unknown>[];
|
||||
channels?: string | Record<string, unknown>[];
|
||||
favorites?: string | Record<string, unknown>[];
|
||||
expires_at?: string | null;
|
||||
click_count?: number;
|
||||
unique_visitors?: number;
|
||||
}
|
||||
|
||||
// Define ClickHouse shorturl type
|
||||
@@ -62,69 +77,24 @@ interface ClickHouseShortUrl {
|
||||
link_attributes?: string; // Optional JSON string containing link-specific attributes
|
||||
}
|
||||
|
||||
// Convert ClickHouse data to ShortLink format
|
||||
function convertClickHouseToShortLink(chData: ClickHouseShortUrl): ShortLink {
|
||||
// Parse JSON strings
|
||||
const attributesJson = JSON.parse(chData.attributes || '{}');
|
||||
const teamsJson = JSON.parse(chData.teams || '[]');
|
||||
const tagsJson = JSON.parse(chData.tags || '[]');
|
||||
|
||||
// Extract team info from the first team if available
|
||||
const teamInfo = teamsJson.length > 0 ? {
|
||||
team_id: teamsJson[0].team_id,
|
||||
team_name: teamsJson[0].team_name
|
||||
} : {};
|
||||
|
||||
// Extract tag names
|
||||
const tagNames = tagsJson.map((tag: { tag_name: string }) => tag.tag_name);
|
||||
|
||||
// Parse link_attributes to get domain if available
|
||||
let domain = 'shorturl.example.com';
|
||||
try {
|
||||
if (chData.link_attributes) {
|
||||
const linkAttrObj = JSON.parse(chData.link_attributes);
|
||||
if (linkAttrObj.domain) {
|
||||
domain = linkAttrObj.domain;
|
||||
}
|
||||
}
|
||||
|
||||
// Extract domain from shortUrl in attributes if available
|
||||
const attributesObj = JSON.parse(chData.attributes || '{}');
|
||||
if (attributesObj.shortUrl) {
|
||||
try {
|
||||
const urlObj = new URL(attributesObj.shortUrl);
|
||||
domain = urlObj.hostname;
|
||||
} catch (e) {
|
||||
console.error('Error parsing shortUrl:', e);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing link_attributes:', e);
|
||||
}
|
||||
|
||||
// 示例团队数据 - 实际应用中应从API获取
|
||||
const teams = [
|
||||
{ id: 'marketing', name: 'Marketing' },
|
||||
{ id: 'sales', name: 'Sales' },
|
||||
{ id: 'product', name: 'Product' },
|
||||
{ id: 'engineering', name: 'Engineering' }
|
||||
];
|
||||
|
||||
// 将 ClickHouse 数据转换为 ShortLink 格式
|
||||
const convertClickHouseToShortLink = (data: Record<string, unknown>): ShortLink => {
|
||||
return {
|
||||
id: chData.id,
|
||||
external_id: chData.external_id,
|
||||
type: chData.type,
|
||||
creator_id: chData.creator_id,
|
||||
created_at: chData.created_at,
|
||||
updated_at: chData.updated_at,
|
||||
deleted_at: chData.deleted_at,
|
||||
schema_version: chData.schema_version,
|
||||
attributes: {
|
||||
...attributesJson,
|
||||
title: chData.title || attributesJson.title || '',
|
||||
slug: chData.slug,
|
||||
original_url: chData.original_url,
|
||||
click_count: chData.click_count,
|
||||
visits: chData.click_count,
|
||||
unique_visitors: chData.unique_visitors,
|
||||
domain: attributesJson.domain || domain,
|
||||
...teamInfo,
|
||||
tags: tagNames
|
||||
}
|
||||
...data as any, // 使用类型断言处理泛型记录转换
|
||||
// 确保关键字段存在
|
||||
id: data.id as string || '',
|
||||
created_at: data.created_at as string || new Date().toISOString(),
|
||||
attributes: data.attributes || '{}'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default function LinksPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -136,53 +106,74 @@ export default function LinksPage() {
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [totalLinks, setTotalLinks] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
const [searchDebounce, setSearchDebounce] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Extract link metadata from attributes
|
||||
const getLinkMetadata = (link: ShortLink) => {
|
||||
const attrs = link.attributes || {};
|
||||
return {
|
||||
title: attrs.title || attrs.name || 'Untitled Link',
|
||||
slug: attrs.slug || 'no-slug',
|
||||
originalUrl: attrs.original_url || attrs.originalUrl || '#',
|
||||
visits: attrs.visits || attrs.click_count || 0,
|
||||
teamId: attrs.team_id || '',
|
||||
teamName: attrs.team_name || 'Personal',
|
||||
createdAt: new Date(link.created_at || Date.now()).toLocaleDateString(),
|
||||
tags: attrs.tags || [],
|
||||
domain: attrs.domain || 'shorturl.example.com',
|
||||
};
|
||||
};
|
||||
|
||||
// Filter links by search query
|
||||
const filteredLinks = links.length > 0 ?
|
||||
links.filter(link => {
|
||||
if (!searchQuery && !teamFilter) return true;
|
||||
try {
|
||||
// Parse attributes if it's a string
|
||||
const attributes = typeof link.attributes === 'string'
|
||||
? JSON.parse(link.attributes)
|
||||
: link.attributes || {};
|
||||
|
||||
const metadata = getLinkMetadata(link);
|
||||
const matchesSearch = searchQuery ?
|
||||
(metadata.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
metadata.slug.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
metadata.originalUrl.toLowerCase().includes(searchQuery.toLowerCase())) :
|
||||
true;
|
||||
// Parse attributes to get domain if available
|
||||
let domain = 'shorturl.example.com';
|
||||
try {
|
||||
// Extract domain from shortUrl in attributes if available
|
||||
const attributesObj = typeof link.attributes === 'string'
|
||||
? JSON.parse(link.attributes)
|
||||
: link.attributes || {};
|
||||
|
||||
const matchesTeam = teamFilter ?
|
||||
metadata.teamId === teamFilter :
|
||||
true;
|
||||
|
||||
return matchesSearch && matchesTeam;
|
||||
}) : [];
|
||||
|
||||
// Get unique teams for filtering
|
||||
const teams = links.length > 0 ?
|
||||
Array.from(
|
||||
links.reduce((teams, link) => {
|
||||
const metadata = getLinkMetadata(link);
|
||||
if (metadata.teamId) {
|
||||
teams.set(metadata.teamId, metadata.teamName);
|
||||
if (attributesObj.shortUrl) {
|
||||
try {
|
||||
const urlObj = new URL(attributesObj.shortUrl);
|
||||
domain = urlObj.hostname;
|
||||
} catch (e) {
|
||||
console.error('Error parsing shortUrl:', e);
|
||||
}
|
||||
}
|
||||
return teams;
|
||||
}, new Map<string, string>())
|
||||
).map(([id, name]) => ({ id, name })) : [];
|
||||
} catch (e) {
|
||||
console.error('Error parsing attributes:', e);
|
||||
}
|
||||
|
||||
// Get team name
|
||||
let teamName = '';
|
||||
try {
|
||||
if (link.teams) {
|
||||
const teams = typeof link.teams === 'string'
|
||||
? JSON.parse(link.teams)
|
||||
: link.teams || [];
|
||||
|
||||
if (Array.isArray(teams) && teams.length > 0 && teams[0].team_name) {
|
||||
teamName = teams[0].team_name;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing teams:', e);
|
||||
}
|
||||
|
||||
return {
|
||||
title: link.title || attributes.title || 'Untitled',
|
||||
slug: link.slug || attributes.slug || '',
|
||||
domain: domain,
|
||||
originalUrl: link.original_url || attributes.originalUrl || attributes.original_url || '',
|
||||
teamName: teamName,
|
||||
createdAt: new Date(link.created_at).toLocaleDateString(),
|
||||
visits: link.click_count || 0
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error parsing link metadata:', error);
|
||||
return {
|
||||
title: 'Error parsing data',
|
||||
slug: '',
|
||||
domain: 'shorturl.example.com',
|
||||
originalUrl: '',
|
||||
teamName: '',
|
||||
createdAt: '',
|
||||
visits: 0
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
@@ -231,20 +222,20 @@ export default function LinksPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Subscribe to user auth state
|
||||
const supabase = getSupabaseClient();
|
||||
|
||||
const { data: { subscription } } = supabase.auth.onAuthStateChange((event: AuthChangeEvent) => {
|
||||
if (event === 'SIGNED_IN') {
|
||||
fetchLinks();
|
||||
} else if (event === 'SIGNED_OUT') {
|
||||
setLinks([]);
|
||||
setError(null);
|
||||
const { data: { subscription } } = supabase.auth.onAuthStateChange(
|
||||
(event: AuthChangeEvent) => {
|
||||
if (event === 'SIGNED_IN' || event === 'USER_UPDATED') {
|
||||
fetchLinks();
|
||||
}
|
||||
if (event === 'SIGNED_OUT') {
|
||||
setLinks([]);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
supabase.auth.getSession().then(() => {
|
||||
fetchLinks();
|
||||
});
|
||||
fetchLinks();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
@@ -252,27 +243,42 @@ export default function LinksPage() {
|
||||
};
|
||||
}, [currentPage, pageSize, searchQuery, teamFilter]);
|
||||
|
||||
if (loading) {
|
||||
// Handle search input with debounce
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
|
||||
// Clear any existing timeout
|
||||
if (searchDebounce) {
|
||||
clearTimeout(searchDebounce);
|
||||
}
|
||||
|
||||
// Set the input value immediately for UI feedback
|
||||
setSearchQuery(value);
|
||||
|
||||
// Set a timeout to actually perform the search
|
||||
setSearchDebounce(setTimeout(() => {
|
||||
setCurrentPage(1); // Reset to page 1 when searching
|
||||
}, 500)); // 500ms debounce
|
||||
};
|
||||
|
||||
if (loading && links.length === 0) {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-center p-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
<div className="flex h-96 w-full items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-center p-8 text-red-500">
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (links.length === 0) {
|
||||
return (
|
||||
<div className="flex w-full flex-col items-center justify-center p-12 text-gray-500">
|
||||
<p className="mb-4 text-xl">No short links found</p>
|
||||
<p>Create your first short URL to get started</p>
|
||||
<div className="flex h-96 w-full flex-col items-center justify-center text-red-500">
|
||||
<p>Error loading shortcuts: {error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -289,11 +295,10 @@ export default function LinksPage() {
|
||||
type="text"
|
||||
placeholder="Search links..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setCurrentPage(1); // Reset to page 1 when searching
|
||||
// Trigger search via useEffect dependency change
|
||||
}
|
||||
}}
|
||||
className="w-full rounded-md border border-gray-300 py-2 pl-10 pr-4 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
@@ -327,21 +332,26 @@ export default function LinksPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white">
|
||||
{filteredLinks.map(link => {
|
||||
{links.map(link => {
|
||||
const metadata = getLinkMetadata(link);
|
||||
const shortUrl = `https://${metadata.domain}/${metadata.slug}`;
|
||||
|
||||
return (
|
||||
<tr key={link.id} className="hover:bg-gray-50">
|
||||
<td className="whitespace-nowrap px-6 py-4">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-blue-600">{metadata.title}</span>
|
||||
<span className="text-xs text-gray-500">{shortUrl}</span>
|
||||
<span className="font-medium text-gray-900">{metadata.title}</span>
|
||||
<span className="text-xs text-blue-500">{shortUrl}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="max-w-xs truncate px-6 py-4 text-sm text-gray-500">
|
||||
<a href={metadata.originalUrl} target="_blank" rel="noopener noreferrer" className="flex items-center hover:text-blue-500">
|
||||
{metadata.originalUrl}
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
<a
|
||||
href={metadata.originalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center hover:text-blue-500"
|
||||
>
|
||||
<span className="max-w-xs truncate">{metadata.originalUrl}</span>
|
||||
<ExternalLink className="ml-1 h-3 w-3" />
|
||||
</a>
|
||||
</td>
|
||||
@@ -465,7 +475,7 @@ export default function LinksPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filteredLinks.length === 0 && links.length > 0 && (
|
||||
{links.length === 0 && (
|
||||
<div className="mt-6 rounded-md bg-gray-50 p-6 text-center text-gray-500">
|
||||
No links match your search criteria
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user