add user articles

web/src/app/(auth)/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <div className="h-full">{children}</div>;
+}

web/src/app/(auth)/login/page.tsx

@@ -1,6 +1,6 @@
-import { LoginForm } from "@/app/login/LoginForm";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { LoginForm } from "./LoginForm";
 
 export default async function Login() {
   const c = await cookies();

web/src/app/(auth)/register/page.tsx

@@ -1,6 +1,6 @@
-import { RegisterForm } from "@/app/register/RegisterForm";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { RegisterForm } from "./RegisterForm";
 
 export default async function Register() {
   const c = await cookies();

web/src/app/(home)/ArticleDrawer.tsx

@@ -0,0 +1,49 @@
+import { Article } from "@/api/articles/useArticlesQuery";
+import { useUpdateArticleMutation } from "@/api/articles/useUpdateArticleMutation";
+import { Drawer } from "@/components/ui/Drawer";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+import { cloneElement, JSX, useState } from "react";
+
+export type ArticleDrawerProps = {
+  article: Article;
+  children: JSX.Element;
+};
+
+export const ArticleDrawer = ({ article, children }: ArticleDrawerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const updateArticleMutation = useUpdateArticleMutation();
+
+  return (
+    <>
+      {cloneElement(children, { onClick: () => setOpen(true) })}
+      {open && (
+        <Drawer open onClose={() => setOpen(false)}>
+          <div className="flex justify-between w-full">
+            <div className="flex items-center gap-3">
+              <h2
+                className="text-2xl font-semibold text-pretty"
+                contentEditable
+                onBlur={(e) => {
+                  updateArticleMutation.mutate({
+                    id: article.id,
+                    title: e.target.innerText,
+                  });
+                }}
+              >
+                {article.title}
+              </h2>
+              <a href={article.url} target="_blank" rel="noopener noreferrer">
+                <ArrowSquareOutIcon size={28} />
+              </a>
+            </div>
+          </div>
+          <iframe
+            src={`${process.env.NEXT_PUBLIC_API_URL}/articles/${article.id}/body`}
+            className="mt-4 w-full h-full"
+          />
+        </Drawer>
+      )}
+    </>
+  );
+};

web/src/app/(home)/SaveArticleForm.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  SaveArticleData,
+  useSaveArticleMutation,
+} from "@/api/articles/useSaveArticleMutation";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { useForm } from "react-hook-form";
+
+export const SaveArticleForm = () => {
+  const mutation = useSaveArticleMutation();
+
+  const form = useForm<SaveArticleData>({
+    defaultValues: {
+      url: "",
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    mutation.mutate(data, {
+      onSuccess() {
+        form.setValue("url", "");
+      },
+    });
+  });
+
+  return (
+    <form className="flex items-center gap-2" onSubmit={onSubmit}>
+      <Input
+        type="text"
+        placeholder="article url"
+        {...form.register("url", { required: true })}
+      />
+      <Button type="submit" size="small" disabled={mutation.isPending}>
+        Archive
+      </Button>
+    </form>
+  );
+};

web/src/app/(home)/UserArticles.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useArticlesQuery } from "@/api/articles/useArticlesQuery";
+import { SaveArticleForm } from "./SaveArticleForm";
+import { ArticleDrawer } from "@/app/(home)/ArticleDrawer";
+import { Button } from "@/components/ui/Button";
+import { useDeleteArticleMutation } from "@/api/articles/useDeleteArticleMutation";
+
+export const UserArticles = () => {
+  const { data: articles } = useArticlesQuery();
+
+  const deleteArticleMutation = useDeleteArticleMutation();
+
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl">Articles</h2>
+        <SaveArticleForm />
+      </div>
+      <div className="mt-10 flex flex-col gap-3">
+        {articles?.map((article) => (
+          <div key={article.id} className="flex justify-between">
+            <ArticleDrawer article={article}>
+              <h3 className="line-clamp-3 cursor-pointer" tabIndex={0}>
+                {article.title}
+              </h3>
+            </ArticleDrawer>
+            <Button
+              color="danger"
+              disabled={
+                deleteArticleMutation.isPending &&
+                deleteArticleMutation.variables.id === article.id
+              }
+              onClick={() =>
+                deleteArticleMutation.mutate({
+                  id: article.id,
+                })
+              }
+            >
+              Delete
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

web/src/app/(home)/layout.tsx

@@ -0,0 +1,11 @@
+import { Header } from "@/components/Header";
+import { ReactNode } from "react";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="h-full flex flex-col">
+      <Header />
+      <main className="h-full flex flex-col">{children}</main>
+    </div>
+  );
+}

web/src/app/(home)/page.tsx

@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { UserArticles } from "./UserArticles";
 
 export default async function Home() {
   const c = await cookies();
@@ -10,8 +11,8 @@ export default async function Home() {
   }
 
   return (
-    <div>
-      <h1>archive.local</h1>
+    <div className="container mx-auto mt-4">
+      <UserArticles />
     </div>
   );
 }

web/src/app/globals.css

@@ -1 +1,6 @@
 @import "tailwindcss";
+
+@theme {
+  --color-accent: #ffe74c;
+  --color-secondary: #333745;
+}