From 3030711b5a1e20a70956a30456bb3ac0197deb06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Sun, 9 Jul 2023 17:47:04 +0200
Subject: [PATCH] following and followers Pages done but missing Follow Button
because its scuffed, also added connect sidebar and page
---
app/(content)/(home)/home/page.tsx | 17 +++++++--
app/(content)/(home)/people/page.tsx | 26 +++++++++++++
components/filter-sort-games.tsx | 4 +-
components/global-layout.tsx | 2 +-
components/profile/components/connect.tsx | 37 +++++++++++++++++++
.../components/profile-side-content.tsx | 32 ++++++++++------
components/profile/components/user-item.tsx | 4 +-
components/trends/components/trends.tsx | 2 +-
8 files changed, 104 insertions(+), 20 deletions(-)
create mode 100644 app/(content)/(home)/people/page.tsx
create mode 100644 components/profile/components/connect.tsx
diff --git a/app/(content)/(home)/home/page.tsx b/app/(content)/(home)/home/page.tsx
index d159dec..b7970be 100644
--- a/app/(content)/(home)/home/page.tsx
+++ b/app/(content)/(home)/home/page.tsx
@@ -1,11 +1,15 @@
import { CreateGweet } from "@/components/create-gweet/components/create-gweet"
import { GlobalLayout } from "@/components/global-layout"
import { Gweets } from "@/components/gweets/components/gweets"
+import { Connect } from "@/components/profile/components/connect"
import ScrollToTop from "@/components/scroll-to-top"
import { Trends } from "@/components/trends/components/trends"
import { Card } from "@/components/ui/card"
+import { getCurrentUser } from "@/lib/session"
export default async function HomePage() {
+ const session = await getCurrentUser()
+
return (
<GlobalLayout
mainContent={
@@ -20,9 +24,16 @@ export default async function HomePage() {
</>
}
sideContent={
- <Card className="p-5 bg-secondary">
- <Trends />
- </Card>
+ <>
+ <Card className="p-5 bg-secondary">
+ <Trends />
+ </Card>
+
+ <Card className="p-6 bg-secondary">
+ <Connect session={session} />
+ </Card>
+ </>
+
}
/>
)
diff --git a/app/(content)/(home)/people/page.tsx b/app/(content)/(home)/people/page.tsx
new file mode 100644
index 0000000..03cf426
--- /dev/null
+++ b/app/(content)/(home)/people/page.tsx
@@ -0,0 +1,26 @@
+import { BackHeader } from "@/components/back-header"
+import { GlobalLayout } from "@/components/global-layout"
+import { Connect } from "@/components/profile/components/connect"
+import { Card } from "@/components/ui/card"
+import { getCurrentUser } from "@/lib/session"
+
+export default async function PeoplePage() {
+ const session = await getCurrentUser()
+
+ return (
+ <GlobalLayout
+ mainContent={
+ <Card className="w-full overflow-hidden">
+ <div className="p-3">
+ <BackHeader>
+ <h1 className="font-bold">People</h1>
+ </BackHeader>
+ </div>
+ <div className="px-5">
+ <Connect title="" session={session} />
+ </div>
+ </Card>
+ }
+ />
+ )
+}
\ No newline at end of file
diff --git a/components/filter-sort-games.tsx b/components/filter-sort-games.tsx
index 12ef0c9..1d20997 100644
--- a/components/filter-sort-games.tsx
+++ b/components/filter-sort-games.tsx
@@ -58,7 +58,7 @@ export default function Sort() {
return (
<Card className="p-6 grid items-start gap-2 bg-secondary">
- <h1>Filter</h1>
+ <h1 className="font-bold">Filter</h1>
<Select value={selectedCategory ? selectedCategory : undefined} key={selectedCategory[0]} onValueChange={(value) => setSelectedCategory(value)}>
<SelectTrigger className={`bg-background border-none w-full ${selectedCategory[0] ? 'font-extrabold' : ''}`}>
<SelectValue placeholder="By category..." />
@@ -123,7 +123,7 @@ export default function Sort() {
</SelectContent>
</Select>
- <h1 className="pt-6">Sort by</h1>
+ <h1 className="pt-6 font-bold">Sort by</h1>
<div className="flex space-x-2 pb-1">
<Select value={selectedSortMethod} onValueChange={(value) => setSelectedSortMethod(value)}>
<SelectTrigger className="bg-background border-none w-full">
diff --git a/components/global-layout.tsx b/components/global-layout.tsx
index 8d669c2..0fc9324 100644
--- a/components/global-layout.tsx
+++ b/components/global-layout.tsx
@@ -4,7 +4,7 @@ export const GlobalLayout = ({ mainContent, sideContent }: { mainContent: JSX.El
<div className="col-span-3 flex justify-center">
{mainContent}
</div>
- <aside className="self-start sticky top-[89px] col-span-1">
+ <aside className="self-start sticky top-[89px] col-span-1 space-y-6">
{sideContent}
</aside>
</div>
diff --git a/components/profile/components/connect.tsx b/components/profile/components/connect.tsx
new file mode 100644
index 0000000..fe00a65
--- /dev/null
+++ b/components/profile/components/connect.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import LoadingItem from "@/components/loading-item"
+import { TryAgain } from "@/components/try-again"
+import { Card } from "@/components/ui/card"
+import { User } from "next-auth"
+import Link from "next/link"
+import { useUsers } from "../hooks/use-users"
+import { UserItem } from "./user-item"
+
+export const Connect = ({ title = "Who to follow", session }: { title?: string, session: User | undefined }) => {
+ const { data: people, isLoading, isError, isSuccess } = useUsers()
+
+ return (
+ <div className="space-y-5 flex flex-col">
+ {title && <h1 className="font-bold p-1">{title}</h1>}
+ {isLoading ? (
+ <LoadingItem />
+ ) : isError ? (
+ <TryAgain />
+ ) : people?.length <= 0 ? (
+ <Card className="p-1">
+ <h1 className="text-center">{"Empty :("}</h1>
+ </Card>
+ ) : isSuccess &&
+ people?.slice(title ? 0 : undefined, title ? 3 : undefined).map((person) => {
+ return <UserItem
+ key={person?.id}
+ user={person}
+ sessionId={session?.id}
+ showBio={title ? false : true} />
+ })}
+
+ {title && <Link href={"/people"} className="self-end hover:bg-accent p-1 rounded-lg">Show more</Link>}
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/components/profile/components/profile-side-content.tsx b/components/profile/components/profile-side-content.tsx
index 2027f40..71a6930 100644
--- a/components/profile/components/profile-side-content.tsx
+++ b/components/profile/components/profile-side-content.tsx
@@ -1,17 +1,27 @@
+import { Trends } from "@/components/trends/components/trends"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
+import { getCurrentUser } from "@/lib/session"
+import { Connect } from "./connect"
+
+export const ProfileSideContent = async () => {
+ const session = await getCurrentUser()
-export const ProfileSideContent = () => {
return (
- <Card className="p-6 grid items-start gap-2 bg-secondary">
- <h1>Media</h1>
- <div className="grid grid-cols-1 gap-4">
- {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
- return (
- <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
- )
- })}
- </div>
- </Card>
+ <div className="space-y-6">
+ <Card className="p-6 bg-secondary">
+ <div className="grid grid-cols-2 gap-3">
+ {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => {
+ return (
+ <Skeleton key={i} className="aspect-[1/1] bg-gray-300" />
+ )
+ })}
+ </div>
+ </Card>
+
+ <Card className="p-6 bg-secondary">
+ <Connect session={session} />
+ </Card>
+ </div>
)
}
\ No newline at end of file
diff --git a/components/profile/components/user-item.tsx b/components/profile/components/user-item.tsx
index 20fa31d..f49ed9c 100644
--- a/components/profile/components/user-item.tsx
+++ b/components/profile/components/user-item.tsx
@@ -4,7 +4,7 @@ import Link from "next/link"
import { IUser } from "../types"
import { following } from "../utils/following"
-export const UserItem = async ({ user, sessionId }: { user: IUser, sessionId: string | undefined }) => {
+export const UserItem = async ({ user, sessionId, showBio = true }: { user: IUser, sessionId: string | undefined, showBio?: Boolean }) => {
const isFollowing = following({
user,
sessionUserId: sessionId ? sessionId : "",
@@ -37,7 +37,7 @@ export const UserItem = async ({ user, sessionId }: { user: IUser, sessionId: st
} */}
</div>
- {user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p> </p>}
+ {showBio && (user.bio ? (<p className="truncate w-full">{user.bio}</p>) : <p> </p>)}
</div>
</Link>
)
diff --git a/components/trends/components/trends.tsx b/components/trends/components/trends.tsx
index 2fef530..27fd41c 100644
--- a/components/trends/components/trends.tsx
+++ b/components/trends/components/trends.tsx
@@ -22,7 +22,7 @@ export const Trends = ({ title = "Trends" }: { title?: string }) => {
<h1 className="text-center">No trends yet</h1>
</Card>
) : isSuccess &&
- hashtags?.map((hashtag, index) => {
+ hashtags?.slice(title ? 0 : undefined, title ? 3 : undefined).map((hashtag, index) => {
return (
<Trend
key={hashtag.id}
--
GitLab