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

following page, but does not refresh on delete

parent 90aea8e6
No related branches found
No related tags found
1 merge request!41following page, but does not refresh on delete
Pipeline #39770 passed
export default async function Following() {
import { BackHeader } from "@/components/back-header"
import { GlobalLayout } from "@/components/global-layout"
import { UserFollows } from "@/components/profile/components/user-follows"
import { Card } from "@/components/ui/card"
import { getCurrentUser } from "@/lib/session"
export default async function Following({ params }: { params: { username: string } }) {
const session = await getCurrentUser()
return (
<div>
<h1>Following Page WIP</h1>
</div>
<GlobalLayout
mainContent={
<Card className="w-full overflow-hidden ">
<div className="p-3">
<BackHeader>
<h1 className="font-bold">Following</h1>
</BackHeader>
</div>
<div className="px-5">
<UserFollows username={params.username} session={session} />
</div>
</Card>
}
/>
)
}
\ No newline at end of file
......@@ -3,14 +3,13 @@ import { getCurrentUser } from "@/lib/session"
import { NextResponse } from "next/server"
import { z } from "zod"
// get following or followers information
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const userId = searchParams.get("userId") || undefined
const username = searchParams.get("userId") || undefined
const type = searchParams.get("type") || undefined
const userIdSchema = z.string().cuid().optional()
const zod = userIdSchema.safeParse(userId)
const userIdSchema = z.string().optional()
const zod = userIdSchema.safeParse(username)
if (!zod.success) {
return NextResponse.json(zod.error, { status: 400 })
......@@ -21,19 +20,29 @@ export async function GET(request: Request) {
const followers = await db.user
.findUnique({
where: {
id: userId,
username,
},
})
.followers({
include: {
followers: true,
following: true,
},
})
.followers()
return NextResponse.json(followers, { status: 200 })
} else if (type === "following") {
const following = await db.user
.findUnique({
where: {
id: userId,
username,
},
})
.following({
include: {
followers: true,
following: true,
},
})
.following()
return NextResponse.json(following, { status: 200 })
}
......@@ -42,7 +51,6 @@ export async function GET(request: Request) {
}
}
// follow a user
export async function PUT(request: Request) {
const session = await getCurrentUser()
const { userId } = await request.json()
......@@ -84,7 +92,6 @@ export async function PUT(request: Request) {
}
}
// unfollow a user
export async function DELETE(request: Request) {
const session = await getCurrentUser()
const { userId } = await request.json()
......
......@@ -36,43 +36,48 @@ export const FollowButton = ({
}, [router, followMutation.isSuccess, unfollowMutation.isSuccess])
return (
<Dialog open={open} onOpenChange={setOpen}>
{isFollowing ? (
<DialogTrigger asChild>
<Button variant={`${isHovered ? "destructive" : "outline"}`} size="lg"
className="w-24"
onMouseEnter={() => {
setText("Unfollow")
setIsHovered(true)
}}
onMouseOut={() => {
setText("Following")
setIsHovered(false)
}}>
{text}
<div onClick={(e) => {
e.preventDefault()
e.stopPropagation()
}}>
<Dialog open={open} onOpenChange={setOpen}>
{isFollowing ? (
<DialogTrigger asChild >
<Button variant={`${isHovered ? "destructive" : "outline"}`} size="lg"
className="w-24"
onMouseEnter={() => {
setText("Unfollow")
setIsHovered(true)
}}
onMouseOut={() => {
setText("Following")
setIsHovered(false)
}}>
{text}
</Button>
</DialogTrigger>
) : (
<Button size="lg" onClick={() => followMutation.mutate({ userId })}>
Follow
</Button>
</DialogTrigger>
) : (
<Button size="lg" onClick={() => followMutation.mutate({ userId })}>
Follow
</Button>
)}
<DialogContent>
<DialogHeader>
<DialogTitle>Unfollow @{username}?</DialogTitle>
<DialogDescription>
You can still view their profile, unless their Gweets are protected.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={() => unfollowMutation.mutate({ userId })} disabled={unfollowMutation.isLoading}>
{unfollowMutation.isLoading && (
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
)}
Unfollow
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
<DialogContent>
<DialogHeader>
<DialogTitle>Unfollow @{username}?</DialogTitle>
<DialogDescription>
You can still view their profile, unless their Gweets are protected.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={() => unfollowMutation.mutate({ userId })} disabled={unfollowMutation.isLoading}>
{unfollowMutation.isLoading && (
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
)}
Unfollow
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}
\ No newline at end of file
export const getFollows = async (id: string | undefined, type: string | undefined) => {
try {
const data = await fetch(`/api/users/follow?type=${type}&user_id=${id}`)
const data = await fetch(`/api/users/follow?type=${type}&userId=${id}`)
.then((result) => result.json())
return data
......
"use client"
import LoadingItem from "@/components/loading-item"
import { TryAgain } from "@/components/try-again"
import { User } from "next-auth"
import { usePathname } from "next/navigation"
import { useGetFollows } from "../hooks/use-get-follows"
import { UserItem } from "./user-item"
export const UserFollows = ({ username, session }: { username: string, session: User | undefined }) => {
const pathValue = usePathname().split("/")[2] || ""
const {
data: following,
isLoading,
isError,
} = useGetFollows({
id: username,
type: pathValue,
})
if (isLoading) {
return (
<LoadingItem />
)
}
if (isError || !following) {
return (
<TryAgain />
)
}
if (following?.length === 0) {
if (session?.username === username) {
return (
<div className="m-6 flex justify-center">
<div className="font-bold">
<h1>You are not following anyone.</h1>
<p>When you do, it&apos;ll show up here.</p>
</div>
</div>
)
}
return (
<div className="m-6 flex justify-center">
<div className="font-bold">
<h1><span className="text-sky-500">@{username}</span> is not following anyone yet.</h1>
<p>When they do, it&apos;ll show up here.</p>
</div>
</div>
)
}
return (
<div className="space-y-5 flex flex-col">
{following?.map((user) => {
return <UserItem key={user?.id} user={user} sessionId={session?.id} />
})}
</div>
)
}
\ No newline at end of file
import { FollowButton } from "@/components/follow-button"
import { UserAvatar } from "@/components/user-avatar"
import Link from "next/link"
import { IUser } from "../types"
import { following } from "../utils/following"
export const UserItem = ({ user, sessionId }: { user: IUser, sessionId: string | undefined }) => {
const isFollowing = following({
user,
sessionUserId: sessionId ? sessionId : "",
})
return (
<Link
href={`/${user?.username}`}
className="flex flex-row flex-shrink gap-3 hover:bg-accent active:bg-accent rounded-lg p-3 items-center">
<UserAvatar
user={{ username: user.username, image: user.image || null }}
className="h-12 w-12 aspect-square"
/>
<div className="flex flex-col flex-shrink justify-center h-full w-full space-y-3 overflow-hidden">
<div className="flex justify-between">
<div className="whitespace-nowrap">
<h1 className="font-bold">{user.name}</h1>
<h1 className="text-sm text-sky-500">@{user.username}</h1>
</div>
<FollowButton
userId={user.id}
username={user.username ? user.username : ""}
isFollowing={isFollowing}
/>
</div>
{user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p>&nbsp;</p>}
</div>
</Link>
)
}
......@@ -7,12 +7,12 @@ export const Trend = ({ ranking = 1, title, gweets = 1 }: iTrendProps) => {
return (
<Link
href={`/search?query=${title.toLowerCase()}`}
className="flex flex-col justify-between hover:bg-accent active:bg-accent rounded-lg p-1">
className="flex flex-col justify-between hover:bg-accent active:bg-accent rounded-lg p-1 overflow-hidden">
<div className="text-xs text-muted-foreground">
{ranking} · Trending
</div>
<div>#{title}</div>
<div className="truncate">#{title}</div>
<div className="text-xs text-muted-foreground">
{gweets} {gweets === 1 ? "gweet" : "gweets"}
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment