blob: 519f9e3280e1c3e8b2d20e6c5abcbced6d04e6b0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import { useMutation } from "urql";
import { AddFeedDocument } from "../graphql/generated/graphql";
interface Props {
onFeedAdded?: () => void;
}
export function AddFeedForm({ onFeedAdded }: Props) {
const [url, setUrl] = useState("");
const [error, setError] = useState<string | null>(null);
const [{ fetching }, addFeed] = useMutation(AddFeedDocument);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!url.trim()) return;
setError(null);
try {
const result = await addFeed({ url: url.trim() });
if (result.error) {
setError(result.error.message);
} else if (result.data) {
setUrl("");
onFeedAdded?.();
}
} catch (error) {
setError(
error instanceof Error ? error.message : "Failed to subscribe to feed",
);
}
};
const isValidUrl = (urlString: string) => {
try {
const url = new URL(urlString);
return url.protocol === "http:" || url.protocol === "https:";
} catch {
return false;
}
};
const isUrlValid = !url || isValidUrl(url);
return (
<form onSubmit={handleSubmit} className="space-y-4 p-4">
<div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
Subscribe to New Feed
</h3>
<div className="flex gap-2">
<div className="flex-1">
<input
type="url"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="https://example.com/feed.xml"
className={`w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 ${
isUrlValid
? "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
: "border-red-300 focus:border-red-500 focus:ring-red-500"
}`}
disabled={fetching}
/>
{!isUrlValid && (
<p className="mt-1 text-sm text-red-600">
Please enter a valid URL (http:// or https://)
</p>
)}
{error && <p className="mt-1 text-sm text-red-600">{error}</p>}
</div>
<button
type="submit"
disabled={fetching || !url.trim() || !isUrlValid}
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed"
>
{fetching ? (
<FontAwesomeIcon icon={faSpinner} spin className="mr-2" />
) : (
<FontAwesomeIcon icon={faPlus} className="mr-2" />
)}
Subscribe
</button>
</div>
</div>
</form>
);
}
|
