Refactor: Improve error handling in authentication flow

2026-04-17 19:55:35 +00:00
parent 7c5da339cb
commit 61bbca2e5d
33 changed files with 2834 additions and 4185 deletions
@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { transactionApi } from '@/lib/api';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatNumber } from '@/lib/utils';
+import { Zap, TrendingUp, TrendingDown, Gift } from 'lucide-react';
+
+interface Activity {
+  id: string;
+  type: 'EARN' | 'SPEND' | 'BONUS' | 'ADJUSTMENT';
+  amount: number;
+  contentTitle: string | null;
+  user: {
+    plexUsername: string;
+  };
+  createdAt: string;
+}
+
+export function ActivityFeed() {
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    loadActivity();
+    // Refresh every minute
+    const interval = setInterval(loadActivity, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadActivity = async () => {
+    try {
+      const response = await transactionApi.getRecentActivity();
+      setActivities(response.data.transactions);
+    } catch (error) {
+      console.error('Failed to load global activity:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'EARN': return <TrendingUp className="h-3 w-3 text-green-500" />;
+      case 'SPEND': return <TrendingDown className="h-3 w-3 text-red-500" />;
+      case 'BONUS': return <Gift className="h-3 w-3 text-purple-500" />;
+      default: return <Zap className="h-3 w-3 text-primary" />;
+    }
+  };
+
+  if (isLoading && activities.length === 0) {
+    return (
+      <Card className="h-full">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Zap className="h-4 w-4 text-primary" />
+            Global Activity
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4 animate-pulse">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="h-10 bg-muted rounded-md" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="h-full overflow-hidden border-none bg-muted/30 shadow-none">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium flex items-center gap-2">
+          <Zap className="h-4 w-4 text-primary" />
+          Global Activity
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="px-4">
+        <div className="space-y-3">
+          {activities.map((activity) => (
+            <div key={activity.id} className="flex items-start gap-3 text-xs">
+              <div className="mt-1">
+                {getIcon(activity.type)}
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold truncate text-foreground/90">
+                  {activity.user.plexUsername}
+                </p>
+                <p className="text-muted-foreground truncate">
+                  {activity.type === 'EARN' ? 'earned' : activity.type === 'SPEND' ? 'spent' : 'received'} {' '}
+                  <span className={activity.type === 'EARN' || activity.type === 'BONUS' ? 'text-green-500' : 'text-red-500'}>
+                    {formatNumber(activity.amount)} $COOP
+                  </span>
+                </p>
+                {activity.contentTitle && (
+                  <p className="text-[10px] text-muted-foreground/60 truncate italic">
+                    {activity.contentTitle}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}