working on user Profile

mscode07 · mscode07 · commit e983f597347e · 2025-03-31T11:55:07.000+05:30
diff --git a/apps/X/app/(pages)/[username]/page.tsx b/apps/X/app/(pages)/[username]/page.tsx
diff --git a/apps/X/app/api/post/[userPost]/route.ts b/apps/X/app/api/post/[userPost]/route.ts
@@ -0,0 +1,36 @@
+import prisma from "@repo/db/client";
+import { authOptions } from "app/lib/auth";
+import { getServerSession } from "next-auth";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+    console.log("Getting the UserID ", session?.user?.id);
+    const userId = Number(session?.user?.id);
+
+    console.log(typeof userId, "This is the type of UserID");
+    if (!session) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const userPost = await prisma.tweet.findMany({
+      include: {
+        user: {
+          select: {
+            name: true,
+          },
+        },
+      },
+      where: { userID: userId },
+    });
+    console.log(userPost, "This is the the users Tweet");
+    return NextResponse.json({ data: userPost }, { status: 200 });
+  } catch (error) {
+    console.log("Getting Erroe while fetching user's Posts", error);
+    return NextResponse.json(
+      { error: "Getting error for userTweets" },
+      { status: 200 }
+    );
+  }
+}
diff --git a/apps/X/app/api/post/route.ts b/apps/X/app/api/post/route.ts
@@ -1,6 +1,5 @@
 import { PrismaClient } from "@prisma/client";
 import { authOptions } from "app/lib/auth";
-import { error } from "console";
 import { getServerSession } from "next-auth";
 //? https://github.com/code100x/cms/blob/main/src/app/api/admin/content/route.ts
 import { NextRequest, NextResponse } from "next/server";
@@ -29,7 +28,6 @@ export async function GET() {
   } catch (error) {
     console.log("Error while fetching from DB", error);
   }
-
   return NextResponse.json({ userId: session.user.id });
 }
 
