diff options
Diffstat (limited to 'frontend/src')
23 files changed, 430 insertions, 340 deletions
diff --git a/frontend/src/atoms/articles.ts b/frontend/src/atoms/articles.ts new file mode 100644 index 0000000..46c57a4 --- /dev/null +++ b/frontend/src/atoms/articles.ts @@ -0,0 +1,46 @@ +import type { InfiniteData } from "@tanstack/query-core"; +import { atom } from "jotai"; +import { atomWithInfiniteQuery } from "jotai-tanstack-query"; +import type { components } from "../api/generated"; +import { api } from "../services/api-client"; + +type ArticleConnection = components["schemas"]["ArticleConnection"]; + +export const articleViewAtom = atom<"read" | "unread">("unread"); +export const articleFeedFilterAtom = atom<string | null>(null); + +export const articlesInfiniteAtom = atomWithInfiniteQuery< + ArticleConnection, + Error, + InfiniteData<ArticleConnection, string | null>, + string[], + string | null +>((get) => { + const view = get(articleViewAtom); + const feedId = get(articleFeedFilterAtom); + + return { + queryKey: ["articles", view, feedId ?? "all"], + queryFn: async ({ pageParam }) => { + const query: { feedId?: string; after?: string } = {}; + if (feedId) query.feedId = feedId; + if (pageParam) query.after = pageParam; + + if (view === "read") { + const { data } = await api.GET("/api/articles/read", { + params: { query }, + }); + return data ?? { articles: [], pageInfo: { hasNextPage: false } }; + } + const { data } = await api.GET("/api/articles/unread", { + params: { query }, + }); + return data ?? { articles: [], pageInfo: { hasNextPage: false } }; + }, + initialPageParam: null as string | null, + getNextPageParam: (lastPage: ArticleConnection) => + lastPage.pageInfo.hasNextPage + ? (lastPage.pageInfo.endCursor ?? null) + : null, + }; +}); diff --git a/frontend/src/atoms/auth.ts b/frontend/src/atoms/auth.ts new file mode 100644 index 0000000..dd6f06c --- /dev/null +++ b/frontend/src/atoms/auth.ts @@ -0,0 +1,46 @@ +import { atom, useSetAtom } from "jotai"; +import { useEffect } from "react"; +import type { components } from "../api/generated"; +import { api } from "../services/api-client"; + +type User = components["schemas"]["User"]; + +export const userAtom = atom<User | null>(null); +export const authLoadingAtom = atom<boolean>(true); +export const isLoggedInAtom = atom<boolean>((get) => get(userAtom) !== null); + +export const loginAtom = atom( + null, + async ( + _get, + set, + { username, password }: { username: string; password: string }, + ) => { + const { data, error } = await api.POST("/api/auth/login", { + body: { username, password }, + }); + if (error) { + throw new Error(error.message); + } + set(userAtom, data.user); + }, +); + +export const logoutAtom = atom(null, async (_get, set) => { + await api.POST("/api/auth/logout"); + set(userAtom, null); +}); + +export function useAuthInit() { + const setUser = useSetAtom(userAtom); + const setAuthLoading = useSetAtom(authLoadingAtom); + + useEffect(() => { + api.GET("/api/auth/me").then(({ data }) => { + if (data) { + setUser(data); + } + setAuthLoading(false); + }); + }, [setUser, setAuthLoading]); +} diff --git a/frontend/src/atoms/feeds.ts b/frontend/src/atoms/feeds.ts new file mode 100644 index 0000000..5c39735 --- /dev/null +++ b/frontend/src/atoms/feeds.ts @@ -0,0 +1,10 @@ +import { atomWithSuspenseQuery } from "jotai-tanstack-query"; +import { api } from "../services/api-client"; + +export const feedsAtom = atomWithSuspenseQuery(() => ({ + queryKey: ["feeds"], + queryFn: async () => { + const { data } = await api.GET("/api/feeds"); + return data ?? []; + }, +})); diff --git a/frontend/src/atoms/index.ts b/frontend/src/atoms/index.ts new file mode 100644 index 0000000..fdcf7e9 --- /dev/null +++ b/frontend/src/atoms/index.ts @@ -0,0 +1,15 @@ +export { + articleFeedFilterAtom, + articlesInfiniteAtom, + articleViewAtom, +} from "./articles"; +export { + authLoadingAtom, + isLoggedInAtom, + loginAtom, + logoutAtom, + useAuthInit, + userAtom, +} from "./auth"; + +export { feedsAtom } from "./feeds"; diff --git a/frontend/src/components/AddFeedForm.tsx b/frontend/src/components/AddFeedForm.tsx index a60d86d..96afd39 100644 --- a/frontend/src/components/AddFeedForm.tsx +++ b/frontend/src/components/AddFeedForm.tsx @@ -1,13 +1,10 @@ import { faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useState } from "react"; +import { queryClient } from "../queryClient"; import { api } from "../services/api-client"; -interface Props { - onFeedAdded?: () => void; -} - -export function AddFeedForm({ onFeedAdded }: Props) { +export function AddFeedForm() { const [url, setUrl] = useState(""); const [error, setError] = useState<string | null>(null); const [fetching, setFetching] = useState(false); @@ -27,7 +24,7 @@ export function AddFeedForm({ onFeedAdded }: Props) { setError(fetchError.message); } else if (data) { setUrl(""); - onFeedAdded?.(); + queryClient.invalidateQueries({ queryKey: ["feeds"] }); } } catch (error) { setError( diff --git a/frontend/src/components/ArticleItem.tsx b/frontend/src/components/ArticleItem.tsx index 37664a9..e109455 100644 --- a/frontend/src/components/ArticleItem.tsx +++ b/frontend/src/components/ArticleItem.tsx @@ -1,6 +1,7 @@ import { faCheck, faCircle } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { components } from "../api/generated"; +import { queryClient } from "../queryClient"; import { api } from "../services/api-client"; type Article = components["schemas"]["Article"]; @@ -11,6 +12,11 @@ interface Props { } export function ArticleItem({ article, onReadChange }: Props) { + const invalidate = () => { + queryClient.invalidateQueries({ queryKey: ["feeds"] }); + queryClient.invalidateQueries({ queryKey: ["articles"] }); + }; + const handleToggleRead = async ( articleId: string, isCurrentlyRead: boolean, @@ -27,6 +33,7 @@ export function ArticleItem({ article, onReadChange }: Props) { params: { path: { articleId } }, }); } + invalidate(); }; const handleArticleClick = async (article: Article) => { @@ -36,6 +43,7 @@ export function ArticleItem({ article, onReadChange }: Props) { await api.POST("/api/articles/{articleId}/read", { params: { path: { articleId: article.id } }, }); + invalidate(); } }; diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..7f06085 --- /dev/null +++ b/frontend/src/components/ErrorBoundary.tsx @@ -0,0 +1,42 @@ +import { Component, type ReactNode } from "react"; + +interface ErrorBoundaryProps { + children: ReactNode; + fallback?: ReactNode; +} + +interface ErrorBoundaryState { + hasError: boolean; + error: Error | null; +} + +export class ErrorBoundary extends Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { + override state: ErrorBoundaryState = { hasError: false, error: null }; + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { hasError: true, error }; + } + + override render() { + if (this.state.hasError) { + return this.props.fallback ?? <ErrorFallback error={this.state.error} />; + } + return this.props.children; + } +} + +function ErrorFallback({ error }: { error: Error | null }) { + return ( + <div + role="alert" + className="rounded-lg border border-red-200 bg-red-50 p-4" + > + <span className="text-sm text-red-600"> + {error?.message ?? "An error occurred"} + </span> + </div> + ); +} diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx index 1fb9001..adc7623 100644 --- a/frontend/src/components/FeedItem.tsx +++ b/frontend/src/components/FeedItem.tsx @@ -1,29 +1,33 @@ import { faCheck, faCircle, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { components } from "../api/generated"; +import { queryClient } from "../queryClient"; import { api } from "../services/api-client"; type Feed = components["schemas"]["Feed"]; interface Props { feed: Feed; - onFeedUnsubscribed?: () => void; - onFeedChanged?: () => void; } -export function FeedItem({ feed, onFeedUnsubscribed, onFeedChanged }: Props) { +export function FeedItem({ feed }: Props) { + const invalidate = () => { + queryClient.invalidateQueries({ queryKey: ["feeds"] }); + queryClient.invalidateQueries({ queryKey: ["articles"] }); + }; + const handleMarkAllRead = async (feedId: string) => { await api.POST("/api/feeds/{feedId}/read", { params: { path: { feedId } }, }); - onFeedChanged?.(); + invalidate(); }; const handleMarkAllUnread = async (feedId: string) => { await api.POST("/api/feeds/{feedId}/unread", { params: { path: { feedId } }, }); - onFeedChanged?.(); + invalidate(); }; const handleUnsubscribeFeed = async (feedId: string) => { @@ -34,7 +38,7 @@ export function FeedItem({ feed, onFeedUnsubscribed, onFeedChanged }: Props) { await api.DELETE("/api/feeds/{feedId}", { params: { path: { feedId } }, }); - onFeedUnsubscribed?.(); + invalidate(); } }; diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx index a3ba124..364444f 100644 --- a/frontend/src/components/FeedList.tsx +++ b/frontend/src/components/FeedList.tsx @@ -1,58 +1,10 @@ -import { useCallback, useEffect, useState } from "react"; -import type { components } from "../api/generated"; -import { api } from "../services/api-client"; +import { useAtomValue } from "jotai"; +import { feedsAtom } from "../atoms"; import { FeedItem } from "./FeedItem"; -type Feed = components["schemas"]["Feed"]; +export function FeedList() { + const { data: feeds } = useAtomValue(feedsAtom); -interface Props { - onFeedUnsubscribed?: () => void; -} - -export function FeedList({ onFeedUnsubscribed }: Props) { - const [feeds, setFeeds] = useState<Feed[]>([]); - const [fetching, setFetching] = useState(true); - const [error, setError] = useState<string | null>(null); - - const fetchFeeds = useCallback(async () => { - setFetching(true); - const { data } = await api.GET("/api/feeds"); - if (data) { - setFeeds(data); - setError(null); - } else { - setError("Failed to load feeds"); - } - setFetching(false); - }, []); - - useEffect(() => { - fetchFeeds(); - }, [fetchFeeds]); - - const handleFeedUnsubscribed = () => { - fetchFeeds(); - onFeedUnsubscribed?.(); - }; - - const handleFeedChanged = () => { - fetchFeeds(); - }; - - if (fetching) { - return ( - <div className="py-8 text-center"> - <p className="text-sm text-stone-400">Loading feeds...</p> - </div> - ); - } - if (error) { - return ( - <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600"> - Error: {error} - </div> - ); - } if (feeds.length === 0) { return ( <div className="py-8 text-center"> @@ -64,12 +16,7 @@ export function FeedList({ onFeedUnsubscribed }: Props) { return ( <div className="space-y-3"> {feeds.map((feed) => ( - <FeedItem - key={feed.id} - feed={feed} - onFeedUnsubscribed={handleFeedUnsubscribed} - onFeedChanged={handleFeedChanged} - /> + <FeedItem key={feed.id} feed={feed} /> ))} </div> ); diff --git a/frontend/src/components/FeedSidebar.tsx b/frontend/src/components/FeedSidebar.tsx index 4f50566..6c385c5 100644 --- a/frontend/src/components/FeedSidebar.tsx +++ b/frontend/src/components/FeedSidebar.tsx @@ -1,9 +1,6 @@ -import { useCallback, useEffect, useState } from "react"; +import { useAtomValue } from "jotai"; import { useLocation, useSearch } from "wouter"; -import type { components } from "../api/generated"; -import { api } from "../services/api-client"; - -type Feed = components["schemas"]["Feed"]; +import { feedsAtom } from "../atoms"; interface Props { basePath: string; @@ -15,21 +12,7 @@ export function FeedSidebar({ basePath }: Props) { const params = new URLSearchParams(search); const selectedFeedId = params.get("feed"); - const [feeds, setFeeds] = useState<Feed[]>([]); - const [fetching, setFetching] = useState(true); - - const fetchFeeds = useCallback(async () => { - setFetching(true); - const { data } = await api.GET("/api/feeds"); - if (data) { - setFeeds(data); - } - setFetching(false); - }, []); - - useEffect(() => { - fetchFeeds(); - }, [fetchFeeds]); + const { data: feeds } = useAtomValue(feedsAtom); const handleSelect = (feedId: string | null) => { if (feedId) { @@ -58,9 +41,6 @@ export function FeedSidebar({ basePath }: Props) { All feeds </button> </li> - {fetching && ( - <li className="px-3 py-1.5 text-xs text-stone-400">Loading...</li> - )} {feeds.map((feed) => ( <li key={feed.id}> <button diff --git a/frontend/src/components/LoadingSpinner.tsx b/frontend/src/components/LoadingSpinner.tsx new file mode 100644 index 0000000..2e47f28 --- /dev/null +++ b/frontend/src/components/LoadingSpinner.tsx @@ -0,0 +1,18 @@ +import { faSpinner } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +interface LoadingSpinnerProps { + className?: string; +} + +export function LoadingSpinner({ className = "" }: LoadingSpinnerProps) { + return ( + <div className={`flex items-center justify-center py-12 ${className}`}> + <FontAwesomeIcon + icon={faSpinner} + className="h-8 w-8 animate-spin text-stone-400" + aria-hidden="true" + /> + </div> + ); +} diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx index 1f99cd6..3029e1d 100644 --- a/frontend/src/components/Navigation.tsx +++ b/frontend/src/components/Navigation.tsx @@ -5,12 +5,14 @@ import { faRightFromBracket, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useAtomValue, useSetAtom } from "jotai"; import { Link } from "wouter"; -import { useAuth } from "../contexts/AuthContext"; +import { isLoggedInAtom, logoutAtom } from "../atoms"; import { MenuItem } from "./MenuItem"; export function Navigation() { - const { logout, isLoggedIn } = useAuth(); + const isLoggedIn = useAtomValue(isLoggedInAtom); + const logout = useSetAtom(logoutAtom); const handleLogout = async () => { await logout(); diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx index e03a4f0..8dd191c 100644 --- a/frontend/src/components/ProtectedRoute.tsx +++ b/frontend/src/components/ProtectedRoute.tsx @@ -1,13 +1,15 @@ +import { useAtomValue } from "jotai"; import type { ReactNode } from "react"; import { Redirect } from "wouter"; -import { useAuth } from "../contexts/AuthContext"; +import { authLoadingAtom, isLoggedInAtom } from "../atoms"; interface Props { children: ReactNode; } export function ProtectedRoute({ children }: Props) { - const { isLoggedIn, isLoading } = useAuth(); + const isLoggedIn = useAtomValue(isLoggedInAtom); + const isLoading = useAtomValue(authLoadingAtom); if (isLoading) { return ( diff --git a/frontend/src/components/StoreInitializer.tsx b/frontend/src/components/StoreInitializer.tsx new file mode 100644 index 0000000..b55c56a --- /dev/null +++ b/frontend/src/components/StoreInitializer.tsx @@ -0,0 +1,11 @@ +import type { ReactNode } from "react"; +import { useAuthInit } from "../atoms"; + +interface StoreInitializerProps { + children: ReactNode; +} + +export function StoreInitializer({ children }: StoreInitializerProps) { + useAuthInit(); + return <>{children}</>; +} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index c0797b4..e10b0b8 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -1,8 +1,11 @@ export { AddFeedForm } from "./AddFeedForm"; export { ArticleList } from "./ArticleList"; +export { ErrorBoundary } from "./ErrorBoundary"; export { FeedList } from "./FeedList"; export { FeedSidebar } from "./FeedSidebar"; export { Layout } from "./Layout"; +export { LoadingSpinner } from "./LoadingSpinner"; export { MenuItem } from "./MenuItem"; export { Navigation } from "./Navigation"; export { ProtectedRoute } from "./ProtectedRoute"; +export { StoreInitializer } from "./StoreInitializer"; diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx index 9b157cb..e69de29 100644 --- a/frontend/src/contexts/AuthContext.tsx +++ b/frontend/src/contexts/AuthContext.tsx @@ -1,74 +0,0 @@ -import { - createContext, - type ReactNode, - useCallback, - useContext, - useEffect, - useState, -} from "react"; -import { api } from "../services/api-client"; - -type LoginResult = { success: true } | { success: false; error: string }; - -interface AuthContextType { - isLoggedIn: boolean; - isLoading: boolean; - login: (username: string, password: string) => Promise<LoginResult>; - logout: () => Promise<void>; -} - -const AuthContext = createContext<AuthContextType | undefined>(undefined); - -export function AuthProvider({ children }: { children: ReactNode }) { - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [isLoading, setIsLoading] = useState(true); - - const checkAuth = useCallback(async () => { - const { data } = await api.GET("/api/auth/me"); - setIsLoggedIn(!!data); - setIsLoading(false); - }, []); - - useEffect(() => { - checkAuth(); - }, [checkAuth]); - - const login = async ( - username: string, - password: string, - ): Promise<LoginResult> => { - const { data, error } = await api.POST("/api/auth/login", { - body: { username, password }, - }); - - if (error) { - return { success: false, error: error.message }; - } - - if (data?.user) { - setIsLoggedIn(true); - return { success: true }; - } - - return { success: false, error: "Invalid username or password" }; - }; - - const logout = async () => { - await api.POST("/api/auth/logout"); - setIsLoggedIn(false); - }; - - return ( - <AuthContext.Provider value={{ isLoggedIn, isLoading, login, logout }}> - {children} - </AuthContext.Provider> - ); -} - -export function useAuth() { - const context = useContext(AuthContext); - if (context === undefined) { - throw new Error("useAuth must be used within an AuthProvider"); - } - return context; -} diff --git a/frontend/src/hooks/usePaginatedArticles.ts b/frontend/src/hooks/usePaginatedArticles.ts index 5ddf888..e69de29 100644 --- a/frontend/src/hooks/usePaginatedArticles.ts +++ b/frontend/src/hooks/usePaginatedArticles.ts @@ -1,80 +0,0 @@ -import { useCallback, useEffect, useState } from "react"; -import type { components } from "../api/generated"; -import { api } from "../services/api-client"; - -export type ArticleType = components["schemas"]["Article"]; - -interface UsePaginatedArticlesOptions { - isReadView: boolean; - feedId: string | null; -} - -interface UsePaginatedArticlesResult { - articles: ArticleType[]; - hasNextPage: boolean; - loading: boolean; - loadingMore: boolean; - loadMore: () => void; - error: Error | null; -} - -export function usePaginatedArticles({ - isReadView, - feedId, -}: UsePaginatedArticlesOptions): UsePaginatedArticlesResult { - const [articles, setArticles] = useState<ArticleType[]>([]); - const [hasNextPage, setHasNextPage] = useState(false); - const [endCursor, setEndCursor] = useState<string | null>(null); - const [loading, setLoading] = useState(true); - const [loadingMore, setLoadingMore] = useState(false); - const [error, setError] = useState<Error | null>(null); - - const fetchArticles = useCallback( - async (after: string | null, append: boolean) => { - const query: { feedId?: string; after?: string } = {}; - if (feedId) query.feedId = feedId; - if (after) query.after = after; - - const endpoint = isReadView - ? "/api/articles/read" - : "/api/articles/unread"; - - const { data } = await api.GET(endpoint, { - params: { query }, - }); - - if (!data) { - setError(new Error("Failed to fetch articles")); - return; - } - - if (data) { - setArticles((prev) => - append ? [...prev, ...data.articles] : data.articles, - ); - setHasNextPage(data.pageInfo.hasNextPage); - setEndCursor(data.pageInfo.endCursor ?? null); - setError(null); - } - }, - [isReadView, feedId], - ); - - // Reset and fetch on feedId or view change - useEffect(() => { - setArticles([]); - setEndCursor(null); - setHasNextPage(false); - setLoading(true); - setError(null); - fetchArticles(null, false).finally(() => setLoading(false)); - }, [fetchArticles]); - - const loadMore = useCallback(() => { - if (!hasNextPage || loadingMore) return; - setLoadingMore(true); - fetchArticles(endCursor, true).finally(() => setLoadingMore(false)); - }, [fetchArticles, endCursor, hasNextPage, loadingMore]); - - return { articles, hasNextPage, loading, loadingMore, loadMore, error }; -} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index d1dd4d5..5333b77 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,14 +1,28 @@ -import { StrictMode } from "react"; +import { Provider, useStore } from "jotai/react"; +import { useHydrateAtoms } from "jotai/react/utils"; +import { queryClientAtom } from "jotai-tanstack-query"; +import { type ReactNode, StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import "./index.css"; import App from "./App.tsx"; -import { AuthProvider } from "./contexts/AuthContext"; +import { StoreInitializer } from "./components/StoreInitializer"; +import "./index.css"; +import { queryClient } from "./queryClient"; + +function HydrateQueryClient({ children }: { children: ReactNode }) { + const store = useStore(); + useHydrateAtoms([[queryClientAtom, queryClient]], { store }); + return <>{children}</>; +} // biome-ignore lint/style/noNonNullAssertion: root element is guaranteed to exist createRoot(document.getElementById("root")!).render( <StrictMode> - <AuthProvider> - <App /> - </AuthProvider> + <Provider> + <HydrateQueryClient> + <StoreInitializer> + <App /> + </StoreInitializer> + </HydrateQueryClient> + </Provider> </StrictMode>, ); diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 76a775a..7dc71e7 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -1,13 +1,14 @@ +import { useSetAtom } from "jotai"; import { useState } from "react"; import { useLocation } from "wouter"; -import { useAuth } from "../contexts/AuthContext"; +import { loginAtom } from "../atoms"; export function Login() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); - const { login } = useAuth(); + const login = useSetAtom(loginAtom); const [, setLocation] = useLocation(); const handleSubmit = async (e: React.FormEvent) => { @@ -15,13 +16,14 @@ export function Login() { setError(""); setIsLoading(true); - const result = await login(username, password); - if (result.success) { + try { + await login({ username, password }); setLocation("/"); - } else { - setError(result.error); + } catch (err) { + setError(err instanceof Error ? err.message : "Login failed"); + } finally { + setIsLoading(false); } - setIsLoading(false); }; return ( diff --git a/frontend/src/pages/ReadArticles.tsx b/frontend/src/pages/ReadArticles.tsx index 2538446..e231906 100644 --- a/frontend/src/pages/ReadArticles.tsx +++ b/frontend/src/pages/ReadArticles.tsx @@ -1,48 +1,91 @@ +import { useAtomValue, useSetAtom } from "jotai"; +import { Suspense, useEffect } from "react"; import { useSearch } from "wouter"; -import { ArticleList, FeedSidebar } from "../components"; -import { usePaginatedArticles } from "../hooks/usePaginatedArticles"; +import { + articleFeedFilterAtom, + articlesInfiniteAtom, + articleViewAtom, +} from "../atoms"; +import { ArticleList } from "../components/ArticleList"; +import { ErrorBoundary } from "../components/ErrorBoundary"; +import { FeedSidebar } from "../components/FeedSidebar"; +import { LoadingSpinner } from "../components/LoadingSpinner"; export function ReadArticles() { const search = useSearch(); const params = new URLSearchParams(search); const feedId = params.get("feed"); - const { articles, hasNextPage, loading, loadingMore, loadMore, error } = - usePaginatedArticles({ isReadView: true, feedId }); + const setView = useSetAtom(articleViewAtom); + const setFeedFilter = useSetAtom(articleFeedFilterAtom); + + useEffect(() => { + setView("read"); + setFeedFilter(feedId); + }, [feedId, setView, setFeedFilter]); return ( <div className="flex gap-8"> - <FeedSidebar basePath="/read" /> + <ErrorBoundary> + <Suspense fallback={<LoadingSpinner />}> + <FeedSidebar basePath="/read" /> + </Suspense> + </ErrorBoundary> <div className="min-w-0 flex-1"> - <div className="mb-6"> - <h1 className="text-xl font-semibold text-stone-900">Read</h1> - {!loading && articles.length > 0 && ( - <p className="mt-1 text-sm text-stone-400"> - {articles.length} - {hasNextPage ? "+" : ""} article - {articles.length !== 1 ? "s" : ""} - </p> - )} - </div> - {loading ? ( - <div className="py-8 text-center"> - <p className="text-sm text-stone-400">Loading read articles...</p> - </div> - ) : error ? ( - <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600"> - Error: {error.message} - </div> - ) : ( - <ArticleList - articles={articles} - isReadView={true} - isSingleFeed={!!feedId} - hasNextPage={hasNextPage} - loadingMore={loadingMore} - onLoadMore={loadMore} - /> - )} + <ReadArticleList feedId={feedId} /> </div> </div> ); } + +function ReadArticleList({ feedId }: { feedId: string | null }) { + const { + data, + isLoading, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + error, + } = useAtomValue(articlesInfiniteAtom); + + const articles = data?.pages.flatMap((page) => page.articles) ?? []; + + if (isLoading) { + return ( + <div className="py-8 text-center"> + <p className="text-sm text-stone-400">Loading read articles...</p> + </div> + ); + } + + if (error) { + return ( + <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600"> + Error: {error.message} + </div> + ); + } + + return ( + <> + <div className="mb-6"> + <h1 className="text-xl font-semibold text-stone-900">Read</h1> + {articles.length > 0 && ( + <p className="mt-1 text-sm text-stone-400"> + {articles.length} + {hasNextPage ? "+" : ""} article + {articles.length !== 1 ? "s" : ""} + </p> + )} + </div> + <ArticleList + articles={articles} + isReadView={true} + isSingleFeed={!!feedId} + hasNextPage={hasNextPage} + loadingMore={isFetchingNextPage} + onLoadMore={() => fetchNextPage()} + /> + </> + ); +} diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx index c179fab..48a1f8e 100644 --- a/frontend/src/pages/Settings.tsx +++ b/frontend/src/pages/Settings.tsx @@ -1,24 +1,25 @@ -import { useCallback, useState } from "react"; -import { AddFeedForm, FeedList } from "../components"; +import { Suspense } from "react"; +import { AddFeedForm } from "../components/AddFeedForm"; +import { ErrorBoundary } from "../components/ErrorBoundary"; +import { FeedList } from "../components/FeedList"; +import { LoadingSpinner } from "../components/LoadingSpinner"; export function Settings() { - const [refreshKey, setRefreshKey] = useState(0); - - const handleChange = useCallback(() => { - setRefreshKey((k) => k + 1); - }, []); - return ( <div className="mx-auto max-w-3xl space-y-10"> <section> - <AddFeedForm onFeedAdded={handleChange} /> + <AddFeedForm /> </section> <section> <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-stone-900"> Your Feeds </h2> - <FeedList key={refreshKey} onFeedUnsubscribed={handleChange} /> + <ErrorBoundary> + <Suspense fallback={<LoadingSpinner />}> + <FeedList /> + </Suspense> + </ErrorBoundary> </section> </div> ); diff --git a/frontend/src/pages/UnreadArticles.tsx b/frontend/src/pages/UnreadArticles.tsx index eade6fc..291f0ee 100644 --- a/frontend/src/pages/UnreadArticles.tsx +++ b/frontend/src/pages/UnreadArticles.tsx @@ -1,48 +1,91 @@ +import { useAtomValue, useSetAtom } from "jotai"; +import { Suspense, useEffect } from "react"; import { useSearch } from "wouter"; -import { ArticleList, FeedSidebar } from "../components"; -import { usePaginatedArticles } from "../hooks/usePaginatedArticles"; +import { + articleFeedFilterAtom, + articlesInfiniteAtom, + articleViewAtom, +} from "../atoms"; +import { ArticleList } from "../components/ArticleList"; +import { ErrorBoundary } from "../components/ErrorBoundary"; +import { FeedSidebar } from "../components/FeedSidebar"; +import { LoadingSpinner } from "../components/LoadingSpinner"; export function UnreadArticles() { const search = useSearch(); const params = new URLSearchParams(search); const feedId = params.get("feed"); - const { articles, hasNextPage, loading, loadingMore, loadMore, error } = - usePaginatedArticles({ isReadView: false, feedId }); + const setView = useSetAtom(articleViewAtom); + const setFeedFilter = useSetAtom(articleFeedFilterAtom); + + useEffect(() => { + setView("unread"); + setFeedFilter(feedId); + }, [feedId, setView, setFeedFilter]); return ( <div className="flex gap-8"> - <FeedSidebar basePath="/unread" /> + <ErrorBoundary> + <Suspense fallback={<LoadingSpinner />}> + <FeedSidebar basePath="/unread" /> + </Suspense> + </ErrorBoundary> <div className="min-w-0 flex-1"> - <div className="mb-6"> - <h1 className="text-xl font-semibold text-stone-900">Unread</h1> - {!loading && articles.length > 0 && ( - <p className="mt-1 text-sm text-stone-400"> - {articles.length} - {hasNextPage ? "+" : ""} article - {articles.length !== 1 ? "s" : ""} to read - </p> - )} - </div> - {loading ? ( - <div className="py-8 text-center"> - <p className="text-sm text-stone-400">Loading unread articles...</p> - </div> - ) : error ? ( - <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600"> - Error: {error.message} - </div> - ) : ( - <ArticleList - articles={articles} - isReadView={false} - isSingleFeed={!!feedId} - hasNextPage={hasNextPage} - loadingMore={loadingMore} - onLoadMore={loadMore} - /> - )} + <UnreadArticleList feedId={feedId} /> </div> </div> ); } + +function UnreadArticleList({ feedId }: { feedId: string | null }) { + const { + data, + isLoading, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + error, + } = useAtomValue(articlesInfiniteAtom); + + const articles = data?.pages.flatMap((page) => page.articles) ?? []; + + if (isLoading) { + return ( + <div className="py-8 text-center"> + <p className="text-sm text-stone-400">Loading unread articles...</p> + </div> + ); + } + + if (error) { + return ( + <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600"> + Error: {error.message} + </div> + ); + } + + return ( + <> + <div className="mb-6"> + <h1 className="text-xl font-semibold text-stone-900">Unread</h1> + {articles.length > 0 && ( + <p className="mt-1 text-sm text-stone-400"> + {articles.length} + {hasNextPage ? "+" : ""} article + {articles.length !== 1 ? "s" : ""} to read + </p> + )} + </div> + <ArticleList + articles={articles} + isReadView={false} + isSingleFeed={!!feedId} + hasNextPage={hasNextPage} + loadingMore={isFetchingNextPage} + onLoadMore={() => fetchNextPage()} + /> + </> + ); +} diff --git a/frontend/src/queryClient.ts b/frontend/src/queryClient.ts new file mode 100644 index 0000000..8743543 --- /dev/null +++ b/frontend/src/queryClient.ts @@ -0,0 +1,10 @@ +import { QueryClient } from "@tanstack/query-core"; + +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 0, + retry: false, + }, + }, +}); |