mirror of https://github.com/BRAVO68WEB/shx.git
183 lines
4.8 KiB
TypeScript
183 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Button from '@/components/ui/Button';
|
|
import { Trash, Edit2, ArrowUpRight, X } from 'lucide-react';
|
|
import URLControls from './URLControls';
|
|
import Modal from '@/components/Modal';
|
|
import Input from '@/components/ui/Input';
|
|
import api from '@/api';
|
|
import { useRouter } from 'next/navigation';
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
interface ShortenUrlListProps {
|
|
data: IUrl[];
|
|
}
|
|
|
|
interface EditUrlModal {
|
|
state: boolean;
|
|
id?: string;
|
|
url?: string;
|
|
}
|
|
|
|
function ShortenUrlList({ data }: ShortenUrlListProps) {
|
|
const router = useRouter();
|
|
const [editURLModal, setEditURLModal] = useState<EditUrlModal>({
|
|
state: false,
|
|
});
|
|
const [input, setInput] = useState('');
|
|
|
|
const onAddURL = async (url: string) => {
|
|
try {
|
|
await api.url.uploadUrl(url);
|
|
router.refresh();
|
|
} catch (e) {
|
|
console.error(e);
|
|
toast.error('Error adding url');
|
|
}
|
|
};
|
|
const onEditUrl = async (url: string, id: string) => {
|
|
if (!input.trim()) return;
|
|
try {
|
|
await api.url.editUrl({ original_url: url, id: id, short_key: input });
|
|
router.refresh();
|
|
} catch (e) {
|
|
console.error(e);
|
|
toast.error('Error updating url');
|
|
} finally {
|
|
setEditURLModal({ state: false });
|
|
}
|
|
};
|
|
const onDeleteUrl = async (id: string) => {
|
|
try {
|
|
await api.url.deleteUrl(id);
|
|
router.refresh();
|
|
} catch (e) {
|
|
console.error(e);
|
|
toast.error('Error deleting url');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<URLControls onAddURL={onAddURL} />
|
|
<table className="min-w-full divide-y divide-gray-700">
|
|
<thead className="p-2">
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 pl-4 pr-5 text-left text-lg font-semibold text-white"
|
|
>
|
|
Original URL
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="py-3.5 pl-4 pr-3 w-full text-left text-lg font-semibold text-white"
|
|
>
|
|
Shortened URL
|
|
</th>
|
|
<th scope="col" className="relative py-3.5 px-4 pr-0">
|
|
<span className="sr-only">Controls</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y p-2">
|
|
{data.map(({ original_url, urlID, short_key }) => (
|
|
<tr className="bg-gray-900 rounded" key={urlID}>
|
|
<td className="whitespace-nowrap pl-4 pr-20 truncate text-sm font-medium text-white">
|
|
<div className="flex items-center gap-3">
|
|
<p className="w-80 truncate">{original_url}</p>
|
|
<a
|
|
referrerPolicy="no-referrer"
|
|
href={original_url}
|
|
target="_blank"
|
|
className="p-2 bg-white bg-opacity-10 rounded cursor-pointer"
|
|
>
|
|
<ArrowUpRight className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
</td>
|
|
<td className="whitespace-nowrap pl-4 text-sm font-medium text-white">
|
|
<div className="flex items-center gap-3">
|
|
<p className="w-80 truncate">{`${process.env.NEXT_PUBLIC_INSTANCE_URL}/${short_key}`}</p>
|
|
<a
|
|
referrerPolicy="no-referrer"
|
|
href={`${process.env.NEXT_PUBLIC_INSTANCE_URL}/${short_key}`}
|
|
target="_blank"
|
|
className="p-2 bg-white bg-opacity-10 rounded cursor-pointer"
|
|
>
|
|
<ArrowUpRight className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
</td>
|
|
<td className="relative whitespace-nowrap py-4 px-4 text-right text-sm font-medium icons flex center items-center gap-3">
|
|
<Button
|
|
variant="transparent"
|
|
size={'icon'}
|
|
aria-label="Delete URL"
|
|
title="Delete URL"
|
|
className="rounded-full p-2 bg-red-100 text-red-600"
|
|
onClick={() => onDeleteUrl(urlID)}
|
|
>
|
|
<Trash className="h-4 w-4 " />
|
|
</Button>
|
|
<Button
|
|
variant="transparent"
|
|
size={'icon'}
|
|
aria-label="Edit URl Slug"
|
|
title="Edit URL Slug"
|
|
className="rounded-full p-2 hover:bg-black"
|
|
onClick={() =>
|
|
setEditURLModal({
|
|
state: true,
|
|
id: urlID,
|
|
url: original_url,
|
|
})
|
|
}
|
|
>
|
|
<Edit2 className="h-4 w-4 " />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<Modal
|
|
open={editURLModal.state}
|
|
onClose={() => setEditURLModal({ state: false })}
|
|
>
|
|
<div className="p-2">
|
|
<div className="controls w-full flex items-center justify-end mb-4">
|
|
<Button
|
|
onClick={() => setEditURLModal({ state: false })}
|
|
size={'icon'}
|
|
aria-label="Reset"
|
|
title="Reset"
|
|
>
|
|
<X className="h-4 w-4 " />
|
|
</Button>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
id="new-slug"
|
|
name="new_slug"
|
|
withLabel={true}
|
|
label="New Slug"
|
|
value={input}
|
|
onChange={evt => setInput(evt.target.value)}
|
|
/>
|
|
<Button
|
|
onClick={() =>
|
|
onEditUrl(editURLModal.url ?? '', editURLModal.id ?? '')
|
|
}
|
|
>
|
|
Modify URl
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ShortenUrlList;
|