add user articles

web/bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "web",
       "dependencies": {
+        "@phosphor-icons/react": "^2.1.10",
         "@tanstack/react-query": "^5.90.12",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
@@ -184,6 +185,8 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@phosphor-icons/react": ["@phosphor-icons/react@2.1.10", "", { "peerDependencies": { "react": ">= 16.8", "react-dom": ">= 16.8" } }, "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],

web/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.90.12",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",

web/src/api/articles/useArticlesQuery.ts

@@ -0,0 +1,20 @@
+import { $axios } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+export type Article = {
+  id: number;
+  title: string;
+  url: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export const useArticlesQuery = () => {
+  return useQuery({
+    queryKey: ["articles"],
+    queryFn: async () => {
+      const resp = await $axios.get<Article[]>("/articles");
+      return resp.data;
+    },
+  });
+};

web/src/api/articles/useDeleteArticleMutation.ts

@@ -0,0 +1,17 @@
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export const useDeleteArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id }: { id: number }) => {
+      const resp = await $axios.delete(`/articles/${id}`);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["articles"],
+      });
+    },
+  });
+};

web/src/api/articles/useSaveArticleMutation.ts

@@ -0,0 +1,21 @@
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export type SaveArticleData = {
+  url: string;
+};
+
+export const useSaveArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: SaveArticleData) => {
+      const resp = await $axios.post("/articles", data);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["articles"],
+      });
+    },
+  });
+};

web/src/api/articles/useUpdateArticleMutation.ts

@@ -0,0 +1,22 @@
+import { Article } from "@/api/articles/useArticlesQuery";
+import { $axios } from "@/lib/axios";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export type UpdateArticleData = Partial<Pick<Article, "title">> & {
+  id: number;
+};
+
+export const useUpdateArticleMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, ...data }: UpdateArticleData) => {
+      const resp = await $axios.patch(`/articles/${id}`, data);
+      return resp.data;
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ["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;
+}

web/src/components/Header.tsx

@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header className="py-5 px-4 bg-accent">
+      <h1 className="text-3xl font-semibold text-secondary">archive.local</h1>
+    </header>
+  );
+};

web/src/components/ui/Button.tsx

@@ -2,22 +2,35 @@ import { clsx } from "clsx";
 import { forwardRef, JSX } from "react";
 
 const sizeClasses = {
+  small: "py-1 px-2",
   medium: "py-2 px-4",
 };
 
-export type ButtonProps = JSX.IntrinsicElements["button"] & {
+const colorClasses = {
+  primary:
+    "border-neutral-800 not-disabled:hover:bg-neutral-800 not-disabled:hover:text-white/90",
+  danger:
+    "border-red-500 text-red-600 not-disabled:hover:bg-red-600 not-disabled:hover:text-white/90",
+};
+
+export type ButtonProps = Omit<JSX.IntrinsicElements["button"], "color"> & {
   size?: keyof typeof sizeClasses;
+  color?: keyof typeof colorClasses;
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ size = "medium", className, children, ...props }, ref) => {
+  (
+    { size = "medium", color = "primary", className, children, ...props },
+    ref,
+  ) => {
     return (
       <button
         ref={ref}
         className={clsx(
-          "border border-neutral-800 rounded-md not-disabled:cursor-pointer not-disabled:hover:bg-neutral-800 not-disabled:hover:text-white/90 disabled:cursor-not-allowed active:scale-95 transition duration-200",
+          "border rounded-md not-disabled:cursor-pointer disabled:cursor-not-allowed active:scale-95 transition duration-200",
           className,
           sizeClasses[size],
+          colorClasses[color],
         )}
         {...props}
       >

web/src/components/ui/Drawer.tsx

@@ -0,0 +1,42 @@
+import { clsx } from "clsx";
+import { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+export type DrawerProps = {
+  size?: number | string;
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+};
+
+export const Drawer = ({
+  size = 1400,
+  className,
+  children,
+  open,
+  onClose,
+}: DrawerProps) => {
+  if (!open) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className="bg-neutral-900/90 backdrop-blur-sm fixed inset-0"
+      onPointerDown={onClose}
+    >
+      <div
+        className={clsx(
+          "bg-white fixed top-0 bottom-0 right-0 p-8 rounded-l-4xl w-full",
+          className,
+        )}
+        style={{ maxWidth: size }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+};