Create Network page with public profile, recommendations, follow button
cgen-7112ecc6a7664fcfbcd9d6c52efc10ac
This commit is contained in:
Builder.io
parent
adf11251ec
commit
9466c701c7
1 changed files with 151 additions and 0 deletions
151
client/pages/Network.tsx
Normal file
151
client/pages/Network.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import LoadingScreen from "@/components/LoadingScreen";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { aethexSocialService } from "@/lib/aethex-social-service";
|
||||
import { UserPlus, UserCheck } from "lucide-react";
|
||||
|
||||
export default function Network() {
|
||||
const { user, profile, loading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [recommended, setRecommended] = useState<any[]>([]);
|
||||
const [following, setFollowing] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
navigate("/login", { replace: true });
|
||||
return;
|
||||
}
|
||||
if (!user) return;
|
||||
|
||||
const load = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const recs = await aethexSocialService.listRecommended(user.id, 12);
|
||||
setRecommended(recs);
|
||||
const flw = await aethexSocialService.getFollowing(user.id);
|
||||
setFollowing(flw);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, [user, loading, navigate]);
|
||||
|
||||
const isFollowing = (id: string) => following.includes(id);
|
||||
|
||||
const toggleFollow = async (targetId: string) => {
|
||||
if (!user) return;
|
||||
if (isFollowing(targetId)) {
|
||||
await aethexSocialService.unfollowUser(user.id, targetId);
|
||||
setFollowing((s) => s.filter((x) => x !== targetId));
|
||||
} else {
|
||||
await aethexSocialService.followUser(user.id, targetId);
|
||||
setFollowing((s) => Array.from(new Set([...s, targetId])));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || isLoading) {
|
||||
return <LoadingScreen message="Loading your network..." showProgress duration={1000} />;
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-aethex-gradient py-8">
|
||||
<div className="container mx-auto px-4 max-w-7xl grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* Public Profile */}
|
||||
<div className="lg:col-span-4 space-y-6">
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="h-16 w-16">
|
||||
<AvatarImage src={profile?.avatar_url} />
|
||||
<AvatarFallback>{profile?.full_name?.[0] || user.email?.[0]?.toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">{profile?.full_name || user.email?.split("@")[0]}</h2>
|
||||
<p className="text-sm text-muted-foreground">{profile?.role || "Member"}</p>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400">Level {profile?.level || 1}</Badge>
|
||||
<Badge variant="outline">{(profile as any)?.experience_level || "beginner"}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{profile?.bio && (
|
||||
<p className="text-sm text-muted-foreground">{profile.bio}</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => navigate("/dashboard")}>Edit Profile</Button>
|
||||
<Button variant="outline" onClick={() => navigate("/onboarding")}>Improve Profile</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle>Recommendations</CardTitle>
|
||||
<CardDescription>People who align with your interests</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{recommended.slice(0, 3).map((r) => (
|
||||
<div key={r.id} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-10 w-10"><AvatarImage src={r.avatar_url} /><AvatarFallback>{(r.full_name || r.username || "U")[0]}</AvatarFallback></Avatar>
|
||||
<div>
|
||||
<div className="font-medium">{r.full_name || r.username}</div>
|
||||
<div className="text-xs text-muted-foreground">{r.bio?.slice(0, 40) || "Member"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant={isFollowing(r.id) ? "outline" : "default"} onClick={() => toggleFollow(r.id)}>
|
||||
{isFollowing(r.id) ? (<span className="flex items-center gap-1"><UserCheck className="h-4 w-4" /> Following</span>) : (<span className="flex items-center gap-1"><UserPlus className="h-4 w-4" /> Follow</span>)}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{recommended.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground">No recommendations yet.</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Discover People */}
|
||||
<div className="lg:col-span-8">
|
||||
<Card className="bg-card/50 border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle>Discover People</CardTitle>
|
||||
<CardDescription>Connect with creators, clients, and members</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{recommended.map((r) => (
|
||||
<div key={r.id} className="flex items-center justify-between p-3 rounded-lg border border-border/50 hover:border-aethex-400/50 transition-all">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-12 w-12"><AvatarImage src={r.avatar_url} /><AvatarFallback>{(r.full_name || r.username || "U")[0]}</AvatarFallback></Avatar>
|
||||
<div>
|
||||
<div className="font-semibold">{r.full_name || r.username}</div>
|
||||
<div className="text-xs text-muted-foreground">{r.bio?.slice(0, 80) || "Member"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant={isFollowing(r.id) ? "outline" : "default"} onClick={() => toggleFollow(r.id)}>
|
||||
{isFollowing(r.id) ? (<span className="flex items-center gap-1"><UserCheck className="h-4 w-4" /> Following</span>) : (<span className="flex items-center gap-1"><UserPlus className="h-4 w-4" /> Follow</span>)}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{recommended.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground">No people found yet.</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue