Skip to content
Snippets Groups Projects
Commit 5b0c7a6c authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

profile ui and editing, needs still optimization

parent a5e43b4e
No related branches found
No related tags found
1 merge request!38Profile
Pipeline #39542 passed
Stage: build
Stage: test
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 339 additions and 323 deletions
app/(content)/(user)/[userid]/(profile)/followers/page.tsx deleted 100644 → 0
+ 0
− 62
View file @ a5e43b4e
import { GlobalLayout } from "@/components/global-layout"
import { UserAvatar } from "@/components/user-avatar"
import { db } from "@/lib/db"
import { User } from "@prisma/client"
import Link from "next/link"
export default async function UserFollowers({ params }: { params: { userid: string } }) {
const fullUser = await db.user.findFirst({
where: {
username: params.userid
},
include: {
following: true,
followers: true
}
})
const followers = await db.user.findMany({
where: {
following: {
every: {
followerId: { not: undefined }
}
},
followers: {
every: {
followingId: fullUser?.id
}
}
}
})
return (
<GlobalLayout
mainContent={
<div className="flex flex-col w-full">
{followers?.map((follower: User) => (
<div className="flex items-center space-y-6" key={follower.id}>
<Link href={`/${follower.username}`} className="flex flex-row">
<UserAvatar
user={{ username: follower.username, image: follower.image }}
className="h-10 w-10"
/>
<div className="flex flex-col ml-3">
<span className="font-bold">{follower.name}</span>
<span className="text-sky-500 text-sm">@{follower.username}</span>
</div>
</Link>
<div className="ml-auto">
{/* Followbutton */}
</div>
</div>
))}
</div>
}
/>
)
}
\ No newline at end of file
app/(content)/(user)/[username]/(profile)/following/page.tsx 0 → 100644
+ 7
− 0
View file @ 5b0c7a6c
export default async function Following() {
return (
<div>
<h1>Following Page WIP</h1>
</div>
)
}
\ No newline at end of file
app/(content)/(user)/[userid]/(profile)/layout.tsx → app/(content)/(user)/[username]/(profile)/layout.tsx
+ 37
− 0
View file @ 5b0c7a6c
import { GlobalLayout } from "@/components/global-layout"
import { Profile } from "@/components/profile/components/profile"
import { ProfileSideContent } from "@/components/profile/components/profile-side-content"
import { ProfileUserInfo } from "@/components/profile/components/profile-user-info"
import { Card } from "@/components/ui/card"
import { UserNotFound } from "@/components/user-not-found"
import getURL from "@/lib/utils"
export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'
export default async function ProfileLayout({
params,
children,
}: {
params: { username: string }
children: React.ReactNode
}) {
const user = await fetch(getURL(`/api/users/${params.username}`)).then((result) => result.json())
return (
<GlobalLayout
mainContent={
<Profile >
{children}
</Profile>
<Card className="overflow-hidden h-full w-full">
{!user ?
<UserNotFound />
:
<>
<ProfileUserInfo user={user} />
{children}
</>
}
</Card>
}
sideContent={<ProfileSideContent />}
/>
......
app/(content)/(user)/[userid]/(profile)/page.tsx → app/(content)/(user)/[username]/(profile)/page.tsx
+ 2
− 2
View file @ 5b0c7a6c
import { ProfileUserContent } from "@/components/profile/components/profile-user-content"
export default async function User({ params }: { params: { userid: string } }) {
export default async function User({ params }: { params: { username: string } }) {
return (
<div className="space-y-6 w-full">
<ProfileUserContent userid={params.userid} />
{/* <ProfileUserContent userid={params.username} /> */}
</div>
)
}
\ No newline at end of file
app/api/users/[username]/route.ts
+ 1
− 0
View file @ 5b0c7a6c
......@@ -29,6 +29,7 @@ export async function GET(request: Request, context: { params: { username: strin
createdAt: true,
bio: true,
location: true,
website: true,
followers: true,
following: true,
......
components/follow-button.tsx
+ 2
− 0
View file @ 5b0c7a6c
"use client"
import { useFollow } from "./profile/hooks/use-follow"
import { Button } from "./ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"
......
components/profile/components/edit-profile-modal.tsx
+ 231
− 165
View file @ 5b0c7a6c
This diff is collapsed.
components/profile/components/profile-user-info.tsx
+ 55
− 43
View file @ 5b0c7a6c
......@@ -13,71 +13,83 @@ import { UserJoinDate } from "./user-join-date"
export const ProfileUserInfo = async ({ user }: { user: IUser }) => {
const session = await getCurrentUser()
// const isFollowing = following({
// user,
// sessionUserId: session ? session.id : "",
// })
const isFollowing = following({
user,
sessionUserId: session ? session.id : "",
})
return (
<>
{/* <div className="h-64 overflow-hidden">
<AspectRatio ratio={889 / 500} className="bg-slate-600 dark:bg-slate-400">
{user.banner &&
<Image
src={user.banner}
alt={"user banner image"}
fill
priority
className="object-center"
/>
}
</AspectRatio>
<AspectRatio ratio={3 / 1} className="bg-muted w-full overflow-hidden">
{user.banner &&
<Image
src={user.banner}
alt={"user banner image"}
fill
priority
className="object-center object-cover w-full h-full"
/>
}
</AspectRatio>
<div className="relative">
<div className="flex items-end justify-between p-6 md:px-12">
<div>
<div className="absolute bottom-6 md:bottom-3">
<UserAvatar
user={{ username: user.username, image: user.image || null }}
className="h-20 md:h-40 w-20 md:w-40"
/>
</div>
</div>
<div>
{session?.id === user.id ? (
<EditProfileModal user={user} />
) : (
<FollowButton
userId={user.id}
username={user.username ? user.username : ""}
isFollowing={isFollowing}
/>
)}
</div>
</div>
</div>
<div className="p-6 md:p-12 ss:flex">
<UserAvatar
user={{ username: user.username, image: user.image || null }}
className="h-52 w-52 -mt-36"
/>
<div className="ml-6 md:ml-12 space-y-3">
<div className="px-6 md:px-12 flex flex-col space-y-3 w-full">
<div className="pb-3 whitespace-nowrap items-center">
<h1 className="text-2xl font-bold">{user.name}</h1>
<h1 className="text-md text-sky-500">@{user.username}</h1>
{user.bio && <h1 className="">{user.bio}</h1>}
</div>
{user.bio && <h1 className="">{user.bio}</h1>}
<div className="flex whitespace-nowrap items-center space-x-6 text-muted-foreground">
{user.location &&
<div className="space-x-2">
<Icons.location />
{user.location}
<div className="flex items-center">
<Icons.location className="mr-1" />
<div>{user.location}</div>
</div>
}
{user.website &&
<div className="space-x-2">
<Icons.website />
{user.website}
<div className="flex items-center">
<Icons.website className="mr-1" />
<div>{user.website}</div>
</div>
}
{user.createdAt && <UserJoinDate date={user.createdAt} />}
</div>
<div className="flex justify-end ml-6 md:ml-12">
{session?.id === user.id ? (
<EditProfileModal user={user} />
) : (
<FollowButton userId={user.id} username={user.username ? user.username : ""} isFollowing={isFollowing} />
)}
</div>
<div className="flex justify-between w-full mt-6 md:mt-12">
<div className="flex whitespace-nowrap items-center space-x-6">
<Link href={`/${user.username}/following`}>
<span className="text-sm">{user._count?.following}</span>
<span className="text-sm">Following</span>
<span className="text-sm font-bold">{user._count?.following}</span>
<span className="text-sm text-muted-foreground"> Following</span>
</Link>
<Link href={`/${user.username}/followers`}>
<span className="text-sm">{user._count?.followers}</span>
<span className="text-sm">Followers</span>
<span className="text-sm font-bold">{user._count?.followers}</span>
<span className="text-sm text-muted-foreground"> Followers</span>
</Link>
</div>
</div> */}
</div>
</ >
)
}
\ No newline at end of file
components/profile/components/profile.tsx deleted 100644 → 0
+ 0
− 47
View file @ a5e43b4e
"use client"
import LoadingItem from "@/components/loading-item"
import { TryAgain } from "@/components/try-again"
import { Card } from "@/components/ui/card"
import { UserNotFound } from "@/components/user-not-found"
import { usePathname } from "next/navigation"
import { useUser } from "../hooks/use-user"
import { ProfileUserInfo } from "./profile-user-info"
export const Profile = ({ children }: { children: React.ReactNode }) => {
const pathname = usePathname()
const username = pathname?.split("/")[1] || ""
// TODO: Fix this client / server side rendering issue
const { data: user, isLoading, isError } = useUser(username)
if (isLoading) {
return (
<>
<LoadingItem />
</>
)
}
if (isError) {
return (
<>
<TryAgain />
</>
)
}
if (!isLoading && !isError && !user) {
return (
<>
<UserNotFound />
</>
)
}
return (
<Card className="overflow-hidden h-full w-full">
{/* <ProfileUserInfo user={user} /> */}
<div>{children}</div>
</Card>
)
}
components/profile/components/user-join-date.tsx
+ 4
− 4
View file @ 5b0c7a6c
......@@ -9,11 +9,11 @@ export const UserJoinDate = ({
showIcon?: boolean
}) => {
return (
<div className="">
{showIcon && (<Icons.calendar />)}
<span className="">
<div className="flex items-center">
{showIcon && (<Icons.calendar className="mr-1" />)}
<div>
Joined {dayjs(date).format("MMMM YYYY")}
</span>
</div>
</div>
)
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment