Skip to content

Commit 8e1de05

Browse files
DhravyaDhravya
committed
made home.tsx
1 parent f6f0e61 commit 8e1de05

File tree

3 files changed

+100
-81
lines changed

3 files changed

+100
-81
lines changed

‎src/components/Sidebar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function Sidebar() {
7878
const { data: session } = useSession();
7979

8080
const currentPath = router.pathname;
81-
const isHome = currentPath === "/";
81+
const isHome = currentPath === "/home";
8282
const isCommunity = currentPath === "/community";
8383
const isCreate = currentPath === "/create";
8484
const isDashboard = currentPath === "/dash";
@@ -87,7 +87,7 @@ function Sidebar() {
8787
<div className="bg-white dark:bg-[#242424] z-10">
8888
{/* Mobile */}
8989
<div className="fixed bottom-0 flex items-center justify-between w-full h-20 px-8 bg-white md:hidden dark:bg-[#242424] drop-shadow-2xl">
90-
<Link href="/">
90+
<Link href="/home">
9191
<div
9292
className={`rounded-full ${
9393
isHome && "dark:bg-slate-700/50 bg-slate-400/20"
@@ -167,7 +167,7 @@ function Sidebar() {
167167
<div className="sticky top-0 flex-col items-center justify-center hidden min-h-screen border-gray-300 shadow-md md:flex w-28 border-1">
168168
<div className="ml-10 flex flex-col gap-1 space-y-7">
169169
<Item
170-
link="/"
170+
link="/home"
171171
tip="Home"
172172
icon={<HomeIcon className="w-6 h-6 text-cyan-500" />}
173173
home={true}

‎src/pages/home.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { ReactElement } from "react";
2+
import Head from "next/head";
3+
import { useState, useRef, useCallback } from "react";
4+
import FeedPost from "~/components/FeedPost";
5+
import Post from "~/types/Post";
6+
import usePostFeed from "~/hooks/usePostFeed";
7+
import FeedPage from "~/components/layouts/FeedPage";
8+
import { Spinner } from "flowbite-react";
9+
import NextPageWithLayout from "~/types/NextPageWithLayout";
10+
import { useNotifs } from '~/contexts/NotifyContext';
11+
12+
const Home: NextPageWithLayout = () => {
13+
const [last, setLast] = useState<number>(0);
14+
const { unseens } = useNotifs();
15+
16+
let {
17+
memes,
18+
loading,
19+
hasMore
20+
}: { memes: Post[]; loading: boolean; hasMore: boolean} = usePostFeed({
21+
url: `/api/getMemes?last=${last}&max_tweets=10`,
22+
});
23+
const observer = useRef<IntersectionObserver>();
24+
25+
const lastMemeRef = useCallback(
26+
(node: any) => {
27+
if (loading) return;
28+
if (observer.current) observer.current.disconnect();
29+
30+
observer.current = new IntersectionObserver((entries) => {
31+
if (entries[0]?.isIntersecting) {
32+
setLast(memes.length)
33+
}
34+
});
35+
if (node) observer.current.observe(node);
36+
},
37+
[loading, memes]
38+
);
39+
40+
41+
return (
42+
<>
43+
<Head>
44+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
45+
<title>{unseens > 0 ? (unseens > 9 ? "(9+) " : `(${unseens}) `) : " "}Home | LMFAO.tech</title>
46+
</Head>
47+
48+
<div className="flex flex-col w-full mb-20 overflow-hidden shadow-sm md:md-0">
49+
<div className="flex flex-col px-2 md:px-32">
50+
{memes.map((post, index) => {
51+
if (index === memes.length - 1) {
52+
return (
53+
<div key={post.tweet_id} ref={lastMemeRef}>
54+
<FeedPost post={post} />
55+
</div>
56+
);
57+
} else {
58+
return (
59+
<div key={post.tweet_id}>
60+
<FeedPost post={post} />
61+
</div>
62+
);
63+
}
64+
})}
65+
{loading && (
66+
<div className="flex items-center justify-center h-full">
67+
<div className="dark:text-white ">
68+
Loading... <Spinner />
69+
</div>
70+
</div>
71+
)}
72+
</div>
73+
</div>
74+
</>
75+
);
76+
};
77+
78+
Home.getLayout = (page: ReactElement) => {
79+
return <FeedPage>{page}</FeedPage>;
80+
};
81+
82+
export default Home;

‎src/pages/index.tsx

Lines changed: 15 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,19 @@
1-
import { ReactElement } from "react";
2-
import Head from "next/head";
3-
import { useState, useRef, useCallback } from "react";
4-
import FeedPost from "~/components/FeedPost";
5-
import Post from "~/types/Post";
6-
import usePostFeed from "~/hooks/usePostFeed";
7-
import FeedPage from "~/components/layouts/FeedPage";
8-
import { Spinner } from "flowbite-react";
9-
import NextPageWithLayout from "~/types/NextPageWithLayout";
10-
import { useNotifs } from '~/contexts/NotifyContext';
11-
12-
const Home: NextPageWithLayout = () => {
13-
const [last, setLast] = useState<number>(0);
14-
const { unseens } = useNotifs();
15-
16-
let {
17-
memes,
18-
loading,
19-
hasMore
20-
}: { memes: Post[]; loading: boolean; hasMore: boolean} = usePostFeed({
21-
url: `/api/getMemes?last=${last}&max_tweets=10`,
22-
});
23-
const observer = useRef<IntersectionObserver>();
24-
25-
const lastMemeRef = useCallback(
26-
(node: any) => {
27-
if (loading) return;
28-
if (observer.current) observer.current.disconnect();
29-
30-
observer.current = new IntersectionObserver((entries) => {
31-
if (entries[0]?.isIntersecting) {
32-
setLast(memes.length)
33-
}
34-
});
35-
if (node) observer.current.observe(node);
36-
},
37-
[loading, memes]
38-
);
1+
import React from 'react'
2+
import {useSession} from "next-auth/react"
3+
import { useRouter } from 'next/router'
394

5+
function Index() {
6+
const session = useSession()
7+
const router = useRouter()
408

9+
// TODO: @yxshv pls lol
10+
// If user is logged in, redirect to /home.
11+
// otherwise, redirect to what-is.lmfao.tech
4112
return (
42-
<>
43-
<Head>
44-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
45-
<title>{unseens > 0 ? (unseens > 9 ? "(9+) " : `(${unseens}) `) : " "}Home | LMFAO.tech</title>
46-
</Head>
47-
48-
<div className="flex flex-col w-full mb-20 overflow-hidden shadow-sm md:md-0">
49-
<div className="flex flex-col px-2 md:px-32">
50-
{memes.map((post, index) => {
51-
if (index === memes.length - 1) {
52-
return (
53-
<div key={post.tweet_id} ref={lastMemeRef}>
54-
<FeedPost post={post} />
55-
</div>
56-
);
57-
} else {
58-
return (
59-
<div key={post.tweet_id}>
60-
<FeedPost post={post} />
61-
</div>
62-
);
63-
}
64-
})}
65-
{loading && (
66-
<div className="flex items-center justify-center h-full">
67-
<div className="dark:text-white ">
68-
Loading... <Spinner />
69-
</div>
70-
</div>
71-
)}
72-
</div>
73-
</div>
74-
</>
75-
);
76-
};
77-
78-
Home.getLayout = (page: ReactElement) => {
79-
return <FeedPage>{page}</FeedPage>;
80-
};
13+
<div>
14+
LMFAO
15+
</div>
16+
)
17+
}
8118

82-
export default Home;
19+
export default Index

0 commit comments

Comments
 (0)