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 type { RequestHandler } from './$types'
|
||||||
import { db } from '$lib/db'
|
import { db } from '$lib/db'
|
||||||
import { shortener } from '$lib/db/schema'
|
|
||||||
import { nanoid } from 'nanoid'
|
|
||||||
import { generateId } from 'lucia'
|
|
||||||
|
|
||||||
export const GET: RequestHandler = async () => {
|
export const GET: RequestHandler = async (event) => {
|
||||||
return new Response()
|
const user = event.locals.user
|
||||||
}
|
|
||||||
|
|
||||||
const shortenerInsertSchema = z.object({
|
const project_id = event.url.searchParams.get('project')
|
||||||
link: z.string().url('Link must be in url format'),
|
const search = event.url.searchParams.get('search')
|
||||||
projectId: z.string().nullish(),
|
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) => {
|
if (isNaN(page)) {
|
||||||
const body = await event.request.json()
|
page = 1
|
||||||
|
}
|
||||||
|
|
||||||
const shortenerInsert = shortenerInsertSchema.safeParse(body)
|
if (isNaN(perPage)) {
|
||||||
|
perPage = 10
|
||||||
|
}
|
||||||
|
|
||||||
if (!shortenerInsert.success) {
|
if (
|
||||||
return new Response(
|
sortBy !== 'latest' &&
|
||||||
JSON.stringify({
|
sortBy !== 'oldest' &&
|
||||||
success: false,
|
sortBy !== 'most_visited'
|
||||||
message: 'Invalid Link',
|
) {
|
||||||
}),
|
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)
|
||||||
|
|
||||||
await db.insert(shortener).values({
|
if (sortBy === 'latest') {
|
||||||
id: generateId(8),
|
shorteners.orderBy(desc(shortener.createdAt))
|
||||||
link: shortenerInsert.data.link,
|
} else if (sortBy === 'oldest') {
|
||||||
projectId: shortenerInsert.data.projectId,
|
shorteners.orderBy(asc(shortener.createdAt))
|
||||||
userId: user.id,
|
} else if (sortBy === 'most_visited') {
|
||||||
code: code,
|
shorteners.orderBy(sql`count(${visitor.id}) desc`)
|
||||||
})
|
}
|
||||||
|
|
||||||
return new Response(JSON.stringify({ success: true }))
|
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 Response.json({
|
||||||
|
success: true,
|
||||||
|
shorteners: await shorteners,
|
||||||
|
pagination: (await pagination)[0],
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue