mirror of https://github.com/TZGyn/shortener
Compare commits
4 Commits
f9f3db6a1f
...
dfa3d34768
| Author | SHA1 | Date |
|---|---|---|
 TZGyn
|
dfa3d34768
|
1 year ago |
|
TZGyn
|
1a1d7df550
|
1 year ago |
|
TZGyn
|
411adaf31b
|
1 year ago |
|
TZGyn
|
dbfdf8a0f9
|
1 year ago |
Binary file not shown.
@ -1,130 +0,0 @@
|
||||
<script lang="ts">
|
||||
import * as Dialog from '$lib/components/ui/dialog'
|
||||
import * as Select from '$lib/components/ui/select'
|
||||
import { Button, buttonVariants } from '$lib/components/ui/button'
|
||||
import { Input } from '$lib/components/ui/input'
|
||||
import { Label } from '$lib/components/ui/label'
|
||||
import { Loader2, PlusCircle } from 'lucide-svelte'
|
||||
import { invalidateAll } from '$app/navigation'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import type { Project } from '$lib/db/types'
|
||||
|
||||
export let projects: Project[]
|
||||
export let dialogOpen: boolean
|
||||
let inputLink = ''
|
||||
let isLoading = false
|
||||
|
||||
const addShortener = async () => {
|
||||
isLoading = true
|
||||
|
||||
const response = await fetch('/api/shortener', {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
link: inputLink,
|
||||
projectId: shortenerCategory
|
||||
? shortenerCategory.value
|
||||
: undefined,
|
||||
}),
|
||||
})
|
||||
|
||||
const responseData = await response.json()
|
||||
|
||||
isLoading = false
|
||||
|
||||
if (responseData.success) {
|
||||
toast.success('Successfully Created Shortener')
|
||||
await invalidateAll()
|
||||
dialogOpen = false
|
||||
}
|
||||
}
|
||||
|
||||
let inputTimer: any
|
||||
let previewData: any
|
||||
let isPreviewLoading: boolean = false
|
||||
let shortenerCategory: any = undefined
|
||||
|
||||
const getMetadata = async () => {
|
||||
isPreviewLoading = true
|
||||
clearTimeout(inputTimer)
|
||||
inputTimer = setTimeout(async () => {
|
||||
const response = await fetch(
|
||||
`/api/url/metadata?url=${inputLink}`,
|
||||
)
|
||||
previewData = await response.json()
|
||||
isPreviewLoading = false
|
||||
console.log(previewData)
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={dialogOpen}>
|
||||
<Dialog.Trigger
|
||||
class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
|
||||
<PlusCircle />
|
||||
Add Shortner
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Content class="sm:max-w-[500px]">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Add Shortener</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Create A New Shortner Here. Click Add To Save.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<div class="grid gap-8 py-4">
|
||||
<div class="grid grid-cols-4 gap-4 items-center">
|
||||
<Label>Link</Label>
|
||||
<Input
|
||||
id="name"
|
||||
on:input={() => getMetadata()}
|
||||
bind:value={inputLink}
|
||||
placeholder="https://example.com"
|
||||
class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-4 items-center">
|
||||
<Label>Category</Label>
|
||||
<Select.Root
|
||||
bind:selected={shortenerCategory}
|
||||
multiple={false}>
|
||||
<Select.Trigger class="col-span-3">
|
||||
<Select.Value placeholder="Select a Category" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each projects as project}
|
||||
<Select.Item value={project.id}
|
||||
>{project.name}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-4 items-center">
|
||||
<div class="font-bold">Preview</div>
|
||||
<div class="flex flex-col col-span-4 justify-center border">
|
||||
<div class="overflow-hidden relative h-64">
|
||||
{#if isPreviewLoading}
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<Loader2 class="animate-spin" />
|
||||
</div>
|
||||
{:else if previewData}
|
||||
<img
|
||||
src={previewData.image}
|
||||
alt=""
|
||||
class="object-cover w-full h-64" />
|
||||
<div
|
||||
class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
|
||||
{previewData.title}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog.Footer>
|
||||
<Button on:click={addShortener} class="flex gap-2">
|
||||
{#if isLoading}
|
||||
<Loader2 class="animate-spin" />
|
||||
{/if}
|
||||
Add
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@ -1,44 +1,100 @@
|
||||
import { z } from 'zod'
|
||||
import { project, shortener, visitor } from '$lib/db/schema'
|
||||
import {
|
||||
and,
|
||||
asc,
|
||||
desc,
|
||||
eq,
|
||||
getTableColumns,
|
||||
ilike,
|
||||
sql,
|
||||
} from 'drizzle-orm'
|
||||
import type { RequestHandler } from './$types'
|
||||
import { db } from '$lib/db'
|
||||
import { shortener } from '$lib/db/schema'
|
||||
import { nanoid } from 'nanoid'
|
||||
import { generateId } from 'lucia'
|
||||
|
||||
export const GET: RequestHandler = async () => {
|
||||
return new Response()
|
||||
}
|
||||
export const GET: RequestHandler = async (event) => {
|
||||
const user = event.locals.user
|
||||
|
||||
const shortenerInsertSchema = z.object({
|
||||
link: z.string().url('Link must be in url format'),
|
||||
projectId: z.string().nullish(),
|
||||
})
|
||||
const project_id = event.url.searchParams.get('project')
|
||||
const search = event.url.searchParams.get('search')
|
||||
let sortBy = event.url.searchParams.get('sortBy')
|
||||
let page = parseInt(event.url.searchParams.get('page') ?? '1')
|
||||
let perPage = parseInt(
|
||||
event.url.searchParams.get('perPage') ?? '12',
|
||||
)
|
||||
|
||||
export const POST: RequestHandler = async (event) => {
|
||||
const body = await event.request.json()
|
||||
if (isNaN(page)) {
|
||||
page = 1
|
||||
}
|
||||
|
||||
const shortenerInsert = shortenerInsertSchema.safeParse(body)
|
||||
if (isNaN(perPage)) {
|
||||
perPage = 10
|
||||
}
|
||||
|
||||
if (!shortenerInsert.success) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: 'Invalid Link',
|
||||
}),
|
||||
)
|
||||
if (
|
||||
sortBy !== 'latest' &&
|
||||
sortBy !== 'oldest' &&
|
||||
sortBy !== 'most_visited'
|
||||
) {
|
||||
sortBy = 'latest'
|
||||
}
|
||||
|
||||
const user = event.locals.user
|
||||
const shortenerColumns = getTableColumns(shortener)
|
||||
const projectColumns = getTableColumns(project)
|
||||
|
||||
const code = nanoid(8)
|
||||
const shorteners = db
|
||||
.select({
|
||||
...shortenerColumns,
|
||||
projectName: project.name,
|
||||
projectUuid: project.uuid,
|
||||
project: { ...projectColumns },
|
||||
visitorCount: sql<number>`count(${visitor.id})`,
|
||||
})
|
||||
.from(shortener)
|
||||
.where(
|
||||
and(
|
||||
eq(shortener.userId, user.id),
|
||||
project_id && project_id !== 'all'
|
||||
? eq(shortener.projectId, project_id)
|
||||
: undefined,
|
||||
search
|
||||
? ilike(shortener.link, `%${decodeURI(search)}%`)
|
||||
: undefined,
|
||||
),
|
||||
)
|
||||
.leftJoin(visitor, eq(shortener.id, visitor.shortenerId))
|
||||
.leftJoin(project, eq(shortener.projectId, project.id))
|
||||
.groupBy(shortener.id, project.id)
|
||||
.offset(perPage * (page - 1))
|
||||
.limit(perPage)
|
||||
|
||||
if (sortBy === 'latest') {
|
||||
shorteners.orderBy(desc(shortener.createdAt))
|
||||
} else if (sortBy === 'oldest') {
|
||||
shorteners.orderBy(asc(shortener.createdAt))
|
||||
} else if (sortBy === 'most_visited') {
|
||||
shorteners.orderBy(sql`count(${visitor.id}) desc`)
|
||||
}
|
||||
|
||||
await db.insert(shortener).values({
|
||||
id: generateId(8),
|
||||
link: shortenerInsert.data.link,
|
||||
projectId: shortenerInsert.data.projectId,
|
||||
userId: user.id,
|
||||
code: code,
|
||||
const pagination = db
|
||||
.select({
|
||||
total: sql<number>`count(*)`.as('total'),
|
||||
})
|
||||
.from(shortener)
|
||||
.where(
|
||||
and(
|
||||
eq(shortener.userId, user.id),
|
||||
project_id && project_id !== 'all'
|
||||
? eq(shortener.projectId, project_id)
|
||||
: undefined,
|
||||
search
|
||||
? ilike(shortener.link, `%${decodeURI(search)}%`)
|
||||
: undefined,
|
||||
),
|
||||
)
|
||||
|
||||
return new Response(JSON.stringify({ success: true }))
|
||||
return Response.json({
|
||||
success: true,
|
||||
shorteners: await shorteners,
|
||||
pagination: (await pagination)[0],
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue