From 1c73c999ac78d2e6d3a8c68b4e17058046326f55 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sat, 12 Jul 2025 14:55:19 +0900 Subject: feat(frontend): create pages and components --- frontend/src/components/AddFeedForm.tsx | 89 +++++++++++++++++++ frontend/src/components/ArticleList.tsx | 137 +++++++++++++++++++++++++++++ frontend/src/components/FeedList.tsx | 150 ++++++++++++++++++++++++++++++++ frontend/src/components/Layout.tsx | 15 ++++ frontend/src/components/MenuItem.tsx | 28 ++++++ frontend/src/components/Navigation.tsx | 28 ++++++ frontend/src/components/index.ts | 6 ++ 7 files changed, 453 insertions(+) create mode 100644 frontend/src/components/AddFeedForm.tsx create mode 100644 frontend/src/components/ArticleList.tsx create mode 100644 frontend/src/components/FeedList.tsx create mode 100644 frontend/src/components/Layout.tsx create mode 100644 frontend/src/components/MenuItem.tsx create mode 100644 frontend/src/components/Navigation.tsx create mode 100644 frontend/src/components/index.ts (limited to 'frontend/src/components') diff --git a/frontend/src/components/AddFeedForm.tsx b/frontend/src/components/AddFeedForm.tsx new file mode 100644 index 0000000..79e26e3 --- /dev/null +++ b/frontend/src/components/AddFeedForm.tsx @@ -0,0 +1,89 @@ +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(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 add 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 ( +
+
+

+ Add New Feed +

+
+
+ 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 && ( +

+ Please enter a valid URL (http:// or https://) +

+ )} + {error &&

{error}

} +
+ +
+
+
+ ); +} diff --git a/frontend/src/components/ArticleList.tsx b/frontend/src/components/ArticleList.tsx new file mode 100644 index 0000000..ee7b187 --- /dev/null +++ b/frontend/src/components/ArticleList.tsx @@ -0,0 +1,137 @@ +import { + faCheck, + faCircle, + faExternalLinkAlt, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useMutation } from "urql"; +import type { + GetReadArticlesQuery, + GetUnreadArticlesQuery, +} from "../graphql/generated/graphql"; +import { + MarkArticleReadDocument, + MarkArticleUnreadDocument, +} from "../graphql/generated/graphql"; + +interface Props { + articles: NonNullable< + | GetUnreadArticlesQuery["unreadArticles"] + | GetReadArticlesQuery["readArticles"] + >; + showReadStatus?: boolean; +} + +export function ArticleList({ articles, showReadStatus = true }: Props) { + const [, markArticleRead] = useMutation(MarkArticleReadDocument); + const [, markArticleUnread] = useMutation(MarkArticleUnreadDocument); + + const handleToggleRead = async ( + articleId: string, + isCurrentlyRead: boolean, + ) => { + if (isCurrentlyRead) { + await markArticleUnread({ id: articleId }); + } else { + await markArticleRead({ id: articleId }); + } + }; + + const handleArticleClick = async (article: (typeof articles)[0]) => { + // Open article in new tab and mark as read if it's unread + window.open(article.url, "_blank"); + if (!article.isRead) { + await markArticleRead({ id: article.id }); + } + }; + + if (articles.length === 0) { + return ( +
No articles found.
+ ); + } + + // Group articles by feed + const articlesByFeed = articles.reduce( + (acc, article) => { + const feedId = article.feed.id; + if (!acc[feedId]) { + acc[feedId] = { + feed: article.feed, + articles: [], + }; + } + acc[feedId].articles.push(article); + return acc; + }, + {} as Record< + string, + { feed: { id: string; title: string }; articles: typeof articles } + >, + ); + + return ( +
+ {Object.values(articlesByFeed).map(({ feed, articles: feedArticles }) => ( +
+

+ {feed.title} + + ({feedArticles.length} article + {feedArticles.length !== 1 ? "s" : ""}) + +

+
+ {feedArticles.map((article) => ( +
+ {showReadStatus && ( + + )} +
+ +
+
+ ))} +
+
+ ))} +
+ ); +} diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx new file mode 100644 index 0000000..7e46e78 --- /dev/null +++ b/frontend/src/components/FeedList.tsx @@ -0,0 +1,150 @@ +import { + faCheckDouble, + faCircle, + faTrash, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useMutation, useQuery } from "urql"; +import { + GetFeedsDocument, + MarkFeedReadDocument, + MarkFeedUnreadDocument, + RemoveFeedDocument, +} from "../graphql/generated/graphql"; + +interface Props { + onFeedDeleted?: () => void; + selectedFeeds?: Set; + onSelectFeed?: (feedId: string, selected: boolean) => void; +} + +export function FeedList({ + onFeedDeleted, + selectedFeeds, + onSelectFeed, +}: Props) { + const [{ data, fetching, error }] = useQuery({ + query: GetFeedsDocument, + }); + + const [, markFeedRead] = useMutation(MarkFeedReadDocument); + const [, markFeedUnread] = useMutation(MarkFeedUnreadDocument); + const [, removeFeed] = useMutation(RemoveFeedDocument); + + const handleMarkAllRead = async (feedId: string) => { + await markFeedRead({ id: feedId }); + }; + + const handleMarkAllUnread = async (feedId: string) => { + await markFeedUnread({ id: feedId }); + }; + + const handleDeleteFeed = async (feedId: string) => { + const confirmed = window.confirm( + "Are you sure you want to delete this feed?", + ); + if (confirmed) { + await removeFeed({ id: feedId }); + onFeedDeleted?.(); + } + }; + + if (fetching) return
Loading feeds...
; + if (error) + return
Error: {error.message}
; + if (!data?.feeds || data.feeds.length === 0) { + return
No feeds added yet.
; + } + + return ( +
+ {data.feeds.map((feed) => { + const unreadCount = feed.articles.filter((a) => !a.isRead).length; + const totalCount = feed.articles.length; + + const isSelected = selectedFeeds?.has(feed.id) ?? false; + + return ( +
+
+ {selectedFeeds && onSelectFeed && ( +
+ onSelectFeed(feed.id, e.target.checked)} + className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500" + /> +
+

+ {feed.title} +

+

{feed.url}

+
+ + {unreadCount} unread / {totalCount} total + + + Last fetched:{" "} + {new Date(feed.fetchedAt).toLocaleString()} + +
+
+
+ )} + {(!selectedFeeds || !onSelectFeed) && ( +
+

+ {feed.title} +

+

{feed.url}

+
+ + {unreadCount} unread / {totalCount} total + + + Last fetched: {new Date(feed.fetchedAt).toLocaleString()} + +
+
+ )} +
+ + + +
+
+
+ ); + })} +
+ ); +} diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx new file mode 100644 index 0000000..09a0eb4 --- /dev/null +++ b/frontend/src/components/Layout.tsx @@ -0,0 +1,15 @@ +import type { ReactNode } from "react"; +import { Navigation } from "./Navigation"; + +interface Props { + children: ReactNode; +} + +export function Layout({ children }: Props) { + return ( +
+ +
{children}
+
+ ); +} diff --git a/frontend/src/components/MenuItem.tsx b/frontend/src/components/MenuItem.tsx new file mode 100644 index 0000000..45358c8 --- /dev/null +++ b/frontend/src/components/MenuItem.tsx @@ -0,0 +1,28 @@ +import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Link, useLocation } from "wouter"; + +interface Props { + path: string; + label: string; + icon: IconDefinition; +} + +export function MenuItem({ path, label, icon }: Props) { + const [location] = useLocation(); + const isActive = location === path; + + return ( + + + {label} + + ); +} diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx new file mode 100644 index 0000000..f5771df --- /dev/null +++ b/frontend/src/components/Navigation.tsx @@ -0,0 +1,28 @@ +import { + faBookOpen, + faCircleCheck, + faGear, +} from "@fortawesome/free-solid-svg-icons"; +import { Link } from "wouter"; +import { MenuItem } from "./MenuItem"; + +export function Navigation() { + return ( + + ); +} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts new file mode 100644 index 0000000..8253800 --- /dev/null +++ b/frontend/src/components/index.ts @@ -0,0 +1,6 @@ +export { AddFeedForm } from "./AddFeedForm"; +export { ArticleList } from "./ArticleList"; +export { FeedList } from "./FeedList"; +export { Layout } from "./Layout"; +export { MenuItem } from "./MenuItem"; +export { Navigation } from "./Navigation"; -- cgit v1.2.3-70-g09d2