- {/* Header */}
-
-
-
My Articles
-
- {articles.length} article{articles.length !== 1 ? "s" : ""} saved
-
-
-
-
-
- {/* Search Bar */}
-
-
-
setSearchQuery(e.target.value)}
- className="pl-10"
- />
+ if (!session) {
+ return (
+
+ Something went wrong
+ {/* Should be buttons to sign in or go home */}
+ );
+ }
- {/* Articles List or Empty State */}
- {articles.length === 0 ? (
-
-
📚
-
- No articles yet
-
-
- Add your first article to get started!
-
-
-
- ) : (
-
- )}
-
- {/* Modals */}
-
setIsNewArticleModalOpen(false)}
- onSave={handleNewArticle}
- />
-
- {
- setIsEditArticleModalOpen(false);
- setEditingArticle(null);
- }}
- onSave={handleUpdateArticle}
- />
-
- );
+ return
;
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d813161..0ea4d99 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
import "@/styles/globals.css";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
-import { ClerkProvider } from "@clerk/nextjs";
import { TRPCReactProvider } from "@/trpc/react";
const inter = Inter({ subsets: ["latin"] });
@@ -21,18 +20,16 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
+
+
+
+
+
+ {children}
+
+
+
+
+
);
}
diff --git a/src/components/modals/edit-article-modal.tsx b/src/components/modals/edit-article-modal.tsx
index 2d92930..94a20c3 100644
--- a/src/components/modals/edit-article-modal.tsx
+++ b/src/components/modals/edit-article-modal.tsx
@@ -65,7 +65,7 @@ export function EditArticleModal({
await updateArticle.mutateAsync({
id: article.id,
title: title,
- tags: tags || article.tags,
+ tags: tags || article.tags || "",
});
onSave();
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 116328e..6fe1ece 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -11,29 +11,21 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-
-// Mock user state - in real app, this would come from Clerk
-const mockUser = {
- id: "1",
- name: "John Doe",
- email: "john@example.com",
- imageUrl: "/placeholder.svg?height=32&width=32",
-};
+import { authClient } from "@/lib/auth-client";
export function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [isSignedIn, setIsSignedIn] = useState(true); // Mock auth state
+ const user = authClient.useSession().data?.user;
- const handleSignOut = () => {
- console.log("Signing out...");
- setIsSignedIn(false);
- // In real app: clerk.signOut()
+ const handleSignOut = async () => {
+ await authClient.signOut();
};
- const handleSignIn = () => {
- console.log("Signing in...");
- setIsSignedIn(true);
- // In real app: clerk.openSignIn()
+ const handleSignIn = async () => {
+ await authClient.signIn.social({
+ provider: "google",
+ callbackURL: "/articles",
+ });
};
return (
@@ -42,7 +34,7 @@ export function Navbar() {
{/* Logo */}
@@ -51,7 +43,7 @@ export function Navbar() {
{/* Desktop Navigation */}
- {isSignedIn && (
+ {user && (
<>
- {isSignedIn ? (
+ {user ? (
- {mockUser.name}
+ {user.name}
- {mockUser.email}
+ {user.email}
@@ -127,7 +119,7 @@ export function Navbar() {
{isMenuOpen && (
- {isSignedIn ? (
+ {user ? (
<>
-
{mockUser.name}
+
{user.name}
- {mockUser.email}
+ {user.email}