Update [user] route, add separate UserProfile Component, add function…

… to get users favorite tv series + total by username instead of active session.

src/app/actions/actions.ts

@@ -76,7 +76,6 @@ export const createUserToDB = async (userData: {
 }): Promise<Users> => {
   try {
     const hashedPassword = await bcrypt.hash(userData.password, 10);
-    console.log(`Hashed Password: ${hashedPassword}`);
     const user = await prisma.users.create({
       data: {
         username: userData.username.toLowerCase(),

src/app/actions/tvSeriesActions.ts

@@ -42,8 +42,8 @@ export async function createTVSeries(anime: Anime) {
   }
 }
 
-// ADD SERIES TO USER FAVORITES
-export async function getFavoriteTVSeries() {
+// GET FAVORITE TV SERIES BY ACTIVE SESSION
+export async function getFavoriteTVSeriesBySession() {
   const session = await getSession();
   if (!session || !session.userId)
     return { success: false, reason: "not_logged_in" };
@@ -67,3 +67,29 @@ export async function getFavoriteTVSeries() {
     throw error; // Re-throw the error for further handling in the component
   }
 }
+
+// GET FAVORITE TV SERIES BY ACTIVE SESSION
+export async function getFavoriteTVSeriesByUsername(username: string) {
+  try {
+    // Fetch the subscribed TV series for a user by their username
+    const favoriteTVSeries = await prisma.subscribed_TVSeries.findMany({
+      where: {
+        user: {
+          username: username, // Filter based on the username in the related Users table
+        },
+      },
+    });
+
+    const totalSeries = favoriteTVSeries.length;
+
+    if (totalSeries === 0) {
+      // If no favorite series found, return a specific object
+      return { success: false, reason: "No favorites found.", totalSeries: 0 };
+    }
+
+    return { success: true, data: favoriteTVSeries, totalSeries };
+  } catch (error) {
+    console.error("Error finding favorite series:", error);
+    throw error; // Re-throw the error for further handling in the component
+  }
+}

src/app/api/memberApi.ts

@@ -22,13 +22,9 @@ export async function getPublicUsers(boolean: boolean): Promise<Users[]> {
 
 // GET CURRENT USER
 export async function getUserByName(username: string): Promise<Users | null> {
-  const session = await getSession();
-  if (!session.userId) return redirect("/login");
-
   const currentUser = await prisma.users.findFirst({
     where: { username: username },
   });
 
-  if (!currentUser) return redirect("/dashboard");
-  return currentUser;
+  return currentUser as Users;
 }

src/app/dashboard/anime/favorites/page.tsx

@@ -1,11 +1,12 @@
 import HeroSection from "@/components/ui/HeroSection";
 import React from "react";
 import SeriesCards from "./SeriesCards";
-import { getFavoriteTVSeries } from "@/app/actions/tvSeriesActions";
+import { getFavoriteTVSeriesBySession } from "@/app/actions/tvSeriesActions";
 import { Subscribed_TVSeries } from "@prisma/client";
 
 const FavoriteSeries = async () => {
-  const series = (await getFavoriteTVSeries()) as Subscribed_TVSeries[];
+  const series =
+    (await getFavoriteTVSeriesBySession()) as Subscribed_TVSeries[];
   return (
     <div>
       <HeroSection

src/app/dashboard/users/[user]/page.tsx

@@ -1,20 +1,17 @@
-import { getSession } from "@/app/actions/actions";
-import { notFound } from "next/navigation";
+import UserProfile from "@/components/ui/UserProfile";
+import { Loader2 } from "lucide-react";
+import { Suspense } from "react";
 
 interface Params {
   user: string;
 }
 
-export default async function UserPage({ params }: { params: Params }) {
-  const userData = await getSession();
-
-  if (!userData) {
-    notFound();
-  }
-
+export default function UserPage({ params }: { params: Params }) {
   return (
-    <div className="flex-col gap-2">
-      <div>You are on the profile page of user: {userData.username}</div>
-    </div>
+    <section className="mt-20 flex justify-center">
+      <Suspense fallback={<Loader2 />}>
+        <UserProfile username={params.user} />
+      </Suspense>
+    </section>
   );
 }

src/components/ui/UserProfile.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@/components/ui/shad-cn/button";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/shad-cn/avatar";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/shad-cn/card";
+import { Badge } from "@/components/ui/shad-cn/badge";
+import {
+  CalendarIcon,
+  MapPinIcon,
+  BriefcaseIcon,
+  MailIcon,
+} from "lucide-react";
+import { getUserByName } from "@/app/api/memberApi";
+import { getFavoriteTVSeriesByUsername } from "@/app/actions/tvSeriesActions";
+
+interface UserProfileProps {
+  username: string;
+}
+
+export default async function UserProfile({ username }: UserProfileProps) {
+  const userData = await getUserByName(username);
+  const usernameShort = userData?.username.slice(0, 2);
+  const FavoriteSeries = await getFavoriteTVSeriesByUsername(username);
+
+  return (
+    <>
+      {!userData ? (
+        <div>No user found.</div>
+      ) : (
+        <Card className="mx-auto w-full max-w-3xl">
+          <CardHeader className="flex flex-col items-center space-y-4">
+            <Avatar className="h-32 w-32">
+              <AvatarImage
+                src="/images/cards/card_anime.webp?height=128&width=128"
+                alt="User profile picture"
+                className="object-cover"
+              />
+              <AvatarFallback>{usernameShort}</AvatarFallback>
+            </Avatar>
+            <div className="text-center">
+              <h1 className="text-2xl font-bold"></h1>
+              <p className="text-muted-foreground">{userData?.username}</p>
+            </div>
+            <Button disabled variant="outline">
+              Add to friends
+            </Button>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <BriefcaseIcon className="text-muted-foreground" />
+              <span>Works at TechCorp</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <MapPinIcon className="text-muted-foreground" />
+              <span>San Francisco, CA</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <CalendarIcon className="text-muted-foreground" />
+              <span>Joined January 2020</span>
+            </div>
+            <div className="flex items-center space-x-2">
+              <MailIcon className="text-muted-foreground" />
+              <span>jane.doe@example.com</span>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </>
+  );
+}