forked from Tadrisino/MathApp_frontend
rebuild the app on a typed, modular structure wired to the real API
The whole app lived in one 3,071-line App.tsx on a Figma scaffold (60 unused packages, 45 unused UI components, no type-check). The live site could not reach the backend, Persian-keyboard digits were erased from the phone field, guests were signed out after an hour, "mark read" hit a method the server does not accept (405), and iOS Safari blocked the payment window. What changed: - src/ split into api/ (one typed client: timeouts, GET retry, single-flight refresh, SSE), screens/ (one file each), components/, state/, nav/, lib/. - The API address is configuration only: public/config.js at runtime, then VITE_API_BASE_URL at build time, then same-origin /api. No domain in code. - Responsive shell instead of a fixed 390x844 phone frame; self-hosted Vazirmatn instead of Google Fonts; strict TypeScript, `npm run build` type-checks first. - Everything on the handoff list: tutor answers keep their line breaks, have thumbs up/down, follow-ups, "from the book" badge, retry, history that survives tab switches and reloads, "why was I wrong" from a wrong answer with questionId; question reports; hearts with maxHearts/unlimited and a no-hearts screen with the refill time; result screen and a visible error when lesson completion fails; subscription status, badge, discount code before the gateway and the payment-return message; guest refresh token; 6-digit OTP with resend timer; age saved as a Jalali birthYear; PATCH read-all; leaderboard refetched on open with "you" highlighted; selected companion shown across the app; logout that revokes the refresh token. - New screens for endpoints that had none: profile, streak calendar, support tickets and bug reports, parents, invite-a-friend (with ?ref= tracking), guest-to-phone upgrade. - Browser/phone back button walks the screen stack. Checked with a headless-Chrome walkthrough against a local backend at 390x844 and 360x740 (fresh guest: onboarding, setup, a full lesson, map, island sheet, every tab and sub-screen, one real tutor question, reload, logout): no console errors, no failed API calls. Real SMS login and a real Zarinpal payment were not exercised. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
99
src/screens/NotificationsScreen.tsx
Normal file
99
src/screens/NotificationsScreen.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { Bell, Check, Crown, FileText, MessageCircle, Star, Trophy, Users, type LucideIcon } from 'lucide-react';
|
||||
import { api, type NotificationItem } from '@/api';
|
||||
import { useAppData } from '@/state/AppData';
|
||||
import { useAsync } from '@/lib/useAsync';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader } from '@/components/ui';
|
||||
import { relativeTime } from '@/lib/format';
|
||||
|
||||
const STYLE: Record<string, { icon: LucideIcon; color: string; bg: string }> = {
|
||||
xp_earned: { icon: Star, color: '#E8A400', bg: '#FFF8E1' },
|
||||
lesson_completed: { icon: Check, color: '#5FBF8F', bg: '#EAF8F0' },
|
||||
node_completed: { icon: Trophy, color: '#FF7A3D', bg: '#FFF1E6' },
|
||||
order_paid: { icon: Crown, color: '#9B7BFF', bg: '#F5F1FF' },
|
||||
ticket_replied: { icon: MessageCircle, color: '#4C5FD5', bg: '#EEF1FF' },
|
||||
family_link_accepted: { icon: Users, color: '#FF7A3D', bg: '#FFF1E6' },
|
||||
weekly_report_ready: { icon: FileText, color: '#91ADC6', bg: '#EAF2F6' },
|
||||
};
|
||||
const styleOf = (type: string) => STYLE[type] ?? { icon: Bell, color: '#9e9ec0', bg: '#f0eeff' };
|
||||
|
||||
export function NotificationsScreen() {
|
||||
const { setUnreadCount } = useAppData();
|
||||
const toast = useToast();
|
||||
const list = useAsync(async () => {
|
||||
const r = await api.notifications.list();
|
||||
setUnreadCount(r.unreadCount);
|
||||
return r.items;
|
||||
}, []);
|
||||
const items = list.data ?? [];
|
||||
const unread = items.filter((n) => !n.isRead).length;
|
||||
|
||||
const markLocal = (predicate: (n: NotificationItem) => boolean) => {
|
||||
list.setData((prev) => prev?.map((n) => (predicate(n) ? { ...n, isRead: true } : n)));
|
||||
};
|
||||
|
||||
async function markOne(n: NotificationItem) {
|
||||
if (n.isRead) return;
|
||||
markLocal((x) => x.id === n.id);
|
||||
setUnreadCount(Math.max(0, unread - 1));
|
||||
api.notifications.markRead(n.id).catch(() => {});
|
||||
}
|
||||
|
||||
async function markAll() {
|
||||
markLocal(() => true);
|
||||
setUnreadCount(0);
|
||||
try {
|
||||
await api.notifications.markAllRead();
|
||||
} catch {
|
||||
toast('ثبت نشد؛ دوباره امتحان کن', 'error');
|
||||
list.reload();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<ScreenHeader title="اعلانها" color="#4C5FD5" back mascot={{ char: 'sigma', mood: 'idle', size: 54 }}>
|
||||
{unread > 0 && (
|
||||
<button type="button" onClick={() => void markAll()} className="mt-3 rounded-full bg-white/15 px-3 py-1.5 text-xs font-bold">
|
||||
همه خوانده شد
|
||||
</button>
|
||||
)}
|
||||
</ScreenHeader>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
{list.loading ? (
|
||||
<LoadingState text="دارم اعلانها رو میارم…" />
|
||||
) : list.error ? (
|
||||
<ErrorState error={list.error} onRetry={list.reload} />
|
||||
) : items.length === 0 ? (
|
||||
<EmptyState text="فعلاً خبری نیست" />
|
||||
) : (
|
||||
<ul className="flex flex-col gap-2">
|
||||
{items.map((n) => {
|
||||
const s = styleOf(n.type);
|
||||
const Icon = s.icon;
|
||||
return (
|
||||
<li key={n.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void markOne(n)}
|
||||
className={`flex w-full items-start gap-3 rounded-2xl p-3.5 text-right ${n.isRead ? 'border border-line bg-white' : 'border border-indigo/20 bg-[#EEF1FF]'}`}
|
||||
>
|
||||
<span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full" style={{ backgroundColor: s.bg }}>
|
||||
<Icon size={18} style={{ color: s.color }} />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className={`block text-sm ${n.isRead ? 'text-muted' : 'font-bold text-ink'}`}>{n.title}</span>
|
||||
{n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{n.body}</span>}
|
||||
<span className="mt-1 block text-[10px] text-faint">{relativeTime(n.createdAt)}</span>
|
||||
</span>
|
||||
{!n.isRead && <span className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-coral" />}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user