diff --git a/package-lock.json b/package-lock.json index b1c5ec0..fab9901 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "devDependencies": { "@types/node": "^20", "@types/prop-types": "^15.7.11", - "@types/react": "^18", + "@types/react": "^18.2.55", "@types/react-dom": "^18", "autoprefixer": "^10.4.17", "eslint": "^8", @@ -44,7 +44,7 @@ "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.11", "tailwindcss": "^3.4.1", - "typescript": "^5" + "typescript": "^5.3.3" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/package.json b/package.json index 0bd4d73..892d6a9 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "devDependencies": { "@types/node": "^20", "@types/prop-types": "^15.7.11", - "@types/react": "^18", + "@types/react": "^18.2.55", "@types/react-dom": "^18", "autoprefixer": "^10.4.17", "eslint": "^8", @@ -47,4 +47,4 @@ "tailwindcss": "^3.4.1", "typescript": "^5" } -} +} \ No newline at end of file diff --git a/src/app/[slug]/db.tsx b/src/app/[slug]/db.tsx new file mode 100644 index 0000000..a07fcd1 --- /dev/null +++ b/src/app/[slug]/db.tsx @@ -0,0 +1,12 @@ +"use server"; +import { initConnection } from "@/components/db-utils"; + +export async function querydb(slug: string) { + let db = await initConnection(); + let long_url = await db.query(` + select * from url:[$id]; + `, { id: slug }); + + console.log(long_url, slug) + return long_url; +} diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx new file mode 100644 index 0000000..1790ea3 --- /dev/null +++ b/src/app/[slug]/page.tsx @@ -0,0 +1,10 @@ +import { redirect } from "next/navigation"; +import { querydb } from "./db"; + +// export default function Page({ params }: { params: { slug: string } }) { +// redirect(`https://${params.slug}`) +// } + +export default function Page({ params }: { params: { slug: string } }) { + redirect(`https://${querydb(params.slug)}`) +} diff --git a/src/app/create/create.tsx b/src/app/create/create.tsx new file mode 100644 index 0000000..fa13ae8 --- /dev/null +++ b/src/app/create/create.tsx @@ -0,0 +1,113 @@ +"use client"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle +} from "@/components/ui/card"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { CopyIcon } from "@radix-ui/react-icons"; +import { useFormState, useFormStatus } from "react-dom"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { querydb } from "./db"; +import { formSchema } from "./schema"; + +const initialState = { + url: null, +} + +function SubmitButton() { + const { pending } = useFormStatus(); + return ( + + ); +} + +export default function CreateCard() { + // @ts-ignore + const [state, formAction] = useFormState(querydb, initialState); + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + url: "", + }, + }) + + const handleCopyUrl = () => { + if (state && state.url) { + const currentSiteName = window.location.hostname; + const url = `https://${currentSiteName}/${state.url.toString()}`; + navigator.clipboard.writeText(url) + .catch(err => { + console.error('Failed to copy URL to clipboard:', err); + }); + } + }; + + return ( + // + + + Create a Shortened URL + + + +
+ {/* @ts-ignore */} + + ( + + Enter a url + + + + + + )} + /> + + + +
+ + + {state && state.url && ( + + + + + +

+ Url added to clipboard +

+ + + )} + + + // + ); +} diff --git a/src/app/create/db.tsx b/src/app/create/db.tsx index e7aa3fa..41f65fd 100644 --- a/src/app/create/db.tsx +++ b/src/app/create/db.tsx @@ -3,7 +3,7 @@ import { initConnection } from "@/components/db-utils"; import { formSchema } from "./schema"; export async function querydb(prevState: any, formData: FormData) { - const values = formSchema.safeParse({ url: formData.get("url") }) + const values = formSchema.safeParse(formData) if (!values.success) { return { error: values.error }; } @@ -12,7 +12,7 @@ export async function querydb(prevState: any, formData: FormData) { let db = await initConnection(); let url = await db.query(` create url:[rand::string(8)] CONTENT { - long_url: string::replace($long_url, "http://", "https://"), + long_url: string::replace(string::replace($long_url, "https://", ""), "http://", ""), clicks: 0, date_added: time::now(), date_accessed: { time::now() } diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx deleted file mode 100644 index a98f5f8..0000000 --- a/src/app/create/page.tsx +++ /dev/null @@ -1,109 +0,0 @@ -"use client"; -import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardFooter, - CardHeader, - CardTitle -} from "@/components/ui/card"; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { CopyIcon } from "@radix-ui/react-icons"; -import { useFormState, useFormStatus } from "react-dom"; -import { useForm } from "react-hook-form"; -import { z } from "zod"; -import { querydb } from "./db"; -import { formSchema } from "./schema"; - -const initialState = { - url: null, -} - -function SubmitButton() { - const { pending } = useFormStatus(); - return ( - - ); -} - -export default function Home() { - const [state, formAction] = useFormState(querydb, initialState); - - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - url: "", - }, - }) - - const handleCopyUrl = () => { - if (state && state.url) { - navigator.clipboard.writeText(state.url) - .catch(err => { - console.error('Failed to copy URL to clipboard:', err); - }); - } - }; - - return ( -
- - - Create a Shortened URL - - - -
- - ( - - Enter a url - - - - - - )} - /> - - - -
- - - {state && state.url && ( - - - - - -

- Url added to clipboard -

- - - )} - - -
- ); -} diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx new file mode 100644 index 0000000..27de6e0 --- /dev/null +++ b/src/app/global-error.tsx @@ -0,0 +1,23 @@ +"use client"; +import CardGrid from "@/components/card-grid"; +import { + Card, + CardHeader, + CardTitle +} from "@/components/ui/card"; + +export default function GlobalError({ + error, +}: { + error: Error & { digest?: string } +}) { + return ( + + + + Error + + + + ); +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..d28900b --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,23 @@ +"use client"; +import CardGrid from "@/components/card-grid"; +import { + Card, + CardHeader, + CardTitle +} from "@/components/ui/card"; + +export default function GlobalError({ + error, +}: { + error: Error & { digest?: string } +}) { + return ( + + + + 404 - Not Found + + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index a65aee8..2bcea2f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,21 +1,24 @@ "use client"; +import CardGrid from "@/components/card-grid"; import { Card, CardHeader, CardTitle } from "@/components/ui/card"; import Link from "next/link"; +import CreateCard from "./create/create"; export default function Home() { return ( -
- + + {/* Create a Shortened URL - + */} + @@ -24,6 +27,6 @@ export default function Home() { -
+ ); } diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index b1a3413..7641b08 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -8,9 +8,9 @@ export default function Nav() { Next Url Shortener -
+ {/*
Create -
+
*/}
Stats diff --git a/src/components/card-grid.tsx b/src/components/card-grid.tsx new file mode 100644 index 0000000..9208806 --- /dev/null +++ b/src/components/card-grid.tsx @@ -0,0 +1,18 @@ +export default function CardGrid({ + children, + className, + ...props +}: { + children?: React.ReactNode; + className?: string; +}) { + + return ( +
+ {children} +
+ ); +} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 85d20f2..97f1b7f 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,6 +1,6 @@ -import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" import { cn } from "@/lib/utils" @@ -36,7 +36,7 @@ const buttonVariants = cva( export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { + VariantProps { asChild?: boolean } diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 77e9fb7..a36f130 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -73,4 +73,4 @@ const CardFooter = React.forwardRef< )) CardFooter.displayName = "CardFooter" -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 0e4dccf..d9b2242 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -1,10 +1,10 @@ -import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons" +import * as React from "react" import { cn } from "@/lib/utils" @@ -185,19 +185,8 @@ const DropdownMenuShortcut = ({ DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuCheckboxItem, - DropdownMenuRadioItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuGroup, - DropdownMenuPortal, - DropdownMenuSub, + DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, + DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuRadioGroup, + DropdownMenuSubTrigger, DropdownMenuTrigger } diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx index f6afdaf..5b5331c 100644 --- a/src/components/ui/form.tsx +++ b/src/components/ui/form.tsx @@ -1,6 +1,6 @@ -import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { Slot } from "@radix-ui/react-slot" +import * as React from "react" import { Controller, ControllerProps, @@ -10,8 +10,8 @@ import { useFormContext, } from "react-hook-form" -import { cn } from "@/lib/utils" import { Label } from "@/components/ui/label" +import { cn } from "@/lib/utils" const Form = FormProvider @@ -165,12 +165,7 @@ const FormMessage = React.forwardRef< FormMessage.displayName = "FormMessage" export { - useFormField, - Form, - FormItem, - FormLabel, - FormControl, - FormDescription, - FormMessage, - FormField, + Form, FormControl, + FormDescription, FormField, FormItem, + FormLabel, FormMessage, useFormField } diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index a92b8e0..908d075 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps - extends React.InputHTMLAttributes {} + extends React.InputHTMLAttributes { } const Input = React.forwardRef( ({ className, type, ...props }, ref) => { diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx index 683faa7..72c5138 100644 --- a/src/components/ui/label.tsx +++ b/src/components/ui/label.tsx @@ -1,6 +1,6 @@ -import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" import { cn } from "@/lib/utils" @@ -11,7 +11,7 @@ const labelVariants = cva( const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & - VariantProps + VariantProps >(({ className, ...props }, ref) => ( {children} @@ -149,14 +149,5 @@ const SelectSeparator = React.forwardRef< SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { - Select, - SelectGroup, - SelectValue, - SelectTrigger, - SelectContent, - SelectLabel, - SelectItem, - SelectSeparator, - SelectScrollUpButton, - SelectScrollDownButton, + Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx index c0df655..aedb7cd 100644 --- a/src/components/ui/table.tsx +++ b/src/components/ui/table.tsx @@ -109,12 +109,6 @@ const TableCaption = React.forwardRef< TableCaption.displayName = "TableCaption" export { - Table, - TableHeader, - TableBody, - TableFooter, - TableHead, - TableRow, - TableCell, - TableCaption, + Table, TableBody, TableCaption, TableCell, TableFooter, + TableHead, TableHeader, TableRow }