Skip to content

Commit

Permalink
Get profile info from DB
Browse files Browse the repository at this point in the history
  • Loading branch information
@mxsaad
mxsaad committed Mar 20, 2024
1 parent 66c633e commit 4967926
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 96 deletions.
45 changes: 29 additions & 16 deletions app/(root)/[username]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,46 @@
import { currentUser } from "@clerk/nextjs"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
import ViewProfile from "@/components/shared/view-profile";
import EditProfile from "@/components/shared/edit-profile";
import { auth } from "@clerk/nextjs/server";
import connectToDatabase from "@/lib/mongodb";
import { notFound } from "next/navigation";

export default async function Profile({
params,
}: {
params: { username: string };
}) {
const username = params.username.replace("%40", "").toLowerCase(); // Remove %40 (@) and convert to lowercase
const { database } = await connectToDatabase();
const user = await database.collection("users").findOne({ username });
if (!user) return notFound();

export default async function Profile({ params }: { params: { username: string } }) {
const user = await currentUser();
return (
<main className="min-h-screen w-screen px-6 py-12">
<div className="flex flex-col items-center">
<Tabs defaultValue="view" className="w-full max-w-prose text-center">
{`%40${user?.username}` === params.username.toLowerCase() && ( // %40 = @ symbol in URL
<TabsList className="mt-10 mb-4">
<TabsTrigger value="view" className="flex gap-2 items-center">
<EyeOpenIcon /> View
</TabsTrigger>
<TabsTrigger value="edit" className="flex gap-2 items-center">
<Pencil2Icon /> Edit
</TabsTrigger>
</TabsList>
)}
{
// Only show tabs if the user is viewing their own profile
auth().sessionClaims?.username === username && (
<TabsList className="mt-10 mb-4">
<TabsTrigger value="view" className="flex gap-2 items-center">
<EyeOpenIcon /> View
</TabsTrigger>
<TabsTrigger value="edit" className="flex gap-2 items-center">
<Pencil2Icon /> Edit
</TabsTrigger>
</TabsList>
)
}
<TabsContent value="view">
<ViewProfile />
<ViewProfile user={user} />
</TabsContent>
<TabsContent value="edit">
<EditProfile />
</TabsContent>
</Tabs>
</div>
</main>
)
);
}
162 changes: 82 additions & 80 deletions components/shared/view-profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import { Badge } from "@/components/ui/badge"
import { Separator } from "../ui/separator"
import { Badge } from "@/components/ui/badge";
import { Separator } from "../ui/separator";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
} from "@/components/ui/accordion";
import { Document, WithId } from "mongodb";

