-
- Shorten Your Loooong Links :)
+
({
+ mode: "onChange",
+ defaultValues: {
+ url,
+ },
+ });
+
+ const onSubmit = (data: FormData) => {
+ if (isValid) {
+ setUrl(data.url);
+ requestShorten();
+ }
+ };
+
+ const validateUrl = (value: string) => {
+ if (!value) {
+ return "URL is required";
+ }
+ try {
+ new URL(value);
+ return true;
+ } catch {
+ return "Please enter a valid URL starting with http:// or https://";
+ }
+ };
+
+ const { onChange, ...registerProps } = register("url", {
+ required: "URL is required",
+ validate: validateUrl,
+ });
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/url-shortener.tsx b/frontend/src/components/url-shortener.tsx
index dac7d08..753248c 100644
--- a/frontend/src/components/url-shortener.tsx
+++ b/frontend/src/components/url-shortener.tsx
@@ -1,174 +1,22 @@
"use client";
-import { CheckCircle2, Copy, Link2, Loader2, QrCode } from "lucide-react";
-import Image from "next/image";
import { useState } from "react";
-import { toast } from "sonner";
-import { shortenUrl } from "@/app/actions";
-import { Button } from "@/components/ui/button";
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+import { UrlDialog } from "./url-dialog";
+import { UrlInput } from "./url-input";
export function UrlShortener() {
const [url, setUrl] = useState("");
- const [shortUrl, setShortUrl] = useState("");
- const [isLoading, setIsLoading] = useState(false);
- const [dialogOpen, setDialogOpen] = useState(false);
- const [copied, setCopied] = useState(false);
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- try {
- new URL(url);
- } catch {
- toast.error("Invalid URL", {
- description:
- "Please enter a valid URL starting with http:// or https://",
- });
- return;
- }
-
- setIsLoading(true);
-
- try {
- const result = await shortenUrl(url);
- setShortUrl(result.shortUrl);
- setDialogOpen(true);
- setCopied(false);
- } catch {
- toast.error("Error", {
- description: "Failed to shorten URL. Please try again.",
- });
- } finally {
- setIsLoading(false);
- }
- };
-
- const handleCopy = async (text: string) => {
- try {
- await navigator.clipboard.writeText(text);
- setCopied(true);
- toast.success("Copied!", {
- description: "Short URL copied to clipboard",
- });
- setTimeout(() => setCopied(false), 2000);
- } catch {
- toast.error("Copy failed", {
- description: "Please copy the URL manually",
- });
- }
+ const requestShorten = async () => {
+ // const response = await shortenUrl(url);
+ console.log("banana");
};
return (
- Shorten Your Loooong Links :)
+
+
+ Shorten Your Loooong Links :)
+
-
+
lnk is an efficient and easy-to-use URL shortening service that streamlines your online experience.
diff --git a/frontend/src/components/url-dialog.tsx b/frontend/src/components/url-dialog.tsx new file mode 100644 index 0000000..8dc351a --- /dev/null +++ b/frontend/src/components/url-dialog.tsx @@ -0,0 +1,89 @@ +import { + Dialog, + DialogContent, + DialogDescription, + DialogTitle, +} from "@radix-ui/react-dialog"; +import { CheckCircle2, Copy, QrCode } from "lucide-react"; +import Image from "next/image"; +import { useState } from "react"; +import { Button } from "./ui/button"; +import { DialogHeader } from "./ui/dialog"; +import { Input } from "./ui/input"; + +export function UrlDialog() { + const [dialogOpen, setDialogOpen] = useState(false); + const [shortUrl, setShortUrl] = useState(""); + const [url, setUrl] = useState(""); + const [copied, setCopied] = useState(false); + + return ( + + ); +} diff --git a/frontend/src/components/url-input.tsx b/frontend/src/components/url-input.tsx new file mode 100644 index 0000000..bcc2251 --- /dev/null +++ b/frontend/src/components/url-input.tsx @@ -0,0 +1,78 @@ +import { LinkIcon } from "lucide-react"; +import { useForm } from "react-hook-form"; +import { Button } from "./ui/button"; +import { Input } from "./ui/input"; + +interface UrlInputProps { + url: string; + setUrl: (url: string) => void; + requestShorten: () => void; +} + +interface FormData { + url: string; +} + +export function UrlInput({ url, setUrl, requestShorten }: UrlInputProps) { + const { + register, + handleSubmit, + formState: { isValid }, + } = useForm
-
);
}
-
-
-
-
+