frontend/src/pages/Settings.tsx


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

import { useQuery } from "urql";
import { AddFeedForm, FeedList } from "../components";
import { GetFeedsDocument } from "../graphql/generated/graphql";

export function Settings() {
	const [, refetchFeeds] = useQuery({
		query: GetFeedsDocument,
	});

	const handleFeedAdded = () => {
		refetchFeeds();
	};

	const handleFeedUnsubscribed = () => {
		refetchFeeds();
	};

	return (
		<div className="mx-auto max-w-3xl space-y-10">
			<section>
				<AddFeedForm onFeedAdded={handleFeedAdded} />
			</section>

			<section>
				<h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-stone-900">
					Your Feeds
				</h2>
				<FeedList onFeedUnsubscribed={handleFeedUnsubscribed} />
			</section>
		</div>
	);
}