FeedbackBar: like/dislike/report under every quiz question and lesson

2026-10-12 12:56:52 +03:30
parent 41f1c993ee
commit 3a2a685ed3
4 changed files with 148 additions and 69 deletions
--- a/src/components/FeedbackBar.tsx
+++ b/src/components/FeedbackBar.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { Flag, ThumbsDown, ThumbsUp } from 'lucide-react';
+import { api } from '@/api';
+import { friendlyError } from '@/lib/errors';
+import { Sheet } from '@/components/Sheet';
+import { useToast } from '@/components/Toast';
+import { PrimaryButton } from '@/components/ui';
+
+type Kind = 'question' | 'lesson';
+
+const REASONS: Record<Kind, { id: string; label: string }[]> = {
+  question: [
+    { id: 'wrong_answer', label: 'جوابِ درست اشتباهه' },
+    { id: 'unclear', label: 'صورتِ سوال گنگه' },
+    { id: 'typo', label: 'غلطِ تایپی داره' },
+    { id: 'too_hard', label: 'برای این درس خیلی سخته' },
+    { id: 'other', label: 'یه چیزِ دیگه' },
+  ],
+  lesson: [
+    { id: 'wrong_content', label: 'مطلبِ درس اشتباهه' },
+    { id: 'unclear', label: 'توضیح گنگه' },
+    { id: 'typo', label: 'غلطِ تایپی داره' },
+    { id: 'bad_figure', label: 'شکل ایراد داره' },
+    { id: 'other', label: 'یه چیزِ دیگه' },
+  ],
+};
+
+const memoKey = (kind: Kind, id: string) => `tadrisino.vote.${kind}.${id}`;
+function readVote(kind: Kind, id: string): 1 | -1 | 0 {
+  try {
+    const v = Number(sessionStorage.getItem(memoKey(kind, id)));
+    return v === 1 || v === -1 ? v : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * زیرِ هر سوال و هر درس: لایک، دیسلایک و گزارشِ ایراد. به ادمین می‌رسد
+ * (ستونِ 👍/👎 و صفِ گزارش‌ها) تا ایرادِ محتوا را خودِ دانش‌آموزها خبر بدهند.
+ */
+export function FeedbackBar({ kind, id }: { kind: Kind; id: string }) {
+  const toast = useToast();
+  const [vote, setVote] = useState<1 | -1 | 0>(0);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => setVote(readVote(kind, id)), [kind, id]);
+
+  async function cast(next: 1 | -1) {
+    const value = vote === next ? 0 : next;
+    const before = vote;
+    setVote(value);
+    try {
+      await api.feedback.vote(kind, id, value);
+      try { sessionStorage.setItem(memoKey(kind, id), String(value)); } catch { /* حافظه‌ی مرورگر بسته است؛ فقط یادآوریِ همین نشست */ }
+      if (value !== 0) toast('ممنون از نظرت!', 'success');
+    } catch (err) {
+      setVote(before);
+      toast(friendlyError(err, 'نظرت ثبت نشد'), 'error');
+    }
+  }
+
+  const base = 'flex min-h-11 flex-1 items-center justify-center gap-1.5 rounded-2xl border-2 px-2 text-xs font-black transition-colors';
+  const idle = 'border-line bg-white text-muted';
+  return (
+    <>
+      <div className="flex gap-2" role="group" aria-label="نظر و گزارش">
+        <button type="button" aria-pressed={vote === 1} onClick={() => void cast(1)} className={`${base} ${vote === 1 ? 'border-[#5FBF8F] bg-[#EEF9F3] text-[#2f8a5f]' : idle}`}>
+          <ThumbsUp size={16} strokeWidth={2.4} /> خوب بود
+        </button>
+        <button type="button" aria-pressed={vote === -1} onClick={() => void cast(-1)} className={`${base} ${vote === -1 ? 'border-[#ED6956] bg-[#fff4f2] text-coral' : idle}`}>
+          <ThumbsDown size={16} strokeWidth={2.4} /> خوب نبود
+        </button>
+        <button type="button" onClick={() => setOpen(true)} className={`${base} ${idle}`}>
+          <Flag size={16} strokeWidth={2.4} /> گزارشِ ایراد
+        </button>
+      </div>
+      <ReportSheet open={open} kind={kind} id={id} onClose={() => setOpen(false)} />
+    </>
+  );
+}
+
+function ReportSheet({ open, kind, id, onClose }: { open: boolean; kind: Kind; id: string; onClose: () => void }) {
+  const toast = useToast();
+  const [reason, setReason] = useState<string | null>(null);
+  const [note, setNote] = useState('');
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    if (open) { setReason(null); setNote(''); }
+  }, [open]);
+
+  async function send() {
+    if (!reason) return;
+    setSending(true);
+    try {
+      const r = await api.feedback.report(kind, id, reason, note.trim());
+      toast(r.alreadyReported ? 'قبلاً گزارشش رو داده بودی؛ ممنون!' : 'ممنون! گزارشت رسید و بررسی می‌شه.', 'success');
+      onClose();
+    } catch (err) {
+      toast(friendlyError(err, 'گزارش ارسال نشد'), 'error');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onClose={onClose} title={kind === 'question' ? 'این سوال چه ایرادی داره؟' : 'این درس چه ایرادی داره؟'}>
+      <div className="mb-4 flex flex-col gap-2">
+        {REASONS[kind].map((r) => (
+          <button
+            key={r.id}
+            type="button"
+            onClick={() => setReason(r.id)}
+            className={`rounded-2xl border-2 px-4 py-3 text-right text-sm font-bold ${reason === r.id ? 'border-coral bg-[#fff4f2] text-coral' : 'border-line text-body'}`}
+          >
+            {r.label}
+          </button>
+        ))}
+      </div>
+      <textarea
+        value={note}
+        onChange={(e) => setNote(e.target.value.slice(0, 500))}
+        placeholder="توضیحِ بیشتر (اختیاری)"
+        rows={2}
+        className="mb-4 w-full resize-none rounded-2xl border-2 border-line px-4 py-3 text-sm outline-none focus:border-coral"
+      />
+      <PrimaryButton disabled={!reason} loading={sending} onClick={() => void send()}>ارسالِ گزارش</PrimaryButton>
+    </Sheet>
+  );
+}