@@ -47,9 +45,6 @@ export const POST = async (req: NextRequest) => {
     const sessionUserId = parseInt(session.user.id);
     const user = await prisma.user.findFirst({ where: { id: sessionUserId } });
 
-    // if (!user) {
-    //   return NextResponse.json({ error: "Not a valid User" }, { status: 401 });
-    // }
     const body = await req.json();
     console.log("Request Body:", body);
 
diff --git a/apps/X/app/api/user/route.ts b/apps/X/app/api/user/route.ts
@@ -6,8 +6,6 @@ import { NextResponse } from "next/server";
 const prisma = new PrismaClient();
 
 export const GET = async () => {
-  console.log("Hitting the user get rout");
-
   const session = await getServerSession(authOptions);
   if (!session) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
@@ -16,7 +14,6 @@ export const GET = async () => {
   const userID = session.user.id;
 
   try {
-    console.log("Hitting the user get rout 22");
     const user = await prisma.user.findMany({
       include: {
         tweets: {
@@ -27,7 +24,7 @@ export const GET = async () => {
       },
       where: { id: Number(userID) },
     });
-    console.log("This is the response", user);
+    //console.log("This is the User from User Route", user);
     return NextResponse.json({ data: user }, { status: 200 });
   } catch (error) {
     console.log("Error while fetching from DB", error);
diff --git a/apps/X/package.json b/apps/X/package.json
@@ -11,10 +11,12 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@heroui/tabs": "^2.2.13",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.3",
     "@repo/ui": "*",
     "axios": "^1.7.9",
     "bcrypt": "^5.1.1",
diff --git a/apps/X/src/components/ui/Profile/UserInfo.tsx b/apps/X/src/components/ui/Profile/UserInfo.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { TopHeader } from "@/components/TopHeader";
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import axios from "axios";
@@ -8,6 +9,9 @@ import { AiOutlineLink } from "react-icons/ai";
 import { GrLocation } from "react-icons/gr";
 import { IoCalendarOutline } from "react-icons/io5";
 import { PiBalloon } from "react-icons/pi";
+import { Button } from "../button";
+import { TweetComp } from "../TweetComp";
+import { NextResponse } from "next/server";
 
 interface UserDataProps {
   DOB: string;
@@ -17,9 +21,18 @@ interface UserDataProps {
   username: string;
   biolink: string;
 }
+interface Tweet {
+  id: number;
+  content: string;
+  userID: number;
+  likes: number;
+  createdDate: string;
+  user: { name: string };
+}
 export const UserInfo = () => {
   const { data: session } = useSession();
   const [userData, setUserData] = useState<UserDataProps[] | null>(null);
+  const [userTweet, setUserTweet] = useState<Tweet[]>([]);
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -31,7 +44,7 @@ export const UserInfo = () => {
         const u_Data = response.data.data;
         if (Array.isArray(u_Data) && response.data.data.length > 0) {
           setUserData(u_Data);
-          console.log(u_Data, "Here it is");
+          // console.log(u_Data, "Here it is");
         } else {
           setError("No user data found");
         }
@@ -42,30 +55,53 @@ export const UserInfo = () => {
       }
     };
     fetchUserData();
+
+    const fetchUserTweet = async () => {
+      try {
+        const response = await axios.get(`api/post/$[userID]`);
+        const tweetsByUser = response.data.data;
+        console.log(tweetsByUser, "This is from user");
+        setUserTweet(tweetsByUser);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchUserTweet();
   }, []);
 
   return (
     <div>
       <div>
         <div className=""></div>
         <div>
-          <div
-            className="w-full h-64 bg-cover bg-center object-cover relative"
-            style={{
-              backgroundImage: `url('https://github.com/mscode07.png')`,
-            }}
-          >
-            <div className="absolute -bottom-16 left-4">
-              <Avatar>
-                <AvatarImage
-                  src="https://github.com/mscode07.png"
-                  className="rounded-full h-36 w-36 border-black border-4 "
-                />
-                <AvatarFallback></AvatarFallback>
-              </Avatar>
+          <div>
+            <div
+              className="w-full h-64 bg-cover bg-center object-cover relative"
+              style={{
+                backgroundImage: `url('https://github.com/mscode07.png')`,
+              }}
+            >
+              <div className="">
+                <div className=" w-full">
+                  <Avatar className="absolute -bottom-20 left-4">
+                    <AvatarImage
+                      src="https://github.com/mscode07.png"
+                      className="rounded-full h-36 w-36 border-black border-4 "
+                    />
+                    <AvatarFallback></AvatarFallback>
+                  </Avatar>
+                </div>
+              </div>
+            </div>
+            <div className="text-right pr-4 mt-4">
+              <div>
+                <Button className="bg-black text-white rounded-2xl border px-7 border-white hover:bg-neutral-900 transition duration-200 font-bold text-md">
+                  Edit Profile
+                </Button>
+              </div>
             </div>
           </div>
-          <div className="mt-20 ml-3">
+          <div className="mt-10 ml-3">
             <p className="text-2xl font-bold">{session?.user?.name}</p>
             <p className="text-gray-500">@{session?.user?.username}</p>
           </div>
@@ -109,8 +145,145 @@ export const UserInfo = () => {
               </div>
             </div>
           </div>
+
+          {/* <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
+            <ul
+              className="flex flex-wrap -mb-px text-sm font-medium text-center"
+              id="default-styled-tab"
+              data-tabs-toggle="#default-styled-tab-content"
+              data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-purple-600 dark:border-purple-500"
+              data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
+              role="tablist"
+            >
+              <li className="me-2" role="presentation">
+                <button
+                  className="inline-block p-4 border-b-2 rounded-t-lg"
+                  id="profile-styled-tab"
+                  data-tabs-target="#styled-profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="false"
+                >
+                  Profile
+                </button>
+              </li>
+              <li className="me-2" role="presentation">
+                <button
+                  className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
+                  id="dashboard-styled-tab"
+                  data-tabs-target="#styled-dashboard"
+                  type="button"
+                  role="tab"
+                  aria-controls="dashboard"
+                  aria-selected="false"
+                >
+                  Dashboard
+                </button>
+              </li>
+              <li className="me-2" role="presentation">
+                <button
+                  className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
+                  id="settings-styled-tab"
+                  data-tabs-target="#styled-settings"
+                  type="button"
+                  role="tab"
+                  aria-controls="settings"
+                  aria-selected="false"
+                >
+                  Settings
+                </button>
+              </li>
+              <li role="presentation">
+                <button
+                  className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
+                  id="contacts-styled-tab"
+                  data-tabs-target="#styled-contacts"
+                  type="button"
+                  role="tab"
+                  aria-controls="contacts"
+                  aria-selected="false"
+                >
+                  Contacts
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div id="default-styled-tab-content">
+            <div
+              className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+              id="styled-profile"
+              role="tabpanel"
+              aria-labelledby="profile-tab"
+            >
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                This is some placeholder content the{" "}
+                <strong className="font-medium text-gray-800 dark:text-white">
+                  Profile tab associated content
+                </strong>
+                . Clicking another tab will toggle the visibility of this one
+                for the next. The tab JavaScript swaps classes to control the
+                content visibility and styling.
+              </p>
+            </div>
+            <div
+              className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+              id="styled-dashboard"
+              role="tabpanel"
+              aria-labelledby="dashboard-tab"
+            >
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                This is some placeholder content the{" "}
+                <strong className="font-medium text-gray-800 dark:text-white">
+                  Dashboard tabs associated content
+                </strong>
+                . Clicking another tab will toggle the visibility of this one
+                for the next. The tab JavaScript swaps classes to control the
+                content visibility and styling.
+              </p>
+            </div>
+            <div
+              className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+              id="styled-settings"
+              role="tabpanel"
+              aria-labelledby="settings-tab"
+            >
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                This is some placeholder content the{" "}
+                <strong className="font-medium text-gray-800 dark:text-white">
+                  Settings tabs associated content
+                </strong>
+                . Clicking another tab will toggle the visibility of this one
+                for the next. The tab JavaScript swaps classNamees to control
+                the content visibility and styling.
+              </p>
+            </div>
+            <div
+              className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+              id="styled-contacts"
+              role="tabpanel"
+              aria-labelledby="contacts-tab"
+            >
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                This is some placeholder content the{" "}
+                <strong className="font-medium text-gray-800 dark:text-white">
+                  Contacts tabs associated content
+                </strong>
+                . Clicking another tab will toggle the visibility of this one
+                for the next. The tab JavaScript swaps classes to control the
+                content visibility and styling.
+              </p>
+            </div>
+          </div> */}
         </div>
       </div>
+      <br />
+      <hr />
+      <div>
+        {userTweet.map((tweet) => (
+          <TweetComp key={tweet.id} tweet={tweet} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/apps/X/src/components/ui/home/HomeLeft.tsx b/apps/X/src/components/ui/home/HomeLeft.tsx
@@ -113,7 +113,7 @@ export const HomeLeft = () => {
                 </div>
               </div>
               <div className="flex items-center text-xl mb-3">
-                <Link href="/profile">
+                <Link href={`/${session?.user?.username}`}>
                   <div className="custom:hover:bg-neutral-900 flex gap-4 custom:hover:bg-opacity-40 transition duration-200 custom:hover:rounded-2xl px-4 py-2">
                     <div className="hover:bg-neutral-900 flex gap-4 hover:bg-opacity-40 transition duration-200 hover:rounded-2xl text-2xl">
                       <FaRegUser />
diff --git a/yarn.lock b/yarn.lock