export default function ViewProfile() {
export default function ViewProfile({ user }: { user: WithId<Document> }) {
return (
<div className="flex flex-col items-center text-left gap-4">
{/* Bio */}
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-4 p-4">
<div className="flex flex-col">
<h1 className="text-wrap scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Full Name
{user.name}
</h1>
<p className="text-sm text-muted-foreground">
@username
</p>
<p className="text-sm text-muted-foreground">{`@${user.username}`}</p>
<div className="flex flex-wrap gap-2 mt-2">
<Badge>Tag 1</Badge>
<Badge>Tag 2</Badge>
<Badge>Tag 3</Badge>
{user.highlights.map((highlight: string) => (
<Badge key={highlight}>{highlight}</Badge>
))}
</div>
</div>
</div>
Expand All @@ -31,45 +30,36 @@ export default function ViewProfile() {
<section className="w-full flex flex-col gap-2 border-2 rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">Summary</h2>
<div className="flex flex-wrap gap-2">
<Badge>Age</Badge>
<Badge>Gender</Badge>
<Badge>Location</Badge>
<Badge>Status</Badge>
<Badge>{user.status}</Badge>
<Badge>{user.gender}</Badge>
<Badge>
{new Date().getFullYear() - new Date(user.dob).getFullYear()}
</Badge>
<Badge>{`${user.location.state}, ${user.location.country}`}</Badge>
</div>
<Separator />
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
</p>
<p className="text-muted-foreground break-words">{user.bio}</p>
</section>

{/* Religion */}
<section className="w-full flex flex-col gap-2 border-2 rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">Religion</h2>
<div className="flex flex-wrap gap-2">
<Badge>Aqeedah</Badge>
<Badge>Madhab</Badge>
<Badge>{user.religion.aqeedah}</Badge>
<Badge>{user.religion.madhab}</Badge>
</div>
<Separator />
<div className="w-full flex flex-col md:flex-row justify-evenly gap-4">
<div>
<h3 className="text-xl font-bold">Practice</h3>
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
<p className="text-muted-foreground break-words">
{user.religion.practice}
</p>
</div>
<div>
<h3 className="text-xl font-bold">Knowledge</h3>
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
<p className="text-muted-foreground break-words">
{user.religion.knowledge}
</p>
</div>
</div>
Expand All @@ -79,59 +69,62 @@ export default function ViewProfile() {
<section className="w-full flex flex-col gap-2 border-2 rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">Appearance</h2>
<div className="flex flex-wrap gap-2">
<Badge>Height</Badge>
<Badge>Weight</Badge>
<Badge>Build</Badge>
<Badge>Complexion</Badge>
<Badge>{user.appearance.height}</Badge>
<Badge>{`${user.appearance.weight} lbs`}</Badge>
<Badge>{user.appearance.build}</Badge>
<Badge>{user.appearance.complexion}</Badge>
</div>
<Separator />
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
<p className="text-muted-foreground break-words">
{user.appearance.description}
</p>
</section>

{/* Occupation */}
<section className="w-full flex flex-col gap-2 border-2 rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">Occupation</h2>
<div className="flex flex-wrap gap-2">
<Badge>Tag 1</Badge>
<Badge>Tag 2</Badge>
<Badge>Tag 3</Badge>
{user.occupation.tags.map((tag: string) => (
<Badge key={tag}>{tag}</Badge>
))}
</div>
<Separator />
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
<p className="text-muted-foreground break-words">
{user.occupation.description}
</p>
</section>

{/* Goals */}
<section className="w-full flex flex-col gap-2 border-2 rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">Goals</h2>
<Separator />
<Accordion type="single" defaultValue="item-1" collapsible className="-mt-2">
<Accordion
type="single"
defaultValue="item-1"
collapsible
className="-mt-2"
>
<AccordionItem value="item-1">
<AccordionTrigger className="text-xl font-bold">Short-Term</AccordionTrigger>
<AccordionTrigger className="text-xl font-bold">
Short-Term
</AccordionTrigger>
<AccordionContent className="text-base text-muted-foreground">
<ul className="ml-6 list-disc [&>li]:mt-2 text-muted-foreground">
<li>Memorize Quran</li>
<li>Become Fluent in Arabic</li>
<li>Become a Sigma Male</li>
{user.goals.shortTerm.map((goal: string) => (
<li key={goal}>{goal}</li>
))}
</ul>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger className="text-xl font-bold">Long-Term</AccordionTrigger>
<AccordionTrigger className="text-xl font-bold">
Long-Term
</AccordionTrigger>
<AccordionContent className="text-base text-muted-foreground">
<ul className="ml-6 list-disc [&>li]:mt-2 text-muted-foreground">
<li>Raise Scholars</li>
<li>Perform Hijrah</li>
<li>Enter Jannah</li>
{user.goals.longTerm.map((goal: string) => (
<li key={goal}>{goal}</li>
))}
</ul>
</AccordionContent>
</AccordionItem>
Expand All @@ -146,55 +139,64 @@ export default function ViewProfile() {
<ul className="list-decimal flex flex-col gap-2 text-muted-foreground">
<li className="flex gap-2 items-center">
Countries:
<Badge>Pakistan</Badge>
<Badge>Bosnia</Badge>
{user.family.countries.map((country: string) => (
<Badge key={country}>{country}</Badge>
))}
</li>
<li className="flex gap-2 items-center">
Languages:
<Badge>Urdu</Badge>
<Badge>English</Badge>
<Badge>Arabic</Badge>
{user.family.languages.map((country: string) => (
<Badge key={country}>{country}</Badge>
))}
</li>
</ul>
<h2 className="text-xl font-bold">Description</h2>
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui
eget mi ultrices vehicula. Nam eget nisl auctor, tincidunt elit vitae,
fermentum mi. Nulla nec dui eget mi ultrices vehicula. Nam eget nisl
auctor, tincidunt elit vitae, fermentum mi.
<p className="text-muted-foreground break-words">
{user.family.description}
</p>
</section>

{/* My Ideal Spouse */}
<section className="w-full flex flex-col gap-2 border-2 border-primary rounded-[--radius] p-4">
<h2 className="text-2xl font-bold">My Ideal Spouse</h2>
<div className="flex flex-wrap gap-2">
<Badge>Rich</Badge>
<Badge>Super Rich</Badge>
{user.spouse.tags.map((tag: string) => (
<Badge key={tag}>{tag}</Badge>
))}
</div>
<Separator />
<Accordion type="single" defaultValue="item-1" collapsible className="-mt-2">
<Accordion
type="single"
defaultValue="item-1"
collapsible
className="-mt-2"
>
<AccordionItem value="item-1">
<AccordionTrigger className="text-xl font-bold">Qualities</AccordionTrigger>
<AccordionTrigger className="text-xl font-bold">
Qualities
</AccordionTrigger>
<AccordionContent className="text-base text-muted-foreground">
<ul className="ml-6 list-disc [&>li]:mt-2 text-muted-foreground">
<li>Sigma Male</li>
<li>Willing to Give 100K + House for Mehr</li>
<li>Rich</li>
{user.spouse.qualities.map((quality: string) => (
<li key={quality}>{quality}</li>
))}
</ul>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger className="text-xl font-bold">Deal-Breakers</AccordionTrigger>
<AccordionTrigger className="text-xl font-bold">
Deal-Breakers
</AccordionTrigger>
<AccordionContent className="text-base text-muted-foreground">
<ul className="ml-6 list-disc [&>li]:mt-2 text-muted-foreground">
<li>Dayooth</li>
<li>Beta Male</li>
{user.spouse.dealBreakers.map((dealBreaker: string) => (
<li key={dealBreaker}>{dealBreaker}</li>
))}
</ul>
</AccordionContent>
</AccordionItem>
</Accordion>
</section>
</div>
)
);
}

0 comments on commit 4967926

Please sign in to comment.