Spaces:
Sleeping
Sleeping
File size: 6,612 Bytes
aaa634c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | import { useEffect, useState } from 'react';
import { supabase } from '../supabaseClient';
import { BookOpen, Map, Flame, LogOut, RefreshCw, Trophy, User } from 'lucide-react';
interface SidebarProps {
activeTab: 'queue' | 'journey';
setActiveTab: (tab: 'queue' | 'journey') => void;
user: any;
}
export default function Sidebar({ activeTab, setActiveTab, user }: SidebarProps) {
const [streak, setStreak] = useState<any>(null);
const [syncing, setSyncing] = useState(false);
const [syncResult, setSyncResult] = useState<string | null>(null);
const fetchStreak = async () => {
try {
const { data: { session } } = await supabase.auth.getSession();
if (!session) return;
const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/streak`, {
headers: {
'Authorization': `Bearer ${session.access_token}`
}
});
if (res.ok) {
const data = await res.json();
setStreak(data);
}
} catch (err) {
console.error('Error fetching streak:', err);
}
};
useEffect(() => {
fetchStreak();
}, [user]);
const handleSync = async () => {
setSyncing(true);
setSyncResult(null);
try {
const { data: { session } } = await supabase.auth.getSession();
if (!session) return;
const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/sync`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${session.access_token}`
}
});
if (res.ok) {
const data = await res.json();
setSyncResult(data.message || 'Sync complete!');
// Refresh streak and state
fetchStreak();
} else {
setSyncResult('Sync failed. Check backend logs.');
}
} catch (err) {
setSyncResult('Sync failed. Server unreachable.');
} finally {
setSyncing(false);
}
};
const handleSignOut = async () => {
await supabase.auth.signOut();
};
return (
<aside className="w-80 h-screen bg-bg-sidebar border-r border-slate-900 flex flex-col justify-between p-6 shrink-0 z-10 relative">
<div className="space-y-8">
{/* Brand */}
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-purple to-accent-pink flex items-center justify-center shadow-[0_0_15px_rgba(157,78,221,0.3)]">
<Trophy className="w-5 h-5 text-white" />
</div>
<div>
<h1 className="text-xl font-bold tracking-tight text-white m-0">AlgoSpaced</h1>
<span className="text-xs text-slate-500">DSA Repetition</span>
</div>
</div>
{/* Navigation */}
<nav className="space-y-2">
<button
onClick={() => setActiveTab('queue')}
className={`w-full flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
activeTab === 'queue'
? 'bg-primary-purple text-white shadow-[0_0_15px_rgba(157,78,221,0.25)]'
: 'text-slate-400 hover:text-white hover:bg-slate-950'
}`}
>
<BookOpen className="w-5 h-5" />
Daily Review Queue
</button>
<button
onClick={() => setActiveTab('journey')}
className={`w-full flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
activeTab === 'journey'
? 'bg-primary-purple text-white shadow-[0_0_15px_rgba(157,78,221,0.25)]'
: 'text-slate-400 hover:text-white hover:bg-slate-950'
}`}
>
<Map className="w-5 h-5" />
Journey Path
</button>
</nav>
{/* Streak Component */}
<div className="glass-panel rounded-2xl p-5 border border-slate-900">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 rounded-lg bg-orange-500/10 text-orange-400">
<Flame className="w-5 h-5" />
</div>
<div>
<h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Active Streak</h3>
<span className="text-2xl font-bold text-white tracking-tight">{streak?.current_streak ?? 0} days</span>
</div>
</div>
<div className="flex justify-between items-center text-xs text-slate-500 border-t border-slate-900/60 pt-3">
<span>Longest: {streak?.longest_streak ?? 0} days</span>
{streak?.last_active_date && (
<span>Last active: {new Date(streak.last_active_date).toLocaleDateString()}</span>
)}
</div>
</div>
{/* Sync Google Drive */}
<div className="space-y-2">
<button
onClick={handleSync}
disabled={syncing}
className="w-full bg-slate-950 hover:bg-slate-900 text-slate-300 font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 border border-slate-800 transition-all text-sm cursor-pointer disabled:opacity-50"
>
<RefreshCw className={`w-4 h-4 text-accent-cyan ${syncing ? 'animate-spin' : ''}`} />
{syncing ? 'Syncing...' : 'Sync Google Drive'}
</button>
{syncResult && (
<p className="text-[11px] text-center text-accent-cyan leading-normal max-h-16 overflow-y-auto px-2">
{syncResult}
</p>
)}
</div>
</div>
{/* User Session Info / Sign Out */}
<div className="border-t border-slate-900 pt-5 space-y-4">
<div className="flex items-center gap-3 px-2">
<div className="w-8 h-8 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400">
<User className="w-4 h-4" />
</div>
<div className="overflow-hidden">
<p className="text-xs font-semibold text-white truncate m-0">{user.email}</p>
<p className="text-[10px] text-slate-500 truncate m-0">Verified User</p>
</div>
</div>
<button
onClick={handleSignOut}
className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-semibold text-rose-400 hover:text-rose-300 bg-rose-500/5 hover:bg-rose-500/10 transition-all cursor-pointer"
>
<LogOut className="w-4 h-4" />
Sign Out
</button>
</div>
</aside>
);
}
|