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:
92
src/screens/StreakScreen.tsx
Normal file
92
src/screens/StreakScreen.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { Flame } from 'lucide-react';
|
||||
import { api } from '@/api';
|
||||
import { useAsync } from '@/lib/useAsync';
|
||||
import { ErrorState, LoadingState, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
|
||||
import { toFa } from '@/lib/format';
|
||||
|
||||
const WEEKS = 6;
|
||||
const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'];
|
||||
|
||||
/** YYYY-MM-DD به وقتِ محلی (سرور روزها را همینطور میدهد). */
|
||||
const isoDay = (d: Date) =>
|
||||
`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
|
||||
/** شش هفتهی اخیر، هفته از شنبه شروع میشود. */
|
||||
function recentWeeks(today = new Date()): Date[][] {
|
||||
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
||||
const offsetFromSaturday = (end.getDay() + 1) % 7;
|
||||
const start = new Date(end);
|
||||
start.setDate(end.getDate() - offsetFromSaturday - (WEEKS - 1) * 7);
|
||||
return Array.from({ length: WEEKS }, (_, w) =>
|
||||
Array.from({ length: 7 }, (_, d) => {
|
||||
const day = new Date(start);
|
||||
day.setDate(start.getDate() + w * 7 + d);
|
||||
return day;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const dayOfMonth = (d: Date) => new Intl.DateTimeFormat('fa-IR-u-ca-persian', { day: 'numeric' }).format(d);
|
||||
|
||||
export function StreakScreen() {
|
||||
const calendar = useAsync(() => api.streakCalendar(), []);
|
||||
const active = new Set(calendar.data?.activeDays ?? []);
|
||||
const today = isoDay(new Date());
|
||||
const weeks = recentWeeks();
|
||||
|
||||
return (
|
||||
<Screen>
|
||||
<ScreenHeader title="زنجیرهی روزها" subtitle="هر روز حداقل یه درس، زنجیرهت رو زنده نگه میداره" color="#FF7A3D" back mascot={{ char: 'delta', mood: 'excited', size: 56 }} />
|
||||
<ScreenBody className="flex flex-col gap-4">
|
||||
{calendar.loading ? (
|
||||
<LoadingState char="delta" />
|
||||
) : calendar.error || !calendar.data ? (
|
||||
<ErrorState error={calendar.error} onRetry={calendar.reload} />
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ label: 'زنجیرهی فعلی', value: calendar.data.currentStreak },
|
||||
{ label: 'بیشترین زنجیره', value: calendar.data.longestStreak },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="flex flex-col items-center rounded-3xl border border-line bg-white py-4">
|
||||
<Flame size={24} className="text-orange" fill="#FF7A3D" />
|
||||
<span className="mt-1 text-2xl font-black text-ink">{toFa(s.value)}</span>
|
||||
<span className="text-xs text-muted">{s.label} (روز)</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl border border-line bg-white p-4">
|
||||
<div className="mb-2 grid grid-cols-7 gap-1.5 text-center text-[10px] font-bold text-muted">
|
||||
{WEEKDAYS.map((d) => <span key={d}>{d}</span>)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{weeks.map((week, w) => (
|
||||
<div key={w} className="grid grid-cols-7 gap-1.5">
|
||||
{week.map((day) => {
|
||||
const key = isoDay(day);
|
||||
const on = active.has(key);
|
||||
const future = key > today;
|
||||
return (
|
||||
<span
|
||||
key={key}
|
||||
title={key}
|
||||
className={`flex aspect-square items-center justify-center rounded-xl text-[11px] font-bold ${
|
||||
on ? 'bg-orange text-white' : future ? 'text-faint/50' : 'bg-soft text-muted'
|
||||
} ${key === today ? 'ring-2 ring-orange ring-offset-1' : ''}`}
|
||||
>
|
||||
{on ? <Flame size={14} fill="white" /> : dayOfMonth(day)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ScreenBody>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user