done with display tweet

apps/X/app/api/post/route.ts

@@ -8,21 +8,35 @@ const prisma = new PrismaClient();
 
 export async function GET() {
   const session = await getServerSession(authOptions);
-
   if (!session) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
+  try {
+    const posts = await prisma.tweet.findMany({
+      include: {
+        user: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+    return NextResponse.json({ data: posts }, { status: 200 });
+  } catch (error) {
+    console.log("Error while fetching from DB", error);
+  }
+
   return NextResponse.json({ userId: session.user.id });
 }
 
 export const POST = async (req: NextRequest) => {
   try {
     const session = await getServerSession(authOptions);
-    console.log("Reaching in Post");
-    console.log(session, "This is the user");
-    console.log(session?.user.id, "This is the userID");
-    console.log(session?.user, "This is the userID");
+    // console.log("Reaching in Post");
+    // console.log(session, "This is the user");
+    // console.log(session?.user.id, "This is the userID");
+    // console.log(session?.user, "This is the userID");
 
     if (!session?.user?.id) {
       return NextResponse.json(

apps/X/app/lib/auth.ts

@@ -5,7 +5,7 @@ import GithubProvider from "next-auth/providers/github";
 import GoogleProvider from "next-auth/providers/google";
 import { Session } from "next-auth";
 import z from "zod";
-
+import type { Account, Profile, User } from "next-auth";
 declare module "next-auth" {
   interface Session {
     user: {
@@ -115,7 +115,6 @@ export const authOptions = {
             } else {
               console.log("Invalid password for existing user");
             }
-            console.log("This is name", existingUser.name);
           } catch (error) {
             console.log("Error while LogIn", error);
           }
@@ -151,9 +150,8 @@ export const authOptions = {
 
   callbacks: {
     async jwt({ token, user, account }: any) {
-      console.log("JWT Callback - User:", user);
-      console.log("JWT Callback - Account:", account);
-      console.log("OOOOOOOOOOO", token.id);
+      //console.log("JWT Callback - User:", user);
+      //console.log("JWT Callback - Account:", account);
 
       if (user) {
         token.id = user.id;
@@ -163,16 +161,16 @@ export const authOptions = {
       return token;
     },
     async session({ session, token }: any) {
-      console.log("Session Callback - Token:", token);
-      console.log("Session Callback - Initial Session:", session);
+      // console.log("Session Callback - Token:", token);
+      // console.log("Session Callback - Initial Session:", session);
 
       if (token && session.user) {
         session.user.id = token.id as string;
         session.user.username = token.username || null;
         session.user.email = token.email || null;
       }
 
-      console.log("Session Callback - Updated Session:", session);
+      //console.log("Session Callback - Updated Session:", session);
       return session;
     },
 

apps/X/src/components/ui/Post/TopPost.tsx

@@ -14,10 +14,10 @@ import { Button } from "../button";
 import { Input } from "../input";
 import { UserAvatar } from "../usrAvatar";
 import X_Icon from "../X_Icon";
-interface TweetInput {
-  content: string;
-  userId: number;
-}
+// interface TweetInput {
+//   content: string;
+//   userId: number;
+// }
 
 export const TopPost = () => {
   const [postInput, setPostInput] = useState("");

apps/X/src/components/ui/TweetComp.tsx

@@ -1,72 +1,55 @@
-import { FaRegComment } from "react-icons/fa6";
+"use client";
 import { BiRepost } from "react-icons/bi";
-import { UserAvatar } from "./usrAvatar";
+import { FaRegBookmark, FaRegComment } from "react-icons/fa6";
 import { FiHeart } from "react-icons/fi";
 import { IoIosStats } from "react-icons/io";
-import { FaRegBookmark } from "react-icons/fa6";
 import { RiShare2Line } from "react-icons/ri";
-<RiShare2Line />;
-export const TweetComp = () => {
-  return (
-    <div className="border border-slate-800 border-spacing-x-0.5">
-      <div className="flex p-3 gap-2">
-        <div className="mt-1">
-          <UserAvatar />
-        </div>
-        <div className="">
-          <div className="grid grid-cols-6">
-            <div className="flex col-span-5">
-              <p>username</p>
-              <p> @name</p>
-              <p> . time</p>
-            </div>
-            <p className="text-end">...</p>
-          </div>
-          <div className="flex flex-col">
-            <div className="list-inside">
-              #day100 so finally I completed 100 day of code. Amazing journey
-              amazing learning and amazing people I have got in this journey and
-              here are some glimpse from the journey. Thank you everyone and
-              specially @kirat_tw #100xdevs #buildinpublic #space
-              #LearningJourney #WeekendPlans
-            </div>
-            <div className="">Image Part</div>
-          </div>
-          {/* <div className="grid grid-cols-5 space-x-8">
-            <div className="flex col-span-1">
-              <FaRegComment />
-            </div>
-            <div className="flex col-span-1">
-              <BiRepost />
-            </div>
-            <div className="flex col-span-1">
-              <FiHeart />
-            </div>
-            <div className="flex col-span-1">
-              <IoIosStats />
-            </div>
-            <div className="flex">
-              <FaRegBookmark />
-              <RiShare2Line />
-            </div>
-          </div> */}
+import { UserAvatar } from "./usrAvatar";
 
-          <div className="flex space-x-24">
-            <FaRegComment />
-            <BiRepost />
-            <FiHeart />
-            <IoIosStats />
-            {/* <div className="">
-            </div>
-            <div className="">
-            </div>
-            <div className="">
+interface TweetProps {
+  tweet: {
+    id: number;
+    content: string;
+    userID: number;
+    likes: number;
+    createdDate: string;
+    user: { name: string };
+  };
+}
+
+export const TweetComp = ({ tweet }: TweetProps) => {
+  return (
+    <div>
+      <div>
+        <div className="border border-slate-800 border-spacing-x-0.5">
+          <div className="flex p-3 gap-2">
+            <div className="mt-1">
+              <UserAvatar />
             </div>
             <div className="">
-            </div> */}
-            <div className="flex">
-              <FaRegBookmark />
-              <RiShare2Line />
+              <div className="grid grid-cols-6">
+                <div className="flex col-span-5">
+                  <p>{tweet.user.name}</p>
+                  {/* <p> @tweet.content</p> */}
+                  <p> · {new Date(tweet.createdDate).toLocaleDateString()}</p>
+                </div>
+                <p className="text-end">...</p>
+              </div>
+              <div className="flex flex-col">
+                <div className="list-inside">{tweet.content}</div>
+                <div className="">Image Part</div>
+              </div>
+              <div className="flex space-x-24 text-slate-600">
+                <FaRegComment />
+                <BiRepost />
+                <FiHeart />
+                {/* <span>{tweet.likes} </span> */}
+                <IoIosStats />
+                <div className="flex">
+                  <FaRegBookmark />
+                  <RiShare2Line />
+                </div>
+              </div>
             </div>
           </div>
         </div>

apps/X/src/components/ui/home/CenterComp.tsx

@@ -1,6 +1,43 @@
+"use client";
+import axios from "axios";
+import { useEffect, useState } from "react";
 import { TopHead, TopPost, TweetComp } from "..";
 
+interface Tweet {
+  id: number;
+  content: string;
+  userID: number;
+  likes: number;
+  createdDate: string;
+  user: { name: string };
+}
 export const CenterComp = () => {
+  const [tweets, setTweets] = useState<Tweet[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const fetchTweets = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get("api/post");
+      const tweetData = response.data.data;
+      console.log(">>>>>>>>>>>>>>>>>>>>>>>>", tweetData);
+
+      if (Array.isArray(tweetData) && response.data.data.length > 0) {
+        setTweets(tweetData);
+      } else {
+        setError("No tweets found");
+      }
+    } catch (error) {
+      console.log("Getting error while fetching =>", error);
+    } finally {
+      setLoading(false);
+    }
+    const response = await axios.get("api/post");
+    console.log("This is from the Centercomp", response);
+  };
+  useEffect(() => {
+    fetchTweets();
+  }, []);
   return (
     <div className="">
       <div className="">
@@ -9,13 +46,19 @@ export const CenterComp = () => {
       <div>
         <TopPost />
       </div>
-      <div className="">
-        <TweetComp />
-        <TweetComp />
-        <TweetComp />
-        <TweetComp />
-        <TweetComp />
-      </div>
+      {loading ? (
+        <div>Loading</div>
+      ) : error ? (
+        <div>{error}</div>
+      ) : (
+        <div>
+          <div className="">
+            {tweets.map((tweet) => (
+              <TweetComp key={tweet.id} tweet={tweet} />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };

apps/X/src/components/ui/home/HomeComp.tsx

@@ -2,22 +2,18 @@ import { CenterComp, HomeLeft, HomeRight } from "@/components/ui";
 
 export const HomeComp = () => {
   return (
-    <div className="relative">
-      <div className="flex h-full">
-        <div className="custom:w-96 w-10 custom:ml-24 ml-10"></div>
-        <div className="flex">
-          <div className="custom:px-10 px-2 mr-10 custom:m-0 custom:left-10 left-0">
-            <HomeLeft />
-          </div>
-          <div className="border border-y-0 custom:w-5/12 w-8/12 h-full overflow-y-hidden">
-            <CenterComp />
-          </div>
-          <div className="">
-            <HomeRight />
-          </div>
+    <div className="flex h-screen overflow-y-auto">
+      <div className="custom:w-96 w-10 custom:ml-24 ml-24 h-screen sticky top-0 flex-shrink-0 mr-7 custom:mr-10">
+        <HomeLeft />
+      </div>
+      <div className="flex flex-grow">
+        <div className="border border-y-0 custom:w-5/12 w-">
+          <CenterComp />
+        </div>
+        <div className="h-screen sticky top-0 flex-shrink-0">
+          <HomeRight />
         </div>
       </div>
-      {/* border-slate-800 border border-y-0 h-screen */}
     </div>
   );
 };

apps/X/src/components/ui/home/HomeLeft.tsx

@@ -130,7 +130,7 @@ export const HomeLeft = () => {
                   Post
                 </Button>
                 <TbOctagonPlus
-                  className="custom:hidden block text-4xl ml-3 cursor-pointer hover:bg-white hover:rounded-3xl hover:text-black "
+                  className="custom:hidden block text-4xl ml-3 cursor-pointer hover:bg-white hover:rounded-3xl hover:text-black"
                   onClick={onPostClick}
                 />
               </div>

package.json

@@ -24,4 +24,4 @@
     "@types/bcrypt": "^5.0.2",
     "bcrypt": "^5.1.1"
   }
-}
+}