first commit

2026-02-04 23:23:42 +07:00
commit ee28ea1a2d
202 changed files with 34797 additions and 0 deletions
--- a/laravel/resources/js/pages/Articles/Show.tsx
+++ b/laravel/resources/js/pages/Articles/Show.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import type { Article, Comment } from '@/types/article';
+
+export default function Show({ articleId }: { articleId: number }) {
+    const [article, setArticle] = useState<Article | null>(null);
+    const [form, setForm] = useState({ author_name: '', content: '' });
+
+    // загрузка статьи
+    useEffect(() => {
+        fetch(`/api/articles/${articleId}`)
+            .then((res) => res.json())
+            .then((res) => setArticle(res.data)) // <-- берём data
+            .catch(console.error);
+    }, [articleId]);
+
+    const submit = async () => {
+        if (!form.author_name || !form.content) return;
+
+        const res = await fetch(`/api/articles/${articleId}/comments`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(form),
+        });
+
+        if (!res.ok) return;
+
+        const result = await res.json();
+        const newComment: Comment = result.data; // <-- API возвращает CommentResource
+
+        setArticle((prev) =>
+            prev ? { ...prev, comments: [...prev.comments, newComment] } : prev,
+        );
+
+        setForm({ author_name: '', content: '' });
+    };
+
+    if (!article) return <div className="p-6">Статья не найдена</div>;
+
+    return (
+        <div className="space-y-6 p-6">
+            <h1 className="text-2xl font-bold">{article.title}</h1>
+            <p className="whitespace-pre-line text-gray-700">
+                {article.content}
+            </p>
+
+            <section className="space-y-3">
+                <h2 className="text-xl font-semibold">Комментарии</h2>
+                {article.comments.map((c) => (
+                    <div key={c.id} className="rounded border p-3">
+                        <div className="text-sm text-gray-500">
+                            {c.author_name}
+                        </div>
+                        <div>{c.content}</div>
+                    </div>
+                ))}
+            </section>
+
+            <section className="space-y-2">
+                <h3 className="font-semibold">Добавить комментарий</h3>
+                <input
+                    className="w-full border p-2"
+                    placeholder="Ваше имя"
+                    value={form.author_name}
+                    onChange={(e) =>
+                        setForm({ ...form, author_name: e.target.value })
+                    }
+                />
+                <textarea
+                    className="w-full border p-2"
+                    placeholder="Комментарий"
+                    value={form.content}
+                    onChange={(e) =>
+                        setForm({ ...form, content: e.target.value })
+                    }
+                />
+                <button
+                    onClick={submit}
+                    className="rounded bg-black px-4 py-2 text-white"
+                >
+                    Отправить
+                </button>
+            </section>
+        </div>
+    );
+}