Реалізація оцінки статті/сторінки (Was this helpful?) на сайті

Віджет оцінки корисності статті

"Чи була ця стаття корисною?" — найпростіший інструмент зворотного зв'язку для бази знань, блога та документації. Допомагає виявити сторінки з поганим вмістом без ручного аналізу аналітики.

Backend

Schema::create('article_ratings', function (Blueprint $table) {
    $table->id();
    $table->foreignId('article_id')->constrained()->cascadeOnDelete();
    $table->boolean('helpful');
    $table->text('comment')->nullable();
    $table->string('session_id');
    $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
    $table->timestamps();

    $table->unique(['article_id', 'session_id']);  // Один голос на сесію
});

// ArticleRatingController
public function store(Request $request, Article $article): JsonResponse
{
    $request->validate(['helpful' => 'required|boolean', 'comment' => 'nullable|string|max:500']);

    ArticleRating::updateOrCreate(
        ['article_id' => $article->id, 'session_id' => session()->getId()],
        ['helpful' => $request->helpful, 'comment' => $request->comment, 'user_id' => auth()->id()]
    );

    return response()->json(['success' => true]);
}

// Агрегат для відображення статистики
public function stats(Article $article): JsonResponse
{
    return response()->json([
        'helpful'     => $article->ratings()->where('helpful', true)->count(),
        'not_helpful' => $article->ratings()->where('helpful', false)->count(),
    ]);
}

Frontend

export function ArticleRating({ articleId }: { articleId: number }) {
  const [voted,   setVoted]   = useState<boolean | null>(null);
  const [comment, setComment] = useState('');
  const [showBox, setShowBox] = useState(false);

  const vote = async (helpful: boolean) => {
    setVoted(helpful);
    if (!helpful) setShowBox(true);  // Показуємо поле коментаря для негативних голосів
    await fetch(`/api/articles/${articleId}/rating`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ helpful }),
    });
  };

  const submitComment = async () => {
    await fetch(`/api/articles/${articleId}/rating`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ helpful: false, comment }),
    });
    setShowBox(false);
  };

  if (voted === true) return <p className="text-sm text-green-600">Раді, що допомогли!</p>;

  return (
    <div className="border-t pt-6 mt-8">
      {voted === null ? (
        <div className="flex items-center gap-4">
          <span className="text-sm text-gray-600">Чи була ця стаття корисною?</span>
          <button onClick={() => vote(true)} className="text-sm px-3 py-1 rounded border hover:bg-green-50">👍 Так</button>
          <button onClick={() => vote(false)} className="text-sm px-3 py-1 rounded border hover:bg-red-50">👎 Ні</button>
        </div>
      ) : showBox ? (
        <div>
          <p className="text-sm mb-2">Що можна поліпшити?</p>
          <textarea value={comment} onChange={e => setComment(e.target.value)}
            className="w-full border rounded p-2 text-sm h-24 resize-none" placeholder="Необов'язково..." />
          <button onClick={submitComment} className="mt-2 text-sm bg-gray-800 text-white px-4 py-1.5 rounded">
            Відправити
          </button>
        </div>
      ) : null}
    </div>
  );
}

Часовий графік

Віджет корисності з голосуванням та необов'язковим коментарем: 1 робочий день.