403 lines
15 KiB
TypeScript
403 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/lib/auth';
|
|
import { limqRequest } from '@/lib/api';
|
|
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
|
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
|
|
import ClientRouteGuard from '@/app/components/ClientRouteGuard';
|
|
|
|
interface ShortUrlData {
|
|
originalUrl: string;
|
|
customSlug?: string;
|
|
title: string;
|
|
description?: string;
|
|
tags?: string[];
|
|
teamId: string;
|
|
projectId: string;
|
|
domain: string;
|
|
}
|
|
|
|
export default function CreateShortUrlPage() {
|
|
return (
|
|
<ClientRouteGuard>
|
|
<CreateShortUrlForm />
|
|
</ClientRouteGuard>
|
|
);
|
|
}
|
|
|
|
function CreateShortUrlForm() {
|
|
const router = useRouter();
|
|
const { user } = useAuth();
|
|
|
|
const [formData, setFormData] = useState<ShortUrlData>({
|
|
originalUrl: '',
|
|
customSlug: '',
|
|
title: '',
|
|
description: '',
|
|
tags: [],
|
|
teamId: '',
|
|
projectId: '',
|
|
domain: 'googleads.link',
|
|
});
|
|
|
|
const [tagInput, setTagInput] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
// Use useEffect to add user information to form data on load
|
|
useEffect(() => {
|
|
if (user) {
|
|
console.log('Current user:', user.email);
|
|
// Can add user-related data to the form here
|
|
}
|
|
}, [user]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' && tagInput.trim()) {
|
|
e.preventDefault();
|
|
addTag();
|
|
}
|
|
};
|
|
|
|
const addTag = () => {
|
|
if (tagInput.trim() && !formData.tags?.includes(tagInput.trim())) {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
tags: [...(prev.tags || []), tagInput.trim()]
|
|
}));
|
|
setTagInput('');
|
|
}
|
|
};
|
|
|
|
const removeTag = (tagToRemove: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
tags: prev.tags?.filter(tag => tag !== tagToRemove)
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Validate required fields
|
|
if (!formData.originalUrl) {
|
|
throw new Error('Original URL is required');
|
|
}
|
|
|
|
if (!formData.title) {
|
|
throw new Error('Title is required');
|
|
}
|
|
|
|
if (!formData.teamId) {
|
|
throw new Error('Team is required');
|
|
}
|
|
|
|
if (!formData.projectId) {
|
|
throw new Error('Project is required');
|
|
}
|
|
|
|
if (!formData.domain) {
|
|
throw new Error('Domain is required');
|
|
}
|
|
|
|
// Construct request data according to API requirements
|
|
const requestData = {
|
|
type: "shorturl",
|
|
attributes: {
|
|
// Can add any additional attributes, but attributes cannot be empty
|
|
icon: ""
|
|
},
|
|
shortUrl: {
|
|
url: formData.originalUrl,
|
|
slug: formData.customSlug || undefined,
|
|
title: formData.title,
|
|
name: formData.title,
|
|
description: formData.description || "",
|
|
domain: formData.domain
|
|
},
|
|
teamId: formData.teamId,
|
|
projectId: formData.projectId,
|
|
tagIds: formData.tags && formData.tags.length > 0 ? formData.tags : undefined
|
|
};
|
|
|
|
// Call API to create shorturl resource
|
|
const response = await limqRequest('resource/shorturl', 'POST', requestData as unknown as Record<string, unknown>);
|
|
|
|
console.log('Created successfully:', response);
|
|
setSuccess(true);
|
|
|
|
// Redirect to links list page after 2 seconds
|
|
setTimeout(() => {
|
|
router.push('/links');
|
|
}, 2000);
|
|
|
|
} catch (err) {
|
|
console.error('Failed to create short URL:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to create short URL, please try again later');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-3xl">
|
|
<div className="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div className="border-b border-gray-200 bg-blue-50 px-6 py-4">
|
|
<h1 className="text-xl font-medium text-gray-900">Create Short URL</h1>
|
|
<p className="mt-1 text-sm text-gray-600">
|
|
Create a new short URL resource for tracking and analytics
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-6">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-red-700">{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="bg-green-50 border-l-4 border-green-500 p-4 m-6">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-green-700">
|
|
Short URL created successfully! Redirecting...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
|
{/* Title */}
|
|
<div>
|
|
<label htmlFor="title" className="block text-sm font-medium text-gray-700">
|
|
Title <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
name="title"
|
|
value={formData.title}
|
|
onChange={handleChange}
|
|
placeholder="e.g., Product Launch Campaign"
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Original URL */}
|
|
<div>
|
|
<label htmlFor="originalUrl" className="block text-sm font-medium text-gray-700">
|
|
Original URL <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="originalUrl"
|
|
name="originalUrl"
|
|
value={formData.originalUrl}
|
|
onChange={handleChange}
|
|
placeholder="https://example.com/your-long-url"
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Custom Short Link */}
|
|
<div>
|
|
<label htmlFor="customSlug" className="block text-sm font-medium text-gray-700">
|
|
Custom Short Link <span className="text-gray-500">(Optional)</span>
|
|
</label>
|
|
<div className="flex mt-1 rounded-md shadow-sm">
|
|
<span className="inline-flex items-center px-3 py-2 text-sm text-gray-500 border border-r-0 border-gray-300 rounded-l-md bg-gray-50">
|
|
{formData.domain}/
|
|
</span>
|
|
<input
|
|
type="text"
|
|
id="customSlug"
|
|
name="customSlug"
|
|
value={formData.customSlug}
|
|
onChange={handleChange}
|
|
placeholder="custom-slug"
|
|
className="flex-1 block w-full min-w-0 px-3 py-2 border border-gray-300 rounded-none rounded-r-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Leave blank to generate a random short link
|
|
</p>
|
|
</div>
|
|
|
|
{/* Domain */}
|
|
<div>
|
|
<label htmlFor="domain" className="block text-sm font-medium text-gray-700">
|
|
Domain <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="domain"
|
|
name="domain"
|
|
value={formData.domain}
|
|
onChange={handleChange}
|
|
placeholder="e.g., googleads.link"
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Team Selection */}
|
|
<div>
|
|
<label htmlFor="teamId" className="block text-sm font-medium text-gray-700">
|
|
Team <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="mt-1">
|
|
<TeamSelector
|
|
value={formData.teamId}
|
|
onChange={(teamId) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
teamId: teamId as string,
|
|
// Clear selected project when team changes
|
|
projectId: ''
|
|
}));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Project Selection */}
|
|
<div>
|
|
<label htmlFor="projectId" className="block text-sm font-medium text-gray-700">
|
|
Project <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="mt-1">
|
|
<ProjectSelector
|
|
teamId={formData.teamId}
|
|
value={formData.projectId}
|
|
onChange={(projectId) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
projectId: projectId as string
|
|
}));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label htmlFor="description" className="block text-sm font-medium text-gray-700">
|
|
Description <span className="text-gray-500">(Optional)</span>
|
|
</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
rows={3}
|
|
placeholder="A brief description of this link"
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div>
|
|
<label htmlFor="tagInput" className="block text-sm font-medium text-gray-700">
|
|
Tags <span className="text-gray-500">(Optional)</span>
|
|
</label>
|
|
<div className="flex mt-1 rounded-md shadow-sm">
|
|
<input
|
|
type="text"
|
|
id="tagInput"
|
|
value={tagInput}
|
|
onChange={(e) => setTagInput(e.target.value)}
|
|
onKeyDown={handleTagKeyDown}
|
|
placeholder="Add a tag and press Enter"
|
|
className="flex-1 block w-full min-w-0 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={addTag}
|
|
className="inline-flex items-center px-3 py-2 text-sm font-medium text-white border border-transparent rounded-r-md shadow-sm bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
{formData.tags && formData.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{formData.tags.map(tag => (
|
|
<span key={tag} className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-100 rounded-full text-blue-800">
|
|
{tag}
|
|
<button
|
|
type="button"
|
|
onClick={() => removeTag(tag)}
|
|
className="flex-shrink-0 ml-1 text-blue-500 rounded-full hover:text-blue-700 focus:outline-none"
|
|
>
|
|
<span className="sr-only">Remove tag {tag}</span>
|
|
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="flex justify-end pt-4 border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-3"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="w-5 h-5 mr-2 -ml-1 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Processing...
|
|
</>
|
|
) : 'Create Short URL'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|