✨ feat: move from MPA to SPA using TanStack Router (#17)

recally-io · Jan 2, 2025 · 2035326 · 2035326
1 parent ca1769e
commit 2035326
Show file tree

Hide file tree

Showing 35 changed files with 637 additions and 208 deletions.
diff --git a/internal/pkg/auth/oauth-provider.go b/internal/pkg/auth/oauth-provider.go
@@ -64,7 +64,7 @@ func (p *oAuthProvider) GetConfig() *oauth2.Config {
 			ClientID:     p.cfg.Key,
 			ClientSecret: p.cfg.Secret,
 			Endpoint:     p.endpoint,
-			RedirectURL:  fmt.Sprintf("%s/auth.html", config.Settings.Service.Fqdn),
+			RedirectURL:  fmt.Sprintf("%s/auth/oauth/%s/callback", config.Settings.Service.Fqdn, p.Name),
 			Scopes:       append(p.defaultScopes, p.cfg.Scopes...),
 		}
 	}

diff --git a/internal/port/httpserver/router.go b/internal/port/httpserver/router.go
@@ -2,7 +2,6 @@ package httpserver
 
 import (
 	"net/http"
-	"recally/internal/pkg/logger"
 	"recally/web"
 
 	_ "recally/docs"
@@ -49,16 +48,48 @@ func (s *Service) registerRouters() {
 	// Swagger
 	e.GET("/swagger/*", echoSwagger.WrapHandler)
 
-	// web pages
-	logger.Default.Debug("Using static files as frontend")
+	// Web UI
+	s.registerWebUIRouters(e)
+}
+
+func (s *Service) registerWebUIRouters(e *echo.Echo) {
+	// manifest.webmanifest for PWA
 	e.GET("/manifest.webmanifest", func(c echo.Context) error {
 		file, err := web.StaticHttpFS.Open("manifest.webmanifest")
 		if err != nil {
 			return err
 		}
 		defer file.Close()
 		c.Response().Header().Set("Content-Type", "application/manifest+json")
+		c.Response().Header().Set("Cache-Control", "public, max-age=86400") // Cache for 1 day
 		return c.Stream(http.StatusOK, "application/manifest+json", file)
 	})
-	e.GET("/*", echo.WrapHandler(http.FileServer(web.StaticHttpFS)))
+
+	e.GET("/assets/*", func(c echo.Context) error {
+		c.Response().Header().Set("Cache-Control", "public, max-age=86400") // Cache for 1 day
+		return echo.WrapHandler(http.FileServer(web.StaticHttpFS))(c)
+	})
+
+	// Serve static files for SPA, if there is a static file, serve it, otherwise serve index.html
+	e.GET("/*", func(c echo.Context) error {
+		path := c.Param("*")
+		if path != "" {
+			// Try to open the requested file
+			if file, err := web.StaticHttpFS.Open(path); err == nil {
+				defer file.Close()
+				// Add cache control for static assets
+				return echo.WrapHandler(http.FileServer(web.StaticHttpFS))(c)
+			}
+		}
+
+		// If file not found, serve index.html
+		file, err := web.StaticHttpFS.Open("index.html")
+		if err != nil {
+			return err
+		}
+		defer file.Close()
+		// No cache for index.html to ensure latest version
+		c.Response().Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+		return c.Stream(http.StatusOK, "text/html", file)
+	})
 }
diff --git a/web/auth.html b/web/auth.html
diff --git a/web/bookmarks.html b/web/bookmarks.html
diff --git a/web/bun.lockb b/web/bun.lockb
diff --git a/web/index.html b/web/index.html
@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/pages/bookmarks.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
@@ -29,6 +29,7 @@
 		"@radix-ui/react-tabs": "^1.1.1",
 		"@radix-ui/react-toast": "^1.2.4",
 		"@radix-ui/react-tooltip": "^1.1.6",
+		"@tanstack/react-router": "^1.93.0",
 		"@types/js-cookie": "^3.0.6",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -53,6 +54,8 @@
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@tailwindcss/typography": "^0.5.15",
+		"@tanstack/router-devtools": "^1.93.0",
+		"@tanstack/router-plugin": "^1.93.0",
 		"@types/node": "^22.10.1",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",

diff --git a/web/public/apple-touch-icon.png b/web/public/apple-touch-icon.png
diff --git a/web/public/maskable-icon.png b/web/public/maskable-icon.png
diff --git a/web/settings.html b/web/settings.html
diff --git a/web/src/pages/app-basic.tsx → web/src/app.tsx b/web/src/pages/app-basic.tsx → web/src/app.tsx
@@ -1,11 +1,11 @@
 import { type ReactNode, StrictMode } from "react";
-import "../index.css";
+import "./index.css";
 
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { NuqsAdapter } from "nuqs/adapters/react";
 import { SWRConfig } from "swr";
-import fetcher from "../lib/apis/fetcher";
+import fetcher from "./lib/apis/fetcher";
 
 export default function App({ children }: { children: ReactNode }) {
 	return (

diff --git a/web/src/pages/auth.tsx → web/src/components/auth/auth.tsx b/web/src/pages/auth.tsx → web/src/components/auth/auth.tsx
@@ -9,15 +9,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { useAuth, useUser } from "@/lib/apis/auth";
+import { useAuth } from "@/lib/apis/auth";
 import { ROUTES } from "@/lib/router";
 import { SiGithub } from "@icons-pack/react-simple-icons";
+import { Link, useRouter } from "@tanstack/react-router";
 import { Mail } from "lucide-react";
-import { parseAsString, useQueryState } from "nuqs";
 import type React from "react";
-import { useEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./app-basic";
+import { useState } from "react";
 
 interface AuthFormData {
 	email: string;
@@ -46,43 +44,18 @@ const OAuthProviders = [
 	// },
 ];
 
-export default function AuthPage() {
-	// "login" or "register"
-	const [mode, _] = useQueryState(
-		"mode",
-		parseAsString.withDefault(AuthMode.Login),
-	);
+export default function AuthComponent({ mode }: { mode: string }) {
 	const isLogin = mode === AuthMode.Login;
 
-	// oauth callback state and code
-	const [code] = useQueryState("code");
-	const [state] = useQueryState("state");
-
 	// email and password login form data
 	const [formData, setFormData] = useState<AuthFormData>({
 		email: "",
 		password: "",
 		...(isLogin ? {} : { confirmPassword: "", name: "" }),
 	});
 
-	const { login, register, oauthLogin, oauthCallback } = useAuth();
-
-	const { user } = useUser();
-
-	useEffect(() => {
-		const handleCallback = async () => {
-			if (state && code) {
-				console.log("OAuth Callback:", state, code);
-				await handleOAuthCallback();
-			}
-		};
-		handleCallback();
-	}, [state, code]);
-
-	if (user) {
-		window.location.href = ROUTES.HOME;
-		return null;
-	}
+	const { login, register, oauthLogin } = useAuth();
+	const router = useRouter();
 
 	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const { name, value } = e.target;
@@ -107,7 +80,7 @@ export default function AuthPage() {
 					username: formData.name || "",
 				});
 			}
-			window.location.href = "/";
+			await router.navigate({ to: ROUTES.HOME });
 		} catch (error) {
 			console.error(`${mode} failed:`, error);
 		}
@@ -119,17 +92,6 @@ export default function AuthPage() {
 		window.location.href = resp.url;
 	};
 
-	const handleOAuthCallback = async () => {
-		if (state && code) {
-			const provider = state.split(":")[1];
-			console.log("OAuth Callback:", provider, code);
-			const data = await oauthCallback(provider.toLowerCase(), code);
-			console.log("OAuth Callback data:", data);
-			// TODO: redirect to previous page
-			window.location.href = "/";
-		}
-	};
-
 	return (
 		<div className="flex items-center justify-center min-h-screen p-4">
 			<Card className="w-full max-w-md">
@@ -220,21 +182,15 @@ export default function AuthPage() {
 								? "Don't have an account? "
 								: "Already have an account? "}
 						</span>
-						<a
-							href={isLogin ? ROUTES.SIGNUP : ROUTES.SIGNUP}
+						<Link
+							to={isLogin ? ROUTES.AUTH_REGISTER : ROUTES.AUTH_LOGIN}
 							className="text-primary hover:underline"
 						>
 							{isLogin ? "Sign up" : "Log in"}
-						</a>
+						</Link>
 					</div>
 				</CardContent>
 			</Card>
 		</div>
 	);
 }
-
-createRoot(document.getElementById("root")!).render(
-	<App>
-		<AuthPage />
-	</App>,
-);
diff --git a/web/src/components/bookmarks-list.tsx b/web/src/components/bookmarks-list.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/card";
 import type { Bookmark } from "@/lib/apis/bookmarks";
 import { ROUTES } from "@/lib/router";
+import { Link } from "@tanstack/react-router";
 
 interface BookmarkListProps {
 	bookmarks: Bookmark[];
@@ -21,7 +22,7 @@ export default function BookmarkList({ bookmarks }: BookmarkListProps) {
 					key={bookmark.id}
 					className="overflow-hidden transition-transform transform hover:-translate-y-1 mx-2"
 				>
-					<a href={`${ROUTES.BOOKMARKS}?id=${bookmark.id}`} rel="noreferrer">
+					<Link to={ROUTES.BOOKMARK_DETAIL} params={{ id: bookmark.id }}>
 						{bookmark.metadata?.image && (
 							<img
 								src={bookmark.metadata.image}
@@ -45,7 +46,7 @@ export default function BookmarkList({ bookmarks }: BookmarkListProps) {
 								{bookmark.url}
 							</CardDescription>
 						</CardHeader>
-					</a>
+					</Link>
 					<CardContent>
 						<div className="flex flex-wrap gap-2">
 							{bookmark.metadata?.tags?.map((tag) => (

diff --git a/web/src/components/bookmarks-sidebar-content.tsx b/web/src/components/bookmarks-sidebar-content.tsx
@@ -13,11 +13,7 @@ import {
 	SidebarMenuSubItem,
 } from "@/components/ui/sidebar";
 import { ROUTES } from "@/lib/router";
-import {
-	Bookmark,
-	ChevronRight,
-	Newspaper
-} from "lucide-react";
+import { Bookmark, ChevronRight, Newspaper } from "lucide-react";
 
 const items = [
 	{

diff --git a/web/src/pages/bookmark-detail-page.tsx → .../components/bookmarks/bookmark-detail.tsx b/web/src/pages/bookmark-detail-page.tsx → .../components/bookmarks/bookmark-detail.tsx
diff --git a/web/src/pages/bookmarks.tsx → ...c/components/bookmarks/bookmarks-list.tsx b/web/src/pages/bookmarks.tsx → ...c/components/bookmarks/bookmarks-list.tsx
@@ -17,14 +17,8 @@ import {
 import { useBookmarkMutations, useBookmarks } from "@/lib/apis/bookmarks";
 import { PlusCircle } from "lucide-react";
 import { useState } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./app-basic";
 
-import ProtectedRoute from "@/components/protected-route";
-import { useQueryState } from "nuqs";
-import BookmarkDetailPage from "./bookmark-detail-page";
-
-function BookmarksListView() {
+export default function BookmarksListView() {
 	const { data: bookmarks = [] } = useBookmarks();
 	const { createBookmark } = useBookmarkMutations();
 	const [open, setOpen] = useState(false);
@@ -80,19 +74,3 @@ function BookmarksListView() {
 		</SidebarProvider>
 	);
 }
-
-function BookmarkPage() {
-	const [id] = useQueryState("id");
-	if (id != null) {
-		return <BookmarkDetailPage id={id} />;
-	}
-	return <BookmarksListView />;
-}
-
-createRoot(document.getElementById("root")!).render(
-	<App>
-		<ProtectedRoute>
-			<BookmarkPage />
-		</ProtectedRoute>
-	</App>,
-);
diff --git a/web/src/components/protected-route.tsx b/web/src/components/protected-route.tsx
@@ -15,7 +15,7 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
 	}
 
 	if (!user) {
-		window.location.href = ROUTES.LOGIN;
+		window.location.href = ROUTES.AUTH_LOGIN;
 		return null;
 	}